CSS – Larry的午茶時光 https://blog.yuyansoftware.com.tw Tue, 21 Jan 2025 09:59:37 +0000 zh-TW hourly 1 https://wordpress.org/?v=6.9.4 https://blog.yuyansoftware.com.tw/wp-content/uploads/2022/10/favicon-45x45.png CSS – Larry的午茶時光 https://blog.yuyansoftware.com.tw 32 32 Bootstrap 5.3 主要更新：深色模式 Dark mode，自訂 color mode，翻新調色盤色票，新的連結樣式 https://blog.yuyansoftware.com.tw/2023/06/bootstrap-5-3-features/ Wed, 28 Jun 2023 09:40:44 +0000 https://blog.yuyansoftware.com.tw/?p=15730 https://blog.getbootstrap.com/2023/05/30/bootstrap-5-3-0/
前幾個星期 (2023/5/30) Bootstrap 5.3 發布了。每次看到 Bootstrap 新版本的發布，都會有感於時間過的真的很快。以下是我關於 Bootstrap 的文章，大致的時間線：

撰文的現在是2023年6月。可以看到每一個 minor version 的更新，就是半年～1年；major version 的更新，是好幾年一版。所以每次寫 Bootstrap，就代表好多歲月又過去了，時間真的過得太快。

以下是 Bootstrap 5.3 的主要更新：

深色模式 Dark mode，自訂新的 color mode

Bootstrap 核心已經重新設計，以支援 Dark mode。並新增了關於 Color Mode 的文件 (5.2 沒有)
https://getbootstrap.com/docs/5.3/customize/color-modes/

Bootstrap 5.3 不但支援 Dark mode，也允許開發者設計自己的 color mode。語法上，在一開始的 html tag 下 data-bs-theme，例如

<html lang="en" data-bs-theme="dark">
  <!-- ... -->
</html>

你也可以在特定的元件下 color mode，例如 dropdown menu

<div class="dropdown" data-bs-theme="dark">
  <!-- ... -->
</div>

這樣無論上方 html tag 的 color mode，你的 dropdown menu 就會切換成 Dark mode。

當然，如果你想要本來「亮底」的樣式，設定 data-bs-theme="light"，或是將來你自己客製的樣式。

Light / Dark mode 都定義在 scss/_root.scss，包含如果你將來要新增自己的 color mode，也是定義在這支檔案。

目前 scss/_root.scss 定義的是 CSS 變數，你也可以在其中指定特定元件的樣式。例如

@include color-mode(dark) {
  ...
  .element {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
  }
  ...
}

另外，如果你重設這個 SCSS 變數

$color-mode-type: media-query; // default 是 "data"

上面那段 SCSS 會編譯成

@media (prefers-color-scheme: dark) {
  .element {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
  }
}

這樣就不是 data-bs-theme 設定 scope 的概念，而是 media query prefers-color-scheme，隨使用者作業系統調整亮/暗模式。

有一些 Dark mode 的 CSS 變數是定義在 scss/_variables-dark.scss。當然，你可以修改再重新編譯。如果你要新增 color mode，官方文件也建議新增新的 scss 檔案，例如 scss/_variables-blue.scss。

scss/_variables-dark.scss 中大量的使用 Bootstrap 內建的 SCSS function shade-color()、tint-color()，也就是拿原始的調色盤色票去做深淺變化。如果你要整個換色系的話，修改原始色票再重新編譯，scss/_variables-dark.scss 這支檔案就會自動幫你做深淺變化了。

翻新調色盤色票 Color Palette

文件也做大幅更新，第一節 Colors 是 5.3 新增的。
https://getbootstrap.com/docs/5.3/customize/color/

新增 secondary、tertiary 兩個色票。舉例來說，Bootstrap 5.3 Light mode 中這幾個變數 (數值是 Bootstrap 5.3 定義的，之後版本不一定會改)

--bs-body-color-rgb: 33,37,41;
--bs-secondary-color: rgba(33, 37, 41, 0.75);
--bs-tertiary-color: rgba(33, 37, 41, 0.5);

因為是 Light mode，背景是白的，隨著 alpha 值越透明，tertiary 文字顏色最淡。

Bootstrap 5.3 Dark mode 中這幾個變數的數值

--bs-body-color-rgb: 173,181,189;
--bs-secondary-color: rgba(173, 181, 189, 0.75);
--bs-tertiary-color: rgba(173, 181, 189, 0.5);

因為是 Dark mode，背景是黑的，隨著 alpha 值越透明，也就是 tertiary 文字顏色最深。

進一步說明，以目前 (2023年6月) Bootstrap 官網文件來說，如果是 Dark mode，一般文字顏色就是 --bs-body-color，secondary / tertiary 多了兩個不同灰階 (顏色更深) 的選擇。

.bg-body-secondary、.bg-body-tertiary 就不是深淺灰階的概念，是由 Bootstrap 直接定義值，用來搭配 --bs-secondary-color、--bs-tertiary-color 的顏色。 

另外還新增 {color}-bg-subtle、{color}-border-subtle、{color}-text-emphasis 這幾個顏色。

subtle 這邊指的是暗的、淡的。比如說 .bg-success 是軟體操作成功的綠色，.bg-success-subtle 在 Light mode 就是淡綠色，在 Dark mode 就是墨綠色。

https://getbootstrap.com/docs/5.3/customize/color/
文件也列出 Bootstrap 所有可用的色票，包含紅橙黃綠藍靛紫，以及各自的灰階，如果要很快的找一個色票使用，可以參考這裡。

新的 Link 連結樣式

新的 Link 文件 (Bootstrap 5.2 沒有)，包含透明度 opacity，底線 underline 等樣式。
https://getbootstrap.com/docs/5.3/utilities/link/

新的 Icon Link 文件 (Bootstrap 5.2 沒有)
https://getbootstrap.com/docs/5.3/helpers/icon-link/

可以輕易的在連結的前或後，加上小圖。如果再加上 css .icon-link-hover，滑鼠 hover 時小圖會有小動畫。

<a class="icon-link icon-link-hover" href="#">
  Icon link
  <svg>...</svg>
