主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

:focus-within は Edge に対応していないからといって甘くみてるとぶっこわれた話

:focus-within 疑似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素にスタイルがあてられる。

 <div class="button">
   <input type="submit"> 
   // ↑ focus はこっちにしか移動できないけど。親.button にフォーカスがあたったようなスタイルがつけられる
 </div>

例えば、

 <li>
  <button>ボタン</button>
  <button>ボタン</button>
  <button>ボタン</button>
 </li>
// ↑ li:hover トリガーで出てくるボタンメニューとか

この場合キーボード操作のみでは、ボタンメニューにたどり着けないが、:focus-within を使うと楽にできるのでいいけど、Edge と IE11 はサポートされていない、ブラウザを限定して、ちょっとでも使えるようにとか。JSとかでフォーカスコントロールするまでのつなぎとかでさくっといれとくにはだいぶ楽なので、いれておいたら痛い目にあった。

&:hover,
&:focus-within {

}

みたい、複数セレクタで :focus-within 書いてたとこの :hoverスタイルが Edge で軒並み動かなくなった

細かいことまでおってないが、たぶんEdgeさん的にはそんなセレクタないし、ということで、そのスコープまるごとスキップされているような感じ。

この場合、 :focus-within を諦めるか、:hover と :focus-within わけることで解決できる。

&:hove {

}

&:focus-within {

}

が、minify かなんかで複数セレクタをまとめたりするんじゃないかとか思ったりするけど、なんかとりあえずはあれしてあれしている。

参考:https://developer.mozilla.org/ja/docs/Web/CSS/:focus-within