![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxHvh8VzA-u8xZtaIs91L81UfeLDd4OQ7-Puw7Ym3_KM1tclDt0aMbYd1-T9EjaaRHzCrbZDbYgx5qZ_pQtFZSHkZelb4on9NSTChkF6MZl1b3Hli5rYklsNfafIoiW9TTKyxJ2OIVZYS6pBCxjBAdEhrnzDoEofM8-KqEmpZmf4e5cXcDkm6P3wLy/s1600-rw/laptop-2558400_1280.jpg)
GoogleChromeブラウザのver105から搭載された、CSSの
:has()という機能が面理過ぎます。
でも、この機能Firefoxだと現時点(2023-06-03時点 : Firefox ver.115)ではまだ搭載されていないので、他のブラウザで動いても、Firefoxでは動作しません。
と言っても、現時点でFirefoxではベータテストを行っていてデバッグモードで実装することは可能なのだそうですが、これは開発内部での話であって、
一般的なデフォルトモードでのブラウザで対応出来ていない時点で、未搭載と考えなければいけません。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6gLymzLgFmPHRz-87yn2qYFtTrG7ITtzfQAffh3UcsHnFsNNWUD3vcTV76nE4baMXknzEJ5h-d0i7l-nHJ6ZkZqurhIBuBEt8pRN1WK0lyLW-1hMAOA9XcU8dNJE17MWIinbot41W9Pazr4qeoFvTzSpMP70AfLoY_Wcc6yE3rAxcIU5j6I5FelqM/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-03%207.21.55.png)
※ブログを書いた時点でのブラウザ別対応表
: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/
今現在、なんとももどかしい状況なのですが、思い立ってライブラリを作ったら、ブログで公開したいと思います。
0 件のコメント:
コメントを投稿