</a>

新的 css .focus-ring，讓元件在 :focus 狀態下，不要顯示預設的 outline，而是變成 box-shadow，這樣可以更好的讓開發者客製化。

.focus-ring 也是 Bootstrap 5.3 的新文件
https://getbootstrap.com/docs/5.3/helpers/focus-ring/

總結

這次 Bootstrap 5.3 更新主要是在深色模式 Dark mode，還有各種色系、色票的更新，並沒有大的架構或排版上的更新。

Dark mode 的確是近幾年的 CSS 主題：Windows / Mac / Android / iPhone / iPad 作業系統都支援 Dark mode，當然細緻一點的 web app，應該也要支援 Dark mode。

調色盤色票的更新，則是讓我們再 review 一次，未來可不可用 Bootstrap 內建的色票架構。

]]> Interop 2023，四大瀏覽器繼續合作，解決瀏覽器相容性的問題並推動新技術 https://blog.yuyansoftware.com.tw/2023/03/interop-2023-browser-compatibility-css/ Sun, 19 Mar 2023 04:01:26 +0000 https://blog.yuyansoftware.com.tw/?p=14412 去年 (2022) 開始四大瀏覽器 (Chrome, Edge, Safari, Firefox) 開始合作，一起解決瀏覽器相容性的問題，也因此這四家瀏覽器廠商一起成立了一個 Interop 2022 專案。

Interop 2022 主要專注在 15 個瀏覽器相容性的問題。參考我去年 (2022) 的文章
從 Compat 2021 到 Interop 2022，史上第一次所有的主流瀏覽器，合作解決相容性的問題

https://web.dev/interop-2023/
今年的 Interop 2023 主要專注在以下領域

  1. Border Image in CSS
  2. Color Spaces and Functions in CSS
  3. Container Queries (@container)
  4. Containment in CSS
  5. CSS Pseudo-classes
  6. Custom Properties (@property)
  7. Flexbox
  8. Font feature detection and palettes
  9. Forms
  10. Grid
  11. :has()
  12. Inert
  13. Masking in CSS
  14. Math Functions in CSS
  15. Media Queries
  16. Modules in Web Workers
  17. Motion Path in CSS Animations
  18. Offscreen Canvas
  19. Pointer and mouse Events
  20. URL
  21. Web Compat 2023
  22. Web Codecs (video)
  23. Web Components

Interop 有一個網頁，測試四大瀏覽器每個版本對於新規格的支援度，像是軟體開發的 auto test 面板，很清楚很有趣。
https://wpt.fyi/interop-2023

可以看到關於 Interop 2022 的重點領域：Cascade Layers、Dialog Element、position sticky、aspect-ratio、Viewport Units，等，四大瀏覽器已經有很高的支援度了，也因此沒有出現在 Interop 2023 的重點項目。

延伸閱讀：我之前關於 Cascade Layers、Viewport Units 的文章

Interop 2023 的重點項目，例如 Container Queries，目前 (2023年3月) 四大瀏覽器已全部支援。它是傳統 media query 的加強版，可以指定元件 container，並依照此 container 的大小下不同的 CSS 語法。

在不同 container 大小可以下不同 CSS 語法，可以大幅增加 component reusable。

:has() selector 可以選擇有某種 child 元素的 parent 元素，或是該元素有某種 sibling 元素。目前 (2023年3月) Firefox 還不支援。

Custom Properties 已經是一個大家常用，而且新手幾乎一定要學的語法了。Bootstrap 5 開始也將 Custom Properties 寫法納入到核心。Bootstrap 5 beta 1 是2020年12月發布的，可想而知 Custom Properties 已經通用了多久，Bootstrap 才決定採用，再加開發的時間，2020年12月才發布 beta 1。

既然 Custom Properties 上線以久，Interop 2023 關注的是它的 @property 語法，目前 (2023年3月) Safari 和 Firefox 都不支援。

@property 語法可以將原本的 CSS 變數，擴展成資料結構。你可以指定這個變數的類型 (syntax) 與初始值 (initial-value)，後續開發者指定 CSS 變數值時，會執行 type check，如果 invalid，會 fallback 到 initial-value。

CSS Masking 也是被「挖出來」重新討論的題目。CSS Masking (mask-image) 是一個存在很久的東西了，的確好像長期以來不是討論的重點，開發者使用起來也抖抖的，不知道是不是完整的規格，會不會有瀏覽器相容性的問題。

我在 2015 年有一篇文章，那時 CSS Masking 已經出來，而且已經「擺在那邊」很久了：CSS 的演變歷程，Mask & Clip

Interop 2023 還有很多要討論的題目，這邊就不一一列舉。

結論

撰文的現在是2023年3月，201x 有幾年 CSS 的發展有停滯，但近幾年隨著 CSS Grid、Custom Properties、甚至 Cascade Layers 等新技術的上線，似乎 CSS 這個語言又有了很強的進步動能。

larry 覺得近幾年 CSS 可以進步這件事，跟微軟目前的 CEO Satya Nadella 與他的領導團隊有關。他們讓 IE 退休，用 Chromium 當核心重做 Edge，瀏覽器所有規格也跟 Google、Mozilla 合作。試想，如果現在還有很多公司用 Windows IE 瀏覽器，你要怎麼去推 CSS 科技進步？

包含之前的文章 Interop 2022，還有 ChatGPT 是否會取代 Google 搜尋？ 都表達了我對微軟 CEO Satya Nadella 的敬意。larry 開公司很久了，我看得出來他的商業判斷很厲害。

很高興歷史走到現在，這幾家巨頭企業在瀏覽器的部分是傾向合作，而不是對抗。也因此 CSS 這個語言，甚至整個網路科技的發展，都是不斷往前的。

]]> 新的 CSS Viewport Units (large/small/dynamic)，目前四大瀏覽器已全部支援！ https://blog.yuyansoftware.com.tw/2022/12/css-viewport-units-large-small-dynamic/ Tue, 13 Dec 2022 05:11:40 +0000 https://blog.yuyansoftware.com.tw/?p=13180 圖片來源 https://web.dev/viewport-units/

