地味にすごい！2026年に主要ブラウザで使えるようになったCSS 5選

CSSの新機能を見つけても、「これ、もう仕事で使っていいのかな？」で止まることがあります。仕様があることと、主要ブラウザで使えることは別だからです。

そこで目安になるのがBaselineです。今回は、2026年にBaselineの「Newly available」になったCSSから、実務で使いどころが見つけやすい5つを選びました。ただし、Newly availableは「古いブラウザまで広く対応した」という意味ではありません。まずはそこから確認します。

Baseline Newly availableは「主要ブラウザの最新版で使える」目安

Baselineでは、Chrome、Edge、Firefox、Safariなどの主要ブラウザで相互運用できるようになった機能を「Newly available」とします。そこから30か月が経過すると「Widely available」に移ります。

つまり、2026年にNewly availableになった機能は、最新版へ更新されている環境なら使いやすくなった一方、更新が止まった端末や古いブラウザでは動かない可能性があります。

社内システムのように古いブラウザを対象にする案件では、Baselineだけで判断せず、実際の対応ブラウザを先に決めてください。一般向けサイトでも、機能が効かなかったときに内容を読めない・操作できない状態にならないよう、段階的な拡張として使うのが安全です。

今回の5つがNewly availableになった時期と、役立つ場面は次のとおりです。

機能	Newly availableになった月	役立つ場面
field-sizing	2026年6月	入力内容に合わせて入力欄を広げる
contrast-color()	2026年4月	背景色から白・黒の文字色を選ぶ
:open	2026年5月	開いている要素の見た目を変える
@scope	2026年3月	スタイルを適用する範囲を区切る
コンテナスタイルクエリ	2026年5月	親のカスタムプロパティで子の表示を変える

1. field-sizing: contentで入力内容に合わせて入力欄を伸ばす

field-sizingは、フォームコントロールのサイズをどう決めるかを指定するプロパティです。2026年6月からBaseline Newly availableになりました。

contentを指定すると、textareaなどを入力内容に合わせて伸縮させられます。

textarea {
  min-height: 4lh;
  max-height: 12lh;
}

@supports (field-sizing: content) {
  textarea {
    field-sizing: content;
  }
}

ここで大事なのが、最小・最大サイズも一緒に決めることです。内容だけに任せると、空の状態で小さくなりすぎたり、長文で画面を占有したりします。@supportsで分けておけば、未対応のブラウザにはmin-heightとmax-heightだけが残り、通常の入力欄として使えます。

注意したいのが、contentを指定したときの寸法指定です。textareaのrowsやinputのsizeは、従来どおりの大きさ指定としては働きません。placeholderの長さもサイズに影響するため、空欄、長文、長いプレースホルダーの状態をそれぞれ確認しておきます。

問い合わせフォームの自由記入欄や、短文から長文まで入る管理画面などで使いやすい機能です。JavaScriptで入力イベントを監視して高さを計算していた処理を、CSSだけに寄せられる場面があります。

2. contrast-color()で背景色から白・黒の文字色を選ぶ

色をユーザーが選べるタグや、テーマカラーからボタンを作るとき、背景に合わせて文字色も切り替えたくなります。

contrast-color()は、指定した色に対してwhiteかblackを返すCSSの色関数です。2026年4月からBaseline Newly availableになりました。

.badge {
  --badge-color: #155eef;
  background: var(--badge-color);
  color: contrast-color(var(--badge-color));
}

ただし「自動で必ず読みやすくなる関数」ではありません。中間的な明るさの背景色では、白と黒のどちらを選んでも十分なコントラストにならない場合があります。

自由な色をそのまま受け入れるより、背景色の候補をある程度絞ったうえで使うほうが扱いやすいと思います。最終的な可読性は別に確認します。

この書き方が前提にしているのは、不透明な単色の背景です。画像や半透明を重ねるデザインへ流用するときは、実際に見える背景との組み合わせで確かめます。

3. :openで「開いている状態」をまとめて選べる

<details>や<dialog>など、開閉する要素には「開いている」という状態があります。これまでdetails[open]のように属性で選んでいた部分を、:openで表せます。

:openは2026年5月からBaseline Newly availableです。

details:open > summary {
  background: #eef4ff;
}

dialog:open {
  border-color: #155eef;
}

対象は<details>、開いている<dialog>、ピッカーが開いている<select>などです。

ここは名前が似ていて少し紛らわしいのですが、Popover APIの要素には:openではなく:popover-openを使います。すべての「開いたもの」を一つの擬似クラスで選ぶわけではありません。

なお、<details>の開閉そのものをHTMLだけで組み立てる方法は、1つ開くとほかが閉じるアコーディオンで書きました。

4. @scopeでCSSの効く範囲を区切る

コンポーネント内だけリンク色を変えたいとき、.card .card__body aのように親要素を繰り返していませんか？

@scopeを使うと、スタイルを適用するDOMの範囲をCSS側で区切れます。2026年3月からBaseline Newly availableになりました。

@scope (.article-card) {
  a {
    color: #155eef;
  }

  img {
    border-radius: 0.75rem;
  }
}

この例では、.article-cardの内側にあるリンクと画像だけが対象です。セレクタへ毎回親クラスを足さなくても、どこまで影響するCSSなのかをまとまりとして読めます。

ここで区切られるのは、ブロック内のセレクタが対象にする範囲です。コンポーネントを完全に隔離する仕組みではなく、外側のCSSや親から継承される値まで遮断するわけではありません。

大きなサイトのCSS設計をすぐ全部置き換えるというより、独立性の高いパーツから試すと効果を確かめやすくなります。

5. コンテナスタイルクエリで「親が持つ値」に応じて切り替える

コンテナクエリというと、親要素の幅に応じてレイアウトを変えるサイズクエリが先に浮かぶかもしれません。スタイルクエリでは、親コンテナのスタイルを条件にできます。

カスタムプロパティを条件にするスタイルクエリは、2026年5月にBaseline Newly availableとして紹介されました。

.card-shell {
  --theme: dark;
}

@container style(--theme: dark) {
  .card {
    color: white;
    background: #202124;
  }
}

.card-shellが持つ--themeの値を見て、その子要素の.cardを切り替えています。サイズを調べるクエリではないので、container-type: inline-sizeは必要ありません。調べる相手は対象要素の祖先で、コンテナ自身へスタイルを付ける書き方ではない点にも注意します。

テーマや状態をカスタムプロパティへ持たせているコンポーネントと相性がよさそうです。

仕様上は通常のCSSプロパティを条件にする形も定義されていますが、MDNの現行ガイドでは、2026年9月時点でブラウザが対応しているのはカスタムプロパティを使ったスタイルクエリだけとされています。今はstyle(--name: value)を基準に考えるのがよいでしょう。

「対応した」から一歩進めて、効かなかったときも考える

今回の5つは、いずれも最新版の主要ブラウザで使える状態まで進んだ機能です。ただしNewly availableになったばかりなので、古い環境まで含めて何も考えずに置き換えられるわけではありません。

まずは、効かなくてもフォームが使える、文字が読める、コンテンツへ到達できる状態を残します。そのうえで、CSSだけで簡潔に書ける部分から足していくと導入しやすくなります。

field-sizingで書いたように、残したい基本のスタイルを先に置き、新しい指定を@supportsの内側へ入れる。ほかの4つも同じ形で分けられます。

Newly availableから30か月がたつと、Baselineの表示はWidely availableへ移ります。そちらへ進んだ機能は2026年に「広く使える」になったHTML・CSSで紹介しました。