Css hack和expression屬性

在看源碼的時候突然看到了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。







發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章