larry 之前有一篇關於 Interop 2022 的文章
從 Compat 2021 到 Interop 2022，史上第一次所有的主流瀏覽器，合作解決相容性的問題

https://web.dev/viewport-units/
幾天前 web dev 有一篇文章，提到了 Interop 2022 的第 9 個工作項目：新的 Viewport Units，lvh, svh, dvh。也很高興宣布四大瀏覽器都支援新的 Viewport 單位。

Viewport 長度單位的官方文件在這裡
https://drafts.csswg.org/css-values-4/#viewport-relative-lengths

這份文件是 CSS Values and Units Module Level 4，這份文件從 Level 3 到撰文的此時 (2022年12月) 已經出到 Level 5。

除了我們熟知的 vw, vh，還有 vmin, vmax。vmin 代表 vw / vh 兩者中比較小的，也就是當 viewport 是寬的 (vw > vh)，vmin 代表 vh。當 viewport 是高的，vmin 代表 vw。vmax 也是一樣邏輯，取 vw / vh 兩者中比較大的。

以上這部分是四大瀏覽器早就支援的。

新的 Viewport 單位主要為了解決一般手機瀏覽器，使用者在捲動網頁時，網址列/工具列會自動縮放的問題。

例如 height: 100vh 的區塊，如果手機瀏覽器網址列/工具列都顯示出來，height: 100vh 的區塊其實是比可視面積高的。

上面 Level 4 文件新定義了 3 個新單位：

  • lv*：large viewport size，所有瀏覽器 UI 縮起來時，最大的網頁可視面積。當設定 height: 100lvh，且瀏覽器 UI 展開時，有可能會遮住網頁。
  • sv*：small viewport size，所有瀏覽器 UI 展開時，最小的網頁可視面積。當設定 height: 100svh，且瀏覽器 UI 縮起來時，有可能會出現空白面積。
  • dv*：dynamic viewport size，除了瀏覽器 UI 之外，網頁的可視面積。隨使用者操作，dv* 會動態更新成 lv* 或 sv*。也因為 dv* 會動態更新，使用者操作時可能網頁內容會有奇怪縮放 (如果某一區塊是用 dvh 當單位)。

原本的 vw, vh 指的是 “UA (User Agent) default viewport size”。上面 Level 4 文件指出 default viewport size 可以是 large viewport size 或 small viewport size，或 large / small 之間的值。也就是依照不同手機瀏覽器不一定。

當然，如果不影響你的頁面，不用煩惱。但如果你有手機應用，又正好有 height: 100vh 之類，就要測試一下 large / small / dynamic viewport 單位。

large / small / dynamic viewport 單位，四大瀏覽器 Chrome 108，Firefox 101，Edge 108，Safari 15.4 都已經支援 (以目前2022年12月來講，都算新版瀏覽器)。

上面 web dev 文章有提到 3 點要特別注意：

  1. 所有 viewport 單位都「沒有」考慮 scrollbar 的寬度。如果是傳統 scrollbar 的系統，width: 100vw 有可能會超出可視面積。
  2. dynamic viewport 單位值的更新問題。尤其當網頁的更新速度 (frame rate) 小於瀏覽器 UI 縮放的更新速度，dv* 的區塊可能會有奇怪縮放 (本文上方有提到)。
  3. 手機彈出的虛擬鍵盤「不算」瀏覽器 UI，因此不影響 viewport 單位的值。

結論

從 Compat 2021 到 Interop 2022，四大瀏覽器開始合作，很明顯的看到 CSS 語言的整合與進展，這對網路科技的發展，絕對是一件好事。

如果讀者有稍微瀏覽一下 CSS Values and Units Module Level 4 的文件，viewport 單位的更新其實是一個細節更新，但文件裡有多少備註，多少版本。任何一丁點科技的演進，都是不知道多少人智慧的結晶。

]]> Bootstrap 5.2 主要更新：幾乎全部元件都用 CSS 變數實作，新的 CSS build sequence https://blog.yuyansoftware.com.tw/2022/07/bootstrap-5-2-features/ Fri, 29 Jul 2022 03:36:00 +0000 https://blog.yuyansoftware.com.tw/?p=11285 圖片來源 Bootstrap官方部落格

https://blog.getbootstrap.com/2022/07/19/bootstrap-5-2-0/
前幾天 (2022/7/19) Bootstrap 5.2 發布了。每次看到 Bootstrap 新版本的發布，都會有感於時間過的真的很快。以下是我關於 Bootstrap 的文章，大致的時間線：

撰文的現在是2022年7月。可以看到每一個 Bootstrap minor version 的更新，就是半年～1年。更甭論 major version 的更新是好幾年一版。所以每次寫 Bootstrap，就代表好多歲月又過去了。

以下是 Bootstrap 5.2 的主要更新：

官網首頁重新設計，以及文件網頁優化

重新設計了 Bootstrap 官網首頁，文件網頁也有多處優化，包含左側 menu 的重組，文件搜尋的使用體驗，等等。

更新按鈕樣式

border-radius 調大了一點，雖然按鈕大小跟之前一樣，看起來好像 padding 變小而文字更突出的感覺。

幾乎全部元件都用 CSS 變數 (custom property) 實作

比 Bootstrap 5.1 更多的 CSS 變數實作，幾乎全部元件都是。

新的 _maps.scss

有一個新的 scss/_maps.scss (Bootstrap 5.1 沒有)。_maps.scss 將一些 Sass map 從 _variables.scss 抽出。修正對原始 Sass map 修改時，基於原始 Sass map 擴展的 map，不會繼承這些修改的問題。

舉例來說 $utilities-colors 基於 $theme-colors 擴展。因為 Bootstrap 5.1 $utilities-colors 在 _variables.scss 就定義生成了，所以在

@import "variables";

之後對 $theme-colors 的修改，都不會繼承到 $utilities-colors (它已經生成了)。

而 Bootstrap 5.2 $utilities-colors 移到 _map.scss，整個架構上會比較清楚，你的 Bootstrap CSS build 順序可以參考：

// Functions come first
@import "functions";

// Your optional variable overrides here

