Category: CSS

WebKit 要支援 nested CSS 了

從龍哥這邊看到的消息，WebKit 要支援 nested CSS 了：

原文在「Try out CSS Nesting today」這邊，就是這樣的寫法：

.foo {
  color: green;
 .bar {
    font-size: 1.4rem;
  }
}

這個在很多預處理的工具都會支援，然後編譯成展開的形式。

比較特別的是在 nested CSS 中不支援 element 的指定：

main {
 article { ... }
}

他寫的理由我是看不太懂：

That code will fail, because article begins with a letter, and not a symbol. How will it fail? The same way it would fail if you’d misspelled article as atirlce. The nested CSS which depends on that particular selector is simply ignored.

反而要用個奇怪的設計去繞開：

main {
 & article { ... }
}

這邊是真的沒看懂在閃什麼問題...

CSS 的 feature detection：@support

在「Conditional CSS」這篇裡面在講很多 CSS 條件過濾的方式，裡面看到有 @support 這個規格，可以透過 feature detection 的方式來過濾：「CSS at-rule: @supports: selector()」。

文章作者給的範例是這樣：

@supports selector(:has(p)) {
  .card-thumb {
    aspect-ratio: 1;
  }
}

在瀏覽器支援 :has(p) 的情況下才指定裡面的 CSS。

翻了一下 @support 在各家瀏覽器上實做的情況：在 Firefox 上是 69 開始支援，推出的日期是 2019/09/03。在 Chrome 上是 83 開始支援，推出的日期是 2020/05/19。在 Safari 上是 14.1 開始支援 (對應到 iOS 版本是 14.5)，推出的日期是 2021/04/26。

從日期可以看出來算是比較新的功能，但主要幾個大的瀏覽器都支援了。

這個讓我想起來早期利用各家瀏覽器的 bug 產生出的各種 hack：「Browser Specific Hacks」。

jQuery 3.6.2

看到 jQuery 出新版的消息：「jQuery 3.6.2 Released!」。

這個版本的說明裡面針對了 :has() 這個功能著墨，主要還是因為這功能 jQuery 支援很久了，而 Chromium 與 Safai 在最近都開始支援了：「Issue 669058: CSS selectors Level 4: support :has()」、「Using :has() as a CSS Parent Selector and much more」。

不過看起來 jQuery 要整合原生的 :has() 還是有技術困難，因為裡面可能會包括 jQuery 自己定義的 selector extension：

That was problematic in cases where :has() contained another jQuery selector extension (e.g. :has(:contains("Item"))) or contained itself (:has(div:has(a))).

總之，難得又看到 jQuery 的消息... 前一版的 3.6.1 是 2022/08/26，而 3.6.0 則是再一年多前的 2021/03/02，再往前面是 3.5.1 的 2020/05/04 與 3.5.0 的 2020/04/10。

是個歷史...

把所有在 CSS 裡面「有名字」的顏色都呈現出來

前幾天在 Hacker News Daily 上看到「Show HN: A color picker for named web colors (arantius.github.io)」這個作品，把 CSS 裡面有名字的顏色都呈現出來：「Named Colors Wheel」。

移動上去可以看到每個顏色在 CSS 被定義的名稱與色碼，另外從 html code 裡面可以看到他參考了「<named-color>」這份資料。

另外在 Hacker News 上的這則留言也讓我笑的蠻開心的，greenyellow (在黃色 yellow 的左邊) 與 yellowgreen (在 greenyellow 的右上) 的差異：

Also: Finally, a tool to help me decide between greenyellow and yellowgreen.

另外看到這種圖會讓我想到四色定理 (Four color theorem)，不過跟這個主題沒什麼關係就是了...

透過 CSS 達到可折疊的 tree view

在 Hacker News 上看到「Tree views in css」這篇，講怎麼用純 CSS 技巧達到可折疊的 tree view：

主要是用了 ul 與 li 的 html 結構來搭建 tree view 的意義，再透過 <summary> 與 <details> 這兩個本身就有 toggle 能力的元素來操作展開與收合，後面就是 visual effects 的設計了。

從 Can I use 這邊可以看到支援度沒什麼問題 (連 Android 4.4 的 WebView 都支援)，除非你還得跟 IE11 奮戰：「Details & Summary elements」。

CSS 的 :has() 有新進展了

在「Using :has() as a CSS Parent Selector and much more」這邊看到 Safari 宣佈對 :has() 的支援，查了一下 Can I use... 上面的資料「:has() CSS relational pseudo-class」，看起來是從 15.4 (2022/05/14) 支援的。

隔壁 Google Chrome 將在下一個版本 105 (目前 stable channel 是 104) 支援 :has()，沒意外的話 Microsoft Edge 應該也會跟上去，看起來只剩下 Firefox 要開了。

先前在「Chromium 的 :has() 實做進展」這邊有翻一下進度，看起來 Chromium 這邊要進入收尾階段了。

等普及後一些延伸套件裡的寫法也可以用 :has() 來處理了，就不用自己在 javascript 裡面檢查半天...

DigitalOcean 買下 CSS-Tricks

