モダンCSSを見てみよう🌈
CSSだけで表現できることが、どんどん増えているよ。2026年7月時点で、実際に主要ブラウザで使えるいまどきの書き方を紹介するね。
📏 「Baseline」ってなに？
このページでは、機能の説明に「Baseline」という言葉を使うよ。Baselineは「主要なブラウザ（Chrome・Edge・Firefox・Safari）ぜんぶで使えるようになったよ」を教えてくれる目印。ここで紹介する機能は、どれもBaselineで「使ってOK」とされているものだよ。
セレクタの中に、子要素のスタイルをそのまま書けるようになったよ。SassやLESSでできた書き方が、標準のCSSだけでできる。
これまでは、こう書く必要があった：
.card { background: pink; }
.card h3 { color: hotpink; }
.card a { color: dodgerblue; }ネストを使うと、こう書ける：
.card {
background: pink;
h3 { color: hotpink; }
a { color: dodgerblue; }
}「〇〇を含んでいる要素」を選べる、CSS界では待望だった新セレクタ。JSなしで親の見た目を子の状態から変えられるよ。
:has()を使うまでは「子の状態を見て親を変える」はJS抜きでは不可能だったよ。地味だけど大きな進化。
画面幅（メディアクエリ）じゃなくて、「そのパーツが置かれている箱の幅」でレイアウトを変えられる機能。同じカード部品を、狭い場所でも広い場所でも賢く表示できる。
ツールチップやミニウィンドウを、JavaScriptなしのpopover属性だけで作れる機能。
popovertargetに書いた値と、開きたい要素のidを同じにするだけ。あとはブラウザが「外側クリックで閉じる」「Escで閉じる」まで面倒を見てくれるよ。
color-mix()で2つの色をブレンドしたり、oklch()という人の目の感覚に近い色空間を指定できるようになったよ。
🌗 light-dark()：ダークモード対応がシンプルに
OSの「ダークモード」設定に合わせて、色を自動で切りかえられる関数。ライト用とダーク用の色を1か所にまとめて書けるから、管理がラクになるよ。
:root {
color-scheme: light dark;
--bg: light-dark(#fff0f7, #2e2138);
--text: light-dark(#5b4a63, #f4ecfb);
}
body {
background: var(--bg);
color: var(--text);
}🔬 もっと新しい機能たち（今はまだ実験的）
実験的 アンカーポジショニング … 要素を別の要素にくっつけて配置する機能。ChromeやEdgeでは使えるけど、2026年7月時点でSafariはまだ対応していないので、このサイトでは体験コーナーを用意していないよ。
わりと新しい View Transitions API … ページや要素の切りかわりに、なめらかなアニメーションを簡単に付けられる機能。対応が進んできているところ。
気になる人は、使う前に必ず「Baseline」の状況をチェックしてから使ってみてね。