// Variables come next
@import "variables";

// Your optional Sass map overrides here

// Third the default maps
@import "maps";

// The rest
@import "mixins";
@import "utilities";
@import "root";
@import "reboot";

新的 CSS helpers and utilities

新的 .text-bg-{color} helper，使用 .text-bg-{color} 可以直接設定 background-color 和文字顏色，而不是兩個 css class 個別設定。

font-weight 方面新增 .fw-semibold (font weight 600)。border-radius 方面新增 .rounded-4 (border radius 1rem) .rounded-5 (border radius 2rem)

Responsive offcanvas

Bootstrap 5.2 可以使用 .offcanvas-{sm|md|lg|xl|xxl}，例如 .offcanvas-lg，在 viewport 大於 lg breakpoint 時，已經顯示的 offcanvas 會隱藏。

Bootstrap 5.0、5.1 就開始使用的 .offcanvas class 仍然存在，使用 .offcanvas 顯示就不隨 viewport 大小而改變。

compile CSS Grid 版本時可以包含 container class

scss/_variables.scss 新增了一個變數 $enable-container-classes，如果是 true，當 compile 成 CSS Grid 版本，container class 仍然會 compile 進去 (5.1 之前不會)。

總結

Bootstrap 5.2 沒有大的架構更新，就是多了一些 CSS helper class。CSS 變數的使用幾乎遍及所有元件，所以大家要知道 CSS 變數的使用是一個趨勢。也要稍微知道一下新的 _maps.scss，它的邏輯是什麼，Bootstrap 5.2 CSS build 的順序是什麼。

]]> 從 Compat 2021 到 Interop 2022，史上第一次所有的主流瀏覽器，合作解決相容性的問題 https://blog.yuyansoftware.com.tw/2022/04/compat-2021-interop-2022-browser-compatibility/ Mon, 18 Apr 2022 03:50:14 +0000 https://blog.yuyansoftware.com.tw/?p=10239 https://web.dev/interop-2022/
前幾天看到這篇文章，史上第一次所有主流的瀏覽器廠商 (包含 Google Chrome, Apple Safari, Microsoft Edge, Mozilla Firefox) 聯合起來，一起解決瀏覽器相容性的問題。因此這幾家瀏覽器廠商一起成立了一個 Interop 2022 專案。

上方 web dev 文章提到了 compatibility, interoperability 這兩個字的不同。

compatibility 指的是 “site compat”，應該是以網站為主，同一網站在不同的環境應該要有類似的行為。interoperability 應該是以環境為主，在這裡指的是瀏覽器，不同的瀏覽器對一樣的語法、指令，應該要有高度類似的行為。

因為 compatibility, interoperability 這兩個字嚴格來講語意不太相同，這幾家瀏覽器廠商是選用 interoperability 的 Interop。

https://web.dev/compat2021/
事實上從 2019，Google, Mozilla, Microsoft 就已經合作開始在研究瀏覽器相容的議題，並在 2021 成立了 Compat 2021 專案。Compat 2021 專案專注於以下五個領域：

  1. CSS Flexbox
  2. CSS Grid
  3. position: sticky
  4. aspect-ratio
  5. CSS Transforms：有 3D transform 和動畫時，每個瀏覽器行為有可能不同。

Compat 2021 對新 CSS 語法的普及，不同瀏覽器相容性的提升，都有一些明顯的成果。

這邊聊一下微軟 (Microsoft)，注意 Compat 2021 的成員已經有微軟了，他們已經跟 Google, Mozilla 合作很久了。現任的微軟領導班子真的很厲害，解開了傳統賣套裝軟體 (Windows, Office) 的束縛。走向雲端訂閱制，走向行動裝置，軟體也同時在 Android, iPhone, Mac 上架。

瀏覽器方面打掉 IE，用 Chromium 當核心重做 Edge。用 Chromium 當核心就代表要跟 Google 合作，微軟想得也很清楚，就是跟 Google 合作。

撰文的現在是2022年4月，瀏覽器市佔率 Edge 已經接近第二名的 Safari，很多3C網站都預測 Edge 市佔率將會超越 Safari。微軟現任的領導班子很厲害，公司策略都想得很清楚，也是商業競合策略的最佳教材。

公司業務的某個部分跟外部合作，一定會有妥協的部分，但可能因此會有很多機會、很多成長，那為什麼不合作。

不管是微軟，還是其他巨頭企業，當然都知道競合策略，當然也知道賽局理論，這次 Interop 2022 的合作就是最好的例子。延伸閱讀：[讀書筆記] 思辨賽局 (The Art of Strategy)

回到 Interop 2022，它主要專注在以下 15 個領域：

  1. Cascade Layers
    關於這個主題我有一篇文章：CSS Cascade Layers (@layer)，解決長期以來 CSS 競爭權重 (Specificity) 的問題
  2. Color Spaces and Functions
  3. Containment
  4. Dialog Element
  5. Forms
  6. Scrolling
  7. Subgrid
  8. Typography and Encodings
  9. Viewport Units：CSS Values and Units Module Level 4 新定義了 3 個單位，lvh, svh, dvh
  10. Web Compat：以使用者的角度來講，同一網站不同瀏覽器，有沒有真的會影響到使用體驗的部分。
    === 以下是從 Compat 2021 繼承下來 ===
  11. CSS Flexbox
  12. CSS Grid
  13. position: sticky
  14. aspect-ratio
  15. CSS Transforms

Chrome, Safari, Edge, Firefox 在 Interop 2022 規格所得的分數，會持續在這個網頁更新 https://wpt.fyi/interop-2022

結論

撰文的現在是2022年4月，CSS 從 responsive design, Flexbox, CSS Grid 等新技術到現在，已經十幾年的時間。以整個軟體工程來講，CSS 是年輕的語言沒錯，但十幾年下來，要找到新的突破點、優化點確實也不容易。

