2023年10月現時点で、:has()セレクタが対応していないメジャーブラウザは、Firefoxのみです。
でも、このブラウザを無視することもできないので、以前からライブラリを作ろうかとか、対応方法を考えたりしていて、とりあえず現在の簡易な対応策を記載しておきます。
非対応ブラウザの場合の別表示方法
cssの@supportクエリで、以下のように記述すると、非サポートの場合のセレクタを書くことができます。
@supports selector(:has(+ *)) {
.no-support {
display: none;
}
}
残念ながら、個別に対応を書かなければいけないのと、:has()を自動検出するのではなく、クラス名などを追記しておく必要があるので、あまり効率的とは言えないが、暫定作としては悪くはない。
裏技っぽい感じだが、知っておいて損はないやりかたかも。
Javascriptでハックプログラム制作中
個人的には、:has()は、とても使いやすい機能なので、是非ともFirefoxで正規採用してもらいたいが、機能インされたとて、アップデートされていないユーザーがいたら公開サーバーでは、すぐには使えないのが現状。
そこで、現在、Javascriptで、Firefoxで:has()を自動検知して、表示再現をするライブラリを構築中。
簡単な技術フローを記載しておく。
1. styleタグ、または、linkタグを辿って、読み込むcssの文字列一覧を取得（cdnなどから大量になりそうな場合は、特定ファイルに限定する機能の想定）
- この時、@importでの読み込みファイルにも対応予定
- document.stylesheetsを使っても、Firefoxでは、:has()セレクタが除外されてしまうので、仕方なく文字列取得を行う。
2. 読み込んだcss文字列から、正規表現で、:has(.+?){...}を取得する。
- これで、:has()の条件と、それに関連する対象のセレクタが取得できる。
- 条件に基づいたFirefox用のスタイルシート（セレクタ）を新規構築して追加（正規表現でヒットした同じ設定）
- data-has="true"などの属性を付与したセレクタを構築
3. :has()の条件をjavascriptのobserverで監視
- 監視しながら、:has()の条件にマッチした場合に、新規作成したセレクタに適用する属性を付与する。
- 監視で、アンマッチになった場合は、属性を削除する。
まだ開発段階
言い訳がましいが、方法だけはおおよそ確定したので今回ブログで掲載しておくことにした。
cssは、記述が整えられない場合が多いため、全ての書き方にマッチできないかもしれないが、少なくとも自分が便利に使えれば、まずはそれでヨシとする。
他の人が使いたいニーズや、機能要望、対応箇所の拡大などがオーダーされれば、OSS的に対応していくこととする。
そんなワケで、使いたい人、開発したい人、色々知りたい人など、コメントをお寄せください。
参考
CSSの:has()がブラウザで使用できるかを@supportsで検出するには、:has(*)ではなく、:has(+ *)にする必要がある