CSS新機能(CSS入門)

本書の内容は Chrome新機能に移動しました。

はじめに

CSS に追加された主な機能を、Chrome でサポートされたバージョン別に並べてみました。
特に重要な機能には ★ をつけています。
Chrome の開発者ツールの [Elements]-[Computed] で [Show all] チェックをつけると Chrome でサポートしている全プロパティ(ショートハンドを除く)を確認することができます。

サポート履歴

2025年 (Chrome 132〜134)

2024年 (Chrome 121〜131)

Chrome 131 : ページマージンボックス(@bottom-left, ...)
Chrome 131 : 絵文字異形フォント(font-variant-emoji)
Chrome 131 : <details>コンテンツ(::details-content)
Chrome 130 : 改行/段組みされたボックスの表示方法(box-decoration-break)
Chrome 130 : 入力時の前行安定化(text-wrap:stable)
Chrome 130 : 改行位置のバランシング(text-wrap:balance)
Chrome 130 : text-wrapの分離(text-wrap-mode, text-wrap-style)
Chrome 129 : コンテンツのサイズ計算(calc-size())
Chrome 129 : キーワードによる長さにもトランジションを有効化(interpolate-size)
Chrome 128 : ルビの位置(ruby-align)
Chrome 127 : フォントのサイズ調整(font-size-adjust)
Chrome 126 : ビュートランジション(@view-transition)
Chrome 125 : アンカーポジショニング(anchor-name, position-anchor) ★
Chrome 125 : 数値の丸めと剰余計算(round(), mod(), rem())
Chrome 125 : カスタム要素の状態指定(:state())
Chrome 123 : 入力項目サイズ自動調整(field-sizing)
Chrome 123 : ライトモード/ダークモード(light-dark())
Chrome 123 : ペイントオーダー(SVG)(paint-order)
Chrome 123 : 日本語等の文字間空白調整(text-spacing-trim)
Chrome 121 : スクロールバーの色と幅(scrollbar-color, scrollbar-width)
Chrome 121 : スペル・文法エラー疑似要素(::spelling-error, ::grammar-error)

2023年 (Chrome 109〜120)

Chrome 120 : CSSネスティング ★
Chrome 120 : 文字方向疑似クラス(:dir())
Chrome 120 : マスキング(mask-*)
Chrome 120 : 数学関数(exp())
Chrome 119 : 相対的色指定構文(rgb(from ...))
Chrome 118 : スコーピング(@scope)
Chrome 117 : サブグリッド(subgrid) ★
Chrome 117 : 離散値に対するトランジション(transition-behavior, overlay, @starting-style)
Chrome 117 : 見栄え優先の折り返し(text-wrap: pretty)
Chrome 116 : モーションパス関連(offset-position, offset-anchor)
Chrome 116 : 名前付きアニメーションのタイムラインスコープ変更(timeline-scope)
Chrome 115 : スクロールドリブンアニメーション(scroll-timeline, view-timeline, animation-timeline)
Chrome 115 : アニメーションレンジ(animation-range)
Chrome 114 : テキストのバランシング(text-wrap: balance)
Chrome 114 : ホワイトスペース統合(white-space-collapse)
Chrome 113 : イメージセット(image-set())
Chrome 112 : 複数アニメーションの合成方式(animation-composition)
Chrome 111 : 条件付き個数判断(:nth-child(1 of S))
Chrome 111 : RGBを超える色空間(color(display-p3))
Chrome 111 : カラーミックス(color-mix())
Chrome 111 : 三角関数(sin() cos() tan())
Chrome 111 : 代替フォント(font-variant-alternates)
Chrome 111 : LCh/Lab色空間(lch(), lab())
Chrome 111 : コンテナスタイルクエリ(@container style(...))
Chrome 111 : ビュートランジション(view-transition-name)
Chrome 110 : 先頭文字(initial-letter)
Chrome 110 : ピクチャインピクチャ疑似要素(:picture-in-picture)
Chrome 109 : ハイフネーションの文字数(hyphenate-limit-chars)
Chrome 109 : MathMLのフォント調整(math-style, math-shift, math-depth)

2022年 (Chrome 97〜108)

2021年 (Chrome 88〜96)

2020年 (Chrome 80〜87)

Chrome 88 : アスペクト比(aspect-ratio)
Chrome 88 : 複数セレクタ(:is())
Chrome 88 : ハイフネーション(hyphens)
Chrome 88 : 否定セレクタ(:not())
Chrome 87 : 両サイドマージン(margin-inline)
Chrome 87 : 下線位置(text-underline-offset)
Chrome 87 : 論理的方向指定(-start, -end)
Chrome 86 : 強調表示すべき要素(:focus-visible)
Chrome 86 : リストマーカー(::marker)
Chrome 85 : コンテンツの遅延表示(content-visibility)
Chrome 85 : カスタムプロパティ(@property)
Chrome 85 : カウンターセット(counter-set)
Chrome 84 : プロパティ値の初期化(revert)
Chrome 84 : フレックスボックスのギャップ(gap)
Chrome 83 : フォーム部品のデフォルトスタイルを無効化(appearance)
Chrome 81 : Exifによる写真の方向補正(image-orientation)
Chrome 80 : 主要ベースライン(dominant-baseline)
Chrome 80 : 色空間指定(SVG)(color-interpolation)
Chrome 80 : 中央位置(SVG)(cx,cy)
Chrome 80 : 描画パス(SVG)(d)
Chrome 80 : 塗りつぶし(SVG)(fill, fill-opacity, fill-rule)
Chrome 80 : オフセットパス(offset-path:none)