但畢竟任何網路應用，離不開網頁的呈現。幾個大的網路巨頭企業，也各自有自己的瀏覽器。但值得高興的是，這幾家巨頭企業在瀏覽器的部分是傾向於合作，而不是對抗。巨頭的合作對 CSS 這個語言，網路科技的發展，乃至於整個網路環境，都是一個比較好的發展方向。

]]> CSS Cascade Layers (@layer)，解決長期以來 CSS 競爭權重 (Specificity) 的問題 https://blog.yuyansoftware.com.tw/2022/02/css-cascade-layers-specificity/ Sun, 06 Feb 2022 05:18:46 +0000 https://blog.yuyansoftware.com.tw/?p=9625 前幾天看到一篇文章
https://developer.chrome.com/blog/cascade-layers/

Chromium 99、Firefox 97、Safari 15.4 將會支援 CSS Cascade Layers。雖然全瀏覽器的支援度還是不夠，但這幾家瀏覽器的大廠支援，就說明了 Cascade Layers 會成為未來的規格。

Cascade Layers 的官方文件在這裡
https://www.w3.org/TR/css-cascade-5/#layering

上面文件是 CSS Cascading and Inheritance Level 5，此份文件從 Level 3 到撰文的此時 (2022年2月) 已經出到 Level 6。CSS Cascading and Inheritance 就是負責定義在多個 CSS 語法下，一個 HTML element，最終是採用哪一個 CSS。

CSS Cascade 中很重要的一件事，就是搞清楚 Specificity (權重) 的概念。一般來講，用 HTML ID 來指定 CSS 的權重會大於用 CSS class，用 CSS class 來指定 CSS 的權重又大於用 HTML tag。

前幾年有人提出 BEM (Block Element Modifier) 命名的概念，它就是依照 HTML 區塊、區塊裡的元素、modifier 等，把所有名稱連起來，寫一個長長的 CSS selector。經驗夠的工程師就知道，這樣多難維護啊。重點是專案要快速完成吧，而不是把團隊的精力時間花在維護 BEM 命名。

稍微有點規模的專案，都有著複雜的 HTML 結構。你在開發某一頁時，根本不會知道你寫的這一個 CSS，跟已存在的 CSS 到底誰的權重重。如果已存在的 CSS 權重重，就暴力覆寫，大概會是這樣的情況。一整個專案的 CSS 有點像是在同一個平面，沒有任何結構，彼此競爭。

新的規格 Cascade Layers 試圖解決這個問題。以優先級來講，永遠先考慮 Cascade Layers，再考慮 Specificity (權重)。

我們來看一段 sample code

@layer base {
  div.abc {
    color: red;
  }
}

@layer theme {
  div {
    color: green;
  }
}

如果現在 HTML 裡有一個 <div class="abc">，裡面的字是什麼顏色？以權重來講，有指定 .abc 當然權重比較高。但是因為有使用 @layer，後宣告的 @layer 永遠覆寫之前宣告的 @layer，所以 <div class="abc"> 裡面的字是綠色。

在 CSS 檔案最上方，可以明確指定 layer 順序，例如加這一行到 CSS 檔案最上方

@layer theme, base; // 明確指定先 theme 再 base

這樣 @layer base 裡指定的 CSS 就會覆寫 @layer theme 裡指定的 CSS。

如同名稱 Cascade Layers，它把本來在同一個平面，互相競爭(權重)的 CSS，上下分層了。當然一般狀況，先宣告 base layer (下層)，再宣告 theme layer (上層)，甚至客製的元件 layer (更上層)。

上方 Chrome Developer 的文章有提醒

  1. 在 @layer 中的 CSS selector 仍然要寫全稱。本來寫什麼，在 @layer 裡就寫什麼，不要誤解 @layer 可以讓你的 CSS 少寫什麼。
  2. 如果同時有 layered / non-layered CSS，non-layered CSS 永遠先被採用，不管它的 selector 權重如何。所以要導入 Cascade Layers，先從基底的 CSS 開始導入，才不會影響整個專案。
  3. !important 會反轉優先順序。承第二點，如果同時有 layered / non-layered CSS，而且同時有 !important，@layer !important 的優先級高。
    如果同時有多個 layered CSS，而且同時有 !important，第一個 layered CSS with !important 的優先級最高。
    不管是 layered / non-layered 比較，多個 layer 比較，!important 都反轉了優先順序。
  4. @layer 的語法是宣告新的 layer。例如一 layer abc，如果你
    @import '....' layer(abc);
    之後再宣告 @layer abc，這個 @layer abc 無效。不會有任何權重，是完全被忽略。
    總之，Chrome Developer 的文章建議，CSS 檔案一開始就宣告 @layer，另一方面也明確的指定 layer order。

結論

Chromium 99、Firefox 97、Safari 15.4 將會支援 CSS Cascade Layers，這幾家瀏覽器的大廠支援，說明了 Cascade Layers 會成為未來的規格。

本篇文章走了一遍 CSS Specificity (權重)，但長期以來全部 CSS 在同一平面競爭權重，有總是暴力覆寫的問題。Cascade Layers 可以將整個專案的 CSS 結構化，由下到上分為 base, theme, components 等，是一個合理又聰明的做法。上方圖層 (layer) 覆蓋下方圖層，也是一個清楚而直覺的想像。

Cascade Layers 可能會成為未來的規格，值得投資時間，有在做前端的讀者可以參考看看囉。

延伸閱讀：從 Compat 2021 到 Interop 2022，史上第一次所有主流的瀏覽器廠商，合作解決瀏覽器相容性的問題

]]> Bootstrap 5.1 主要更新：開始使用 CSS Grid 實作 grid system，新的元件，更多的 CSS 變數 (custom property) https://blog.yuyansoftware.com.tw/2021/08/bootstrap-5-1-css-grid-custom-property/ Tue, 24 Aug 2021 07:46:34 +0000 https://blog.yuyansoftware.com.tw/?p=8377 圖片來源 Bootstrap官方部落格

https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/
前幾天 (2021年 8/4) Bootstrap 5.1 釋出了。每次看到新的 Bootstrap 版本釋出，都會有感於時間過的真的飛快。

上一篇我關於 Bootstrap 5 的文章是在去年底 (2020年底)，一轉眼 2021 年大半年又過了。

以下是 Bootstrap 5.1 的主要更新：

