Apple Pay jaoks ei pea te ise nuppe kujundama. Tegelikult ütleb Apple teile sõna otseses mõttes, et ei saa. Mida sa siis veebis tegema pead? Õnneks on Apple pakkunud viisi. See on üsna kummaline ja hõlmab hulga varalisi CSS-i omadusi ja väärtusi, kuid whattyagonnado.
Neil on selle kõige kohta dokumentatsioon, kuid teisaldan selle siia, et näeksite tegelikke demosid.
Siin on täpne kood, mida nad pakuvad:
Vaadake
CodePenil Chris Coyieri (@chriscoyier) Pen Apple Pay nuppu
.
Toimib Safaris hästi, kuid Chrome ja Firefox on korralikult segi aetud.
Mitte väga üllatav, sest ta kasutab taustaga nagu -webkit-named-image(apple-pay-logo-white);on @supports not (-webkit-appearance: -apple-pay-button)stsenaarium, mida ma ei suuda ette kujutada kedagi, kuid Apple rakendamisel.
Lisaks ... nad soovitavad tühja , mis pole eriti hea.
Saame need ilma suurema vaevata üle viia a- sse. Lihtsalt tuli border: 0;Firefoxi jaoks lisada .
Ma tahaksin muuta need sarnasemaks…
Apple Pay Aga siis saame:
Kuid me saame text-indent: -9999px;selle ära hoida ja veenduda, et oleksime värvi õigesti määranud, nii et meil on vastuvõetavad semantilised nupud.
Vaadake
CodePenil Chris Coyieri (@chriscoyier) Pen Apple Pay nuppu
.
Kuid tõenäolisem ... ma arvan, et näen:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Nagu ka selles, miks peaksite seda ala üldse näitama, kui kasutate brauserit, mis seda makseviisi ei toeta.
Nende teistel demodel on sarnased probleemid. Näiteks annab nupp „Osta koos” teile:
Buy with Mis 1) ei ole nupp ja 2) pole tervikteksti, mis ütleks, mis toimub.
Lihtsalt head up. Ma ei ütleks, et ärge kasutage seda, kuid ütleksin, et võtke mõni minut HTML-i puhastamiseks ja stiili õigeks muutmiseks, et see ühilduks brauseritega.