そのCSS、
目次
そのCSS、もう普通に使っていいかも。Baseline 2026でWeb標準を見直してみた
CSSを書いていると、たまにこういうことがあります。
「これ便利そうだけど、Safari大丈夫だっけ？」
結局、昔から使っている書き方に戻す。
自分も実務ではブラウザ差分を気にすることが多いので、新しいCSSを見つけても「まだ使わない方が安全かな」となりがちです。
でも2026年のWeb標準を見ていると、以前なら一部ブラウザだけだった機能が、かなり普通に使えるところまで来ています。
そこで今回、Baseline 2026を見ながら「今どんな機能が使えるようになっているのか」を改めて確認してみました。
そもそもBaselineって何？
Baselineは、Web Platformの機能が主要ブラウザでどこまで使えるのかを分かりやすくするための指標です。
web.devでは大きく、
Newly available
Widely available
という状態で整理されています。
Newly availableは、主要ブラウザの現行系で相互運用できる状態になったタイミング。
Widely availableは、そこから30か月経過した状態です。
つまり、
Baseline 2026に入った = すべての古い端末で絶対安全
という意味ではありません。
ここはかなり大事です。
新しいブラウザを使っているユーザーが中心なら採用しやすい。
一方、古いOSや古いブラウザまで広くサポートする案件なら、まだフォールバックや実際のアクセス解析を見た方がいい。
「使える・使えない」を雰囲気で判断するより、どの段階まで来ている機能なのかを判断しやすくなったのがBaselineの良さだと思います。
参考: https://web.dev/baseline/2026（外部サイト）
field-sizing: content が地味だけど便利そう
2026年にBaseline Newly availableになった中で、まず気になったのが field-sizing です。
たとえば入力内容に合わせてtextareaの高さを伸ばしたいとき、JavaScriptで高さを計算したことがある人は多いと思います。
field-sizing: content を使うと、フォームコントロールを内容に合わせて伸縮させられます。
textarea {
field-sizing: content;
min-height: 3lh;
max-height: 12lh;
}MDNでは、input や textarea などのフォーム要素を内容に合わせてサイズ変更できるプロパティとして説明されています。
2026年6月からBaseline Newly availableです。
参考: https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/field-sizing（外部サイト）
これ、派手な機能ではないですが、今までJavaScriptを足していた小さなUIがCSSだけで済む可能性があります。
こういう機能こそ実務ではありがたいです。
Container style queriesで「幅」以外も見られる
Container Queries自体はもう珍しくなくなってきました。
従来のMedia Queryがビューポートを見るのに対して、Container Queryはコンポーネントが置かれた場所を基準にスタイルを変えられます。
さらにContainer style queriesでは、コンテナ側のスタイルを条件にできます。
現時点でMDNが説明している実装では、主にCSS Custom Propertiesを条件として使います。
たとえば、
.card-list {
--theme: dark;
}
@container style(--theme: dark) {
.card {
background: #1e2322;
color: #fff;
}
}のように、親側のテーマ情報によって子要素の見た目を変えられます。
今まではクラスを追加したり、コンポーネント側へ状態を渡したりしていたところを、CSS側の責務として整理できるケースがありそうです。
ただ、何でもContainer Queryにすればいいわけではありません。
状態管理そのものをCSSへ寄せるというより、レイアウトや見た目の条件をCSSの中で完結させたいときに効きそうです。
contrast-color()で文字色を自動的に決められる
これもかなり分かりやすいです。
背景色が動的に変わるUIでは、
この背景なら白文字？黒文字？
という処理が必要になることがあります。
contrast-color() を使うと、指定した色に対して白か黒のうちコントラストが高い方を返せます。
.tag {
--tag-color: #9ed92e;
background: var(--tag-color);
color: contrast-color(var(--tag-color));
}2026年4月からBaseline Newly availableです。
参考: https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/color_value/contrast-color（外部サイト）
ただし、これも「アクセシビリティを全部自動で解決してくれる機能」ではありません。
MDNでも、中間的な明るさの背景色では黒・白のどちらでも十分に読みやすくならない場合があると注意されています。
なので、ブランドカラーを何でも放り込めばOKではなく、最終的な見え方は確認した方がいい。
それでも、動的な色を扱うUIでは選択肢が一つ増えます。
:open があるとdetailsなどの状態を素直に書ける
もう一つ、地味に好きなのが :open です。
開閉可能な要素が開いている状態を選択できます。
details:open {
border-color: #9ed92e;
}
details:open summary {
font-weight: 700;
}以前から details[open] のように属性セレクタで書けました。
なので、これがないと困るわけではありません。
ただ、
「開いている状態」なら :open
と読めるのはかなり自然です。
こういう小さな改善が積み重なって、CSSが以前より「やりたいことをそのまま書ける言語」になっている感じがあります。
最近のCSSは「JavaScriptを消せる機能」が面白い
Baseline 2026を眺めていて感じたのは、単に新しい装飾が増えているわけではないことです。
以前ならJavaScriptを使っていた、
入力欄のサイズ調整
UIの状態に応じたスタイル変更
色に応じた前景色の判断
の一部がCSS側へ移ってきています。
もちろんJavaScriptが不要になるわけではありません。
でも、
これ、本当にJSでやる必要ある？
を考え直す場面は増えそうです。
CSSが担当できる範囲が広がれば、実装もシンプルになります。
「Can I useを見る」だけではなくBaselineも見るようにしたい
これまで新しいCSSを見つけたとき、自分はだいたいブラウザ対応を個別に確認していました。
それは今後も必要です。
ただBaselineがあることで、
この機能はまだ実験的なのか。
主要ブラウザでは揃ったのか。
かなり広く使える段階まで来たのか。
を最初に判断しやすくなっています。
特に制作案件では、Safariを含めたブラウザ対応をかなり気にします。
だからこそ、昔覚えた「これは使えない」という感覚をずっと引きずるのも違うなと思いました。
新しいCSSを追う理由は「新しいものを使いたいから」ではない
新機能を全部覚える必要はないと思っています。
新しいCSSを使っていること自体に価値があるわけでもありません。
でも、古い実装方法しか知らないと、
本当はCSSだけで簡単にできることを、余計に複雑に作ってしまう
可能性があります。
自分はWordPressやWeb制作を長く触ってきたので、どうしても「昔から安全な書き方」に寄りやすいです。
それ自体は悪くありません。
ただ、Web標準側もかなり進んでいます。
なので今後は、
昔使えなかったから使わない、ではなく、今のBaselineではどうなっているかを確認する。
この感覚に少しずつ切り替えていきたいです。
今回見た機能も、案件のブラウザ要件を無視していきなり全部使うつもりはありません。
でも「候補にも入れない」状態からは、そろそろ抜けてもよさそうです。
