Pre Apple Pay nemusíte navrhovať svoje vlastné tlačidlá. V skutočnosti vám Apple doslova hovorí, že nemôžete. Čo teda robíte na webe? Našťastie spoločnosť Apple poskytla spôsob. Je to trochu čudné a zahŕňa kopu majetkových vlastností a hodnôt CSS, ale whattyagonnado.
K tomu všetkému majú dokumentáciu, ale prenesiem ju sem, aby ste videli skutočné ukážky.
Tu je presný kód, ktorý ponúkajú:
Prezrite si tlačidlo Pen
Apple Pay od Chrisa Coyiera (@chriscoyier)
na stránkach CodePen.
V Safari funguje dobre, ale Chrome a Firefox sú správne zmätené.
Nie je to nijako prekvapujúce, pretože používa pozadia ako -webkit-named-image(apple-pay-logo-white);v @supports not (-webkit-appearance: -apple-pay-button)scenári, čo si nedokážem predstaviť nikomu inému ako implementácii spoločnosti Apple.
Navyše ... navrhujú prázdny , čo nie je skvelé.
Môžeme ich prepadnúť na bez väčších problémov. Len bolo treba pridať border: 0;pre Firefox.
Chcel by som, aby boli viac ako ...
Apple Pay Ale potom dostaneme:
Môžeme text-indent: -9999px;to však urobiť a potom sa ubezpečiť, že sme správne nastavili farbu, aby sme mali prijateľné sémantické tlačidlá.
Prezrite si tlačidlo Pen
Apple Pay od Chrisa Coyiera (@chriscoyier)
na stránkach CodePen.
Ale pravdepodobnejšie ... predpokladám, že uvidím:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Rovnako ako v prípade, prečo sa táto oblasť vôbec zobrazuje, ak ste v prehliadači, ktorý nepodporuje tento spôsob platby.
Podobné problémy majú aj ich ďalšie ukážky. Napríklad tlačidlo „Kúpiť s“ poskytuje:
Buy with Ktorý 1) nie je tlačidlo a 2) nemá v sebe celý text, ktorý by hovoril o to, čo sa deje.
Len hlavu hore. Nepovedal by som, že ho nepoužívam, ale povedal by som, že chvíľu trvá vyčistenie kódu HTML a správny štýl, aby bol kompatibilný s rôznymi prehliadačmi.