Chromeの疑似クラス「:has()」がjQueryの「:has()」に悪影響を及ぼす問題が解決へ。Chromeは回避策実装、jQueryは新バージョンで対応

2022年12月22日

8月にリリースされたChrome 105で実装されたCSSの疑似クラス「:has()」が、jQueryに以前から備わっている「:has()」に悪影響を及ぼし、一定の条件下ではjQueryを使ったWebサイトが壊れるなどの問題を引き起こすことがあることを、9月の下記の記事で紹介しました。

参考:Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性

その後、Chrome側ではこの問題に対応する回避策が実装され、一方のjQuery側でも先日リリースされたjQuery 3.6.2で対応が行われたことが明らかになりました

Chrome、jQueryそしてCSS WGがそれぞれ対応

Chrome側での回避策は、「Issue 1358953: :has pseudo-class breaks jQuery custom selectors」で提起され、M107ビルドで修正されたと報告されています。

回避策についての議論を追っていくと、「:has() 」の引数がないときには無効(invalid)とする、という修正が行われたようです。これで完全ではないものの大半のケースで問題が解消される見通しとされています(Chrome 107が10月にリリース済みなので、すでにこの修正が入っているはず)。

またCSSワーキンググループのこの点について議論し、以下の解決を見たと報告されています(下記の結論は、Chromeの回避策である「:has()」を無効にするのとほぼ同様のこと(hasをunforgivingにする)を仕様にする、という意味だと理解しましたが、ちょっと自信がありません……)。

RESOLVED: Make has unforgiving RESOLVED: Limit forgiving behavior to :is and :where and remove it everywhere else

そして12月13日にリリースされたjQuery 3.6.2でも、この:hasの悪影響に対応した修正が行われました

fig

jQuery 3.6.2の対応によって、以前のChromeであっても問題が発生しないようになったため、既存のjQueryを利用しているWebサイトがあれば、最新のjQueryへ入れ替えることを検討されてはいかがでしょうか。

このエントリーをはてなブックマークに追加
follow us in feedly


関連タグ JavaScript / Web標準 / プログラミング言語 / Chrome / jQuery / Webブラウザ



タグクラウド(β版)

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準

アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed


最新記事10本