編輯中，僅請見諒 m(_ _)m
度過了 9 x 4 x 8 x 7 年後，希望明年會是個好年~!! =D

前言

30 天才到一半而已，儲備的題目就已經快用完了，稍微有點哀傷 Orz

今天決定先來仔細看一下 @support 這個東西，
不然用新的屬性時，完全放生現有瀏覽器，好像也不太正確 XD

沒有 feature query 時的困境

例子來源：Using Feature Queries In Css :: HACKS

我們想要在段落的首字上做一些效果 ( 顏色、字體大小、間距大小等等 )

於是我們可以這樣設定

p::first-letter {
    color: #fe742f;
    font-weight: bold;
    margin-right: .5em;
    -webkit-initial-letter: 4;
            initial-letter: 4;
}

但有些瀏覽器會不支援，所以就會變成怪怪的

這時 PM 可能就會覺得 "好吧，與其讓部分的使用者看到壞掉的版面，還是中規中矩的比較好"
於是最後版面可能就只能長這樣：

太無聊了~!!!!
( 而且這樣支援度比較好瀏覽器反而被拖累了 )

使用方法

使用 feature query 的話，就可以舊瀏覽器用舊寫法、支援度較好的瀏覽器則可以使用新的屬性。

/* 支援某某屬性規則 */
@supports <CSS 屬性規則> {
    /* 一些樣式設定 */
}

/* 不支援某某屬性規則 */
@supports not <CSS 屬性規則> {
    /* 一些樣式設定 */
}

屬性規則裡也可以使用 or / and / 括號 等符號。

例如

@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
    p::first-letter {
        /* ... */
        -webkit-initial-letter: 4;
                initial-letter: 4;
    }
}

推薦的寫法

一開始覺得或許可以這樣寫

/* 共用樣式 */
@supports <CSS 屬性規則> {
    /* 給新瀏覽器的樣式 */
}
@supports not <CSS 屬性規則> {
    /* 給舊瀏覽器的樣式 */
}

但其實這種寫法不太好，因為不是每個瀏覽器都支援 @support 這種屬性~

推薦的寫法是：

/* 共用樣式 */
/* 給舊瀏覽器的樣式 */

@supports <CSS 屬性規則> {
    /* 重設給舊瀏覽器的樣式 */
    /* 給新瀏覽器的樣式 */
}

範例

( 待補 O____Q )