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

2022年9月21日

最近リリースされたSafariとChromeで、CSSのSelectors Level 4(現時点でドラフト)仕様にある疑似クラス「:has()」が相次いで実装されました。

疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。

ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能(カッコ内の要素を持つ親要素を選択する)を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました(同じエンジンを利用しているMicrosoft Edgeも同様と思われます)。

これがどのような問題で、現時点でどのように解決されつつあるのかなどについて、Web標準の動向に詳しい矢倉眞隆氏が一連のツイートで解説していましたので、許可を得てツイートを転載します。

一連のツイートは2部に分かれています。前半ではChromeで問題が見つかり、その概要を把握するところ。後半は、より詳しい問題の中身と解決の方向性についてです。

まずは前半。

ここまでが前半です。

後半では、問題を解決しようとしているChromeとjQueryの状況、より詳しい発生条件、そして今後の見通しなど。

この問題に遭遇するケースはそれほど多くないとは思いますが、Webサイトの制作関連の仕事をしている方は動向に注意された方がよいかもしれません。

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


関連タグ HTML/CSS / Web技術 / Web標準 / jQuery



タグクラウド(β版)

クラウド / 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本