Apple Pay için kendi düğmelerinizi tasarlamanıza gerek yok. Aslında Apple kelimenin tam anlamıyla yapamayacağınızı söylüyor. Peki, internette ne yapacaksın? Neyse ki, Apple bir yol sağladı. Bu biraz garip ve bir sürü özel CSS özelliği ve değeri içeriyor, ancak ne kadar önemli.
Bunların hepsi için belgeleri var, ancak gerçek demoları görebilmeniz için buraya taşıyacağım.
İşte sundukları tam kod:
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen Apple Pay Düğmesine
bakın.
Safari'de iyi çalışıyor, ancak Chrome ve Firefox'un kafası karışmış durumda.
O gibi arka kullanır korkunç, şaşırtıcı değil -webkit-named-image(apple-pay-logo-white);de @supports not (-webkit-appearance: -apple-pay-button)kimseye ama Apple uygulayan düşünemiyorum senaryoda,.
Artı… boş bir öneriyorlar ki bu harika değil.
Onları çok fazla sorun yaşamadan uçurabiliriz. Sadece border: 0;Firefox için eklemeliydim .
Onları daha çok ...
Apple Pay Ama sonra şunu elde ederiz:
Ancak bunu text-indent: -9999px;ortadan kaldırabiliriz , sonra rengi doğru şekilde ayarladığımızdan emin olabiliriz , böylece kabul edilebilir anlamsal düğmelerimiz olur.
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen Apple Pay Düğmesine
bakın.
Ama daha muhtemel ... Şunu görmekten şüpheleniyorum:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Olduğu gibi, bu ödeme yöntemini desteklemeyen bir tarayıcıdaysanız, neden o alanı gösteresiniz?
Diğer demolarının da benzer sorunları var. Örneğin, "Birlikte Satın Al" düğmesi size şunları verir:
Buy with Hangisi 1) bir düğme değil ve 2) içinde neler olup bittiğini anlatan tam metin yok.
Sadece aklınızda bulunsun. Kullanmayın demezdim, ancak HTML'yi temizlemek ve stili doğru bir şekilde almak için bir dakikanızı ayırın, böylece tarayıcılar arası uyumlu olsun.