フロントエンドの技術周りに関する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属性をつけると連動してくれるようになった