一些不常用但很實用的 CSS

隨著一些 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() 會按照使用的選擇器為準。例如有一個 div.outter 如果先使用標籤名稱設定文字樣式為藍色，範例如下

<div class="outer">
  <p>This is in the outer div.</p>
</div>

div p {
  color: blue;
}

這個時候再往後使用 :is() 偽類選擇器並使用 class 名稱 .outter 設定為橘色文字

:is(.outer) p {
  color: orange;
}

此時不管是先後順序，或是 class 高於標籤名稱的優先級，都會讓文字成功的轉為橘色。但如果改成 :where() 那麼優先級就會變成 0 這樣文字就還是藍色。因此沒有什麼特殊需求的話，主要使用 :is() 就可了！查閱 :is() MDN 說明 | 查閱 :where() MDN 說明

:target 錨點目標偽類選擇器

當按下錨點連結時，使用 :target 偽類選擇器就可以修改捲動目標對象的樣式，例如添加一個紅色邊框來表示選擇

#id:target {
  border: 1px solid red;
}

除此之外也很適合拿來當做 modal 互動視窗的顯示，例如以下範例使用了 bootstrap 的 modal 組件，因為不使用 javascript 因此拿掉 data-bs- 開頭的 html 屬性，然後在關閉按鈕上使用 href="#" 代表沒有選擇任何錨點目標，這樣 :target 就會失去目標還原預設樣式。接著設置開啟互動視窗的目標連結，並設定 :target 的樣式為顯示。查閱 :target MDN 說明

See the Pen :target 錨點目標偽類選擇器 by 國際大便標準色 (@pantone_448_c) on CodePen.

attr() 抓取屬性內文字

attr() 可以用來抓取 html 標籤上的屬性內容，不過目前只能用來抓取文字字串，未來將支援顏色、數字、單位、角度等...屬性內容，雖然如此還是可以利用他來做出文字提示泡泡 Tooltips 的功能，無需仰賴 javascript。只要使用 ::before 或 ::after 偽類元素搭配 content: attr(); 就可以實現。查閱 attr() MDN 說明

<attr class="tooltips" data-tooltips="這是一串泡泡提示文字">這裡</attr>
.tooltips::before {
    content: attr(data-tooltips);
}

接著利用 :hover 來控制 ::before 與 ::after 的顯示隱藏即可。至於提示泡泡的樣式就交給大家自由發揮，完整範例效果如下：

See the Pen attr() 提示文字 by 國際大便標準色 (@pantone_448_c) on CodePen.

MixHub 🪄

搜尋此網誌