使用 CSS Grid 實作 grid system

使用 CSS Grid 實作 grid system 是 Bootstrap 5.1 的主要更新。很多專家認為 CSS Grid 是繼 Flexbox 後，近代 CSS 的另一個里程碑。Bootstrap 4 開始使用 Flexbox 實作 grid system，Bootstrap 5.1 預設也是 Flexbox 實作，但可以切換為 CSS Grid 實作。

同時也釋出了新的 CSS Grid 文件，5.0 還沒有這頁文件，從 5.1 開始。
https://getbootstrap.com/docs/5.1/layout/css-grid/

Bootstrap 5.1 如何切換 Flexbox 實作到 CSS Grid 實作？找到檔案位置 /bootstrap-5.1.0/scss/_variables.scss, 設定這兩個變數

$enable-grid-classes: false; 
$enable-cssgrid: true;

改好了重新 compile SCSS。Bootstrap 5.0 的 _variables.scss 沒有 $enable-cssgrid 這個變數，所以可以確定是 5.1 引入的。

一樣是 Bootstrap Grid System row/col 的架構，只是將 row 換成 grid，col 換成 g-col。例如這樣三個 div 分別在 12 份中佔有一份、兩份、和三份。
.grid 設定 display:grid，g-col-* 設定 grid-column

<div class="grid">
  <div class="g-col-1">
    Column
  </div>
  <div class="g-col-2">
    Column
  </div>
  <div class="g-col-3">
    Column
  </div>
</div>

.grid 同時定義了 CSS gap。相較於用 padding/margin 去做 gutter，gap 是新一代做 gutter 的方式。如果仔細去看，每個 g-col 本身沒有 padding/margin，但卻能彼此分開，這不符合 CSS box model 阿？larry 看到一種說法，gutter 如字面翻譯是水溝，在 CSS Grid 裡面 gutter 本身就是一種物件，會佔面積。而 gap 只是定義了 gutter 的寬度。

下方是 Bootstrap CSS Grid 文件中的 sample code。這個 sample 做了一個 9×9 的 grid，第一個 child 是第一行第一個，第二個 child 是第二行第二個，第三個 child 是第三行第三個。以賓果遊戲來說，是左上到右下連線的圖形。

<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

從這個 sample 我們可以看出

  1. Bootstrap 官方鼓勵 inline CSS custom property 的使用。inline 指定 --bs-rows, --bs-columns 是不是更靈活，redundant code 更少一些。
  2. g-start-* 可以指定水平開頭的位置，inline CSS grid-row 可以指定是屬於第幾行。

Offcanvas in navbar (new component)

Offcanvas 在 Bootstrap 5.0 已經新增了，是一個新的元件。觸發時左、右、上、下其中一側彈出視窗，按按鈕或按叉結束時再縮回原處。

Bootstrap 5.1 將 Offcanvas 和 navbar 做整合。尤其手機版的 navbar 通常會縮成一個 toggle button，點了之後可以指定 Offcanvas 從哪個方向彈出，navbar 的內容可以放在 Offcanvas 裡面。

Placeholder (new component)

將還沒 load 好的文字，用銀色區塊替代。例如 Facebook，早就是這樣做 placeholder。

在要顯示銀色區塊的 DOM (不一定是銀色，可以自行設定 background-color)，加上 CSS class .placeholder，DOM 的寬度要設定一下。container 可以加上 CSS class .placeholder-glow 或 .placeholder-wave，讓 placeholder 區塊有小小的水波閃爍。

.bg-* & .text-* utility 的實作變數化

Bootstrap 5.0 中 background color utility 實作如下 (text color utility 類似，僅用 background 舉例)

.bg-success {
  background-color: #198754 !important;
}

Bootstrap 5.1 改為

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

這樣如果你要微調 .bg-success 的顏色，在你的專案裡重新設定 --bs-success-rgb 就好了。未來 Bootstrap 會接著把其他 utility 也變數化。Bootstrap 的演進有這樣的味道：Bootstrap 只管架構，顏色等屬性由 CSS 變數設定。對軟體工程有研究的讀者應該知道，資料 / 邏輯分離的概念。

總結

Bootstrap 5.1 開始使用 CSS Grid 實作 grid system，而且又新增了很多元件。從 Bootstrap 的發展和文件可以看出來，Bootstrap 非常大量的使用 CSS custom property，同時也鼓勵開發者在專案裡使用 CSS custom property 做出變化。CSS Grid、Bootstrap 的新元件、CSS custom property 的使用，都是很值得參考的。

]]> CSS Comparison Functions：min(), max(), and clamp() https://blog.yuyansoftware.com.tw/2021/03/css-min-max-clamp/ Tue, 23 Mar 2021 07:09:50 +0000 https://blog.yuyansoftware.com.tw/?p=6857 隨著回應式網頁的普及，各大瀏覽器都已經支援 CSS min(), max(), clamp()。使用這三個 function 除了可以簡化 CSS 程式碼，更因為可以內嵌運算式，加上 CSS 目前是朝原生參數化的方向在走，在實際使用上可以有更多的想像和寫法。

min(), max(), clamp() 的官方文件在這裡
https://www.w3.org/TR/css-values-4/#comp-func

這份官方文件是 “CSS Values and Units Module Level 4″，狀態是 WD (Working Draft)。對 CSS 演進方式，和成熟過程不熟的朋友，可以參考我之前的文章 CSS 的演進方式

有個觀察點滿有趣的，WD 是四個成熟過程中最低的，也就是最不成熟的，但現在主要瀏覽器都已實作 min(), max(), clamp()。所以讀者在看一個 CSS 和它的官方文件時，該文件的成熟狀態並不代表某個 CSS 的瀏覽器支援度。

這份文件的第 11 章是 “Mathematical Expressions”

  • 11.1 Basic Arithmetic: calc()
  • 11.2 Comparison Functions: min(), max(), and clamp()
  • 11.3 Stepped Value Functions
  • 11.4 …

