技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

以前的失效了,最新CSS識別Chrome、Firefox、IE11代碼

作者:admin    時間:2022-5-6 11:39:14    瀏覽:

最近做一個項目，需要用CSS識別各種主流瀏覽器，Chrome、Firefox、IE11，因為以前寫過類似的代碼，以為很快搞定，但是把代碼復制過來之后發(fā)現，那些代碼現在已經失效了。

經過測試，發(fā)現現在有了新的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>
      卡卡網 howtostagehomes.com
   </div>
</body>

</html>

demodownload

執(zhí)行結果

Chrome

Firefox

 

IE11

 

執(zhí)行結果符合預期。

代碼解釋

在編寫代碼的時候，主體代碼用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

另外測試發(fā)現，下面的代碼可以識別Chrome和Firefox，而IE11不會執(zhí)行里面的代碼。

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {}

總結

本文介紹了現在新的CSS識別Chrome、Firefox、IE11瀏覽器的代碼，因為瀏覽器不斷更新，這些代碼可能過一段時間也會無效。所以我們在編寫代碼時，需要進行各種瀏覽器的兼容性測試。

參考文章

x
  • 站長推薦
/* 左側顯示文章內容目錄 */