24. Browser CSS hacks

大量的CSS hack帮助你让你的网站在所有浏览器下显示一致

/***** Selector Hacks ******/ 
 
/* IE6 and below */ 
* html #uno  { color: red }  
 
/* IE7 */ 
*:first-child+html #dos { color: red }   
 
/* IE7, FF, Saf, Opera  */ 
html>body #tres { color: red }  
 
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */ 
html>/**/body #cuatro { color: red }  
 
/* Opera 9.27 and below, safari 2 */ 
html:first-child #cinco { color: red }  
 
/* Safari 2-3 */ 
html[xmlns*=""] body:last-child #seis { color: red }  
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 
body:nth-of-type(1) #siete { color: red }  
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 
body:first-of-type #ocho {  color: red }  
 
/* saf3+, chrome1+ */ 
@media screen and (-webkit-min-device-pixel-ratio:0) {  
 #diez  { color: red  }  
}  
 
/* iPhone / mobile webkit */ 
@media screen and (max-device-width: 480px) {  
 #veintiseis { color: red  }  
}  
 
/* Safari 2 - 3.1 */ 
html[xmlns*=""]:root #trece  { color: red  }  
 
/* Safari 2 - 3.1, Opera 9.25 */ 
*|html[xmlns*=""] #catorce { color: red  }  
 
/* Everything but IE6-8 */ 
:root *> #quince { color: red  }  
 
/* IE7 */ 
*+html #dieciocho {  color: red }  
 
/* Firefox only. 1+ */ 
#veinticuatro,  x:-moz-any-link  { color: red }  
 
/* Firefox 3.0+ */ 
#veinticinco,  x:-moz-any-link, x:default  { color: red  }  
 
/* FF 3.5+ */ 
body:not(:-moz-handler-blocked) #cuarenta { color: red; }  
 
/***** Attribute Hacks ******/ 
 
/* IE6 */ 
#once { _color: blue }  
 
/* IE6, IE7 */ 
#doce { *color: blue; /* or #color: blue */ }  
 
/* Everything but IE6 */ 
#diecisiete { color/**/: blue }  
 
/* IE6, IE7, IE8 */ 
#diecinueve { color: blue\9; }  
 
/* IE7, IE8 */ 
#veinte { color/*\**/: blue\9; }  
 
/* IE6, IE7 -- acts as an !important */ 
#veintesiete { color: blue !ie; } /* string after ! can be anything */ 
 
/* IE8, IE9 */ 
#anotherone  {color: blue\0/;} /* must go at the END of all rules */ 

25. How To Change The Default Text Selection Color on your Blog

修改高亮的文字颜色

::selection {  
   background: #ffb7b7; /* Safari */ 
        color: #ffffff;  
   }  
::-moz-selection {  
   background: #ffb7b7; /* Firefox */ 
        color: #ffffff;  
   } 

26. Clearfix

.clearfix:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
}  
 
.clearfix { display: inline-block; }  
 
/* start commented backslash hack \*/ 
* html .clearfix { height: 1%; }  
.clearfix { display: block; }  
/* close commented backslash hack */ 

27. Hide Logo Text With Text Indent

使得你的logo SEO友好。保证logo文字不显示

h1 {  
        text-indent:-9999px;  
        margin:0 auto;  
        width:400px;  
        height:100px;  
        background:transparent url("images/logo.jpg") no-repeat scroll;  
} 

28. Reset all Text Colors and Background Colors

重置所有的背景和文字颜色。

* {  
     color: black !important;  
     background-color: white !important;  
     background-image: none !important;  
} 

29. Multiple Background Images

使用多背景图片

#multiple-images {  
   background: url(image_1.png) top left no-repeat,  
   url(image_2.png) bottom left no-repeat,  
   url(image_3.png) bottom right no-repeat;  
} 

30. Linear Gradient

允许你为背景创建一个线状渐变效果，不支持一些老浏览器

background: -webkit-gradient(linear, left top, left bottom, from(#74b8d7), to(#437fbc));  
background: -moz-linear-gradient(top,  #74b8d7,  #437fbc);  
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#74b8d7', endColorstr='#437fbc');