按钮

过去几周，我一直在思考 WebKit 的新按钮。我正在替换的按钮主要有两种。第一种是 input，第二种是 button。以下是我决定遵循的启发式方法。

按钮将有三种新的外观常量。它们是 push-button、bevel-button 和 button。默认情况下，input 将使用 push-button。此常量映射到 Aqua 系统按钮。指定此外观常量时，禁用 Aqua 外观的唯一方法是将外观常量设置为 none（这将为您提供一个完全空白的画布来构建您自己的按钮外观），或者指定您自己的背景和边框属性。指定背景/边框将导致 Aqua 外观被禁用，并使用更平台中立的外观。

只要为按压式按钮启用 Aqua 外观，某些 CSS 属性将被忽略。由于 Aqua 按钮无法缩放，因此 height 属性将不被考虑。同样，字体和颜色自定义也不会被考虑。按压式按钮的首要原则是，您永远不会看到某种“半 Aqua”混合的按钮。按钮要么看起来完全原生，要么完全不是 Aqua 风格。当外观被禁用时，按钮上的所有 CSS 都将被考虑（包括字体、高度和颜色）。与现有的 Safari 版本一样，元素上指定的字体大小将用于确定应使用控件的迷你版、小版还是常规版。

bevel-button 常量代表一种可以垂直缩放的按钮。斜角按钮默认情况下将允许自定义字体和颜色，并尊重高度，所有这些都不会禁用其外观。设置背景/边框将导致斜角按钮外观被禁用。

最终的常量是 button，它代表上述常量的混合。默认情况下，此常量将由 button 使用。button 外观常量将允许设置字体/颜色并布局按钮。一旦确定了按钮的大小，将根据控件的大小动态做出适当的渲染选择。如果控件大小符合迷你/小/常规 Aqua 范围，则将选择这些并在可用空间内居中。一旦按钮的高度超出常规 Aqua 按钮的大小，则将改用斜角按钮渲染。

这确实意味着 HTML4 按钮在某些情况下可能会产生一些看起来有趣的“半 Aqua”渲染效果，但我认为这总比一直使用斜角按钮外观要好。由于网站通常只在按钮元素中使用单行文本而不自定义 CSS，因此在大多数情况下，这些按钮应该与 Aqua 按钮无法区分。