CSS validation tools

CSS Lint

CSS整形與最佳化工具

CSS大師的10條原則

[筆記][CSS Hack] 區分各ie及firefox的css

引述自CSS hack:區分IE6，IE7，firefox-網站標準化:

區別不同瀏覽器，CSS hack寫法：

區別IE6與FF：
     background:orange;*background:blue;

區別IE6與IE7：
     background:green !important;background:blue;

區別IE7與FF：
     background:orange; *background:green;

區別FF，IE7，IE6：
     background:orange;*background:green !important;*background:blue;

註：IE都能識別*;標準瀏覽器(如FF)不能識別*；
IE6能識別*，但不能識別 !important,
IE7能識別*，也能識別!important;
FF不能識別*，但能識別!important;


IE6  IE7  FF
*  √  √  ×
!important  ×  √  √


另外再補充一個，下劃線'_',
IE6支持下劃線，IE7和firefox均不支持下劃線。

於是大家還可以這樣來區分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;

註：不管是什麼方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最後面。

CSS Selector/Hack Tips

今天在寫CSS發現ie很多很不合群的地方，雖然以前就知道它很擺爛了。所以google了一些可能會用的到的CSS Hacks做做筆記。

IE 6 and below (以下)

* html selector{} 

IE 7 only

 *:first-child+html selector{} 

IE 7 and below

*:first-child+html selector{} 

* html selector{} 

IE 7 and modern browsers only

html>body selector{} 

Modern browsers only (not IE 7)

html>/**/body selector{} 

Recent Opera versions 9 and below

html:first-child selector{}

---

 

另外有人提出下面這個方法，只能在ie有效：

語法: +property: value

範例:

* {  
   font-size: 1.5em; /* 通用 */   
   +font-size: 2em; /* only IE */
}