Tag: has

Firefox 的 :has() 支援度問題

在 Can I Use... 上面的「:has() CSS relational pseudo-class」裡面可以看到 Firefox 一直都還沒支援，只有在 nightly 版本上面預設有開，這也代表還沒辦法很穩定的用這個 selector... (除非你直接忽略掉 Firefox)。

看到「Prodding Firefox to Update :has() Selection」這篇，Eric Meyer 在抱怨 Firefox 的這個問題，就算是 nightly 的版本也還是有奇怪的 bug，會抓不到 :has() 條件，需要用 contenteditable 的 workaround 觸發 Firefox 的計算。

在 Mozilla 的 Bugzilla 上可以看到票還開著：「Implement the :has() pseudo class」，看起來這陣子是一直有在更新，應該是有資源在上面追進度。

等到真的支援，就可以在 querySelectorAll() 裡面直接用 :has() 了，現在 Firefox 的情況讓 Userscript 寫起來有點卡...

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

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 ...，而是連廣告內容都拿掉)