最近のCSS、全然追えてなかった。ここ1〜2年で使えるようになった機能10選

BRANK

この記事では、2024〜2025年にかけて主要ブラウザで使えるようになったCSS（一部HTML）の機能を10個紹介します。「昔はセレクターとか頑張って追いかけてたけど、最近は全然追えてない」という方を対象としています。それぞれの機能について、目的・できること・昔のやり方・注意点をまとめました。コードを見ながら「こんなの使えるようになったのか」と感じてもらえたら嬉しいです。1. CSS Nesting（ネイティブCSSネスト）目的SassやLESSなどのプリプロセッサなしで、CSSにネスト（入れ子）構造を書けるようにすることです。できることセレクターを親子関係で入れ子にして記述できます。& を使って親セレクターを参照します。.card { padding: 1rem; background: #fff; & .title { font-size: 1.25rem; font-weight: bold; } &:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } } 昔のやり方フラットにセレクターを並べるか、Sass等のプリプロセッサを使っていました。.card { padding: 1rem; background: #fff; } .card .title { font-size: 1.25rem; font-weight: bold; } .card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.…