Не морате сами да дизајнирате тастере за Аппле Паи. Заправо, Аппле вам дословно каже да не можете. Па, шта треба да радите на вебу? Срећом, Аппле је пружио начин. То је некако чудно и укључује гомилу власничких ЦСС својстава и вредности, али вхаттиагоннадо.
Они имају документацију за све ово, али ја ћу је овде пренети да бисте могли да видите стварне демонстрације.
Ево тачног кода који нуде:
Погледајте дугме за оловку
Аппле Цхрис, Цхрис Цоииер (@цхрисцоииер)
на ЦодеПен-у.
Добро функционише у Сафари-ју, али Цхроме и Фирефок су правилно збуњени.
Није ужасно изненађујуће, јер користи позадине као -webkit-named-image(apple-pay-logo-white);у @supports not (-webkit-appearance: -apple-pay-button)сценарију, а не могу да замислим да их примењује нико осим Аппле-а.
Плус ... они предлажу празно , што није сјајно.
Можемо их превалити без превише проблема. Само сам морао да додам border: 0;за Фирефок.
Волео бих да их учиним сличнијима ...
Apple Pay Али онда добијамо:
Али то можемо text-indent: -9999px;уклонити, а затим се побринимо да правилно поставимо боју како бисмо имали прихватљиве семантичке тастере.
Погледајте дугме за оловку
Аппле Цхрис, Цхрис Цоииер (@цхрисцоииер)
на ЦодеПен-у.
Али вероватније ... Претпостављам да видим:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Као и зашто, зашто уопште приказивати то подручје ако сте у прегледачу који не подржава тај начин плаћања.
Њихови други демо имају сличне проблеме. На пример, дугме „Купи помоћу“ вам даје:
Buy with Који 1) није дугме и 2) нема комплетан текст да каже шта се дешава.
Само Главу горе. Не бих рекао да га не користите, али рекао бих да одвојите минут да очистите ХТМЛ и исправите стил тако да буде компатибилан са више прегледача.