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

Question

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

23

我需要检测浏览器并应用匹配的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中进行相同的操作？

- Sourav

7个回答

10

如果你必须检测浏览器来应用CSS，那么在转向特定于浏览器的样式表之前，您可能需要重新考虑一下您的CSS。只需要一个浏览器模拟另一个的用户代理字符串，或者发布一个新版本，一切都会出问题。使用当前的标准并验证您的代码（http://validator.w3.org/），您将不必担心太多的跨浏览器问题。即使只是使用没有版本号的  也可能破坏后续版本中的布局。

话虽如此，如果您想根据可用的CSS功能来不同地设计页面，请看一看 Modernizr。这样，您只检查功能，如果发布新版本的浏览器，则不会出现任何问题。

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

- derekerdmann

2

想要检测浏览器的原因是，浏览器没有正确地遵循标准，特别是IE浏览器。这意味着可能需要回退/解决方法。但感谢Modernizr提示。 - Balthazar

1

我理解，但浏览器检查是解决问题的一种粗略方法。Modernizr 检查对单个功能的支持，而不是特定浏览器的存在。像现代用户代理字符串这样的东西存在的唯一目的是欺骗浏览器检查，因为它们经常导致代码在将来更新浏览器时出现错误。阅读此文章以更好地了解为什么浏览器检测是如此棘手：http://blogs.msdn.com/b/ieinternals/archive/2013/09/21/internet-explorer-11-user-agent-string-ua-string-sniffing-compatibility-with-gecko-webkit.aspx - derekerdmann

9

我同意。但有时我会对“如果你需要这个功能，那么你一定做错了什么”的强制性回应感到恼火。通常初期想要一个功能有很好的理由，即使它是一个不好的解决方案。那么就可以指出更好的解决方案，而不是暗示发帖者全部都做错了。但我真的不应该为此争吵。抱歉，我的失误。Modernizr听起来很酷，尽管问题通常是浏览器支持某个功能，但实现方式错误，在罕见情况下会出现问题。 - Balthazar

将浏览器检查称为“草率的解决方案”是你的观点问题，因此不适用。这应该是关于最佳实践的解决方案。我同意在这种情况下使用Modernizer是最好的选择。然而，过度使用或错误地期望它成为所有这些情况的解决方案并不是最佳实践。您可能有一个用户社区，他们使用非常旧的浏览器，您不想支持。专业网站将正确重定向该用户。基于特征的Modernizer不适合用于浏览器检测，这是重定向不受支持的浏览器的最佳解决方案。 - Clarence

8

我有一个需求，需要添加纯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>

- Anup Bangale

1

这是一个简洁的解决方案。 - Zeliax

完美运行！ - Kaiser

清晰且可行。完美！ - Olgierd Dzięcielski

3

有时候你可以使用带前缀的属性，每个浏览器都会根据自己的前缀应用其自身的属性并忽略其他浏览器。以下代码通过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页面中使用<script>标签包含它。还必须向您的<html>元素添加“no-js”类。 Modernizer 运行其所有功能检测测试，并将一些类添加到<html>元素中；类似于这样:

<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);
}

默认情况下使用for，以下为备选方案：

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

这是一篇很好的文章，描述了有关IT技术方面的概念。

点击这里阅读全文。

- Abdollah

3

如果你需要在Firefox、Opera和Chrome中进行浏览器检测，那么你可能做错了什么。同样的CSS应该在它们所有的浏览器中都能工作。

当然，也有例外情况——所有浏览器都存在缺失功能和错误，而这些错误在其他浏览器中不会出现。例如，text-overflow:ellipsis并不被Firefox支持。

然而，如果你坚持使用常用的特性，这些情况就会极少发生。总体来说，除了各种版本的IE，现在你真的不需要进行浏览器检测。

如果你不确定你想要使用的特性是否被大多数浏览器支持，你可以在CanIUse.com或Quirksmode上查找。

如果你使用了非常前沿的功能，那么跨浏览器支持确实会有问题。但在这种情况下，通常最好使用Modernizr这样的产品进行特性检测，而不是浏览器检测，因为这将是一种更可靠的方式来确保覆盖所有浏览器和所有版本，包括未来的版本（这是浏览器检测固有的弱点）。

- Spudley

2

@thirtydot 不一定，即使所有浏览器都支持相同的规则，渲染也可能非常不一致。例如，填充可能会被不同地应用。现在正在发生这种情况，而且已经是2018年了。但是仍然存在<select>元素的填充在Firefox Quantum和Chrome之间有很大差异。别误会，这就是我最讨厌的Web开发之一。但这是一个事实，在您的评论和答案发布后约6年仍然存在。 - Iharob Al Asimi

1

@IharobAlAsimi：确实可能存在一些小差异，但通常不难解决。如果您查看（古老的）原始问题，他为IE / Firefox / Opera制作了不同的CSS文件，这是（现在仍然是）_错误的做法_。 - thirtydot

@thirtydot 我使用了一个chrome属性-webkit-padding-start来解决这个问题。这比尝试识别浏览器要好得多。它只是简单地调整了一点不一致，使我的应用程序在不同的浏览器上看起来不同。 - Iharob Al Asimi

1

除了IE浏览器，其他浏览器没有条件注释。

但是您可以使用JavaScript实现：http://www.quirksmode.org/js/detect.html

- easwee

-5

也许我来晚了，但更好的解决方案是使用CSS/JS浏览器检测器（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...

- artnikpro

2

下降投票。显然，这个软件在发布几天后就已经被放弃了。最后一次更新是在5年前。更加邪恶的是，现场演示/文档网站已经不存在了。 - Tino

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cimmanon · Accepted Answer

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

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

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

浏览器对特性查询的支持情况