Hacker News 首頁上看到的消息，DigitalOcean 買下 CSS-Tricks：「CSS-Tricks is joining DigitalOcean!」，DigitalOcean 的公告在「CSS-Tricks joins DigitalOcean, expanding our commitment to community」，而 Hacker News 上對應的討論在「DigitalOcean acquires CSS-tricks (css-tricks.com)」。

不知道 DigitalOcean 的想法，有人猜算是買媒體的一種，也有人猜是因為 css-tricks.com 的 SEO 分數超高。

對 css-tricks.com 這邊來說，基本上就是脫手賣掉？不過沒看到金額...

CSS4 的 aspect-ratio

在 Hacker News Daily 上看到 aspect-ratio 這個新的 CSS property 的介紹：「Aspect Ratio is Great」，對應的 Hacker News 討論則是在這：「Aspect-ratio is great (css-irl.info)」。

在 MDN 上的解釋是這樣：

The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

對於圖片來說，這可以用來指定希望 crop 多少的範圍。

作者也有提到以往的 hack 方式是透過 padding 與 calc + var 的方式達到，現在讓瀏覽器直接處理就簡單不少了，這張示意圖就蠻清楚表達想要做的事情是怎麼樣：

然後看了一下 Can I use 上面的資料，看起來許多大宗的瀏覽器都支援了，也包括了 Firefox 的 ESR 版本 (91，在 2021 年八月的時候釋出的)；不過仔細看會發現 Safari 這邊寫 15 才支援，這代表 Catalina (10.15) 與 Big Sur (11) 的 Safari 都不支援，而這兩個版本目前 Apple 都還有支援，另外在行動裝置上，這也代表 iOS 的要求是 15+，所以目前還在支援的 iPhone 5S 與 iPhone 6 用的 iOS 12 也會遇到問題：

不愧是新世代的 IE，對於需要服務比較一般性的情況應該還是不能用...

語意化的 CSS 設定 (Contextual awareness) 減少 side effect

前幾天在 Hacker News 上看到 CSS-Tricks 上的文章「You want enabling CSS selectors, not disabling ones」這篇，在講 CSS 的設計問題，對應的 Hacker News 討論在「You want enabling CSS selectors, not disabling ones (css-tricks.com)」這邊。

文章裡面引用文章裡面提到的文章也都蠻值得看的：「You want enabling CSS selectors, not disabling ones (2021/03/08)」、「Axiomatic CSS and Lobotomized Owls (2014/10/21)」。

其中 2014 年那篇居然是 A List Apart 上的文章，好久沒看到了這個站了... 也發現居然不在 RSS/Atom feed 清單裡面，重新訂起來。

這邊拿 A List Apart 上面的圖來說明，出自「CONTEXTUAL AWARENESS」這個段落的例子。

在很多段落時，我們常使用 margin-top (或是 margin-bottom，例子可以自己變換) 來設定間距，也就是 (a) 的例子。但可以看到第一個元素就會「多出來」：

A List Apart 裡面提到的解法是 * + * (或是 p + p，看你怎麼選 CSS selector)，也就是前面有相鄰的元素才需要設定 margin-top。

回到 CSS-Tracks 上的文章，有些人會這樣指定 CSS (這邊用 margin-bottom，所以搭搭配的是 :last-child)：

.card {
  margin-bottom: 1rem;
}

/* Wait but not on the last one!! */
.parent-of-cards :last-child {
  margin-bottom: 0;
}

也就是全部都先加上 margin-bottom，然後針對最後一個元素拿掉 margin-bottom。而另外的版本則是：

.card:not(:last-child) {
  margin-bottom: 1rem;
}

或是：

/* Only space them out if they stack */
.card + .card {
  margin-top: 1rem;
}

這樣就不用蓋來蓋去，可以降低 side effect：margin-bottom 可能會在其他地方指定，你設為 0 可能是不對的值；另外寫成兩組時 CSS 的優先順序其實是不同的，Mozilla 的 Specificity 可以參考，Specifishity 這個網站給了很有趣的 cheatsheet (你要先了解才能當 cheatsheet 用)：

在文章最後面有提到 gap 這個用法，查了一下「CSS property: gap: Supported in Grid Layout」，看起來現代的瀏覽器應該是都支援了，不過如果要支援舊的瀏覽器的話就是問題...

另外順便提一下，早期大家會偏好用 + 是因為 IE7+，而 :last-child 則是 IE9+ 了：「CSS Selectors and Pseudo Selectors and browser support」。雖然現在看起都是時代的眼淚了，但可以了解一下 2014 年的時候為什麼會偏好 + 的設計。

Visual regression testing

看了「Catching CSS Regressions and Visual Bugs in Continuous Integration」這篇，原來這個叫做 visual regression testing，可以拿來檢查視覺上的差異：

出自「Visual Regression Testing Tools」。

這種 pixel-by-pixel 的測試也可以包在 CI 裡面，至少記錄起來可以在之後查。

看起來有不少 open source 工具與付費的服務可以用，不過機器的記憶體都會需要大一點 (需要瀏覽器的 rendering engine)。