Ne morate sami dizajnirati gumbe za Apple Pay. Zapravo, Apple vam doslovno govori da ne možete. Pa, što trebate učiniti na webu? Srećom, Apple je pružio način. To je nekako čudno i uključuje hrpu vlasničkih CSS svojstava i vrijednosti, ali whattyagonnado.
Oni imaju dokumentaciju za sve ovo, ali prenijet ću je ovdje kako biste mogli vidjeti stvarne demonstracije.
Evo točnog koda koji nude:
Pogledajte
gumb Pen Apple Pen za plaćanje Chrisa Coyiera (@chriscoyier)
na CodePenu.
Dobro funkcionira u Safariju, ali Chrome i Firefox ispravno su zbunjeni.
Nije užasno iznenađujuće, jer koristi pozadine kao -webkit-named-image(apple-pay-logo-white);u @supports not (-webkit-appearance: -apple-pay-button)scenariju, što ne mogu zamisliti nitko osim Apple-a.
Osim toga ... predlažu prazno , što nije sjajno.
Možemo ih prevaliti bez previše problema. Morao sam dodati border: 0;za Firefox.
Htio bih ih učiniti sličnijima ...
Apple Pay Ali onda dobivamo:
Ali to možemo text-indent: -9999px;otkloniti, a zatim provjerite je li boja pravilno postavljena kako bismo imali prihvatljive semantičke gumbe.
Pogledajte
gumb Pen Apple Pen za plaćanje Chrisa Coyiera (@chriscoyier)
na CodePenu.
Ali vjerojatnije ... Sumnjam da ću vidjeti:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Kao i zašto, zašto uopće prikazivati to područje ako ste u pregledniku koji ne podržava taj način plaćanja.
Njihovi ostali demo imaju slične probleme. Na primjer, gumb "Kupi pomoću" daje vam:
Buy with Koji 1) nije gumb i 2) nema cjelovit tekst da bi rekao što se događa.
Samo glavu gore. Ne bih rekao da ga ne koristite, ali rekao bih da si odvojite minutu da očistite HTML i ispravite stil tako da bude kompatibilan s više preglednika.