2019年 (Chrome 72〜79)

2018年 (Chrome 64〜71)

2017年 (Chrome 56〜63)

Chrome 61 : スムーススクロール(scroll-behavior)
Chrome 60 : フォントディスプレイ(font-display)
Chrome 60 : グリッド均等配置(space-evenly)
Chrome 60 : フォーカス子孫要素セレクタ(:focus-within)
Chrome 58 : テキストの回り込み解除(display: flow-root)
Chrome 57 : グリッド(grid) ★
Chrome 57 : キャレットカラー(caret-color)
Chrome 56 : オーバーフローアンカー(overflow-anchor)
Chrome 56 : 上部・下部張り付き(position: sticky) ★
Chrome 56 : システムUIフォント(font-family: system-ui)

2016年 (Chrome 48〜55)

Chrome 55 : ポインターイベント制御(pointer-events)
Chrome 54 : テキストサイズ調整(text-size-adjust)
Chrome 53 : inputの入力値範囲判定(:in-range, :out-range)
Chrome 52 : スタイル影響の封じ込め(contain)
Chrome 52 : 数字フォント字形(font-variant-numeric)
Chrome 50 : スロット疑似要素(::slotted())
Chrome 49 : カスタムプロパティ(--variable) ★
Chrome 49 : 属性値の大文字・小文字無視([attr="..." i])
Chrome 48 : フォント横幅指定(font-stretch)
Chrome 48 : 縦書きにおける英語の表示方法(text-orientation)

2015年 (Chrome 40〜47)

Chrome 47 : 最終行のテキストアライン(text-align-last)
Chrome 47 : プレースホルダ表示状態(:placeholder-shown)
Chrome 46 : モーションパス(offset, offset-path, offset-distance, offset-rotate)
Chrome 42 : タブサイズ(tab-size)
Chrome 41 : ブレンドモード(:mix-blend-mode)
Chrome 41 : エッジを残した拡大縮小(crisp-edges, pixelated)
Chrome 41 : プロパティ値の初期化(unset)
Chrome 41 : ポインティングデバイスの有無判断など(any-pointer, hover, any-hover)

2014年 (Chrome 32〜39)

Chrome 39 : チェック状態不明疑似クラス(:indeterminate)
Chrome 38 : レベッカパープル(rebeccapurple)
Chrome 37 : allプロパティ(all)
Chrome 37 : シェイプ(shape-*)
Chrome 36 : スマホタッチアクション(touch-action)
Chrome 36 : Unicodeレンジ(unicode-range)
Chrome 36 : アニメーションのスムーズ化(will-change)
Chrome 35 : 背景ブレンドモード(background-blend-mode)
Chrome 32 : 背景リピートの整数倍調整(background-repeat: space, round)
Chrome 32 : オブジェクトのフィッティング(object-fit)
Chrome 32 : バックドロップ疑似要素(::backdrop)

2013年 (Chrome 25〜31)

Chrome 29 : フォントカーニング(font-kerning)
Chrome 28 : 機能クエリ(@supports)
Chrome 27 : "0"の文字幅単位(ch)
Chrome 26 : ビューポート単位(vw, vh, vmin, vmax)
Chrome 26 : WebVTTの字幕疑似要素(::cue)
Chrome 25 : 背景ポジションオフセット(background-position: offset)
Chrome 25 : 改ページ制御(widows orpans)

2012年 (Chrome 17〜24)

Chrome 24 : クリップパス(clip-path) ★
Chrome 23 : WebVTTセレクタ(:current, :past, :future)
Chrome 22 : 文章の最小・最大・通常の長さ(min-content, max-content, fit-content)
Chrome 22 : テキストの装飾と改行の順序(box-decoration-break)
Chrome 21 : フレキシブルボックス(flex) ★
Chrome 19 : 計算(calc()) ★
Chrome 19 : 印刷時色調整(print-color-adjust)
Chrome 18 : フィルタエフェクト(filter) ★
Chrome 17 : 画像の重ね合わせ(cross-fade())

2011年 (Chrome 8〜16)

Chrome 16 : フォント機能設定(font-feature-settings)
Chrome 15 : オプショナル疑似クラス(:optional)
Chrome 15 : :link と :visited をまとめて定義(:any-link)
Chrome 15 : リードオンリー・リードライト(:read-only, :read-write)
Chrome 15 : クリップルール(SVG)(clip-rule)
Chrome 14 : 表示行数制限(line-clamp)
Chrome 12 : 3Dトランスフォーム
Chrome 10 : グラデーションリピート(repeating-xxx-gradient())
Chrome 8 : 縦書き(writing-mode) ★
Chrome 5 : フラッドカラー(SVG) (flood-color, flood-opacity)
Chrome 4 : ベースライン位置(SVG)(alignment-baseline)
Chrome 4 : カラー補完フィルター(SVG)(color-interpolation-filters)

リンク

Copyright (C) 2024-2025 杜甫々

初版:2024年11月17日、最終更新:2025年3月2日

http://www.tohoho-web.com/css/new-features.htm