Chrome 150で追加された18個のCSS新機能

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

CSSの進化が止まりません。
つい数年前まで「CSSでそれはできない」と言われていたことが、今やブラウザのアップデートひとつで当たり前のように実現できるようになっています。
そして2025年、Chromeはバージョン150という大きな節目を迎え、18個もの新しいCSS機能が一気に追加されました。

WEBデザイナーとして日々サイト制作に向き合っている私も、このアップデートの内容を最初に見たとき思わず「これは覚えないといけない」と感じました。
なぜなら、今回追加された機能の多くが「これまでJavaScriptや複雑なハックで対応していた問題をCSSだけで解決できるようにするもの」だったからです。

でも正直なところ、こんな悩みを感じている方も多いのではないでしょうか。
「Chrome 150で何が変わったのか、正確に把握できていない」
「新機能の名前は聞いたことがあるけど、実際にどう使えばいいかわからない」
「毎回ブラウザがアップデートするたびに追いかけるのが大変で、気づいたら情報が古くなっている」
これはフリーランスや制作会社で働くWEBデザイナー・コーダーなら誰もが抱えるリアルな課題です。

この記事では、Chrome 150で追加された18個のCSS新機能を、浜松市のWEBデザイナーである私が実務目線でひとつひとつ丁寧に解説していきます。
単なる仕様の羅列ではなく、「実際のサイト制作でどう使うか」という具体的なコード例や活用シーンも一緒にお伝えします。

この記事を読むことで、Chrome 150の新機能を体系的に理解し、明日からの制作業務にすぐ取り入れられるようになります。
CSSの最前線をしっかりキャッチアップして、制作の質とスピードを一段階上げていきましょう。

Chrome 150のCSSアップデートとはどんな内容か

Chrome 150はいつリリースされたのか

Chrome 150は2025年にリリースされたGoogleChromeのメジャーバージョンです。
Googleはおよそ4週間に1度のペースでChromeをアップデートしており、各バージョンでWEB標準の新仕様が段階的に実装されています。
Chrome 150ではとりわけCSS関連の実装数が多く、18個のCSS機能が新たにサポートされたことで、WEB制作者コミュニティで大きな話題となりました。

これらの機能はW3Cが策定するCSS仕様に基づいており、ChromeだけでなくEdgeやOperaなどChromiumベースのブラウザにも同様に実装されています。
SafariやFirefoxへの対応状況は機能によって異なりますが、Chromeで先行実装されることで他ブラウザへの普及が加速するというのがここ数年のトレンドです。

なぜこれだけ多くの機能が一度に追加されたのか

2020年以降、CSSはかつてないスピードで進化しています。
その背景には「Interop」というプロジェクトがあります。
InteropはGoogle・Apple・Mozilla・Microsoftなどの主要ブラウザベンダーが協力して、WEB標準の相互運用性を高めることを目的とした取り組みです。

このプロジェクトの成果として、各ブラウザが優先的に実装すべき仕様が毎年リスト化されており、それに沿って各社が開発を進めています。
Chrome 150での大量追加は、こうした業界全体の標準化推進の流れを反映したものと言えます。

Chrome 150のCSS新機能は業界全体の標準化推進の流れによって生まれた、実務に直結する重要なアップデートです。

---

レイアウト・ボックスモデル関連の新機能

reading-flow プロパティ

reading-flowは、FlexboxやGridレイアウト内の要素をアクセシビリティ上の読み取り順序と視覚的な表示順序が一致するよう制御するためのプロパティです。

これまでFlexboxのorderプロパティやgrid-template-areasで視覚順序を変えると、スクリーンリーダーやキーボードナビゲーションの順序がDOM順序に従ったままになるという問題がありました。
reading-flowを使うことで、視覚順序とフォーカス順序を同期させることができます。

.container {
  display: flex;
  reading-flow: flex-visual;
}

指定できる値は以下の通りです。

アクセシビリティへの意識が高まっている現在、このプロパティの重要性は非常に高いと言えます。

sideways-lr / sideways-rl（writing-mode の新しい値）

writing-modeプロパティにsideways-lrとsideways-rlという新しい値が追加されました。

