如何检测用户的浏览器并应用特定的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,那么您可能需要在转到特定于浏览器的样式表之前重新考虑CSS.所需要的只是一个浏览器模仿另一个用户代理字符串,或者要发布的新版本,一切都会中断.使用当前标准并验证您的代码(http://validator.w3.org/),您将不得不担心更少的跨浏览器问题.即使只使用<!--[if IE]><![endif]-->没有版本号也可能会破坏以后版本的布局.

话虽如此,如果您想根据可用的CSS功能对页面进行不同的样式,请查看Modernizr.这样,您只需检查功能,如果发布新版本的浏览器,这些功能不会被破坏.

如果所有其他方法都失败了,您确实需要检测访问者的浏览器,请尝试jquery.browser.它内置于jQuery中,易于使用.http://api.jquery.com/jQuery.browser/.

Answer 2

我需要添加纯 CSS 来在我的应用程序中显示细滚动条，这应该适用于每个浏览器，所以我用这种方式做到了。此代码将检测浏览器并将样式设置为整个应用程序中的滚动条。

// Scroll bar css settings in global css file like styles.css

/*IE*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  html,
  body,
  div {
    scrollbar-face-color: #d1d8da;
    scrollbar-track-color: #dcd5d5;
    scrollbar-3dlight-color: #dcd5d5;
    scrollbar-darkshadow-color: #dcd5d5;
    scrollbar-arrow-color: #dcd5d5;
    -ms-overflow-style: -ms-autohiding-scrollbar; // this one will hide scroll-bars after sometime
    scrollbar-width: thin;
  }
}

/* for chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 5px;
    border-radius: 10px;
  }
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #dcd5d5;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #d1d8da;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #767979;
  }
}

/* for firefox */
@-moz-document url-prefix() {
  html,
  body,
  div {
    scrollbar-width: thin;
    scroll-behavior: smooth;
  }
}

<div style="height: 150px;width: 400px;overflow: auto;">
<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 
</div>

Answer 3

纯CSS可以提供​​的最接近功能查询。无需检测浏览器的类型/版本，而是可以检查浏览器是否支持特定的属性/值组合。

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

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

浏览器对功能查询的支持