2024年、Web制作者がチェックしておきたいCSSの新機能のまとめ
Post on:2024年12月19日
sponsors
今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。
2024年、Web制作者がチェックしておきたいCSSの新機能を紹介します。
CSS Wrapped 2024
CSS Wrapped 2024 -GitHub
下記は各ポイントを意訳したものです。
※元サイト様のApache License 2.0に基づいて翻訳しています。
- はじめに
- コンポーネント: field-sizingプロパティ
- コンポーネント: interpolate-sizeプロパティ
- コンポーネント: details要素
- コンポーネント: details要素のスタイル
- コンポーネント: Anchor positioning
- インタラクション: スクロールバーのスタイル
- インタラクション: @view-transition
- インタラクション: Scroll-driven animations
- インタラクション: スクロールスナップのイベント
- 開発者エクスペリエンス: ::backdrop
- 開発者エクスペリエンス: light-dark()関数
- 開発者エクスペリエンス: @property
- 開発者エクスペリエンス: Popover API
- 開発者エクスペリエンス: @starting-style
- 開発者エクスペリエンス: ruby-alignプロパティ
- 開発者エクスペリエンス: paint-orderプロパティ
- 開発者エクスペリエンス: CSSのネスト
はじめに
2024年はCSSの多くの機能がベースラインになり、ポップオーバーや排他的アコーディオンや@propertyや@starting-styleなどがすべての主要ブラウザでサポ－トされました。
各ブラウザのエンジニア、仕様の作成者、コミュニティへの意見のおかげで、CSSは大きな飛躍を遂げた一年でした。
2024年にChromeとWebプラットフォームにリリースされたCSSの新機能を17個紹介します。
コンポーネント: field-sizingプロパティ
field-sizingプロパティがない場合、コンテンツサイズの入力フィールドを作成するには入力欄のサイズを推測するか、JavaScriptで文字数を数えてユーザーが入力するたびに要素の高さや幅を増やす必要がありました。しかし今ではたった一行のCSSで実現できます。
|
1 2 3 |
textarea, select, input { field-sizing: content; } |
field-sizingプロパティを使用すると、textarea, select, inputがコンテンツ値のサイズに合わせて拡大・縮小できます。
下記のデモページでは、「Without」はfield-sizingなし、「With」はfield-sizingを設定した場合のフォームの入力欄の動作を比較できます。
See the Pen
field-sizing example by coliss (@coliss)
on CodePen.
field-sizingプロパティはあらゆる言語、あらゆるフォント、あらゆるフォントサイズで機能します。これまでは多大な労力が必要だった実装が、たった一行のCSSで簡単に実装できます。
コンポーネント: interpolate-sizeプロパティ
よくリクエストされるCSSの機能に、height: auto;のアニメーションです。このリクエストのバリエーションとして、width: auto;やmin-content, max-content, fit-contentなどのキーワードでもアニメーションできることです。
Chrome 129+ではinterpolate-sizeプロパティやcalc-size()関数がサポートされ、これらのアニメーションが実装できるようになりました。
See the Pen
Growing buttons with interpolate-size: allow-keywords by coliss (@coliss)
on CodePen.
これを実現するもっとも簡単な方法は、:rootにinterpolate-size: allow-keywords;を設定することです。これでページ全体で有効にすることができます。
|
1 2 3 |
:root { interpolate-size: allow-keywords; } |
ほとんどの場合、この記述で十分だと思います。より詳細なコントロールが必要な場合は、代わりにcalc-size()関数を使用します。詳しくは、下記をご覧ください。
CSSのinterpolate-sizeプロパティやcalc-size()関数を使用すると、width: auto;やheight: auto;へのアニメーションができるようになります
コンポーネント: details要素
Webでよく使用されるUIパターンの一つが、アコーディオンコンポーネントです。アコーディオンは複数の開示ウィジェットで構成され、個別に展開（または折りたたみ）してコンテンツを表示（または非表示）することができます。
アコーディオンは、details要素で実装できます。その際、視覚的にグループ化され、それらが一緒に属していることを示します。
排他的アコーディオンを実装するには、details要素にname属性を追加します。同じname属性を持つ複数のdetails要素は、セマンティックグループを形成します。グループ内のdetails要素の一つを展開すると、前に展開されていたものは自動的に折りたたまれます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<details name="learn-css"> <summary>Welcome to Learn CSS!</summary> <p>…</p> </details> <details name="learn-css"> <summary>Box Model</summary> <p>…</p> </details> <details name="learn-css"> <summary>Selectors</summary> <p>…</p> </details> |
排他的アコーディオンの動作は、デモページをご覧ください。
一つを展開すると、前に展開されたいものは折りたたまれます。
See the Pen
Exclusive Accordion Demo 2/3: Exclusive Accordion by coliss (@coliss)
on CodePen.
詳しくは、下記をご覧ください。
details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
コンポーネント: details要素のスタイル
Chrome 131+で、details要素とsummary要素の構造を実装するときのスタイル設定が増えました。これによりアコーディオンウィジェットやディスクロージャーウィジェットを実装するときにこれらの要素を使用できるようになりました。
特に注目すべきスタイルは、displayプロパティが使用できるようになり、展開・折りたたみ部分のスタイルを指定する::details-content疑似要素も使用できるようになったことです。
たとえば、水平の排他的アコーディオンを実装するには、details要素に行方向に配置されるflexレイアウトを設定できます。
|
1 2 3 4 |
details { display: flex; flex-direction: row; } |
実際の動作は、デモページをご覧ください。
See the Pen
Styling <details>: Horizontal Accordion by coliss (@coliss)
on CodePen.
また、details要素のコンテンツは自動的に::details-content疑似要素にラップされます。details要素のsummary以外のすべての子要素は、::details-content疑似要素で挿入できます。
たとえば、::details-content疑似要素を使用して、詳細開示要素の展開と折りたたみ部分をコントロールすることができます。
See the Pen
Styling <details>: Material UI Accordion (interpolate-size version) by coliss (@coliss)
on CodePen.
詳しくは、下記をご覧ください。
コンポーネント: Anchor positioning
アンカーは、要素を相対的に配置するための新しい宣言的な方法です。メニュー、ツールチップ、セレクト、ラベル、カード、ダイアログなどに最適です。ブラウザに組み込まれたAnchor positioningにより、サードパーティのライブラリなどに依存することなく、階層化されたインターフェイスを構築できます。
アンカーの関係性を作成するには、アンカー（Anchor）と配置された要素（positioned element(s)）が必要です。
アンカーは位置決めされた要素が方向づけられる要素で、1行のCSSで要素をアンカーに変えることができます。
|
1 2 3 |
.anchor { anchor-name: --over-easy; } |
配置された要素は、アンカーに対して相対的に配置される要素です。これらの要素はposition-anchorで相対的に配置したいアンカーを指定し、CSSで配置される側や領域（area）を設定します。
|
1 2 3 4 5 |
.positioned-element { position: fixed; position-anchor: --over-easy; position-area: block-end; } |
下記のデモページでは、かわいい目玉焼きがアンカーで、「Over-Easy」というテキストが配置された要素です。
See the Pen
Over-Easy - Mini Web Machine by coliss (@coliss)
on CodePen.
potition-areaプロパティにはさまざまなオプションがあります。デモでは論理プロパティ値block-endを設定していますが、center, buttonなども設定できます。
詳しくは、下記をご覧ください。
マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
インタラクション: スクロールバーのスタイル
スクロールバーのスタイルは、これまでは::webkit-scrollbar-*疑似要素で可能でした。この方法はChromeやSafariでは問題なく機能しますが、CSS Working Groupによって標準化されることはありませんでした。
Chrome 121+では、スクロールバーの幅とカラーをスタイルするscrollbar-widthプロパティとscrollbar-colorプロパティが使用できます。
|
1 2 3 4 |
.scroller { scrollbar-color: hotpink blue; scrollbar-width: 10%; } |
これらのプロパティはFirefoxでもサポートされており、Safariでも部分的にサポートされています。
See the Pen
Scrollbar Styling by coliss (@coliss)
on CodePen.
詳しくは、下記をご覧ください。
インタラクション: @view-transition
2023年、Chromeはエキサイティングな新機能として、Webサイトのさまざまなビュー間でリッチでシームレスな遷移を可能にする同一ドキュメントのビュー遷移をリリースした最初のブラウザです。そして、2024年にはクロスドキュメントのView Transitions APIをリリースし、Webをさらに進化させました。
クロスドキュメントのビュー遷移では、2つの別々のドキュメント間でビュー遷移を実行できます。その結果、ビュー遷移を使用するためにWebサイトをSPAとして作り直す必要がなくなりました。必要なのは、あるページから別のベージへのナビゲーションだけで、Webと「Web」にするプリミティブです。
|
1 2 3 |
@view-transition { navigation: auto; } |
詳しくは、下記をご覧ください。
パネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する
インタラクション: Scroll-driven animations
Scroll-driven animationsはスクロール駆動型アニメーションで、Web上では一般的なUXパターンです。Scroll-driven animationsは、スクロールコンテナのスクロール一にリンクされています。つまり、上下にスクロールすると、それに連動してアニメーションが前方または後方にスクロールします。
詳しくは、下記をご覧ください。
Scroll-driven AnimationsでCSSでの実装が大きく変わる！ スクロールをトリガーにしたアニメーションを実装する方法
スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張 -Scroll-Driven Animations Debugger
インタラクション: スクロールスナップのイベント
ブラウザに組み込まれているスナップイベントにより、これまでスクロール中に見えなかった瞬間が適切なタイミングで常に正しく表示されるようになりました。これはスクロールスナップを完全なものにする欠けていたピースです。
2つの新しいスナップイベントは、scrollsnapchangeとscrollsnapchangingです。
|
1 2 3 4 |
scroller.addEventListener('scrollsnapchange', event=> { console.log(event.snapTargetBlock); console.log(event.snapTargetInline); }) |
2つのイベントを組み合わせることで、スクロールジェスチャで要素を選択するためのシームレスなエクスペリエンスを作成できます。下記デモページのルーラーは、1/4インチの値にスナップし、Scroll-driven animationsを使用して選択された値をハイライトします。scrollsnapchangingイベントは入力された数値を更新するために使用され、scrollsnapchangeイベントは選択された値をサポートおよび確認するために使用されています。
See the Pen
Scroll Snap Ruler Picker by coliss (@coliss)
on CodePen.
開発者エクスペリエンス: ::backdrop
これまで::backdrop疑似要素はどこからも継承されませんでした。Chrome 122+で::backdropはツリーに従う要素に変換され、元の要素から継承可能なプロパティを継承するようになりました。
この変更のおかげで、特定の要素のカスタムプロパティ値を上書きすることが可能になり、::backdropはそれらにアクセスできるようになります。たとえば、開いているdialog要素に関連付けされている::backdropはそのdialogで使用可能なカスタムプロパティにアクセスできます。
See the Pen
dialog::backdrop by coliss (@coliss)
on CodePen.
詳しくは、下記をご覧ください。
CSSでオーバーレイのスタイルが期待通りに表示されない、::backdrop疑似要素の変更された使い方
開発者エクスペリエンス: light-dark()関数
CSSのシステムカラーには、現在使用されているcolor-scheme値に反応する機能があります。たとえば、CSSでcolor: CanvasText;と設定すると、color-scheme値に応じてカラーがライトになったりダークになったりします。
下記のデモページでは、ドロップダウンを使用してdiv要素のcolor-schemeを制御しています。div要素はシステムカラーでスタイルされるため、ライトとダークの両方のスタイルをサポートします。
See the Pen
CSS System Colors and CSS color-scheme by coliss (@coliss)
on CodePen.
light-dark()関数はデベロッパーに同じ機能を提供します。この関数は2つの引数をとり、どちらも<color>である必要があります。
|
1 2 3 4 5 6 |
:root { color-scheme: light dark; --primary-color: light-dark(#333, #fafafa); --primary-background: light-dark(#e4e4e4, #121212); --highlight-color: light-dark(hotpink, lime); } |
color-scheme値を変更することで、light-dark()関数の1番目または2番目の値が使用されます。
- 使用されているカラースキームが
lightか不明な場合は、1番目の値が計算値に返されます。 - 使用されているカラースキームが
darkの場合は、2番目の値が計算値に返されます。
下記のデモページでは、ラジオボタンの選択を変更すると、color-schemeの値が変わります。
See the Pen
Color switching with light-dark() and color-scheme by coliss (@coliss)
on CodePen.
詳しくは、下記をご覧ください。
CSSのlight-dark()関数の実践的な使い方、ライトテーマとダークテーマの作成方法
開発者エクスペリエンス: @property
2024年は@propertyがついにベースラインになった年です。@propertyとCSS.registerPropertyを使用すると、カスタムプロパティを特性の型に登録し、継承の動作を制御し、初期値を与えることができます。
|
1 2 3 4 5 |
@property --myColor { syntax: '<color>'; inherits: false; initial-value: hotpink; } |
カスタムプロパティを特定の型に登録することで、ブラウザはアニメーションやトランジションで使用されるときにその値を補間する方法を知ることができます。カスタムプロパティをアニメーション化することで、CSSはより簡潔になり、読みやすくなります。
下記のCSSでは、--angleプロパティを0degから360degまでアニメーション化しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; } @keyframes adjust-angle { to { --angle: 360deg; } } div { --angle: 0deg; animation: 10s adjust-angle linear infinite; rotate: var(--angle); } |
下記のデモページでは、グラデーションのボーダーが回転します。回転はボーダーが使用する--angleプロパティをアニメーション化することで実現しています。
See the Pen
CSS Rainbow Gradient Border (Animated) by coliss (@coliss)
on CodePen.
詳しくは、下記をご覧ください。
CSS変数がもっと便利になる新しい記述方法、CSSの次世代変数@propertyがすべてのブラウザにサポートされました
開発者エクスペリエンス: Popover API
Popover APIは、ツールチップ、メニューなど階層化されたインターフェイスを構築するのに役立ちます。デフォルト値を持つポップオーバーを作成するために必要なのは、トリガーとなるbuttonとポップオーバーする要素だけです。
|
1 2 3 4 5 |
<button popovertarget="my-popover">Open Popover</button> <div id="my-popover" popover> <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p> </div> |
実際の動作はデモページでご覧ください。
See the Pen
Simple default popover by coliss (@coliss)
on CodePen.
詳しくは、下記をご覧ください。
これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
開発者エクスペリエンス: @starting-style
@starting-styleルールは、最初のスタイル更新を受け取る前に要素のスタイルを定義するために使用されます。たとえば、CSSトランジションで遷移するように設定した場合、これらの開始スタイルを使用して開始時のスタイルを設定できます。
下記のCSSでは、新しく追加されたdiv要素がイエローから透明の初期の背景色にフェードします。
|
1 2 3 4 5 6 7 8 |
div { transition: background-color 0.5s; background-color: transparent; @starting-style { background-color: yellow; } } |
実際の動作はデモページでご覧ください。
See the Pen
Yellow Fade Technique with Modern CSS by coliss (@coliss)
on CodePen.
もう一つの使用例として、ダイアログを開いたときにアニメーション表示することもできます。
|
1 2 3 4 5 6 7 8 9 |
dialog[open] { opacity: 1; transform: scaleX(1); @starting-style { opacity: 0; transform: scaleX(0); } } |
実際の動作はデモページでご覧ください。
See the Pen
Dialog animation example by coliss (@coliss)
on CodePen.
詳しくは、下記をご覧ください。
CSSでdisplay:none;からアニメーションができる！ @starting-styleがすべてのブラウザにサポートされました
開発者エクスペリエンス: ruby-alignプロパティ
Chrome 128+では、ルビが改行可能になり、ルビのテキストをruby-alignでスタイル設定できるようになりました。これによりruby要素のテキストの上や横で注釈や補足情報をどのように表示するかを細かく設定できるようになりました。
改行可能なルビを使用すると、折り返されたルビのテキストはラップされたベーステキストの上に配置され、理想的なテキスト表示が実現されます。
詳しくは、下記をご覧ください。
開発者エクスペリエンス: paint-orderプロパティ
text-strokeを使用する場合、paint-orderプロパティはテキストの塗りつぶしと希望するストロークを重ねることができます。これはストロークが塗りつぶしの上にレンダリングされるようにしたいときに便利です。
デフォルトの描画順番は、fill, stroke, markersです。
これらを制御するCSSは、1行です。キーワードを順番に設定することで、塗りの前にストロークを描画するpaint-orderを設定します。
|
1 2 3 4 5 6 |
h1 { paint-order: stroke fill; color: white; -webkit-text-stroke: 5px black; } |
下記のデモページは、描画の順番を変えたものです。これでようやくtext-strokeが使い物になったという人もいます。
See the Pen
Super CSS World - a paint-order demo by coliss (@coliss)
on CodePen.
開発者エクスペリエンス: CSSのネスト
CSSネストの奇妙な癖を修正するために、仕様にCSSNestedDeclarationsインターフェイスが追加されました。これにより、スタイルルールの後に続く宣言がずれることがなくなりました。
たとえば、下記のCSSでは.foo要素の背景色をレッドではなく、グリーンにします。
|
1 2 3 4 5 6 7 8 9 |
.foo { width: fit-content; @media screen { background-color: red; } background-color: green; } |
CSSNestedDeclarationsを使用すると、CSSルールは下記のようにシリアライズされ、background-color: green;の宣言は元の場所に保持されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
↳ CSSStyleRule .type = STYLE_RULE .selectorText = ".foo" .resolvedSelectorText = ".foo" .specificity = (0,1,0) .style (CSSStyleDeclaration, 1) = - width: fit-content .cssRules (CSSRuleList, 2) = ↳ CSSMediaRule .type = MEDIA_RULE .cssRules (CSSRuleList, 1) = ↳ CSSNestedDeclarations .style (CSSStyleDeclaration, 1) = - background-color: red ↳ CSSNestedDeclarations .style (CSSStyleDeclaration, 1) = - background-color: green |
詳しくは、下記をご覧ください。
sponsors
