CSS新機能(CSS入門)

はじめに

CSS に追加された主な機能を、Chrome でサポートされたバージョン別に並べてみました。[↗] をクリックするとサポート状況(Can I Use)を確認できます。特に重要な機能には ★ をつけています。

サポート履歴

2024年 (Chrome 121～131)

Chrome 131 : ページマージンボックス(@bottom-left, ...) [↗]
Chrome 131 : 絵文字異形フォント(font-variant-emoji) [↗]
Chrome 131 : <details>コンテンツ [↗]
Chrome 130 : 複数行ボックス(box-decoration-break) [↗]
Chrome 130 : 入力時の前行安定化(text-wrap:stable) [↗]
Chrome 130 : 改行位置のバランシング(text-wrap:balance) [↗]
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 : ペイントオーダー(paint-order) [↗]
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 : トランジション開始スタイル(@starting-style) [↗]
Chrome 117 : トランジションの振る舞い(transition-behavior) [↗]
Chrome 117 : 最上位レイヤ要素のレンダリング指示(overlay) [↗]
Chrome 117 : 見栄え優先の折り返し(text-wrap: pretty) [↗]
Chrome 115 : スクロールドリブンアニメーション(scroll-timeline, view-timeline, animation-timeline) [↗]
Chrome 115 : アニメーションレンジ(animation-range) [↗]
Chrome 114 : テキストのバランシング(text-wrap: balance) [↗]
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) [↗]

2022年 (Chrome 97～108)

2021年 (Chrome 88～96)

Chrome 94 : スクロールバーによるガタつき抑制(scrollbar-gutter) [↗]
Chrome 93 : アクセントカラー(accent-color) [↗]
Chrome 91 : カウンタースタイル(@counter-style) [↗]
Chrome 89 : ターゲットテキスト疑似要素(::target-text) [↗]
Chrome 89 : ファイル選択ボタン(::file-selector-button) [↗]

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) [↗]

2019年 (Chrome 72～79)

Chrome 79 : 比較関数(min(), max(), clump()) [↗]
Chrome 79 : サイズによるフォント表示調整(font-optical-sizing) [↗]
Chrome 76 : 選択的カラースキーマクエリ(prefers-color-scheme) [↗]
Chrome 76 : バックドロップフィルタ(backdrop-filter) [↗]
Chrome 74 : 選択的視覚効果クエリ(prefers-reduced-motion) [↗]
Chrome 73 : カスタムエレメント内の指定要素(::part()) [↗]

2018年 (Chrome 64～71)

Chrome 69 : 円錐形グラデーション(conic-gradient()) [↗]
Chrome 69 : スクロールスナップ(scroll-snap-type) [↗]
Chrome 69 : ユーザーエージェント環境変数(env()) [↗]
Chrome 68 : 解像度メディアクエリ(min/max-resolution) [↗]
Chrome 66 : バリアブルフォント(font-variation-settings) [↗]
Chrome 65 : DOM要素からの除外(display: contents) [↗]
Chrome 65 : オーバースクロールビヘイビア(overscroll-behavior) [↗]
Chrome 65 : ペインティングAPI(paint()) [↗]

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 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 : モーションパス(motion-path, offset-path) [↗]
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 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 : フラッドカラー(flood-color, flood-opacity) [↗]
Chrome 4 : ベースライン位置(alignment-baseline) [↗]
Chrome 4 : カラー補完フィルター(SVG)(color-interpolation-filters) [↗]

リンク

Copyright (C) 2024-2025 杜甫々

初版：2024年11月17日、最終更新：2025年1月12日

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