フロントエンドの技術周りに関する2023年の振り返りと2024年について書かれたスライドを読んだ
最初の方の2023年で追加された技術で知らなかったことのメモ
- Scroll-driven Animations
CSSだけでスクロールアニメーションが作れる!? 新技術Scroll-driven Animationsとは - ICS MEDIA - @scope
@scope - CSS: カスケーディングスタイルシート | MDN - Style Queries
「親要素がイタリックの場合」のように親要素となるコンテナのCSSのプロパティで計算された値に基づいて、条件付きで子要素にスタイルを設定できるというもの
例:@container style(font-style: italic) {...}
- Nesting
Sassのような 入れ子記法の構文が使えるようになった - Popover
popover - HTML: ハイパーテキストマークアップ言語 | MDN
popover
属性をつけるとJavaScriptなしでモーダルを表示させることができる <selectlist>
開発者が自由にデザインをカスタマイズできるセレクトボックス<select>
の<option>
中に<hr>
を指定して区切りを入れることができるようになった<input type="checkbox">
要素にswitch
属性を指定するとスイッチ UI になる<details>
要素でアコーディオンを簡単に実装できるが、複数アコーディンがある場合に開閉が連動した動きにならなかったが、name
属性をつけると連動してくれるようになった