大概架構是這樣。calc() 大家都熟悉，瀏覽器也都支援。再來是 min(), max(), and clamp()，是本篇要聊的。11.3 之後就有很大的瀏覽器支援度問題了，可能也就是這份文件，以整份文件而言是 WD 狀態的原因。

回到 min(), max(), clamp()，我們先看 min(), max()，都是在多個參數裡，取出最小 / 最大值，例如

width: min(800px, 70%, 50vw);

隨著瀏覽器大小，70% 跟 50vw 是動態的，min() 也會動態的取三個數值的最小值。當然，如果是 max() 就是取最大值。再來，min(), max() 可以在參數裡加運算式

width: min(calc(50% - 20px), 100px);
width: min(50% - 20px, 100px);  // 效果與上一行同, 可以拿掉 calc

還有一個滿常見的用法是，元素的寬度隨容器寬度比例，但不希望元素太寬，可能會這樣寫

width: 80%;
max-width: 600px;
//====== 下面一行可以取代上面兩行 =======
width: min(80%, 600px);

同理，如果希望元素的寬度隨容器寬度比例，但不希望容器縮小時元素太小，可以這樣寫

width: 20%;
min-width: 100px;
//====== 下面一行可以取代上面兩行 =======
width: max(20%, 100px);

clamp() 則是吃三個參數，依序是最小值，動態值，最大值。如果當下最小值 < 動態值 < 最大值，return 動態值。如果當下動態值 < 最小值，return 最小值。如果當下最大值 < 動態值，return 最大值。

width: clamp(100px, 30%, 500px);
width: clamp(100px, 30% - 10px, 500px); // 也可以吃運算式

接下來就是 clamp() 最厲害的應用：用它來設定 font size。傳統製作回應式網頁時，是用 media query 來設定 font size。例如螢幕寬度 300px~500px，font-size: 12px; 螢幕寬度 500px~800px，font-size: 14px; …等。但如果用 clamp() 設定 font size，一行解決，而且是「真回應式」

font-size: clamp(1rem, 1vw + 0.5rem, 3rem);

結論

min(), max(), clamp() 這 3 個 function 基本上可以應用在

  1. 控制元素本身的寬 / 高
  2. 控制元素間的 padding, margin
  3. 最有用的是，用 clamp() 設定 font size

而且這 3 個 function 沒有瀏覽器支援度的問題，是可以實際使用在專案的語法。需要寫前端的讀者可以參考看看。

]]> Bootstrap 5 主要更新：不再相依 jQuery，新增 Utilities API，使用 CSS custom properties https://blog.yuyansoftware.com.tw/2020/12/bootstrap-5-features/ Fri, 11 Dec 2020 11:44:54 +0000 https://blog.yuyansoftware.com.tw/?p=5820 圖片來源 Bootstrap官方部落格

https://blog.getbootstrap.com/2020/12/07/bootstrap-5-beta-1/
Bootstrap 5 beta 幾天前發佈了，時間過得真的很快，Bootstrap 4 beta 發佈時 (2017 年 8 月) 我有一篇文章 Bootstrap 4 主要更新：Grid System、CSS

2018 年我還有一篇關於 Bootstrap 4 Flexbox 的文章 Bootstrap 4 Flex

本篇會走一遍 Bootstrap 5 的主要更新，懂前端工程的讀者，可以看看有沒有東西是值得拿來使用，或進一步再去研讀的。以下大致是從 Bootstrap 5 比較重要的部分，往比較 minor 的部分排序。

移除 jQuery 的相依性

移除對 library 的相依性就軟體工程來說本來就是好的，開發者也不用在引入 Bootstrap 前先引入 jQuery，可能還會有版本相容的問題。以整個專案來說，應該也會更輕量，而且因為使用原生的 JavaScript，效能應該也應該會更好。

Utilities API (with the state option)

https://getbootstrap.com/docs/5.0/utilities/api/
Utilities API 是基於 Sass maps 的技術，可以先看一下 Sass maps 的官方文件
https://sass-lang.com/documentation/values/maps

基本上 Sass maps 就是一連串的 key / value pairs，用小括號括起來。調用端可以用 map.get function 去把指定變數裡的指定的 key 的值讀取出來，詳細寫法跟變化可以參考上方 Sass maps 的官方文件。使用 Sass maps 可以把 CSS 的設定組織化。

Bootstrap 5 基於 Sass maps 的架構衍伸出一套讓開發者可以自行設定 utility classes，就是 Utilities API，而且 Bootstrap 5 預設的 utility classes 也是用 Utilities API 實作的。這次 beta release 特別提到 Utilities API 加入了 state option，可以指定 pseudo-class 像是 hover、focus 等。

Utilities API 的主要功能在產生同樣屬性，不同數值的 utility classes。larry 覺得 Sass maps 和 Bootstrap 5 Utilities API 都是滿值得參考的。

使用 CSS custom properties 實作底層 CSS

CSS custom properties 讓原生 CSS 可以支援變數，而不需要 Sass 或其他語言來協助。變數要以 – – (double dash) 開頭，用 var function 讀取，例如

--my-text-color: #554433;
color: var(--my-text-color);

如果要切換樣式，可以這樣寫

.my-text-style1 {
  --my-text-color: #554433;
}
.my-text-style2 {
  --my-text-color: #998877;
}
...
color: var(--my-text-color); // 這一行不用動

而不是

.my-text-style1 {
  color: #554433;
}
.my-text-style2 {
  color: #998877;
}

所以同一架構不同樣式，就下不同的 CSS 變數就好，而不是重寫 CSS，這樣管理或擴充樣式的話都會容易而且輕量很多。實際 Bootstrap 5 底層是怎麼使用，有興趣的讀者可以再去研究看看。

RTL (right-to-left text) 右到左排序的文字

https://getbootstrap.com/docs/5.0/getting-started/rtl/
就是橫式的文字由右到左排序 (一般我們習慣網頁文字是由左到右排序)。要使用 RTL，要先在 <html> 上設定 dir=”rtl” 還有 lang 兩個屬性。詳細的寫法參考上方官方文件。

重新命名某些 CSS Class，用 start / end 取代 left / right

