はじめに
2025年の Advent Calendar で CSSのことを取り扱ったのですが、今年も様々な CSS のプロパティや機能が発表・実用化されてきました。
発表されてもすぐに使えるわけでは無いのがもどかしいところでもあるのですが、今のうちから備えておいて損になることはありません。
前回の記事で取り上げた機能もありますが、2026 年に使いたいな、使えるといいなと思う、注目のプロパティや機能を紹介したいと思います。
と、その前に、この記事には Baseline という単語が度々出てきます。
本文に入る前に、この単語について簡単に押さえておきましょう。
Baseline（ベースライン）とは？
「Baseline（ベースライン）」とは、主要なブラウザやユーザー環境の大半で十分なサポートが揃い、「安心して使える 機能の標準ライン」を意味します。
Baseline に含まれる機能は、現場や実務で互換性を深く気にせず、通常通り利用できる目安となります。
新機能の場合は、各ブラウザで十分なサポート期間が経過した時に Baseline 入りすることが多く、「採用して大丈夫？」の判断基準になります。
参考：MDN Baseline 互換性ガイド
Widely available
「Widely available」とは、主要な最新ブラウザ（Chrome・Edge・Firefox・Safari など）で幅広くサポートされている状態を示す指標です。
このバッチがついた プロパティや機能は、“現場でも安心して使える”“互換性トラブルの心配がほぼない”という意味で、プロジェクト導入の安心材料となります。
Newly available
「Newly available」は、最近主要なブラウザでサポートが始まったばかりの新しい CSS 機能に付けられるバッチです。
最先端の表現や便利な新機能を使えるメリットがある一方、すべてのユーザー環境で対応しているわけではないので、導入時はプログレッシブエンハンスメントによる互換性への配慮が重要です。
Limited availability
「Limited availability」は、一部のブラウザのみで対応が始まっている状態、もしくは限定的なサポート状況を示します。
このバッチが付いた機能は、まだ広く普及しておらず、古い環境や一部主要ブラウザでは未対応の可能性が高いため、
“実験的に導入する”“将来性を見据えて検証する”といった限定的な使い方に向いています。
まずは、「State of CSS 2025」のアワードから 4 つ
「State of CSS 2025」とは、CSS の最新機能・ツール・フレームワーク・トレンドなどについて、世界中のフロントエンド開発者を対象に毎年行われている大規模アンケート調査と、その結果レポートです。
最新 CSS の「何が流行っているか？」「どの機能が実務で活用しやすいか？」が調査結果で一目でわかり、ウェブ制作やフロントエンド開発現場で「2025 年の CSS のリアルな現状・今後の流れ」を把握するための指針になります。
その中から 2025 年にアワードに選ばれた 4 つ機能を紹介。
1. :has() - 「Most Used Featur」&「Most Loved Feature」W 受賞
“Most Used Feature (最も使われた機能) ”に選ばれたのは :has() になりました。
“Most Loved Feature (最も愛された機能)”にも選ばれているので、なんとダブル受賞です。
“Most Used Feature”はアンケート回答者のうち、「この 1 年で最も利用された」機能やプロパティに贈られる賞で実務・現場での採用率・使用頻度の高さが指標になってます。
また、“Most Loved Feature”は 利用経験者のうち、「最も好き・気に入った」と回答した CSS 機能に贈られる賞で、『使っていて楽しい』『感動した』といった感情的な高評価の証です。
「導入した現場で役立ち、その体験がポジティブで忘れがたい」と多くのエンジニアが感じた結果、今回の受賞につながったのかなと思ってます。
機能としては、:has() セレクタが設定された要素から参照し、引数に指定されたセレクタにマッチした要素が見つかった場合に有効になるセレクターになります。
:has()セレクタの利用例：
/* 親要素divが子要素にinput:checkedがある場合だけ背景色を変更 */ div:has(input:checked) { background-color: #e0ffe0; }
こうした使い方により、これまで JavaScript で書いていた判定を CSS だけで実装できるようになりました。
私個人、今年も大変お世話になったセレクタなのですが、:has()セレクタがこの賞に選ばれたすごいところは Baseline が 「Newly available」段階にも関わらず多くの開発者が実際に現場で使い評価していること。
一般的にはブラウザのサポート状況を考慮し「Widely available」になってから徐々に使われ始め、その後に評価されることが多いのですが、 :has() はそれすら待ちきれずに多くの開発者に使われているところが支持率の高さを伺えます。
特にセレクタなのでプログレッシブエンハンスメントでの回避策が難しいんですよね。
ちなみに、:has()セレクタが「Newly available」になったのは Firefox がサポートした 2023 年 10 月。
「Widely available」になるには 30 か月経過した 2026 年 4 月頃になるのですが、Firefox ユーザはバージョンアップに対する意識が比較的高く、OS に依存してアップデートに上限がある Safari が、 :has() セレクタをサポートして既に 30 か月を経過している背景もあり、実践への投入にも繋がっているのかなと。
実際、CSS の歴史 の一つのターニングポイントともいえる革命的なセレクタなので是非使ってその素晴らしさを体感してみてください。
2. light-dark() - 「Largest Awareness Increase」受賞
続いて、“Largest Awareness Increase（前年よりも認知度が大きく上昇した機能）”に選ばれた light-dark() です。
この賞は「今年、特に多くの人に知られるようになった CSS 機能」に贈られます。
ダークモードが標準化しつつある今、各種サービスやブラウザが対応を進める中で light-dark() の認知度が急速に広がった、というトレンドが反映されています。
light-dark()は、ユーザーの端末やブラウザがライトモードかダークモードかを判別し、その状態に応じて異なる色を CSS で指定できる関数です。
例えば下記のように記述することで、ユーザーのカラーモードに応じたデザインが簡単に実現可能です。
light-dark()の利用例：
:root { /* ページがライト/ダーク両対応であることをブラウザに伝える */ color-scheme: light dark; } body { /* 未対応ブラウザはこれが使われる */ color: #333b3c; /* 対応ブラウザはカラーモードで自動切り替え */ color: light-dark(#333b3c, #efefec); }
light-dark()の 1 つ目の引数がライトモード時の色、2 つ目がダークモード時の色として設定できます。
また、light-dark()の前に通常どおり color を指定しておくことで、未対応ブラウザでも基本色を維持でき、プログレッシブエンハンスメントにも対応可能です。
多くのウェブサービスや OS がダークモードをサポートし、ユーザー側で簡単に切替ができるようになった背景もあり、CSS のみでこの環境対応ができる light-dark()は、今後さらに利用が広がっていくと思われます。
Pleasanterでも複数のテーマを用意していますが、将来的に light-dark()を使って、ユーザーのカラーモードに合わせたテーマを用意するのも面白いですね。
現時点（2025 年 12 月）では主要ブラウザの最新バージョン（Chrome、Edge、Firefox）で light-dark()が順次サポートされていますが、Safari など一部ブラウザでは未対応です。
そのため、今すぐ全ユーザー向けに展開するにはサポート状況を確認するのがおすすめです。
注目度や期待値が高い機能であることは間違いないので、light-dark()の普及状況を注視していきたいと思います。
3. text-wrap: pretty -「Largest Usage Increase」受賞機能
“Largest Usage Increase（前年と比べてもっとも利用率が伸びた機能）” に選ばれたのが text-wrap: pretty です。
多くの開発者や現場で「今年から一気に使われ始めた」と感じられる最新のトレンドや、業務導入が進んだ機能となります。
text-wrap: pretty; は、テキストの改行や折り返しの見栄えをより自然かつ美しくコントロールできるプロパティです。
従来の自動改行と異なり、文章の塊・単語・句読点・引用符・数字などが不自然に分断されるのを防ぎ、日本語や英語を問わず、より“読みやすい”レイアウトを CSS だけで実現できます。
text-wrap: pretty の利用例：
article, .card-description { text-wrap: pretty; }
このように指定するだけで、テキスト領域の幅や内容に合わせて「なるべくきれいな形で自動折り返し」を行ってくれます。
注目が高まった理由として、
-
日本語含め多言語対応ができる
これまで現場では「不自然な改行」や「禁則処理」を手作業で調整することが多く、特に日本語レイアウトで手間がかかっていた部分を、CSS のみでかなり改善できるように -
デザイン面・可読性の向上
文章やキャプション、カードデザインなどでテキストを“美しく折り返す”ニーズが増えている中、簡単かつセマンティックな方法として注目 -
ブラウザのサポートが進んできた
2025 年現在では主要ブラウザ（Chrome、Edge、Safari、Firefox）で順次サポートが進み、現場でも本格導入が進んでいる
が良く見られます。
“Largest Usage Increase” に選ばれたのは、「実用フェーズ入りした CSS プロパティ」の証拠ですね。
また、text-wrap: pretty はプログレッシブエンハンスメントの好例で、サポートされていないブラウザでは指定が無視され通常通りのレイアウト(text-wrap: normal 相当)となるため、「Newly available」でもレイアウト崩れの可能性は低いです。
つまり、対応ブラウザではより美しいテキスト折り返し（エンハンスメント）が得られ、未対応ブラウザでは従来のレイアウトが維持されます。
この性質によって、text-wrap: prettyを安心して導入でき、現場での実用・普及が進んでいるのだと思います。
注意点として、text-wrap の仕様上、印刷時には反映されません。
そのため、表示と印刷結果の折り返し位置などに差異が出やすいので、「プリントの見た目が重要な場合」は使用を控えるか、十分な確認をした方が安心です。
Pleasanter も多言語対応しており、特に一覧画面のセル内の折り返しに使えそうなので、2026 年に早速使ってみたいプロパティのひとつです。
4. Subgrid - 「Most Commented Feature」受賞機能
最後となりますが、“Most Commented Feature（最も多くコメントが寄せられた機能）” に Subgrid が選ばれました。
この賞は、「CSS 機能に関して最も多くのコメント・議論・フィードバックが寄せられた」機能・プロパティに贈られます。
様々な意見や議論が活発に交わされた、コミュニティ注目度の高い機能ということですね。
Subgrid は、CSS Grid レイアウト内で子要素（サブグリッド）が親グリッドと同じ列や行の幅・間隔を継承できる、革新的なプロパティです。
これによって多段入れ子レイアウトでも “揃った美しいマス目” を驚くほど簡単に作れるようになりました。
Subgrid の利用例：
.grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; } .grid-item { display: grid; grid-template-columns: subgrid; }
このように subgrid を指定すると、親のグリッド構造をそのまま引き継ぎ、セクションごとに列揃えや行揃えが非常にシンプルに実現できます。
Subgrid が特に強みを発揮するのは、「表・フォーム・複雑なコンポーネント」など、多層構造や細かな調整が必要な場面です。
従来は CSS で“入れ子のズレ”や“要素の位置合わせ”に悩むケースが多かったものの、Subgrid 登場によりグリッド全体の構造美を保ったまま設計が可能になったことで、多くの開発者・デザイナーから注目や議論が集まっています。
Pleasanter でも、エディタ画面や一覧表示、ラベル・コントローラ・エラーメッセージの位置揃えなど、複数要素が絡む UI での導入に期待しています。
2025 年現在では主要ブラウザ（特に Firefox、Safari、最近の Chrome など）で subgrid のサポートが進み、“本格的なレスポンシブデザイン”や複雑なレイアウトにも採用しやすくなっています。
導入時には「Can I use」などで対応状況を確認すると安心です。
コミュニティで議論が多かった分、今後も実装事例やノウハウの蓄積、そして仕様自体のブラッシュアップとベストプラクティスの共有に大いに期待しましょう。
その他の気になるプロパティ ＆ 機能。
上にあげたもの以外にも使ってみたい、気になるプロパティや機能が他にもいろいろあるのでご紹介。
目安として Widely availableに切り替わったであろう時期を添えていますが、間違っている可能性もありますので参考程度にお願いします。
（どこにも具体的に時期は書いてなかったのでAIに調べてもらいました）
いずれにせよ『Widely available』なので安心してお使いいただけると思います。
1. @layer (2022年以降)
複数の CSS ファイルやフレームワークを同時に使う場面で、「どのスタイルが優先されるか？」を分かりやすく定義できる機能。
今まではスタイルの詳細度・順番に左右されがちでしたが、@layer で意図通りの制御が可能になるため、最小限のセレクタで狙った要素を指定し、スタイルを設定することができます。
Pleasanter でも詳細度による予期せぬレイアウト崩れを防ぐため導入を検討中。
さらに、ユーザが設定したスタイルをそのままアプリに反映できるので「あれ？なんで効かないの？」という CSS あるあるな経験が無くなるのではと期待。
/* はじめに順番を定義 */
@layer base, components, utilities, theme;
/* サイト全体のベーススタイル */
@layer base {
...;
}
/* ボタンやカードなど部品のスタイル */
@layer components {
...;
}
/* 汎用のユーティリティクラス */
@layer utilities {
...;
}
/* テーマ別のスタイル */
@layer theme {
...;
}
このようにレイヤーを順序立ててスタイルを提議すると詳細度の前にレイヤーレベルでの判定が入るので、スタイルの継承や上書きが容易になります。
レイヤー名が指定されていない未定義レイヤーは暗黙の最上位レイヤーとなり最も優先されるので、ユーザが書いたスタイルをそのまま反映できるようになるのです。
うーん、やはり便利ですね。
取り入れるためには既存スタイルの整理整頓が大変ですが、2026年には是非導入したいです。
2. コンテナクエリ (2023年以降)
従来は「画面（ビューポート）のサイズ」だけでしかレスポンシブデザインを組めませんでしたが、コンテナクエリは“各コンポーネント（入れ物）のサイズ”に応じてデザインを細かく調整できる CSS 機能です。
これにより
- 複数のパーツや再利用コンポーネントが、それぞれの親要素サイズに応じて柔軟に切り替わる
- 複雑なグリッドやカード UI でも、画面やコンテナサイズごとの最適表示が可能
といった、より高度で実用的なレスポンシブ設計が実現します。
「Widely available」なので、主要ブラウザで十分にサポートされており、安心してモダンなデザイン手法への移行にチャレンジできます。
/* コンテナ要素に container-type: inline-size を指定 */
.card-list {
container-type: inline-size;
}
/* コンテナ（.card-list）のサイズが500px以上なら .card のレイアウトを変更 */
@container (min-width: 500px) {
.card {
flex-direction: row;
font-size: 1.2em;
}
}
/* それ以外はデフォルト（縦並び・小さめ文字） */
.card {
flex-direction: column;
font-size: 1em;
}
実は、セルの折り返し機能の時に、td の幅に合わせて折り返しが適用されるように組んでみたのですが、td 要素ではうまく行かず…
一覧表示 UI が横スクロールできるようになって、table の横幅がブラウザ幅 100%を超えてフレキシブルになった影響だとは思うのですが…
またどこかでリベンジしたい機能です。
3. メディアクエリの Range 構文 (2023年以降)
「幅が (min) 以上かつ (max) 以下」のような条件をシンプルに書ける新しいメディアクリエリの構文。
従来は複数の条件や記述が必要でしたが、Range 構文を使うことでよりシンプルかつ明快に書けるようになりました。
SASS 変数と組み合わせて使うなど、レスポンシブの設計に積極的に導入できます。
/* 画面幅が600px以上800px以下のとき */
/* （旧）従来の書き方 */
@media (min-width: 600px) and (max-width: 800px) {
.responsive-box {
font-size: 1.2em;
}
}
/* （新）Range構文 */
@media (600px <= width <= 800px) {
.responsive-box {
font-size: 1.2em;
}
}
/* SASS（SCSS）の変数と組み合わせ */
$min: 600px;
$max: 800px;
@media ($min <= width <= $max) {
.responsive-box {
font-size: 1.2em;
}
}
なお、CSS のカスタムプロパティ（--min など）はvar(--min)としてプロパティ値には使えますが、メディアクエリの条件式内では使えません（2025 年時点）。
そのため、ブレイクポイントの動的管理には SASS/SCSS 変数や JS の利用が必要です。
もし実現できたら、ユーザやテナント管理者が簡単にブレイクポイントを設定できたのに。残念。
4. 数学関数 [clamp(), min(), max()] (2020年以降)
clamp() や min()、max() などの数式関数を使うことで、
幅や間隔を狙ったサイズへ調整できるようになりました。
-
min()… 複数の値のうち「最も小さい値」に。
たとえばmin(10vw, 60px)なら、10vw と 60px のうち小さい方が採用 -
max()… 複数の値のうち「最も大きい値」に。
たとえばmax(2vw, 24px)なら、2vw と 24px のうち大きい方が採用 -
clamp()… 指定した「最小値」「推奨値」「最大値」に従い、 推奨値を中心に最小〜最大の範囲で自動調整
min() と max() は「どちらか一方を選ぶ」単純な機能ですが、
clamp() は「この範囲で収めながら、推奨値にも近づけたい」といった完成性（柔軟に範囲を制約しつつ、中間値も設定できる）の高い値指定ができるのが特徴です。
数学関数は他にもいろいろあるのですが、sin() cos()のような三角関数以外のほとんどが『Newly available』です。
また、基本的な算術演算のcalc() は2014年頃から『Widely available』となり、よく使われている有名な数学関数で、今でも幅や余白の動的計算、複雑なレイアウト調整など様々な場面で活躍しています。
最近は clamp() などと組み合わせて、より高度な表現も可能になっているのが特徴です。
主要ブラウザの対応も進んでいるので、自由なデザインや値の自動計算を安心して CSS に委ねることができます。
/* min/maxの例： */
.box {
margin: min(10vw, 60px); /* 10vwと60pxの小さい方がmarginになる */
padding: max(2vw, 24px); /* 2vwと24pxの大きい方がpaddingになる */
}
/* clampの例： */
.container {
width: clamp(320px, 50vw, 720px);
/* 50vwを中心に、320px～720pxの範囲で自動調整 */
}
/* calcを組み合わせたレイアウト例 */
.sidebar {
width: calc(100vw - 480px);
}
.text {
margin-left: calc(2em + 10px);
}
calc()はいろんな所で活用しているのですが、min() max() clamp() はこれからですね。
まずは、レスポンシブで文字の相対サイズや、マークダウンの画像の大きさに使いたいと考えてます。
5. inset (2023年以降)
inset は、top / right / bottom / left の 4 方向の位置指定を
ひとつのプロパティ（ショートハンド）でまとめて記述できる新しい CSS 構文です。
例えば inset: 0; なら全方向 0 で配置され、
inset: 10px 20px; なら上下 10px・左右 20px の指定が一括で可能。
これにより、コードがすっきりし、管理も楽になります。
.card {
position: absolute;
inset: 0; /* top:0; right:0; bottom:0; left:0; と同じ */
}
.dialog {
position: fixed;
inset: 40px 20px auto auto; /* 上:40px, 右:20px, 下:auto, 左:auto */
}
.box {
position: absolute;
inset: 16px 32px; /* 上下:16px, 左右:32px */
}
positionは要所要所で良く使うので、覚えておいて損はないプロパティですね。
6. :nth-child(An+B of S) 構文拡張 (2023年以降)
:nth-child() の構文が拡張されたことで、従来の「n番目」選択に加え、特定の要素群（S）に限定して数える高度なセレクタ指定ができるようになりました。
従来
li:nth-child(2n) { ... } /* 全liの偶数番目 */
拡張構文
li:nth-child(2n of .active) { ... } /* .activeクラスを持つliの偶数番目だけ選択 */
このように、「特定のグループの中だけ」で番目の判定が可能になり、複雑なリスト・動的リスト・フィルタリングUIなどで非常に便利になりそう。
フィルタ・検索後も"見た目の偶数/奇数"を維持したい場合や、階層・状態ごとにインデックス制御が必要なUIに使ってみたいです。
7. @media (any-hover: ...) (2018年以降)
最後に紹介する @media (any-hover: ...)は 2018年頃と少し前に登場したものですが、最近気になっているメディアクエリ。
タッチデバイスでは、要素をタップした後に意図しないホバー状態が固定されてしまう、いわゆる「sticky hover 問題」が起こりがちです。
特にタブ UI でタブボタンのアクティブ状態とホバー状態のスタイルが同じだった場合に 2 重にアクティブボタンが残ってしまうことがよくあります。
hover や any-hover は、デバイスの「ホバー操作」に対応しているかどうかを検出できる CSS メディアクエリで、これを使えば、スマホ／タブレット／PC などユーザーの環境ごとに、最適なホバー表現やスタイル切り替えが可能になります。
@media (hover: ...) / @media (any-hover: ...)との違いは以下の通り。
-
hover:
デバイスの「主な操作方法」が hover に対応しているか判定。
（例：iPad は基本的にタッチ操作なので hover は none） -
any-hover:
デバイスに hover できる入力機器が接続されていれば判定。
（例：iPad にマウスをつなげば any-hover が none から hover に）
使い方はこんな感じ。
/* 主要デバイスでhover可能な場合だけ適用 */
@media (hover: hover) {
a:hover {
background: lightgreen;
}
}
/* どれか一つでもhover可能デバイスがあれば適用 */
@media (any-hover: hover) {
a:hover {
background: yellow;
}
}
/* primaryがタッチのみ・hover不可の場合（スマホなど） */
@media (hover: none) {
/* タッチデバイス向け別UIなど */
}
サンプルでは hover: hover any-hover: hover と内容を分けましたが、追加の入力機器まで考慮できるため、多くのケースをカバーできる any-hover: hover のみで済む場合が多いと思います。
この機能に注目したきっかけは、最近カフェやファミレスなどでiPadとトラックパッド付きキーボードを組み合わせて作業している人をよく見かけるようになったためです。
デバイス自体のパワーやバッテリーの性能の向上、さらにタブレットならではの持ち運びの手軽さなどを考えて、ノート PC ではなくタブレットに移行する人が増えているのかな、と。
今までは@media (hover: hover) {...}だけで十分でしたが、タブレットをマウスやトラックパッドなどの外部入力機器で操作するユーザが増えてきていると考えた場合、@media (any-hover: hover) {...}が最適なのかなと感じましたので、今回紹介させて頂きました。
使うには注意が必要かも？「Newly available」なCSS
Baseineが「Newly available」なので、使えなくはないけど使うには注意が必要なプロパティ・機能を簡単に紹介。
プログレッシブエンハンスメントで回避策があるものは導入してもいいと思いますが、中にはブラウザの処理速度に影響を与える機能もあるので、テストとフォールバックが必須です。
1. @starting-style
アニメーション開始時だけ特定のスタイルを指定できる at-rule。
未対応ブラウザもあるので、プログレッシブエンハンスメント的に使うのがおすすめです。
2. Scroll-driven Animations
スクロール位置に連動したアニメーションを CSS のみで制御可能。
従来は JavaScript で実装していた複雑な動きが CSS だけでスマートに書けるようになりました。
scroll-timeline や view-timeline、View Transitions API など関連仕様のサポート状況も合わせてチェックしましょう。
3. View Transitions API
ページやコンポーネントの切り替え時に、なめらかなアニメーション付きトランジション効果を簡単に実装できるAPIです。
従来はJavaScriptとCSSアニメーションの複雑な組み合わせが必要でしたが、このAPIを使えば「ページ遷移のつなぎ目」や「SPAの画面切り替え」がぐっと美しく・簡単になります。
主要ブラウザでのサポートは始まったばかりですが、対応環境ではUX改善に大きな効果があります。
4. Style Queries（スタイルクエリ）
コンポーネントやコンテナのCSSプロパティの値によってスタイルを分岐させられる画期的な機能です。
従来のメディアクエリは画面サイズやデバイス情報での分岐のみでしたが、スタイルクエリは親要素や自身のCSS値を条件にできるため、
柔軟なデザインやテーマ切り替え・モジュール設計が可能になります。
ただし、主要ブラウザでの実装は進行中。
開発体験や再利用性は大きく向上しますが、パフォーマンスや具体的な挙動は各ブラウザで十分にテストしましょう。
5. overflow: clip プロパティ
従来の overflow: hidden と同じくあふれた要素を隠すことがきるのですが、スクロール領域を作らずにボックス外の内容をシンプルに"切り捨てる"（可視領域外はレンダリングしない）ための新しいプロパティ。
特に position: sticky の祖先要素に overflow: clip を指定すると、position: sticky;の不発を防ぐことができるみたいです！< ここ重要！
例えば、親要素が overflow: hidden の場合、sticky要素がスクロールしても意図通りに固定されないことがありましたが、overflow: clip ではその問題が回避できる場合があるそう。
.sticky-container {
overflow: clip;
}
.sticky {
position: sticky;
top: 0;
}
overflow: hidden;の場合にposition: sticky;が機能しなかったのは、要素を隠すだけでスクロール領域が生成されていたからだったんですね。また一つ勉強になりました。
未対応ブラウザには overflow: hidden でフォールバックでき、プログレッシブエンハンスメント設計とも相性が良いのですが、position: sticky;の不発防止としてはちょっと注意が必要そうなので、テストしつつ@supports (overflow: clip)などで段階的に導入しましょう。
さいごに
来年にむけて実務導入したいプロパティ・機能を紹介しました。
ブラウザのサポート状況を把握し、安心して導入できる機能は積極的に取り入れ、未成熟な機能はプログレッシブエンハンスメント重視で段階導入、というスタンスはフロントエンド開発の現場でとても大切な知見だと思います。
何より、新しい便利な機能はすぐに使いたいですもんね。
CSSは毎年進化が著しく、『少し使いづらい…』と感じていた部分も、たった1つのプロパティや機能だけで一気に開発体験が向上する面白い世界だと思います。
ぜひ新しいプロパティや機能も積極的に取り入れ、2026年もいいものを作っていきましょう！