Chrome新機能

はじめに

Chrome に追加された主な機能を Chrome バージョン別に紹介します。
元々「CSS新機能」として作成したページのため CSS 機能が大半ですが、徐々に CSS 以外も追記していこうと思います。
特に重要な機能には ★ をつけています。

2025年 (Chrome 132～136)

Chrome 137 : CSS : IF文制御(if()) ★
Chrome 137 : CSS : 読み上げ順序制御(reading-flow, reading-order)
Chrome 136 : CSS : HDRコンテンツの最大輝度を制限(dynamic-range-limit)
Chrome 136 : CSS : 印刷時の最適化制御(print-color-adjust)
Chrome 136 : JS : 正規表現のメタ文字エスケープ(RegExp.escape())
Chrome 135 : HTML : ボタンからのコマンド実行(command, commandfor) ★
Chrome 135 : HTML : <link rel="facilitated-payment">
Chrome 135 : CSS : カルーセルボタン(::scroll-button()) ★
Chrome 135 : CSS : カルーセルマーカー(scroll-marker-gropu, ::scroll-marker-group, ::scroll-marker) ★
Chrome 135 : CSS : カルーセルカラム(::column)
Chrome 135 : CCS : CSS不活性プロパティ(interactivity)
Chrome 135 : CCS : CSS論理オーバーフロー(overflow-inline, overflow-block)
Chrome 135 : CSS : シェイプ関数(shape())
Chrome 135 : CSS : safe-area-max-inset-* 変数
Chrome 135 : CSS : ネストされた疑似要素のスタイル設定(::before::marker, ::after::marker)
Chrome 135 : ~~CSS : abs(), sign() 関数 (見送り?)~~
Chrome 135 : ~~CSS : progress()、media-progress()、container-progress() 関数 (見送り?)~~
Chrome 135 : JS : fetchLater() メソッド
Chrome 135 : JS : 単精度浮動小数点数配列(Float16Array)
Chrome 135 : HTML : <a> や <button> の interesttarget 属性
Chrome 134 : CSS : カスタマイザブルセレクト(appearance: base-select) ★
Chrome 134 : HTML : <dialog>を簡単に閉じる(closedby属性)
Chrome 133 : HTML : HTMLのpopover属性でhint値を追加(popover="hint")
Chrome 133 : CSS : attr()が文字列以外の型やフォールバックに対応(attr())
Chrome 133 : CSS : 開いてる dialog, details, select, input にマッチする疑似クラス(:open)
Chrome 133 : CSS : スクロール状態クエリ(@container scroll-state(...))
Chrome 133 : CSS : フォント上下の隙間(レディング)調整(text-box, text-box-trim, text-box-edge)
Chrome 132 : CSS : writing-mode で sideways-* をサポート(writing-mode: sideway-*)
Chrome 132 : CSS : margin や inset でも anchor-size() を利用可能に(anchor-size())

2024年 (Chrome 121～131)

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

2023年 (Chrome 109～120)

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

2022年 (Chrome 97～108)

Chrome 108 : CSS : ダイナミックビューポート単位(svh svw lvh lvw dvh dvw)
Chrome 105 : CSS : モーダル疑似要素(:modal)
Chrome 105 : CSS : 子要素条件のセレクタ(:has()) ★
Chrome 105 : CSS : コンテナクエリ(@container) ★
Chrome 105 : CSS : コンテナクエリ単位(cqi, cqb, cqmin, cqmax)
Chrome 105 : CSS : CSSカスタムハイライトAPI(::highlight())
Chrome 104 : CSS : メディアクエリレンジシンタックス(@media (width < 900)) ★
Chrome 104 : CSS : トランスフォームプロパティ(translate: rotate: scale:)
Chrome 101 : CSS : フォントパレット(@font-palette-values)
Chrome 99 : CSS : カスケードレイヤ(@layer) ★
Chrome 99 : CSS : テキストの圏点(けんてん)表示(text-emphasis)
Chrome 97 : CSS : フォントがサポートしていない場合の生成(font-synthesis-*)

2021年 (Chrome 88～96)

Chrome 94 : CSS : スクロールバーによるガタつき抑制(scrollbar-gutter)
Chrome 93 : CSS : アクセントカラー(accent-color)
Chrome 93 : CSS : タイトルバー情報(env(titlebar-are-*))
Chrome 91 : CSS : カウンタースタイル(@counter-style)
Chrome 90 : CSS : オーバーフロークリップ枠(overflow-clip-margin)
Chrome 89 : CSS : ターゲットテキスト疑似要素(::target-text)
Chrome 89 : CSS : ファイル選択ボタン(::file-selector-button)
Chrome 89 : CSS : 強制カラーモード調整(forced-color-adjust)

2020年 (Chrome 80～87)

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

2019年 (Chrome 72～79)

Chrome 79 : CSS : 比較関数(min(), max(), clump())
Chrome 79 : CSS : サイズによるフォント表示調整(font-optical-sizing)
Chrome 77 : CSS : content代替テキスト(content: ... / ...)
Chrome 76 : CSS : 選択的カラースキーマクエリ(prefers-color-scheme)
Chrome 76 : CSS : バックドロップフィルタ(backdrop-filter)
Chrome 75 : CSS : スクロールの通り過ぎ禁止(scroll-snap-stop)
Chrome 74 : CSS : 選択的視覚効果クエリ(prefers-reduced-motion)
Chrome 73 : CSS : カスタムエレメント内の指定要素(::part())

2018年 (Chrome 64～71)

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

2017年 (Chrome 56～63)

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

2016年 (Chrome 48～55)

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

2015年 (Chrome 40～47)

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

2014年 (Chrome 32～39)

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

2013年 (Chrome 25～31)

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

2012年 (Chrome 17～24)

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

2011年 (Chrome 8～16)

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

リンク

Copyright (C) 2024-2025 杜甫々

初版：2024年11月17日、最終更新：2025年6月15日

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