はじめに
2023 年に「2023 年の新しい CSS 機能」という記事を書きました。今回はその 2026 年版です。
2026 年は、Chrome・Firefox・Safari のすべてで使えるようになった CSS 機能がたくさんありました。その中には、これまで JavaScript を書かないとできなかったことが、CSS の数行でできるようになったものもあります。
この記事では、2026 年の 5 月〜9 月に Baseline Newly available（主要なブラウザすべての安定版で使えるようになった状態）になった機能から、すぐに使えて便利な 5 つを紹介します。
- field-sizing
- :open
- sibling-index() と sibling-count()
- text-box
- light-dark() で画像を切り替える
1. field-sizing
field-sizing は、<textarea> や <input> の大きさを、入力された文字の量に合わせて自動で変えるプロパティです。
お問い合わせフォームなどで「文字を入れるほど入力欄が広がってほしい」ときに便利です。
前
今までは、JavaScript で入力のたびに高さを計算する必要がありました。
1const textarea = document.querySelector('textarea'); 2textarea.addEventListener('input', () => { 3 textarea.style.height = 'auto'; 4 textarea.style.height = textarea.scrollHeight + 'px'; 5});
今
1textarea { 2 field-sizing: content; 3}
CSS 1 行で、文字を入れると入力欄が大きくなり、消すと小さくなります。
大きくなりすぎないように、max-height や min-height と一緒に使うのがおすすめです。
1textarea { 2 field-sizing: content; 3 min-height: 3lh; /* 3 行分 */ 4 max-height: 10lh; /* 10 行分まで */ 5}
結果
左は高さが決まっているので、文字が隠れてしまいます。右は文字に合わせて入力欄が大きくなります。
Browser Support
Chrome 123 / Firefox 152 / Safari 26.2（2026 年 6 月に Baseline Newly available）
2. :open
:open は、「開いている状態」の要素にスタイルを付けられる疑似クラスです。
<details>、<dialog>、<select> のプルダウン、<input type="date"> のカレンダーなどに使えます。
前
<details> の場合は、open 属性を使って書いていました。
1details[open] summary { 2 font-weight: bold; 3}
ただし、<select> のプルダウンが開いているかどうかは属性では判断できないので、CSS だけではスタイルを付けられませんでした。
今
1details:open summary { 2 font-weight: bold; 3} 4 5select:open { 6 outline: 2px solid #0066cc; 7}
「開いている」という意味がそのままセレクタになるので、読みやすくなります。
結果
デモでは details:open を使って、開いている質問だけ枠と文字を青くしています。
Browser Support
Chrome 133 / Firefox 136 / Safari 26.5（2026 年 5 月に Baseline Newly available）
3. sibling-index() と sibling-count()
sibling-index()：その要素が兄弟要素の中で何番目か（1 から始まる）sibling-count()：兄弟要素が全部でいくつあるか
この 2 つの関数を使うと、「リストを 1 つずつ順番に表示する」アニメーションを CSS だけで作れます。
前
JavaScript で番号を CSS 変数に入れる必要がありました。
1document.querySelectorAll('li').forEach((li, i) => { 2 li.style.setProperty('--i', i); 3});
1li { 2 animation: fadeIn 0.5s both; 3 animation-delay: calc(var(--i) * 0.1s); 4}
今
1li { 2 animation: fadeIn 0.5s both; 3 animation-delay: calc((sibling-index() - 1) * 0.1s); 4} 5 6@keyframes fadeIn { 7 from { 8 opacity: 0; 9 translate: 0 10px; 10 } 11}
1 つ目は 0 秒、2 つ目は 0.1 秒、3 つ目は 0.2 秒…と、少しずつずれて表示されます。 リストの数が変わっても、CSS を直す必要はありません。
sibling-count() と組み合わせると、リストの数に合わせて色を虹色に分けることもできます。
1li { 2 background: hsl(calc(360deg / sibling-count() * sibling-index()) 70% 80%); 3}
結果
上から順番に表示されて、色も 6 色に分かれます。
Browser Support
Chrome 138 / Firefox 154 / Safari 26.2（2026 年 8 月に Baseline Newly available）
4. text-box
text-box は、文字の上と下にある余分なすき間を消すプロパティです。
フォントには、文字の上と下に少しすき間があります。すき間の大きさは上と下で違うので、ボタンの padding を上下同じにしても、フォントによって文字が少し上や下にずれて見えることがあります。たとえば Chrome で試すと、Mac の標準フォント（system-ui）の英語は少し下に、ヒラギノ角ゴシック（Hiragino Sans）の日本語は少し上にずれました。
前
padding-top と padding-bottom の値を少し変えて、目で見ながら調整していました。フォントを変えると、また調整し直しです。
1/* 例：文字が少し下にずれて見えるとき */ 2.btn { 3 padding: 8px 16px 10px; /* 上を少なくして調整 */ 4}
今
1.btn { 2 padding: 10px 16px; 3 text-box: trim-both cap alphabetic; 4}
trim-both：上と下の両方のすき間を消すcap：上はアルファベットの大文字の高さ（キャップハイト）で切るalphabetic：下はアルファベットのベースライン（文字が乗っている線）で切る
これで、padding の値どおりに文字が真ん中にそろいます。
ただし、cap と alphabetic は、アルファベットなどの文字のための基準です。日本語の文字は、大文字の高さより上にも、ベースラインより下にも少しはみ出します。上のはみ出しの方が大きいので、日本語のボタンでは文字が少し上にずれて見えます。Chrome 155 で、40px の「ボタン」に上下 10px の padding を付けて試したところ、文字の上の余白は約 5px、下の余白は約 7px になりました（system-ui、Hiragino Sans、Noto Sans JP のどれでもほぼ同じでした）。日本語用の ideographic という値もありますが、2026 年 10 月の時点で使えるのは Firefox だけです。
結果
黄色の点線は、文字が使っている範囲です。左は文字の上と下にすき間があります。右はすき間が消えて、英語の「Button」は文字の大きさぴったりになっています。日本語の「ボタン」は、文字の上が点線より少し上に出ていて、ボタンの中で少し上にずれています。
Browser Support
Chrome 133 / Firefox 154 / Safari 18.2（2026 年 8 月に Baseline Newly available）
5. light-dark() で画像を切り替える
light-dark() は、ライトモードとダークモードで値を切り替える関数です。
これまでは色にしか使えませんでしたが、2026 年 9 月から画像やグラデーションにも使えるようになりました。
前
メディアクエリで、ダークモード用の画像を別に書いていました。
1.hero { 2 background-image: url(hero-light.png); 3} 4 5@media (prefers-color-scheme: dark) { 6 .hero { 7 background-image: url(hero-dark.png); 8 } 9}
今
1:root { 2 color-scheme: light dark; 3} 4 5.hero { 6 background-image: light-dark(url(hero-light.png), url(hero-dark.png)); 7}
1 か所にまとめて書けるので、ライト用とダーク用のどちらかを直し忘れにくくなります。
light-dark() を使うには、color-scheme の指定が必要なので注意してください。
結果
左がライトモード、右がダークモードです。ここでは画像の代わりにグラデーションを使っていますが、url() の画像でも同じように書けます。
Browser Support
画像に使う場合：Chrome 150 / Firefox 150 / Safari 27（2026 年 9 月に Baseline Newly available）
色に使う場合は、2024 年 5 月から Baseline Newly available です（Chrome 123 / Firefox 120 / Safari 17.5）。
まとめ
今回紹介した機能は、どれも前は JavaScript やメディアクエリ、手での細かい調整が必要だったことを、CSS の数行で書けるようにするものでした。
ただし、Baseline Newly available は「主要なブラウザの最新版で使える」という意味です。古いバージョンのブラウザを使っている人もいるので、使う前にサイトの利用者のブラウザを確認してください。対応していないブラウザでも表示が崩れないように、今までの書き方を残しておくのも一つの方法です。
日々のプロジェクトでも、新しい CSS を少しずつ取り入れていきたいです。
