CSS Hacks in the browser and CSSHacks in the browser

CSS Hacks in the browser and CSSHacks in the browser

LZ note: the original author of this article is Paul Irish (Google's front-end development engineer). This article is part of the original article.

I no longer use CSS Hacks. On the contrary, I will use the IE condition judgment to apply the class to the body tag.

 

However, I want to record the specific CSS selectors and style attributes of each browser I have encountered before. I believe there are no other ways to provide style sheets to the unique Safari.

 

With these CSS Hacks, you can better target IE, Chrome, Firefox, Opera, and Safari. The Code is as follows:

 

A comprehensive list of browser-specific 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: blue\9; }

  79:  

  80: /* IE7, IE8 */

  81: #veinte { color/*\**/: blue\9; }

  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\0/;} /* must go at the END of all rules */

  88:  

  89: /* IE9, IE10 */

  90: @media screen and (min-width:0\0) {

  91:     #veintidos { color: red}

  92: }

 

Source: http://www.ido321.com/509.html

What does css hacks mean?

CSS Hacks was born to solve the difference in CSS support between different browsers.
CSS Hack:
1. Valid. can pass Web standard verification.
2. It is only applicable to old, undeveloped, and abandoned browsers, rather than mainstream browsers.
3. The Code should be ugly. Let people remember that this is a last-resort Hack, always remember to find a way to remove it.

You can treat them as Web hackers, but simply process CSS as an object.

Several Methods for writing CSS separately for IE

Familiar methods include IE hacks and Conditional comments CSS (Conditional Stylesheets). The following describes the advantages and disadvantages of these two methods. For example, in IE hacks, the left margin of an element in other browsing operations is 30px, while in IE6, it is set to 20px, which can be written as follows :. demo {margin-left: 30px; _ margin-left: 20px;} for me, I prefer conditional comments like CSS over IE hacks, the word "hacks" in IE hacks is already quite uncomfortable. I always think this is a solution that is biased. However, IE hacks also has its advantages: CSS hacks is embedded in common CSS and will not generate more HTTP requests. CSS hacks is embedded in common CSS, which is easier to compile. Of course, its shortcomings are also obvious-it is an unstandard product. Embedded in other CSS, which is inconvenient to maintain. Especially when the number of hacks is large, maintenance is a nightmare. Embedded in other CSS, it will be loaded even in non-IE browsers, wasting resources. The condition annotation CSS is also the example above. If you use the condition annotation CSS, you can write it as follows: HTML <! -- [If IE 6]> <link rel = "stylesheet" type = "text/css" media = "all" href = "./ie6.css"/> <! [Endif] --> ie6.css. demo {margin-left: 20px;} The condition annotation is a Miscrosoft extension proprietary to IE and annotated with regular (X) HTML. It is also a product of non-standard W3C standards, but it is officially launched by Microsoft for IE development, and conditional annotations appear as regular annotations for all other browsers, therefore, it is harmless to other browsers. The advantage of conditional annotation CSS is that it is written in an independent CSS file, which can accurately control loading in a specific IE without wasting resources and is easy to maintain. The disadvantage is that excessive HTTP requests will be generated, especially when you need many compatible IE versions, you need to generate multiple HTTP requests, this will undoubtedly affect the page loading speed for earlier versions of IE with fewer channels. Obviously, neither of the above methods is a good one. Therefore, we will introduce a relatively better solution. Example: <! DOCTYPE html> <! -- [If IE 6]>