我需要检测浏览器并应用匹配的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中进行相同的操作?
我需要检测浏览器并应用匹配的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中进行相同的操作?
使用纯CSS最接近的方法是使用特性查询。它允许您检查浏览器是否支持特定的属性/值组合,而不是检测浏览器类型/版本。
以下是使用transform属性进行垂直居中的示例。如果浏览器不支持transform,则我们不希望调整其位置:
@supports (transform: translateY(-50%)) {
.foo {
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
<!--[if IE]><![endif]-->
也可能破坏后续版本中的布局。jquery.browser
。它是内置于jQuery中的,并且使用起来很简单。 http://api.jquery.com/jQuery.browser/。我有一个需求,需要添加纯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>
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);
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技术方面的概念。
点击这里阅读全文。如果你需要在Firefox、Opera和Chrome中进行浏览器检测,那么你可能做错了什么。同样的CSS应该在它们所有的浏览器中都能工作。
当然,也有例外情况——所有浏览器都存在缺失功能和错误,而这些错误在其他浏览器中不会出现。例如,text-overflow:ellipsis
并不被Firefox支持。
然而,如果你坚持使用常用的特性,这些情况就会极少发生。总体来说,除了各种版本的IE,现在你真的不需要进行浏览器检测。
如果你不确定你想要使用的特性是否被大多数浏览器支持,你可以在CanIUse.com或Quirksmode上查找。
如果你使用了非常前沿的功能,那么跨浏览器支持确实会有问题。但在这种情况下,通常最好使用Modernizr这样的产品进行特性检测,而不是浏览器检测,因为这将是一种更可靠的方式来确保覆盖所有浏览器和所有版本,包括未来的版本(这是浏览器检测固有的弱点)。
<select>
元素的填充在Firefox Quantum和Chrome之间有很大差异。别误会,这就是我最讨厌的Web开发之一。但这是一个事实,在您的评论和答案发布后约6年仍然存在。 - Iharob Al Asimi-webkit-padding-start
来解决这个问题。这比尝试识别浏览器要好得多。它只是简单地调整了一点不一致,使我的应用程序在不同的浏览器上看起来不同。 - Iharob Al Asimi<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...