繼CSS3後的新模組

Photo by 贝莉儿 DANIST on Unsplash

CSS是什麼

CSS（Cascading style Sheets）根據MDN上面的定義，CSS是一種樣式語言：

CSS 既非標準程式語言，也不是標記語言, 而是一種風格頁面語言（style sheet language）：它能讓你在 HTML 文件中的元素（element）上套用不同的頁面樣式（style）。

是「層疊樣式表」的意思。光看字面應該還是不知道是什麼。簡單說，CSS是一組樣式用於網頁排版的標記性語言。可以對HTML網頁中的各種元素的進行字體、顏色、背景、圖像及其他方面的控制，使網頁能夠完全按照設計者的要求來顯示。如果以穿著打扮來比喻，HTML就像是一個素顏、尚未上妝的狀態，加上CSS式樣後，就可以依照需要場合改變各種不同的造型。

為何沒有CSS4

近年來我們常常會聽到CSS3、CSS2等的名詞。然而CSS3已經上市多年，為何不曾聽過有CSS4要推出？難道CSS的技術已經停滯不前嗎？

實際上是否定的。由於從 CSS3 開始，CSS小組就將CSS 的規範拆成多模組（module）單獨進行升級。因此今後不會再有 CSS3這種所謂大版本號的變更，只有某個CSS模組level級別的變遷。因此如果有人說CSS4，就表示在指的是某個個別CSS模組的Level 4之通稱。（我們在這裡也會使用這個CSS4的泛稱）

There is no CSS Level 4. Independent modules can reach level 4 or beyond, but CSS the language no longer has levels. (“CSS Level 3” as a term is used only to differentiate it from the previous monolithic versions.)

一般來說如果CSS模組的開發狀態是Candidate Recommendation（候選推薦）、 Proposed Recommendation（建議推薦）或Recommendation（推薦）其中之一，

表示這模組已經十分穩定，使用時也不需要另外添加前綴詞（Prefix），但有些特性仍有可能在候選推薦階段被放棄。

儘管實現圖形樣式的方法在CSS3裡面已經有不少方式（例如CSS3中的漸層gradation方法），在CSS4中仍增加了20多個新的選擇器、媒體查詢（media query）的語法和屬性為候補。這些新增的方式保有了HTML / CSS的簡潔性。下面我們舉其中的CSS4選擇器來說明：

偽類選擇器（pseudo class）

:is() 與 :not() 偽類（pseudo class）可以一次指定多個匹配元素。透過:focus-within的使用，讓焦點在其父元素時發生作用。has()可以與父元素配合選取，是大家期待的屬性。直到現在，你必須使用javascript才可以實現這些結果。以上這些都還是草稿，未來還是有可能改變。（使用前請先使用 https://caniuse.com/ 檢查看看。）

:focus-within

:focus-within是一個新的CSS偽類( pseudo-class)，它的作用跟:focus、:hover很相似。例如：

.my-el:focus-within {
    outline: 2px solid #555;
}

使用了:focus-within的元素成為焦點或它的子元素成為焦點時會顯現。

下面是:focus-within的瀏覽器支援度：

:not()

雖然 :not() 選擇器在CSS3就有了，但是在使用上，一個 :not() 選擇器只能放一個屬性。在level4，:not() 選擇器被允許可以接受多個屬性。因此，:not(a):not(.b):not([c])可以寫成:not(a, .b, [c])

CSS3的:not()

.col:not(.active){
    background:#ccc;
}
.col:not(.active):not(.active1){
    background:#ccc;
}

level4的:not()

.col:not(.active,.active1){
    background:#ccc;
}

下面是level4 :not()的瀏覽器支援度：

:is()

使用 :is()偽類（以前稱為 :matches()、:any()）會去檢查外部選擇器中位於其位置的元素是否符合選擇器列表中的任何選擇器。:is()偽類算是語法糖，效果類似於在SASS或者是其他CSS預處理器中使用的巢狀套用。透過這個方式可以讓您免手動將所有組合分別寫為單獨的選擇器。

在 CSSWG issue #3258討論後 :match() 改名為:is()。

例如下面的寫法，借助:is()偽類：

:is(header, main, footer) p:hover {
    color: red;
    cursor: pointer;
}

相當於下面的寫法：

header p:hover,
main p:hover,
footer p:hover {
    color: red;
    cursor: pointer;
}

當然，你也可以使用SASS或者是其他CSS預處理器來達到這個效果。

下面是:is()的瀏覽器支援度：

:has()

:has() 是一個偽類，它以包含另一個子元素的父元素為目標，使用的前提是HTML原始碼中至少有一個可以配對的項目。例如：下面的選擇器只會配對到 <a>元素裡面直接包含 <img>子元素的標籤：

a:has(> img)

以上面的DOM結構來說，a:has(> img)的選取元素為兩個藍色的img標籤。

另外，下面的選擇器只會配對到其後緊跟著 <p>元素的 <h1>元素：

h1:has(+ p)

下面是:has()的瀏覽器支援度，可以看到全部不及格：

有趣的是，雖然:has()為CSS的module，您目前只可以將 :has() 使用在javascript裡面（例如 document.querySelector() 的函数中）。

目前有哪些Level4的CSS模組

下面是目前已經發展到level4的CSS模組，紀錄的時間是2020年九月。當你看到這個文章時，下面的列表或許已經改變了。

2017年

• CSS Overflow Module Level 4(Working Draft)
• CSS Image Values and Replaced Content Module Level 4(Working Draft)

2018年

• Selectors Level 4(Working Draft)
• CSS Fragmentation Module Level 4

2019年

• CSS Color Module Level 4(Working Draft)
• CSS Pseudo-Elements Module Level 4(Working Draft)
• CSS Text Module Level 4(Working Draft)
• CSS Writing Modes Level 4(Working Draft)
• CSS Values and Units Module Level 4(Working Draft)
• CSS Fonts Module Level 4(Working Draft)

2020年

• Media Queries Level 4(Candidate Recommendation)
• CSS Text Decoration Module Level 4
• CSS Box Sizing Module Level 4(Working Draft)
• CSS Cascading and Inheritance Level 4(Working Draft)
• CSS Basic User Interface Module Level 4(Editor’s Draft)
• CSS Conditional Rules Module Level 4(Working Draft)