• 浏览器的CSS Hacks


    LZ注:此文原作者是:Paul Irish(Google的前端开发project师),本文是原文的部分译文。

    0

    我不再使用CSS Hacks了。相反的是,我将使用IE的条件推断将类应用到body标签。

     

    可是。我想记录我之前碰到过的每个浏览器特定的CSS 选择器和样式属性。

    我相信也没有其它方式提供样式表给独特的Safari.

     

    利用这些CSS Hacks,你可以更好的针对IE、Chrome、Firefox、Opera和Safari。代码例如以下:

     

    浏览器特定的CSS Hacks综合列表:

       1:  
       2: /***** Selector Hacks ******/
       3:  
       4: /* IE6 and below */
       5: * html #uno  { color: red }
       6:  
       7: /* IE7 */
       8: *:first-child+html #dos { color: red }
       9:  
      10: /* IE7, FF, Saf, Opera  */
      11: html>body #tres { color: red }
      12:  
      13: /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
      14: html>/**/body #cuatro { color: red }
      15:  
      16: /* Opera 9.27 and below, safari 2 */
      17: html:first-child #cinco { color: red }
      18:  
      19: /* Safari 2-3 */
      20: html[xmlns*=""] body:last-child #seis { color: red }
      21:  
      22: /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
      23: body:nth-of-type(1) #siete { color: red }
      24:  
      25: /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
      26: body:first-of-type #ocho {  color: red }
      27:  
      28: /* saf3+, chrome1+ */
      29: @media screen and (-webkit-min-device-pixel-ratio:0) {
      30:  #diez  { color: red  }
      31: }
      32:  
      33: /* iPhone / mobile webkit */
      34: @media screen and (max-device-width: 480px) {
      35:  #veintiseis { color: red  }
      36: }
      37:  
      38:  
      39: /* Safari 2 - 3.1 */
      40: html[xmlns*=""]:root #trece  { color: red  }
      41:  
      42: /* Safari 2 - 3.1, Opera 9.25 */
      43: *|html[xmlns*=""] #catorce { color: red  }
      44:  
      45: /* Everything but IE6-8 */
      46: :root *> #quince { color: red  }
      47:  
      48: /* IE7 */
      49: *+html #dieciocho {  color: red }
      50:  
      51: /* IE 10+ */
      52: @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      53:    #veintiun { color: red; }
      54: }
      55:  
      56: /* Firefox only. 1+ */
      57: #veinticuatro,  x:-moz-any-link  { color: red }
      58:  
      59: /* Firefox 3.0+ */
      60: #veinticinco,  x:-moz-any-link, x:default  { color: red  }
      61:  
      62: /* FF 3.5+ */
      63: body:not(:-moz-handler-blocked) #cuarenta { color: red; }
      64:  
      65:  
      66: /***** Attribute Hacks ******/
      67:  
      68: /* IE6 */
      69: #once { _color: blue }
      70:  
      71: /* IE6, IE7 */
      72: #doce { *color: blue; /* or #color: blue */ }
      73:  
      74: /* Everything but IE6 */
      75: #diecisiete { color/**/: blue }
      76:  
      77: /* IE6, IE7, IE8, but also IE9 in some cases :(  */
      78: #diecinueve { color: blue9; }
      79:  
      80: /* IE7, IE8 */
      81: #veinte { color/***/: blue9; }
      82:  
      83: /* IE6, IE7 -- acts as an !important */
      84: #veintesiete { color: blue !ie; } /* string after ! can be anything */
      85:  
      86: /* IE8, IE9 */
      87: #anotherone  {color: blue/;} /* must go at the END of all rules */
      88:  
      89: /* IE9, IE10 */
      90: @media screen and (min-width:0) {
      91:     #veintidos { color: red}
      92: }

     

    来源:http://www.ido321.com/509.html

  • 相关阅读:
    PAT顶级 1015 Letter-moving Game (35分)
    PAT顶级 1008 Airline Routes (35分)(有向图的强连通分量)
    PAT顶级 1025 Keep at Most 100 Characters (35分)
    PAT顶级 1027 Larry and Inversions (35分)(树状数组)
    PAT 顶级 1026 String of Colorful Beads (35分)(尺取法)
    PAT顶级 1009 Triple Inversions (35分)(树状数组)
    Codeforces 1283F DIY Garland
    Codeforces Round #438 A. Bark to Unlock
    Codeforces Round #437 E. Buy Low Sell High
    Codeforces Round #437 C. Ordering Pizza
  • 原文地址:https://www.cnblogs.com/tlnshuju/p/6895325.html
Copyright © 2020-2023  润新知