css - 如何检测用户的浏览器并应用特定的 CSS 文件？

Question

我需要检测浏览器并应用匹配的 CSS 文件。

我创建了 3 个 css 文件:__ie.css、ff.css、opera.css。现在我需要检测浏览器以包括好的浏览器。

我知道

<!--[if IE]>
     <link rel="stylesheet" href="css/ie.css" type="text/css"/>
<![endif]-->

但是我如何在 Firefox 和 Opera/Chrome 上做同样的事情呢？

Answer 1

与纯 CSS 最接近的是特征查询。它允许您检查浏览器是否支持特定的属性/值组合，而不是检测浏览器类型/版本。

以下是使用 transform 属性进行垂直居中的示例。如果浏览器不支持转换，那么我们不想调整它的定位:

@supports (transform: translateY(-50%)) {
    .foo {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
}

Browser support for Feature Queries