隨著一些 CSS 框架流行,你有多久沒有自己寫 CSS 了呢?或是有寫,但學習記憶還停留在以前的經驗裡。有些新穎的 CSS 寫法,隨著瀏覽器不斷更新,事後才意外發現原來還有這樣的 CSS 可以用!以下是我整理發現的一些不常用但其實很實用的 CSS,這些入選的 CSS 也至少在 caniuse 通過 Firefox, Chrome, Edge, Safari 的支援才會列入。 scroll-behavior 錨點動畫捲動 原本在 href="#target" 上下錨點連結,瀏覽器預設動作是快速捲動到 id 目標位置,沒有任何的緩衝動畫,瞬間就到達目標位置。之前的做法是使用 Javascript 來達成動畫效果,現在可以直接使用純 CSS 實現動畫捲動效果。只要在 body 上使用 scroll-behavior: smooth; 即可。 查閱 MDN 說明 scroll-behavior: auto|smooth; See the Pen CodePen Home scroll-behavior 錨點頁面捲動使用動畫 by 國際大便標準色 ( @pantone_448_c ) on CodePen . :is() 以及 :where() 可列出多個目標對象選擇 傳統 CSS 如果要選擇多個目標對象,並且使用同一組樣式時,必須一項一項完整列出選擇器規則,例如 div, section, article 下面的 p 都要設置相同的樣式,那麼就要如下方範例設置 div p, section p, atricle p { color: red; } 如果是 SASS/SCSS 就可以使用巢狀表示,可以節省掉一些字元 div, section, atricle { p { color: red; } } 現在也可以使用 CSS 原生的 :is() 或 :where() 偽類選擇器,就可以達到類似以上 SASS/SCSS 的選擇效果 :is(div, section, atricle) p { color: red; } 此外 :is() 與 :where() 的用法都是相同的,差別只在於優先級。:where() 的優先級總是為 0,而 :is() 會按照使用的選擇器為準