浏览器兼容性：规范化 CSS 并为特定浏览器编写 CSS 规则

每个浏览器都提供一组默认样式，适用于它呈现的每个网页。默认样式表也称为用户代理样式表。例如，以下是流行浏览器提供的默认样式：

• Chrome 默认样式
• Firefox 默认样式
• Safari 默认样式

由于它们彼此不同，因此网页在每个浏览器上看起来都不同。而规范化 CSS 是一种解决此问题的技术。它试图使原生元素的默认样式在跨浏览器中保持一致。

例如，我们可以使用 HTML 5的 hidden属性来完全隐藏一个元素：

<input type="text" hidden />

但是，IE 10 不支持该属性。因此我们应该包含以下声明：

[hidden] {
    display: none;
}

normalize.css是提供此类修复的流行库。

流行的 CSS 库包含 normalize.css或在它之上或构建它们的规范化 CSS ，例如：

• Bootstrap 的 reboot.css
• Tachyons 的 normalize.css
• TailwindCSS's preflight.css

在某些情况下，希望样式针对特定浏览器，可以使用CSS特征查询和仅在目标浏览器上可用的声明。

例如，Firefox 是唯一支持-moz-appearance: none的浏览器，因此，针对 Firefox：

@support (-moz-appearance: none) {
    /* Styles for Firefox only */
}

该not运算符可用于排除目标浏览器：

@support not (-moz-appearance: none) {
    /* Styles for browser except Firefox */
}

还有另一种不太流行的仅针对 Firefox 的hack ：

@-moz-document url-prefix() {
    /* Styles for Firefox only */
}

如果目标是 safari：

@supports (background: -webkit-named-image(i)) {
    /* Styles for Safari only */
}

由于只有基于 Chromium 和 Firefox 的浏览器支持该contain: paint声明，我们可以结合and和not运算符将 Firefox 从目标浏览器中排除：

@support (contain: paint) and (not (-moz-appearance: none)) {
    /* Styles for Chromium only */
}

 需要注意的是，使用功能查询定位给定浏览器仍然是一种 hack，因为浏览器不断改进其引擎，并且这些属性的支持性在未来可能会变更。