Tag: css4

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 裡面檢查半天...

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，對於需要服務比較一般性的情況應該還是不能用...

Chromium 的 :has() 實做進展

前陣子在「Chromiu 看起來正在實做 CSS4 的 :has()」這邊提到了 Chromium 的 :has() 實做，對應的票在「Issue 669058: CSS selectors Level 4: support :has()」這邊，不過看起來當時沒有實做完整，而且有測出問題：

The following css/selectors  web tests are failing on below platform:

css/selectors/has-basic.html - Failing on chrome/edge/firefox/safari/webkit
css/selectors/parsing/parse-has.html - Failing on chrome/edge/firefox/safari/webkit

昨天又看到新進度了：「Supports all ':has' relative argument cases」。

Supports all ':has' relative argument cases

Currently the relative selector is not supported yet, so this CL
provides the relative argument cases as follows.
 - :has(:scope > <complex-selector>)
 - :has(:scope ~ <complex-selector>)
 - :has(:scope + <complex-selector>)

看起來補上了之前沒實做的部份。更完整的討論過程可以參考 Gerrit 的「Supports all ':has' relative argument cases」這邊。

沒問題的話應該就是時間的問題了，也許三個月到半年左右？

Chromium 看起來正在實做 CSS4 的 :has()

先前一直都有在盯著「Issue 669058: CSS selectors Level 4: support :has()」這個，主要是有這個功能會對於很多應用很方便，無論是對 designer 在設計上，或是對 javascript developer 的操作。

在 Chromium 上對應的 commit 在「Supports :has() pseudo class matching」這邊，可以看到目前只實做了一部分：

So this CL only supports :has argument selectors starting with
descendant combinator. Argument selectors starting with other
combinators are not supported yet.
 - .a:has(.b)    : Supported
 - .a:has(> .b)  : Not supported yet
 - .a:has(~ .b)  : Not supported yet
 - .a:has(+ .b)  : Not supported yet

但至少是個進展了...

uBlock Origin 支援的 :has()

查資料的時候發現 uBlock Origin 的「Static filter syntax」已經自己實作 :has() 了 (雖然有一些限制)。

這個 CSS4 (draft) 的特性目前還沒有瀏覽器支援，所以 uBlock Origin 決定自己來：

This is a planned CSS4 operator, but no browser supports it yet. I decided to go ahead and implement it so that it can already be used. See The Relational Pseudo-class: :has() in the Selector Level 4/Editor's Draft.

由於效能問題，要求一定要有 hostname，而不能是 global rule：

uBO's implementation is simplified so as to ensure performance. The :has operator must be used with at least one hostname (it must be specific), and must be of the form (example)[.]

這對於 html block 長的幾乎一樣，只有在某個地方多出 Promoted by ... 之類的結構處理起來很方便，可以拿來找出「裡面有廣告 div 的母體 div」然後整包處理掉... (你不會只想要拿掉 Promoted by ...，而是連廣告內容都拿掉)