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

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

アクセシビリティ

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

:focus-within 疑似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素にスタイルがあてられる。 <div class="button"> <input type="submit"> // ↑ focus はこっちにしか移動できないけど。親.button にフォーカスがあたったようなスタイルがつけられる </div> 例えば、 <li> <button>ボタン</button> <button>ボタン</button> <button></button></li>…

衝撃!Mac の Firefox で Tabキー移動したいときはシステム設定いじる必要がある

最近、諸事情から Firefox に乗り換えたんですけど、Tabキーでフォーカス移動したいところにぜんぜんいけなくて、どうやらボタンとかフォームは移動できるんやけど、アンカーリンクに移動できない。あれ、バグってる?と思って、いろいろ調べていたら、 stac…

visibility: hidden の中の visibility: visible なアイツ

visibility: hidden で css的に要素を消すということはあるあるだと思うんですが、その消している要素は、見た目的には存在していないようでして、しっかりとDOM としても、要素としても存在しているのでスクロールのパフォーマンスなどにも影響してくること…