CSS中的Apple Pay按钮

最新推荐文章于 2024-04-15 15:20:12 发布

cunqu9743

最新推荐文章于 2024-04-15 15:20:12 发布

阅读量387

点赞数

文章标签： java html css js python ViewUI

您不必为Apple Pay设计自己的按钮。实际上，Apple确实告诉您您不能这样做。那么，您要在网络上做什么？值得庆幸的是，苹果提供了一种方法。这有点怪异，涉及许多专有CSS属性和值，但是whattyagonnado 。

他们提供了所有这些文档，但我将在此处进行移植，以便您查看实际的演示。

他们提供的确切代码如下：

在Safari中可以正常工作，但Chrome和Firefox正确混淆了。

毫不奇怪，因为它使用-webkit-named-image(apple-pay-logo-white); 在@supports not (-webkit-appearance: -apple-pay-button)场景中，除了Apple实现，我无法想象其他任何人。

另外…他们建议使用一个空的<div> ，这不是很好。

我们可以轻松地将它们翻转到<button> 。只需添加border: 0; 用于Firefox。

我想让他们更像……

<button class="apple-pay-button apple-pay-button-white">
  Apple Pay
</button>

但是然后我们得到：

但是我们可以将text-indent: -9999px; 然后确保我们正确设置颜色，以便我们使用可接受的语义按钮。

但是更有可能……我怀疑会看到：

@supports not (-webkit-appearance: -apple-pay-button) {
  .container-that-offers-apple-pay {
     display: none;
  }
}

如上所示，如果您使用的是不支持该付款方式的浏览器，为什么还要显示该区域。

他们的其他演示也有类似的问题。例如，“购买方式”按钮为您提供：

<div class="apple-pay-button-with-text apple-pay-button-white-with-text">
  <span class="text">Buy with</span>
  <span class="logo"></span>
</div>

1）不是按钮，2）没有完整的文本来说明正在发生什么。

只是抬头。我不会说不使用它，但是我会说要花一点时间清理HTML并正确设置样式，以便它与跨浏览器兼容。

翻译自: https://css-tricks.com/snippets/css/apple-pay-buttons-in-css/

关注