これまでの縦書き（vertical-rl / vertical-lr）では、ラテン文字が自動的に回転して表示されていました。
sideways-rlとsideways-lrを使うと、テキスト全体を横書きのまま90度回転させた状態で表示できます。
デザイン的に斜めや縦方向に文字を配置したいときに非常に役立ちます。

.vertical-label {
  writing-mode: sideways-rl;
}

line-clamp プロパティの正式サポート

line-clampプロパティが正式にサポートされました。
これまでは-webkit-line-clampというベンダープレフィックス付きの非標準プロパティを使って複数行テキストの省略を実現していましたが、Chrome 150からは標準プロパティとして使えるようになります。

.card-text {
  line-clamp: 3;
  overflow: hidden;
}

カード型UIの説明文を3行で打ち切って「…」と表示するような実装が、よりシンプルなコードで書けるようになります。
実務でこの実装をよくやっていた私にとっては、ベンダープレフィックスとの混在を解消できる嬉しいアップデートです。

reading-flowによるアクセシビリティ対応とline-clampの標準化は、実務サイト制作での即戦力となる新機能です。

---

色・グラデーション関連の新機能

light-dark() 関数

light-dark()は、ライトモードとダークモードで異なる値を簡潔に指定できるCSS関数です。
これまではprefers-color-schemeメディアクエリを使って別々にスタイルを書く必要がありましたが、light-dark()を使うと一行で切り替えを表現できます。

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ffffff, #1a1a1a);
  color: light-dark(#333333, #f0f0f0);
}

使用するにはルート要素またはbodyにcolor-scheme: light dark;を指定する必要があります。
ダークモード対応サイトの記述量が大幅に削減できるため、実務上の恩恵が大きい機能のひとつです。

relative color syntax（相対カラー構文）

相対カラー構文は、既存の色を元に明度・彩度・透明度などを相対的に調整した色を生成できる構文です。
CSS変数で定義したブランドカラーをベースに、ホバー時の暗い色やdisabled状態の薄い色を自動的に計算して生成できます。

:root {
  --brand: #3a86ff;
}

.button:hover {
  /* brandカラーのL値を20%下げた色を生成 */
  background-color: oklch(from var(--brand) calc(l - 0.2) c h);
}

デザインシステムを構築する際に、カラーパレットの派生色をCSSだけで管理できるようになります。

color-mix() 関数の強化

color-mix()はChrome 111で導入された関数ですが、Chrome 150ではさらに対応する色空間が広がりました。
2つの色を指定した比率でミックスした色を生成できます。

