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/），您将不得不担心更少的跨浏览器问题。即使仅使用没有版本号的也可能会破坏以后版本中的布局。

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

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

Answer 2

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

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

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

Browser support for Feature Queries

Answer 3

如果您需要浏览器检测Firefox，Opera和Chrome，那么您做错了。相同的CSS应该适用于所有这些。

当然也有例外 - 所有浏览器都缺少其他浏览器中没有出现的功能和错误。一个例子是text-overflow:ellipsis which isn't supported by Firefox。

但是，如果您坚持使用常用功能，这些情况很少见，而且一般来说，除了各种版本的IE之外，您现在真的不需要进行浏览器检测。

如果您不确定大多数浏览器是否支持您要使用的功能，可以在CanIUse.com或Quirksmode找到。

如果您使用的是严格的尖端功能，那么是的，您将遇到跨浏览器支持的问题。但在这种情况下，通常使用Modernizr等产品进行功能检测更好，而不是使用浏览器检测，因为这将是确保覆盖所有浏览器和所有版本（包括未来版本）的更可靠方式（是浏览器检测的固有弱点。）

Answer 4

IE以外的浏览器没有条件评论。

但你可以使用javascript：http://www.quirksmode.org/js/detect.html

来完成

Answer 5

也许我来不及，但是。更好的解决方案是使用CSS/JS Browser Determiner（4kb缩小）。 免责声明：这是我销售的 商业产品 。

要分隔CSS和JS文件，请将此代码发送到<html>标记：

<head><script src="js/cssjs-browser-determiner.min.js"></script>

<!-- Old Browsers -->
<script>
browser.is_old && document.writeln(
  '<link href="styles/old-browser.css" rel="stylesheet">'
);
</script>

此文件仅为旧浏览器加载（默认情况下，不支持CSS3过渡的文件）。如果您想为每个特定浏览器分隔文件，您可以执行相同操作，但将browser.is_old更改为browser.chrome或browser.webkit等等。

然后，在old-browser.css（或任何其他CSS文件）中为特定浏览器编写一些CSS：

.opera9 .my-el { ... }
.firefox1_5 .my-el { ... }
.ie8- .el { ... } // IE8 or less
.ios .el { ... } // iPhone, iPad, iPod
etc...

Answer 6

有时您可以使用前缀属性，每个浏览器根据其前缀应用自己的属性，并忽略其他属性。以下代码通过CSS3渐变填充背景：

background-color: green;
background-image: url(my-img.png);
background-image: -webkit-linear-gradient(top right, #b51111, #eeeeee);
background-image: -moz-linear-gradient(top right, #b51111, #eeeeee);
background-image: -ms-linear-gradient(top right, #b51111, #eeeeee);
background-image: -o-linear-gradient(top right, #b51111, #eeeeee);
background-image: linear-gradient(top right, #b51111, #eeeeee);

在此代码中：

-webkit-适用于基于WebKit的浏览器（Chrome和Safari）
-moz-适用于Firefox
-ms-适用于Internet Explorer
-o-适用于Opera

但总的来说，浏览器嗅探并不是最好的方法，因为在新的浏览器中它很容易失败。这样，您必须获取浏览器的用户代理字符串并解析它。然后根据其支持的功能为每个浏览器应用特定的css规则。如果浏览器的用户代理字符串在较新版本中更改，则必须修改浏览器嗅探代码。想象一下，您希望支持多个浏览器，并且每个浏览器都可以在一年内发布一些新版本！您可以查询浏览器是否支持给定功能。例如HTML5视频：

if(!!document.createElement('video').canPlayType === true) {
// run some code that relies on HTML5 video
} else {
// do something else
}

有一个名为Modernizr的功能检测库，它是基于JavaScript编写的。您可以在html页面中下载并包含它。您还必须在元素中添加“no-js”类。 Modernizer运行其所有功能检测测试和一些类到元素;像这样的东西：

<html lang="en-gb" class=" js no-flexbox no-flexbox-legacy canvas canvastext 
webgl no-touch geolocation postmessage websqldatabase no-indexeddb
hashchange history draganddrop no-websockets rgba hsla multiplebgs
backgroundsize borderimage borderradius boxshadow textshadow opacity
cssanimations csscolumns cssgradients no-cssreflections csstransforms 
no-csstransforms3d csstransitions fontface generatedcontent video audio  
localstorage sessionstorage webworkers applicationcache svg inlinesvg 
smil svgclippaths">

因此，您可以有选择地应用CSS规则。例如，您希望在支持浏览器中应用动画3D变换或在其他浏览器中显示某些内容。请考虑以下代码：

#my-div:hover {
  transform: rotateY(90deg);
}

表示默认情况，以下表示替代方法：

.no-csstransforms3d #my-div:hover {
  position: relative;
  right: 200px;
}

这是一个描述这个概念的好article。

Answer 7

我需要添加纯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>

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

7 个答案: