Firefoxの:has()について対応を考えてみる話

2023年6月25日

テクノロジー プログラミング

eyecatch GoogleChromeブラウザのver105から搭載された、CSSの:has()という機能が面理過ぎます。 でも、この機能Firefoxだと現時点(2023-06-03時点 : Firefox ver.115)ではまだ搭載されていないので、他のブラウザで動いても、Firefoxでは動作しません。 と言っても、現時点でFirefoxではベータテストを行っていてデバッグモードで実装することは可能なのだそうですが、これは開発内部での話であって、 一般的なデフォルトモードでのブラウザで対応出来ていない時点で、未搭載と考えなければいけません。 ※ブログを書いた時点でのブラウザ別対応表

:has()ってどんな機能?

:has() 該当する要素が一つ以上の要素に一致することを表します。 参考: https://developer.mozilla.org/ja/docs/Web/CSS/:has
次のようなHTMLをサンプルに使って:has()を使ってみます。 <div><h1>sample</h1></div> <div><h2>sample</h2></div> div:has(h2){ color:red; } このように書くだけで、h2を子階層に持っているdivタグがselectorで抽出されることになります。 子階層の状況を監視して、その元の親階層のスタイルがセットできるため、これまでcssで出来なかった親階層操作ができるようになったのが革新的です。

:has()使い方サンプル

:hasというCSSの擬似クラスがどれだけ便利に使えるのか、これまで使ってきたものを紹介してみます。

子階層のhoverで:has

内包する特定の要素(サンプルはaタグ)にマウスカーソルが重なった時に、親要素の枠線を赤色に変更しています。 <div><a href='https://example.com/A'>A</a></div> <div><a href='https://example.com/B'>B</a></div> div:has(a:hover){ border:1px solid red; }

checkboxで:has

これまで、checkboxは、兄弟構造で使わないといけなかったんですが、子階層にあるcheckboxを参照することができるようになりました。 checkboxと連動すると、動的な効果が簡単に作れます。 <label> <div></div> <input type='checkbox' style='display:none;'> </label> label div::before{ content:'クリックしてください'; } label:has(input[type='checkbox']:checked) div::before{ content:'チェックしました'; }

radioボタンで:has

ラジオボタンを使うと、メニューなどでの動的効果が簡単に作れます。 <div> <label><span>A</span><input type='radio' name='menu'></label> <label><span>B</span><input type='radio' name='menu'></label> <label><span>C</span><input type='radio' name='menu'></label> </div></div> div{ display:flex; gap:10px; } input[type='radio']{ display:none; } div label{ cursor:pointer; } label span{ padding:5px 20px; display:block; background-color:white; border:1px solid black; color:black; } label:has(input[type='radio']:checked) span{ background-color:black; color:white; }

あとがき

Firefoxに搭載されれば、もはや何の抵抗もなくwebページなどにドンドン:has()を実装できるのですが、それを待つのか、 Firefoxでhas機能をハックして実装できるライブラリを自作するのか、現時点で迷っている状態です。 Firefoxのデスクトップブラウザの利用率は、7.69%なんだそうです。(2023年時点) 参考 : https://kinsta.com/jp/browser-market-share/ 今現在、なんとももどかしい状況なのですが、思い立ってライブラリを作ったら、ブログで公開したいと思います。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。