2022/5/14に開催されたTechFeed Conference 2022を拝聴した
このときの鹿野さんのセッションで知ったCSSについてのメモ
scroll-margin-top
これまでアンカーリンクでページ内遷移をした際に、アンカー要素の上部にスクロールするためフローティングヘッダーがある場合に見切れてしまう
これをscroll-margin-topを使うことによって、スクロール位置を調整してコンテンツが見切れないようにすることができるようになった
scroll-margin-top - CSS: カスケーディングスタイルシート | MDN
scroll-behavior
アンカーリンクでページ内遷移をした際にスムーススクロールをCSSで行えるようになった
html { scroll-behavior: smooth; }
scroll-behavior - CSS: カスケーディングスタイルシート | MDN
:focus-visible
タブでの要素移動時にスタイルを当てたい場合、これまでの:focusクラスだとクリック時にもスタイルが当たってしまう
それを:focus-visibleが使えるようになったことで、タブでの移動時のみスタイルをあてることができるようになった
button:focus { outline: 2px solid blue; outline-offset: 1px; }
:focus-visible - CSS: カスケーディングスタイルシート | MDN
overscroll-behavior
これは以前調査済み
subgrid
レスポンシブなサイトで、複数のカードを並べるとき、各カード内の要素の高さに連動して全てのカードの要素のレイアウトを揃えるというはCSSでやるのは難しい
↑のタイトルとコンテンツの高さを全カードで揃えたい
これを実現するのがsubgrid
サブグリッド - CSS: カスケーディングスタイルシート | MDN
しかし、まだFirefoxでしか実装されていないようなのでできたら試す
