技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

以前的失效了,最新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>

demodownload

执行结果

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浏览器的代码,因为浏览器不断更新,这些代码可能过一段时间也会无效。所以我们在编写代码时,需要进行各种浏览器的兼容性测试。

参考文章

x
x
  • 站长推荐