為了支援 RTL，帶有 left / right 意涵的 CSS class，例如 ml-3 代表 margin-left，將會用 start / end 的邏輯來取代。這樣當換文字方向時，不用整篇 css 重改一遍。例如在 Bootstrap 5 請使用 ms-3 (s means start) 代替 ml-3，在 LTR (左到右) 文本時，ms-3 是 margin-left，但在 RTL (右到左) 文本時，ms-3 是 margin-right。

加強了 Grid System

新增 xxl 的 breakpoint，gutter class (cell 間距) 的設定，等等。

新樣式的輸入框，選擇按鈕

包含 Floating labels，New file input，checkbox，radio buttons，switch buttons 等等。

全新的 Customize 文件網頁

https://getbootstrap.com/docs/5.0/customize/overview/
如果要客製化設定一些 CSS，請參考這些 coding convention。

升級 Popper.js 到 v2

Popper.js 就是一些 tooltip / popup 的效果。

使用 data-bs-attribute 取代原本的 data-attribute

例如本來的 data-toggle=”dropdown”，現在是 data-bs-toggle=”dropdown”。加 bs 可以讓開發者更好辨認出這是 Bootstrap 的屬性。

用純 CSS 的方法來指定 Toast 的位置

在 Bootstrap，Toast 指的就是小的通知方塊，也許是服務提供方的來訊，也許是其他用戶的來訊。開發者可以使用純 CSS 的方法來指定 Toast 的位置。

總結

以上是 Bootstrap 5 的主要更新，Utilities API，CSS custom properties，新的 Grid System，新的 Customize 文件，這些都是 larry 覺得滿有參考價值的部分。

]]> Bootstrap 4 Flex https://blog.yuyansoftware.com.tw/2018/04/bootstrap-4-flex/ Thu, 19 Apr 2018 08:25:00 +0000 圖片來源 Laravel官方部落格

http://blog.getbootstrap.com/2018/04/09/bootstrap-4-1
Bootstrap 4.1 前幾天釋出了，主要只是新增一些 class 可供使用，沒什麼 major change. larry 只有注意到一點：Added new .flex-fill, .flex-grow-*, and .flex-shrink-* utilities.

我想趁這個機會從頭看一遍 Bootstrap flex utility
https://getbootstrap.com/docs/4.1/utilities/flex

如 native css 一樣，要使用 flexbox, 要在 container 上宣告 class="d-flex" 或是 class="d-inline-flex" (可以看出來 d-inline-flex 是行內元素)

接著你可以指定 flexbox 裡面 children 排列的方向，例如：

  • class="d-flex flex-row" (橫排，左到右，這是預設值，一般不用加 flex-row)
  • class="d-flex flex-row-reverse" (橫排，右到左)
  • class="d-flex flex-column" (直排，上到下)
  • class="d-flex flex-column-reverse" (直排，下到上)

這邊 flex-row, flex-column 對應的是 css 的 flex-direction

justify-content 指定左右方向如何分佈

  • class="d-flex justify-content-start" (從左到右，這是預設值，一般不用加 justify-content-start)
  • class="d-flex justify-content-end" (從右到左)
  • class="d-flex justify-content-center" (置中)
  • class="d-flex justify-content-between" (平均分配間距)
  • class="d-flex justify-content-around" (平均分配間距，且分配的間距再分配到單一 child 的左右)

align-items 指定垂直方向如何分佈

  • class="d-flex align-items-start" (從上到下，這是預設值，一般不用加 justify-content-start)
  • class="d-flex align-items-end" (從下到上)
  • class="d-flex align-items-center" (垂直置中)
  • class="d-flex align-items-baseline" (這比較特殊，不常用，有興趣的朋友請自行 study)
  • class="d-flex align-items-stretch" (所有 children 垂直方向佔滿 container)

到這邊大家會不會想到一個問題，如果 flex-column 搭配 align-items-center 會如何？(以下使用 native css 測試，如果 Bootstrap 的 css class 結果不一樣請讓我知道 🙂

flex-direction: column 搭配 align-items: center，3個 children 依然由上往下，但會水平置中

Child 1
Child 2
Child 3

flex-direction: column 搭配 justify-content: center，3個 children 會垂直置中

Child 1
Child 2
Child 3

flex-direction: column 搭配 justify-content: flex-end，3個 children 會向下對齊

Child 1
Child 2
Child 3

flex-direction: column 搭配 justify-content: center 且 align-items: center，3個 children 會水平且垂直置中

Child 1
Child 2
Child 3

大家有發現嗎？justify-content 是管水平方向對齊的，align-items 是管垂直方向對齊的。但當 flex-direction: column 時，justify-content 與 align-items 管的方向顛倒了。

align-self 下在 child 身上，可以指定單一 child 的對齊方式

  • class="align-self-start"
  • class="align-self-end"
  • class="align-self-center"
  • class="align-self-baseline"
  • class="align-self-stretch"

flex-fill 是 Bootstrap 4.1 新的 css class，下在 child 身上，就是 flex:1，等分占滿的意思。

flex-grow-*，flex-shrink-* (* 只能是 0 或 1) 也是 Bootstrap 4.1 新的 css class，下在 child 身上，對應 native css 的 flex-grow，flex-shrink。

官方文件有提到，justify-content，align-items 與 margin-(top)(bottom)(left)(right): auto 組合會有很多不同的排列效果。

flex-wrap 的部分有 flex-nowrap，flex-wrap，flex-wrap-reverse。下在 container 身上，管理 children 是否換行。

children 可以下 order-* (* 可以是 1 ~ 12)，指定 children 的排列順序。

align-content 操縱的是 children 的對齊線，跟 align-items 不同的是 align-items 以 children 為單位去做對齊，而 align-content 操縱的是行線。

  • class="align-content-start"
  • class="align-content-end"
  • class="align-content-center"
  • class="align-content-around"
  • class="align-content-stretch"

以上就是 Bootstrap 4.1 flex utility 所有內容。簡短結論一下吧，flexbox 是好東西，建議對前端有興趣的讀者使用。有很多排列組合，尤其是對齊方面，不要糾結他們，或是死背什麼，一切還是以設計和真實的需求為主～

]]>