CSS 中的 Apple Pay 按钮

您不必为 Apple Pay 设计自己的按钮。事实上，苹果公司实际上告诉您不能这样做。那么，在网络上该怎么办呢？谢天谢地，苹果提供了一种方法。这有点奇怪，涉及一堆专有的 CSS 属性和值，但又能怎么办呢。

他们为此提供了所有文档，但我会将其移植到此处，以便您查看实际演示。

以下是他们提供的准确代码

查看 CodePen 上的示例
Apple Pay 按钮，作者 Chris Coyier (@chriscoyier)
在 CodePen 上。

在 Safari 中运行良好，但 Chrome 和 Firefox 则完全搞糊涂了。

这并不令人意外，因为它在@supports not (-webkit-appearance: -apple-pay-button)场景中使用了诸如-webkit-named-image(apple-pay-logo-white);之类的背景，我无法想象除了苹果之外还有谁会实现它。

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

我们可以毫不费力地将其转换为<button>。只需为 Firefox 添加border: 0;即可。

我想让它们更像……

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

但随后我们得到

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

查看 CodePen 上的示例
Apple Pay 按钮，作者 Chris Coyier (@chriscoyier)
在 CodePen 上。

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

@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>

其一，它不是按钮，其二，它没有完整的文本来说明正在发生的事情。

提醒一下。我不会说不要使用它，但我会说花点时间清理 HTML 并使样式正确，以便使其跨浏览器兼容。