Apple Pay jums nav jāizveido savas pogas. Patiesībā Apple jums burtiski saka, ka jūs to nevarat. Tātad, ko jūs darāt tīmeklī? Par laimi, Apple ir nodrošinājis veidu. Tas ir diezgan dīvaini un ietver virkni patentētu CSS īpašību un vērtību, bet whattyagonnado.
Viņiem ir dokumentācija par visu šo, bet es to ievietošu šeit, lai jūs varētu redzēt faktiskās demonstrācijas.
Šeit ir precīzs kods, ko viņi piedāvā:
Skatiet
Chris Coyier (@chriscoyier) Pen Apple Pay pogu
vietnē CodePen.
Safari darbojas labi, taču Chrome un Firefox ir pareizi sajaukti.
Nav šausmīgi pārsteidzoši, jo tiek izmantoti foni, piemēram -webkit-named-image(apple-pay-logo-white);, @supports not (-webkit-appearance: -apple-pay-button)scenārijā, kuru es nevaru iedomāties, kā kāds, izņemot Apple, īstenotu.
Plus ... viņi iesaka tukšu , kas nav lieliski.
Mēs varam tos pārsist uz a bez pārāk lielām nepatikšanām. Vienkārši bija jāpievieno border: 0;Firefox.
Es gribētu viņus padarīt līdzīgākus ...
Apple Pay Bet tad mēs iegūstam:
Bet mēs varam text-indent: -9999px;to novērst, tad pārliecinieties, ka mēs pareizi iestatām krāsu, lai mums būtu pieņemamas semantiskās pogas.
Skatiet
Chris Coyier (@chriscoyier) Pen Apple Pay pogu
vietnē CodePen.
Bet visticamāk ... man būtu aizdomas, ka redzēšu:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Tāpat kā šeit, kāpēc vispār rādīt šo apgabalu, ja atrodaties pārlūkprogrammā, kas neatbalsta šo maksājuma veidu.
Viņu pārējiem demonstratoriem ir līdzīgas problēmas. Piemēram, poga “Pirkt ar” piedāvā:
Buy with Kurā 1) nav pogas un 2) nav pilnīga teksta, lai pateiktu, kas notiek.
Tikai galvu uz augšu. Es neteiktu, ka nelietojiet to, bet es teiktu, ka veltiet minūti laika HTML attīrīšanai un pareizai ieveidošanai, lai tā būtu saderīga ar pārlūkprogrammām.