iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 16
1
自我挑戰組

30 天 CSS 隨手筆記系列 第 16

30 天 CSS 隨手筆記 - 第 16 天 - feature query ~!!

編輯中,僅請見諒 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 )


上一篇
30 天 CSS 隨手筆記 - 第 15 天 - Shapes ~!!
下一篇
30 天 CSS 隨手筆記 - 第 17 天 - UX 相關的眉角 ( 1/3 )
系列文
30 天 CSS 隨手筆記30

尚未有邦友留言

立即登入留言