以前的失效了,最新CSS识别Chrome、Firefox、IE11代码
作者:admin 时间:2022-5-6 11:39:14 浏览:最近做一个项目，需要用CSS识别各种主流浏览器，Chrome、Firefox、IE11，因为以前写过类似的代码，以为很快搞定，但是把代码复制过来之后发现，那些代码现在已经失效了。
经过测试，发现现在有了新的CSS识别Chrome、Firefox、IE11浏览器的代码，至少到目前为止，这些代码还能用。
实例
下面是一个完整实例。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body{
background:#ccc;
}
div{
color:blue;
}
/* firefox */
@-moz-document url-prefix(){
div{
color:red;
}
}
/* IE11+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
div{
color:yellow;
}
}
</style>
</head>
<body>
<div>
卡卡网 www.webkaka.com
</div>
</body>
</html>
执行结果
Chrome
Firefox
IE11
执行结果符合预期。
代码解释
在编写代码的时候，主体代码用Chrome调试，另外编写Firefox和IE11的代码。因此CSS只需识别Firefox和IE11浏览器即可。
识别Firefox的代码是
@-moz-document url-prefix(){}识别IE11的代码是
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}识别Chrome和Firefox
另外测试发现，下面的代码可以识别Chrome和Firefox，而IE11不会执行里面的代码。
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {}总结
本文介绍了现在新的CSS识别Chrome、Firefox、IE11浏览器的代码，因为浏览器不断更新，这些代码可能过一段时间也会无效。所以我们在编写代码时，需要进行各种浏览器的兼容性测试。
参考文章
标签: css Chrome Firefox IE11 CSS识别浏览器代码
相关文章
x
- 站长推荐
