在看源碼的時候突然看到了css中_margin-top和_top:expression(eval())的寫法,哈,不明所以啊,就去了解使用了一下。
Css hack:
Css hack的目的就是使css代碼兼容不同的瀏覽器,也可以反過來利用css hack爲不同版本的瀏覽器定製不同的css效果。
Css hack有3種表現形式:css類內部hack,選擇器hack,HTML頭部的(if IE)hack。
css類內部hack:IE6能識別_(下劃線)和*(星號),IE只能識別*,而Firefox兩個都不能識別
選擇器hack:IE6能識別*html,.class;IE7能識別*+html.class{}或者*:first-child+html .class{}。等等
HTML頭部的(if IE)hack:針對所有IE,,<!--[if IE]><!--您的代碼--><![endif]-->,針對IE6及以下版本:<!--[iflt IE 7]><!--您的代碼--><![endif]-->,這類Hack不僅對CSS生效,對寫在判斷語句裏面的所有代碼都會生效。
我最常見到的就是寫在HTML頭部的(if IE)寫法,看起來它的兼容性還是主要針對IE瀏覽器來適配的,Firefox和Google大都適用.demo{}
Css的expression屬性
主要作用是把css屬性和JavaScript腳本關聯起來,也就是css屬性後面可以是一段JavaScript表達式,css屬性的值等於JavaScript表達式計算的結果。
如:
_top:expression(eval(document.documentElement.scrollTop));
通常用eval()函數把它計算成數值,所以這句代碼最終的意思是:瀏覽器的滾動條滑到哪裏,這個元素的位置就在哪裏。
_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); transition:all .5s ease; }
這個也是來識別滾動條滑動和元素位置的
注意:
不是非常需要,一般不建議使用expression,因爲expression對瀏覽器資源要求比較高
CSS Expression的問題就在於它的計算頻率要比想象的多出很多。不僅僅是在頁面顯示和縮放時,就是在頁面滾動、乃至移動鼠標時都會要重新計算一次。給CSS Expression增加一個計數器可以跟蹤表達式的計算頻率。在頁面中隨便移動鼠標都可以輕鬆達到10000次以上的計算量。
性能優化:
一個減少CSS Expression計算次數的方法就是使用一次性的表達式,它在第一次運行時將結果賦給指定的樣式屬性,並用這個屬性來代替CSS Expression。