浏览器兼容性：规范化 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因为浏览器不断改进其引擎并且这些属性的支持性在未来可能会变更。