.element {
  background-color: color-mix(in oklch, #ff6b6b 30%, #4ecdc4 70%);
}

グラデーションや半透明の色表現をより直感的に書けるようになります。

light-dark()と相対カラー構文を使いこなすことで、ダークモード対応のカラー管理がCSSだけで完結するようになります。

---

アニメーション・トランジション関連の新機能

@starting-style アットルール

@starting-styleは、要素が初めてDOMに追加されたときやdisplay: noneから表示に切り替わったときの初期スタイルを定義するアットルールです。
これまでJavaScriptでクラスを付け外しして実現していた「要素が現れる瞬間のアニメーション」がCSSだけで書けるようになります。

.dialog {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s, transform 0.3s;
}

@starting-style {
  .dialog {
    opacity: 0;
    transform: translateY(-20px);
  }
}

モーダルやドロップダウンメニューが滑らかに出現するアニメーションを、JavaScriptゼロで実装できます。

overlay プロパティ

overlayプロパティは、Popover APIやdialog要素のようなtop layerに配置される要素のトランジション終了まで、その要素をtop layerに留めておくことができるプロパティです。

[popover]:popover-open {
  opacity: 1;
  transition: opacity 0.3s allow-discrete, overlay 0.3s allow-discrete;
}

@starting-style {
  [popover]:popover-open {
    opacity: 0;
  }
}

@starting-styleと組み合わせることで、ポップオーバーやダイアログの出現・消滅アニメーションを美しく実装できます。

transition-behavior プロパティと allow-discrete キーワード

transition-behavior: allow-discrete;を指定することで、displayプロパティやvisibilityプロパティのような「離散値（discrete values）」のプロパティもトランジションの対象にできるようになります。

これまでdisplay: noneからdisplay: blockへの切り替えはトランジションが効かず、一瞬で切り替わっていました。
allow-discreteキーワードを使うと、表示・非表示の切り替えにもフェードアニメーションを適用できます。

.menu {
  transition: opacity 0.3s, display 0.3s allow-discrete;
}

.menu.hidden {
  opacity: 0;
  display: none;
}

@starting-styleとallow-discreteの組み合わせにより、表示切り替えアニメーションがJavaScriptなしで実装できる時代になりました。

---

セレクター・カスケード関連の新機能

:has() 疑似クラスの機能拡張

:has()疑似クラスはChrome 105で導入されましたが、Chrome 150ではより複雑なセレクター組み合わせへの対応が強化されました。
:has()は「特定の子孫要素を持つ親要素」をセレクトできる画期的な疑似クラスです。

/* 画像を含むカードのスタイルを変える */
.card:has(img) {
  padding-top: 0;
}

/* チェックされたチェックボックスの親ラベルを強調 */
label:has(input[type="checkbox"]:checked) {
  font-weight: bold;
  color: #3a86ff;
}

「子が〇〇の状態のとき、親のスタイルを変える」という、これまでJavaScript必須だった動作がCSSだけで書けるため、活用シーンが非常に広いです。

@layer アットルールの詳細化

@layer（カスケードレイヤー）はCSSのカスケード優先順位を明示的に管理するためのアットルールです。
Chrome 150では@layerのネストや条件分岐に関する仕様が拡張されています。

@layer base, components, utilities;

@layer base {
  button { background: gray; }
}

@layer components {
  .btn-primary { background: #3a86ff; }
}

@layer utilities {
  .bg-red { background: red; }
}

デザインシステムや大規模サイトのCSS設計において、スタイルの優先順位を意図的にコントロールできるようになります。

:local-link 疑似クラス

:local-linkは、現在のページと同じオリジン（ドメイン）へのリンクにスタイルを当てるための疑似クラスです。
外部リンクと内部リンクをCSSだけで視覚的に区別することが容易になります。

/* 外部リンクにアイコンをつける */
a:not(:local-link)::after {
  content: " (外部リンク)";
  font-size: 0.8em;
}

アクセシビリティの観点から、外部リンクを明示することが推奨されており、このプロパティはその実装をシンプルにしてくれます。

:has()の強化と@layerの拡張により、CSSだけでスケーラブルなスタイル管理が実現できる設計力が求められる時代になっています。

---

スクロール・ビューポート関連の新機能

scroll-state() コンテナクエリ

scroll-state()はコンテナクエリの新しい形式で、スクロール状態（スナップ・スティッキー状態など）に応じてスタイルを変えることができます。
これまでスクロール位置に応じたスタイル変更はJavaScriptのIntersection ObserverやScroll Eventを使う必要がありましたが、CSSだけで実現できるようになります。

.sticky-header {
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  .sticky-header {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    background: white;
  }
}

ヘッダーが画面上部に固定（sticky）された瞬間に影や背景色を追加するといった表現が、JavaScriptなしで実装できます。

view() 関数（scroll-timeline の簡略記法）

view()関数は、Scroll-driven Animations（スクロール駆動アニメーション）をより簡潔に記述するための関数です。
要素がビューポートに入ってきたタイミングでアニメーションを起動するといった実装が可能です。

.animate-in {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

Landing Page制作でよく使われる「スクロールすると要素がフワッと出てくる演出」が、JavaScriptのライブラリなしで実現できます。

interpolate-size プロパティ

interpolate-sizeプロパティは、width: autoやheight: autoへの/からのトランジションを可能にするプロパティです。
これまで「高さautoへのアニメーション」はCSSでは不可能で、JavaScriptでmax-heightをアニメーションさせるハックが一般的でした。

:root {
  interpolate-size: allow-keywords;
}

.accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}

.accordion-content.open {
  height: auto;
}

アコーディオンメニューやドロップダウンのアニメーションをCSSだけで美しく実装できるようになる、待望の機能です。

scroll-state()とinterpolate-sizeは、これまでJavaScript必須だったUI表現をCSSだけで実現できる革命的な機能です。

---

その他の重要な新機能まとめ

text-box プロパティ（text-box-trim / text-box-edge）

text-boxはテキストの行ボックスの上下に生じる余白（ハーフリーディング）をコントロールするためのプロパティです。
text-box-trimとtext-box-edgeの2つのプロパティから構成されます。

フォントによって生じる意図しない上下の余白を削除できるため、ボタンやカードの垂直方向のアライメントを正確に制御できます。

.heading {
  text-box: trim-both cap alphabetic;
}

デザインカンプ通りの上下余白を再現するのに苦労していたコーダーには、かなり嬉しい機能です。

shape() 関数（clip-path用）

shape()はclip-pathプロパティで使用できる新しい関数で、パスを記述するための直感的な構文を提供します。
これまでのSVGパスやpolygon()よりも柔軟な形状を、より読みやすい記述で実現できます。

.clip-element {
  clip-path: shape(
    from 0% 0%,
    line to 100% 0%,
    line to 100% 80%,
    curve to 50% 100% with 75% 90%,
    curve to 0% 80% with 25% 90%,
    close
  );
}

波形やカーブのある装飾的なセクション区切りを、CSSだけで表現する際に役立ちます。

その他の注目機能一覧

Chrome 150ではここまで紹介した機能以外にも、以下のような機能が追加・強化されています。

特にfield-sizing: contentはフォームのテキストエリアを入力内容に応じて自動伸縮させる実装が一行で書けるため、実務での活用頻度が高くなると予想します。

textarea {
  field-sizing: content;
  min-height: 3em;
  max-height: 20em;
}

text-boxやfield-sizingなど、細部のUIクオリティを高める機能が揃ったことで、CSSの表現力はさらに大きく向上しました。

---

Chrome 150の新機能を実務でどう使うべきか

ブラウザ対応状況の確認方法

新機能を実務に取り入れる前に必ず確認すべきなのが、ブラウザの対応状況です。
Chrome 150で実装されていても、SafariやFirefox、特にiOS Safariでの対応が遅れている機能も存在します。

確認には以下のリソースを活用しましょう。

特に今回紹介した機能のうち、reading-flowやscroll-state()はChrome/Edgeでの先行実装であり、2025年時点ではSafariやFirefoxでの対応が限定的な場合があります。
プロジェクトのターゲットブラウザに合わせて採用可否を判断してください。

プログレッシブエンハンスメントの考え方で導入する

新機能を取り入れる際にはプログレッシブエンハンスメントの考え方が有効です。
これは「まず基本的な機能をすべてのブラウザで動作させ、対応ブラウザだけに追加の体験を提供する」という設計思想です。

/* 基本のアコーディオン（全ブラウザ対応） */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}
.accordion-content.open {
  max-height: 500px;
}

/* interpolate-sizeに対応しているブラウザだけ上書き */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .accordion-content { max-height: none; height: 0; }
  .accordion-content.open { height: auto; }
}

@supportsアットルールを使うことで、新機能に対応しているブラウザだけに新しいスタイルを適用し、未対応ブラウザにはフォールバックを用意できます。

学習・テストのための環境構築

新しいCSS機能をすばやく試せる環境を持っておくと、学習効率が大幅に上がります。
私が浜松でフリーランスとして活動する中でよく使っている検証環境は以下の通りです。

新機能は@supportsを使ったプログレッシブエンハンスメントで段階的に取り入れることが、実務での安全な導入戦略です。

---

まとめ

Chrome 150で追加された18個のCSS新機能について、実務目線でひとつひとつ解説してきました。
最後に今回の内容を整理しておきます。

CSSはもはや「装飾のための言語」ではなく、インタラクションやアクセシビリティ、状態管理まで担うフロントエンド開発の中核に進化しています。
今回のChrome 150のアップデートは、その方向性をさらに強く示すものでした。

静岡県浜松市のWEBデザイナーとして、私もこれらの機能を日々の制作に積極的に取り入れながら、クライアントにとって最良のWEBサイトを作り続けていきます。
この記事が皆さんのCSS学習と実務の一助になれば嬉しいです。