Safari 3.2 和 Opera 9.63 的 CSS Hack

太多 CSS Hack,最近瀏覽器又頻頻更新,所以,整理在這裡~

I. :first-of-type

Safari 3 和 Opera 9 看起來是目前唯一兩個可以解讀 :first-of-type 這種擬類別的瀏覽器,:first-of-type 這個選取器選取的是第一個符合該標籤的元素,舉個例來講,p:first-of-type 的意思就是找出每一層第一個出現的 p 元素,這樣講好難懂,舉個例來講好了:

<dl>
    <dt>我是第一層的第一個dt</dt>
    <dd>
    <dl>
        <dt>我是第二層的第一個dt</dt>
        <dd>multistage rocket</dd>
        <dt>我是第二層的第二個dt</dt>
        <dd>nest of tables</dd>
    </dl>
    </dd>
    <dt>我是第一層的第二個dt</dt>
</dl>

如果你使用 dl dt:first-of-type{font-size:28px;font-weight:bold;color:#f00;} ,那麼你會發現,不管是第一層還是第二層的 <dt> ,只要你是第一個 <dt> ,你的樣式都會改變,因為 Firefox 與 IE 不支援,所以可以用來修正 Safari 3.2 以及 Opera 9.63 的樣式,但是請注意,Safari 3.0 跟 Safari 3.2 的解讀不同,所以使用這個 Hack 的時候請稍微留意一下。

另外,因為這個其實是 W3C 當中 CSS3 的標準選取器之一,因此就算現在沒有大家都支援,未來應該也會慢慢支援,所以如果想要使用這個 CSS Hack 技巧,請三不五時留意一下各瀏覽器的支援度。

II. -webkit-min-device-pixel-ratio

另外一個常用的 CSS Hack,可以分別針對 Opera 9.63 與 Safari 3.2 來設定,也是我常常會使用的 CSS Hack 技巧,Safari 3.0 可不可以我就沒測過了,有閒的人再麻煩幫我測試後回報吧~

@media all and (min-width: 0px){
    /* Safari 和 Opera 的共同樣式都寫在這裡 */
}

@media all and (-webkit-min-device-pixel-ratio:0){
    /* 單獨針對 Safari 的樣式請寫在這裡 */
}

請注意一下,寫的順序不要搞錯,要用後面覆蓋前面,因為 Safari 也會兩個寫發都可以辨識,寫錯了就沒搞頭了。

III. JavaScript

Safari 是唯一一個支援 window devicePixelRatio 屬性的瀏覽器,所以,我們就可以用這個特性來判斷瀏覽器是否是 Safari 版本,寫好一個 function 後,以後你就可以自己用了,不然使用 jquery 應該也是沒問題,可以判斷瀏覽器後再載入必要的 CSS 修正檔案。

<script type="text/javascript">
    isSafari3 = false;
    if(window.devicePixelRatio) isSafari3 = true;
</script>
Advertisements

One thought on “Safari 3.2 和 Opera 9.63 的 CSS Hack

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s