CSS

Opacity (SVG)

fill-opacityおよびstroke-opacity SVG属性・CSSプロパティは、SVG要素の塗りやストロークの透明度を制御します。

SVG

SVG は <svg> 要素で2次元ベクターグラフィックスを宣言的またはスクリプトで作成できる画像フォーマットです。

SVG filters

<filter> SVG 要素は、SVG要素に色操作、ぼかし、モーフィングなどのカスタムエフェクトを適用します。

Autonomous custom elements

ハイフン付きのタグ名（例: <my-element>）で独自のHTML要素を定義し、再利用可能なコンポーネントを作成できます。

2D transforms

transform CSS プロパティと2D変形関数により、要素の回転、拡大縮小、傾斜、移動が可能です。

3D Transforms

要素を3D空間で回転・移動・変形するトランスフォーム。

animation-composition

複数のアニメーション効果が重なったときの合成方法を制御するプロパティ。

CSS Animations (@keyframes)

@keyframes ルールとanimationプロパティによるCSSアニメーション。

CSS Transitions

プロパティの値の変化にスムーズなアニメーション効果を付与する。

cubic-bezier() easing

cubic-bezier() CSS関数は、3次ベジェ曲線に沿って補間を行い、速度変化のあるアニメーションやトランジションを作成します。

Individual transform properties (translate, rotate, scale)

translate・rotate・scale を個別プロパティとして指定できる。

Motion path (offset-path)

要素をSVGパスや図形に沿って移動させるアニメーション。

steps() easing

steps() CSS イージング関数は、アニメーションやトランジションを等間隔のステップに分割し、値から値へジャンプさせます。

:indeterminate

:indeterminate CSS疑似クラスは、チェックボックスやラジオボタンなど、未確定状態のフォーム要素を選択します。

:read-only and :read-write

:read-onlyと:read-write擬似クラスは、読み取り専用または編集可能な要素にマッチします。

caret-color

テキスト入力フィールドのキャレット（カーソル）の色を変更するCSSプロパティ。

Input selectors

:checked、:disabled、:enabled CSS疑似クラスは、フォーム要素の状態に基づいてマッチします。

pointer-events

要素がマウスやタッチイベントのターゲットになるかを制御するCSSプロパティ。

touch-action

タッチ操作に対するブラウザのデフォルト挙動を制御するCSSプロパティ。

will-change

要素の変更予定をブラウザに事前通知し、レンダリングを最適化するプロパティ。

Animatable clipping paths

clip-path プロパティをCSSトランジションやアニメーションで滑らかにアニメーションさせることができます。

background

background ショートハンドプロパティは、背景色・画像・位置・サイズ・繰り返しなど複数の背景関連プロパティを一括で設定します。

background-blend-mode

background-blend-mode プロパティは、背景画像と背景色をブレンドモード（multiply、screen等）で合成します。

background-clip

background-clip プロパティは、背景の描画範囲をボーダーボックス、パディングボックス、またはコンテンツボックスに制限します。

background-color

background-color プロパティは、要素の背景色を設定します。コンテンツや背景画像の背後に描画されます。

background-image

background-image プロパティは、背景色の上にグラデーションや画像を1つまたは複数設定します。

background-origin

background-origin プロパティは、背景画像の配置基準をボーダー、パディング、またはコンテンツボックスのいずれかに設定します。

background-position

background-position プロパティは、背景画像の表示位置をキーワード、長さ、パーセンテージで指定します。

background-repeat

background-repeat プロパティは、背景画像のタイリング方法を制御します。繰り返し、単一表示、均等配置などを指定できます。

background-size

background-size プロパティは、背景画像のサイズを contain、cover キーワードや具体的な長さ・パーセンテージで制御します。

Borders

border プロパティは、要素の周囲に表示される線の色・スタイル・太さを一括または個別に設定します。

clip-path

要素の表示領域を図形やSVGパスで切り抜く。

Conic gradients

中心点を軸に回転方向で色が変化する円錐グラデーション。

CSS filter (blur, brightness, contrast, etc.)

blur・brightness・contrast などのフィルター関数で要素にビジュアルエフェクトを適用する。

CSS Gradients (linear, radial)

線形グラデーションや放射グラデーションで滑らかな色の変化を表現する。

isolation property

要素を独立したスタッキングコンテキストとして分離する。

mask-type

mask-type CSSプロパティは、SVG <mask>要素のマスクを輝度マスクとアルファマスクのどちらとして扱うかを設定します。

mix-blend-mode

要素と背後の要素との色の合成（ブレンド）方法を指定する。

shapes

circle()、ellipse()、inset()、polygon()は、clip-pathやshape-outsideで使用する基本図形を作成するCSS関数です。

color-mix() function

2つの色を指定した色空間で混合する関数。動的なカラーバリエーション生成に有用。

color-scheme property

要素が対応するカラースキーム（ライト/ダーク）をブラウザに伝え、UA スタイルシートを自動適応させるプロパティ。

color() function

任意の色空間（display-p3、sRGB、a98-rgb など）を明示して色を指定する関数。

currentColor

currentColor CSSキーワードは、要素の計算済みテキスト色を他のプロパティで再利用できる値です。

forced-colors media query

ハイコントラストモードなど、OS がカラーパレットを強制している環境を検出するメディアクエリ。

HSL

hsl()およびhsla() CSS関数は、色相・彩度・明度・透明度チャンネルを使って色を指定します。

HWB color function

色相（Hue）・白さ（Whiteness）・黒さ（Blackness）で色を指定する関数。直感的な色調整が可能。

Lab and LCH color functions

CIE Lab（明度・a軸・b軸）と LCH（明度・彩度・色相）の知覚ベースカラー関数。sRGB より広い色域をカバー。

Named colors

CSSの名前付きカラーは、redやlimegreenなどの名前で特定のRGBカラー値を参照できます。

OKLab and OKLCH

知覚的に均一なカラースペース。一貫した明度でブランドカラーを生成。

opacity property

要素全体の不透明度を 0（完全に透明）から 1（完全に不透明）の範囲で指定するプロパティ。

RGB

rgb()、rgba()、16進数表記は、赤・緑・青・透明度のチャンネルで色を指定する基本的な色表記法です。

System colors

ButtonBorder や LinkText などのシステムカラーキーワードで、ユーザーエージェントのデフォルトカラーに一致させることができます。

overscroll-behavior

スクロールの連鎖や引っ張り更新などのオーバースクロール挙動を制御するプロパティ。

Scroll Snap

スクロール位置を指定したポイントにスナップさせるCSS機能。

scroll-behavior: smooth

スクロール動作をスムーズなアニメーションに変更するCSSプロパティ。

::backdrop pseudo-element

ダイアログやフルスクリーン要素の背後に表示される背景レイヤーをスタイリングする擬似要素。

::file-selector-button

ファイル入力の「ファイルを選択」ボタン部分をカスタマイズできる擬似要素。

::first-letter

::first-letter CSS擬似要素は、要素の最初の文字を選択してスタイリングします。

::first-line

::first-line CSS擬似要素は、要素の最初の行を選択してスタイリングします。

::part() for Shadow DOM

Shadow DOM 内の要素を外部からスタイリングできる擬似要素。

::placeholder

::placeholder擬似要素は、<input>や<textarea>の値が未入力時に表示されるヘルプテキストを選択してスタイリングします。

:default

:default CSS擬似クラスは、チェックボックスやラジオボタンなど関連するフォームコントロールのグループ内でデフォルトの要素にマッチします。

:empty

:empty CSS擬似クラスは、子要素を持たない要素にマッチします。

:focus-visible

キーボード操作時のみフォーカスリングを表示し、マウス操作時は非表示にできる。

:focus-within

子孫要素にフォーカスがあるとき親要素にスタイルを適用できる擬似クラス。

:is() selector

複数のセレクターをまとめて指定でき、冗長なセレクターの繰り返しを削減する。

:lang()

:lang() CSS関数型疑似クラスは、コンテンツの言語に基づいて要素にマッチします。

:modal pseudo-class

showModal() で開かれたダイアログやフルスクリーン要素にマッチする擬似クラス。

:not() enhanced (multiple arguments)

:not() に複数の引数を渡して、複数条件の除外を1つのセレクターで表現できる。

:nth-child()

:nth-child()と:nth-last-child() CSS疑似クラスは、兄弟要素リスト内のインデックスに基づいて要素を選択します。

:nth-child() of S syntax

:nth-child() に of セレクターを追加し、特定の条件に合う要素だけを数えて選択できる。

:nth-of-type() pseudo-classes

:nth-of-type()と:nth-last-of-type() CSS疑似クラスは、同じ型の兄弟要素間の位置に基づいて要素を選択します。

:placeholder-shown

:placeholder-shown擬似クラスは、プレースホルダーが表示されている（値が未入力の）<input>や<textarea>要素にマッチします。

:root

:root擬似クラスは、ドキュメントのルート要素（通常は<html>要素）にマッチします。

:scope (pseudo-class)

:scope擬似クラスは、スコーピングルート（querySelector()の呼び出し元や@scopeのルート）にマッチします。

:target

:target CSS 擬似クラスは、URLフラグメントと一致するIDを持つ要素にマッチします。

:where() selector

:is() と同様にセレクターをグループ化できるが、詳細度が常に0になる。

Case-insensitive attribute selector

属性セレクターに i フラグを付けることで、属性値の大文字・小文字を区別せずにマッチングできます。

Form validity pseudo-classes

フォームバリデーション擬似クラスは、:valid、:invalid、:in-range、:out-of-range、:optional、:requiredなどを含み、フォームフィールドの制約に基づいて要素を選択します。

Host

:host CSS疑似クラスは、Shadow DOMのホスト要素を選択します。:host()関数型疑似クラスでは条件付きで選択できます。

Link selectors

:linkは未訪問リンク、:visitedは訪問済みリンク、:any-linkはその両方にマッチするCSS疑似クラスです。

Selectors (core)

CSSセレクターは、要素の種類、属性、他の要素との関係に基づいて、スタイルを適用する対象を指定する基本構文です。

User action pseudo-classes

:active、:focus、:hover CSS 擬似クラスは、ユーザーの操作状態に基づいて要素にマッチします。

::before and ::after

::before と ::after 擬似要素は、要素のコンテンツの前後にインラインボックスを生成し、装飾的なコンテンツを追加します。

<slot>

<slot>要素は、Web Component内のプレースホルダーで、コンポーネント利用者が独自のマークアップを挿入できます。

MathML

MathML（Mathematical Markup Language）は、数式や数学的な表記法を記述するためのマークアップ言語です。

Min and max width and height

min-width、min-height、max-width、max-height CSSプロパティは、要素の最小・最大サイズを設定します。

object-position

object-position CSSプロパティは、画像・動画などの置換要素をボックス内で配置します。

Outlines

outline-color、outline-style、outline-width、outline-offset CSSプロパティは、ボーダーの外側に線を描画します。

System font

font-family: system-ui CSS宣言は、テキストにオペレーティングシステムのデフォルトフォントを使用します。

Tables

<table> HTML 要素は、行と列のセルで構成された表形式のデータを表示します。

text-decoration-skip-ink

text-decoration-skip-ink CSS プロパティは、下線や上線がグリフと交差する箇所で中断するかどうかを設定します。

WebVTT

WebVTT はキャプションと字幕のフォーマットであり、<track> 要素で読み込まれます。

@font-face

カスタムフォントをウェブページに埋め込むためのルール。ローカルにないフォントでもダウンロードして使用できる。

COLRv0

COLRv0 は、ソリッドカラーによるマルチカラーグリフをサポートするフォント形式です。

Counters (CSS)

CSSカウンターは counter-reset、counter-increment、counter()、counters() を使って、見出しやリストに自動的に番号を付ける仕組みです。

dominant-baseline

dominant-baseline CSSプロパティは、要素のテキストやインラインレベルのコンテンツの配置に使用される基準線を設定します。

Font shorthand

font CSSプロパティのショートハンドは、フォントスタイル、太さ、サイズ、ファミリーなど複数のフォントプロパティを一括設定します。

font-display descriptor

Web フォントの読み込み中にテキストをどう表示するかを制御するディスクリプタ。

font-family

font-family CSSプロパティは、テキストに使用するフォントフェイスと、オプションのフォールバックフォントフェイスを設定します。

font-feature-settings

OpenType フォントの高度な機能（合字、スモールキャップス、数字スタイルなど）を制御するプロパティ。

font-kerning

font-kerning CSSプロパティは、フォントに含まれるカーニングデータを使用して文字間のスペースを調整するかどうかを設定します。

font-optical-sizing

font-optical-sizing CSSプロパティは、異なるサイズでの表示に最適化されたテキストレンダリングを行うかどうかを設定します。

font-palette

カラーフォント内のカラーパレットを選択・カスタマイズするプロパティ。

font-size

font-size CSSプロパティは、テキストの高さを設定します。

font-stretch

font-stretch CSSプロパティは、フォントファミリーから幅に基づいてフォントフェイスを選択します。condensedなどのキーワードまたはパーセンテージで指定します。

font-style

font-style CSSプロパティは、normal、italic、obliqueの各オプションでテキストのスタイルを設定します。

font-synthesis

font-synthesis CSSショートハンドプロパティは、指定した種類以外のすべてのフォント合成を無効にします。

font-synthesis-small-caps

font-synthesis-small-caps CSSプロパティは、フォントにスモールキャップス体が含まれていない場合にブラウザが合成するかどうかを設定します。

font-synthesis-style

font-synthesis-style CSSプロパティは、フォントにイタリック体や斜体が含まれていない場合にブラウザが合成するかどうかを設定します。

font-synthesis-weight

font-synthesis-weight CSSプロパティは、フォントに太字が含まれていない場合にブラウザが合成するかどうかを設定します。

font-variant

font-variant CSSプロパティは、font-variant-caps、font-variant-ligatures、font-variant-numericなど複数のフォントバリエーションプロパティのショートハンドです。

font-variant-alternates

OpenType フォントの代替グリフ（スワッシュ、装飾的な異体字など）を使用するプロパティ。

font-variant-caps

font-variant-caps CSSプロパティは、テキストをスモールキャップス、プチキャップス、タイトル用大文字で表示するかを設定します。

font-variant-east-asian

font-variant-east-asian CSSプロパティは、東アジアテキストのグリフ代替とサイズを制御します。

font-variant-ligatures

font-variant-ligatures CSSプロパティは、文字の合字（リガチャ）表示を制御します。

font-variant-numeric

font-variant-numeric CSSプロパティは、数字文字の表示方法を設定します。列の数字揃えやスラッシュ付きゼロなどが使用できます。

font-variation-settings

font-variation-settings CSSプロパティは、バリアブルフォントの可変軸（ウェイト、オプティカルサイズ、カスタム軸など）を設定します。

font-weight

font-weight CSSプロパティは、フォントの太さを制御します。boldキーワードや数値で明示的に設定するか、bolder/lighterキーワードで継承値からの相対指定ができます。

letter-spacing

letter-spacing CSSプロパティは、テキスト内の文字間のスペースを制御します。

line-break

line-break CSSプロパティは、記号や句読点を含むテキストの改行ルールの厳密さを設定します。

line-height

line-height CSSプロパティは、テキストのベースライン間の間隔（行送り）を設定します。

List style

list-styleショートハンドとその個別プロパティは、リストアイテムのマーカーの位置と外観を設定します。

overflow-wrap

コンテナからはみ出す長い単語を途中で改行するかどうかを制御するプロパティ。

quotes property

引用符の種類をカスタマイズするプロパティ。言語や文化に合わせた引用符を指定できる。

tab-size

タブ文字（U+0009）の表示幅を指定するプロパティ。

text-align

text-align CSS プロパティは、ブロック要素の内部コンテンツの水平方向の配置を設定します。

text-align-last

ブロック要素の最終行（または強制改行前の行）のテキスト揃えを指定するプロパティ。

text-combine-upright

text-combine-upright CSS プロパティは、縦書きテキスト内で複数の文字を1文字分のスペースに表示します。

text-decoration (color, style, thickness)

テキスト装飾（下線・上線・取り消し線）の色、スタイル、太さを個別に制御するプロパティ群。

text-emphasis

テキストに圏点（けんてん）を付けて強調を示すプロパティ。日本語や中国語の組版で使用される。

text-orientation

縦書きモードでの文字の向き（正立・横転）を制御するプロパティ。

text-overflow: ellipsis

はみ出したテキストを省略記号（…）で切り詰めて表示するプロパティ。

text-shadow

テキストに影（ドロップシャドウ）を追加するプロパティ。

text-transform

text-transform CSS プロパティは、テキストの大文字・小文字変換やキャピタライゼーションを設定します。

text-underline-offset

テキストの下線の位置（ベースラインからの距離）を調整するプロパティ。

text-underline-position

text-underline-position CSS プロパティは、テキストの下線の位置を設定します。

white-space

white-space CSS プロパティは、空白の折りたたみ方法と行の折り返し方法を設定するショートハンドです。

word-break

単語の途中での改行ルールを制御するプロパティ。

word-spacing

word-spacing CSS プロパティは、単語間の空白の量を設定します。

writing-mode

テキストの書字方向を横書き・縦書きに切り替えるプロパティ。

@supports (compatibility prefix)

@supports (-webkit-transform-3d) は、@supports (transform-style) の標準化された互換性プレフィックスです。

color-gamut media query

デバイスが対応する色域を検出するメディアクエリ。

dynamic-range media query

dynamic-range CSSメディアクエリは、デバイスが標準範囲またはハイダイナミックレンジの色を表示できるかに基づいてスタイルを設定します。

Interaction media queries

pointer、any-pointer、hover、any-hover CSSメディアクエリは、ポインティングデバイスの有無とホバー機能に基づいてスタイルを設定します。

Media queries

@media CSSルールは、出力デバイスの種類・機能・ユーザー設定に基づいて条件付きでスタイルを適用します。

Media query range syntax

比較演算子（>=, <=, >）を使ったメディアクエリの範囲記法。

prefers-color-scheme

ユーザーがライトモードかダークモードを希望しているかを検出するメディアクエリ。

prefers-contrast

ユーザーが高コントラストまたは低コントラストを希望しているかを検出するメディアクエリ。

prefers-reduced-motion

ユーザーがモーション軽減を希望しているかを検出するメディアクエリ。

resolution media query

デバイスの画面解像度を検出するメディアクエリ。

resolution media query (compatibility prefixes)

-webkit-device-pixel-ratio系のメディアクエリは、resolutionメディアクエリの標準互換エイリアスです。

calc() constants (e, pi, infinity, NaN)

CSS計算で使用できる数学定数（e, pi, infinity, -infinity, NaN）。

calc() function

CSS内で四則演算を行い、異なる単位を組み合わせた値を計算する関数。

ch unit

ch 単位は、フォントの「0」（ゼロ）文字の幅に基づいたフォント相対の長さの単位です。

em unit

em CSSの長さ単位は、指定されたフォントサイズに対する相対的な長さです。フォントサイズが2インチの要素では、1emは2インチに等しくなります。

ex unit

ex CSSの長さ単位は、最初に利用可能なフォントのx-height（小文字xの高さ）に等しいフォント相対の長さです。

ic unit

ic CSS長さの単位は、CJK表意文字の幅に相当します。

image-orientation

image-orientation CSSプロパティは、EXIF等の画像メタデータに基づいて画像の回転を補正します。

min(), max(), clamp()

値の最小・最大・範囲制限を行うCSS比較関数。

Q unit

Q単位は1/4ミリメートルに相当する絶対長さの単位で、物理的な寸法に基づいています。

rem

rem単位は、ルートHTML要素のフォントサイズを基準とするフォント相対長さの単位です。

Small/large/dynamic viewport units (svh, lvh, dvh)

モバイルブラウザのUIバーを考慮した新しいビューポート単位。

Trigonometric functions (sin, cos, tan, etc.)

CSS内で三角関数（sin, cos, tan, asin, acos, atan, atan2）を使用する。

Viewport units (vw, vh, vmin, vmax)

ビューポートの幅・高さに基づく相対的なサイズ単位。

Absolute positioning

position: absolute を使って要素を通常フローから外し、最も近い位置指定された祖先要素を基準に配置するCSSプロパティです。

aspect-ratio property

要素のアスペクト比を直接指定できるプロパティ。動画や画像の比率維持が CSS のみで実現可能。

Border images

border-image プロパティで画像やグラデーションを境界線として使用する。単色やスタイルに限定されない装飾的なボーダーを実現。

border-radius

要素の角を丸くするプロパティ。ボタン、カード、アバターなどの角丸デザインに必須。

box-shadow

要素に影を付けるプロパティ。ドロップシャドウやインセットシャドウ、複数の影を重ねて奥行き表現ができる。

box-sizing property

要素のサイズ計算方法を制御するプロパティ。border-box を指定すると、padding と border を含めた幅・高さで計算される。

column-fill

column-fill プロパティは、マルチカラムレイアウトでコンテンツが各列にどのように分配されるかを設定します。

column-span

column-span プロパティは、マルチカラムレイアウトにおいて子要素がすべての列にまたがるかどうかを制御します。

Container Queries

ビューポートではなく親コンテナのサイズに応じてスタイルを変更できる。

CSS Containment

contain プロパティにより、要素のレイアウト・スタイル・ペイントの影響範囲をブラウザに伝え、レンダリングパフォーマンスを最適化する。

CSS Grid Layout

二次元のグリッドレイアウトを実現する強力なレイアウトシステム。行と列を同時に制御できる。

display: flow-root

新しいブロック整形コンテキスト（BFC）を生成し、フロートの包含やマージン相殺の防止を実現する。

fit-content sizing

要素の幅や高さをコンテンツに合わせつつ、指定した最大値を超えないようにするサイジング関数。

Fixed positioning

position: fixed CSS宣言は、要素を通常のフローから取り出し、ビューポートまたはページに対して相対的に配置します。

Flexbox gap property

Flexbox コンテナ内のアイテム間の余白を gap プロパティで指定できる。margin を使わず均一な間隔を実現する。

Flexbox layout

一次元レイアウトを柔軟に制御するモジュール。要素の配置・整列・サイズ配分を直感的に行える。

Grid animation

Gridアニメーションにより、grid-template-columnsおよびgrid-template-rowsプロパティをアニメーションさせることができます。

image-rendering

image-rendering CSSプロパティは、画像のスケーリング方法を設定し、写真にはスムーズな補間を、ピクセルアートにはシャープなエッジを保持します。

Inline-size containment

contain: inline-size は、要素のインライン方向のサイズがコンテンツによって決まることを防ぎ、レイアウト計算を最適化します。

Layout containment

contain: layout は、要素のレイアウトを内部に閉じ込め、外部のレイアウトに影響を与えないことをブラウザに伝えます。

Logical properties

物理方向（left/right）ではなく論理方向（inline/block）で余白や境界を指定する。多言語・RTL 対応を容易にする。

margin

margin CSSプロパティは、要素の周囲にスペースを設定するショートハンドです。

min-content and max-content

min-contentおよびmax-content CSSキーワードは、要素の最小・最大の固有サイズを表します。

Multi-column layout

テキストや要素を新聞のような複数カラムに自動分割するレイアウトモジュール。column-count や column-width で段組みを制御する。

object-fit

img や video などの置換要素がコンテナにどのようにフィットするかを制御する。cover、contain、fill などの値でアスペクト比を維持しつつサイズを調整。

outline

要素の外枠を描画するプロパティ。:focus-visible と組み合わせてキーボードフォーカス時のみ表示するアクセシブルなフォーカスインジケーターを実現する。

overflow: clip

overflow: hidden と同様にはみ出しを切り取るが、スクロールバーを生成せずプログラムからもスクロールできない。

padding

paddingプロパティは、要素の端とそのコンテンツの間の余白を一括で設定するショートハンドです。

Page breaks

break-after、break-before、break-insideプロパティは、印刷レイアウトにおけるページの開始位置と終了位置を制御します。

Paint containment

contain: paint は、要素の子孫が要素の境界外に描画されないことを保証し、ペイント最適化を可能にします。

Position

positionプロパティは、要素の配置方法を設定し、要素、スクロールポート、またはビューポートに対する原点を定義します。

Relative positioning

position: relativeは、要素を通常フローの位置から相対的にオフセットして表示します。

shape-outside

フロート要素の回り込み形状をカスタマイズし、テキストが円形や多角形に沿って流れるレイアウトを実現する。

Size containment

contain: size は、要素のサイズをコンテンツに依存せず、height と width プロパティのみで決定させます。

Static positioning

position: static は要素を通常のフローに配置し、top や inset-block-start などの配置プロパティを無視します。

Sticky positioning

position: sticky により、スクロールに応じて要素が固定位置に吸着する。ヘッダーやサイドバーの固定表示に最適。

Style containment

contain: style は、カウンターや引用スタイルの影響範囲を要素の子孫内に限定し、ブラウザのレイアウト最適化を助けます。

Two-value display syntax

display プロパティを外部表示と内部表示の2値で指定する新構文。display: block flex のように明示的に記述できる。

Width and height

width と height CSS プロパティは、要素の望ましい物理サイズを設定します。

@charset

@charset アットルールは、外部スタイルシートの文字エンコーディングを宣言します。

@import

@import CSSアットルールは、別のスタイルシートからスタイルを読み込みます。

@namespace

@namespace CSSルールは、デフォルトの名前空間や名前空間プレフィックスを設定します。

@supports feature queries

ブラウザがCSSプロパティや値をサポートしているか検出し、条件分岐でスタイルを適用する。

all shorthand property

direction・unicode-bidi を除く全CSSプロパティを一括でリセットするショートハンド。

appearance property

ブラウザネイティブのフォーム要素の外観をリセットし、カスタムスタイルを適用可能にする。

attr() (content only)

attr() 関数を content プロパティで使用し、::before や ::after 擬似要素のテキストにHTML属性値を表示できます。

Cascade Layers (@layer)

CSSの詳細度とは独立したレイヤーで優先順位を制御し、大規模プロジェクトのスタイル管理を改善。

Color

color プロパティは、テキストの色、デフォルトのボーダー色、テキスト装飾の色など、要素の前景色を設定します。

Content

content プロパティは、要素や擬似要素のコンテンツを設定または置換し、テキスト・画像・カウンターなどを生成します。

CSS Custom Properties (CSS Variables)

CSSにネイティブ変数機能を提供し、テーマ切替や値の再利用を可能にする。

Display

display CSSプロパティは、要素のボックスの表示動作と子要素のレイアウト方式を設定します。

display: list-item

display: list-item CSS宣言は、<li>要素のボックスレイアウトで要素を描画します。

display: table

display: table CSS宣言は、要素を<table>要素のボックスレイアウトで描画します。子要素にはtable-rowなどのテーブル内部要素のdisplay値を指定できます。

float and clear

float CSSプロパティは要素をコンテナの左右いずれかに配置し、テキストやインライン要素がその周囲に回り込みます。clearプロパティはフロート要素の下に要素を移動させます。

inherit

inheritキーワードは、CSSプロパティの値を親要素の計算値にリセットします。

initial

initialキーワードは、CSSプロパティを仕様で定義された初期値にリセットします。

Layout direction override

unicode-bidiおよびdirection CSSプロパティは、Unicodeの双方向レイアウトアルゴリズムをオーバーライドします。

overflow

overflowプロパティは、要素からはみ出したコンテンツの表示方法を制御するショートハンドです。

Physical properties

top、right、bottom、leftの物理プロパティは、position指定に基づいて要素の位置をコンテナの各辺からのオフセットで設定します。

revert

revertキーワードは、プロパティをユーザーエージェントまたはユーザースタイルシートのデフォルト値にリセットします。

Safe area inset environment variables

safe-area-inset-*環境変数は、ノッチやカメラホールなど非矩形画面でコンテンツが切れない安全領域を表します。

Text stroke and fill (compatibility prefixes)

-webkit-text-stroke と -webkit-text-fill-color プロパティは、テキストのアウトラインと塗りつぶしの色・太さを設定します。

text-indent

text-indent CSS プロパティは、テキストの行頭のインデント（字下げ）のサイズを設定します。

unset

unset キーワードは、継承プロパティは親の計算値に、非継承プロパティは初期値にリセットします。

vertical-align

vertical-align CSS プロパティは、インライン要素、インラインブロック要素、テーブルセル要素の垂直方向の配置を設定します。

visibility

visibility CSS プロパティは要素の表示・非表示を設定しますが、非表示の要素もレイアウトスペースを占有し続けます。

z-index

z-index CSS プロパティは重なり合う要素の順序を制御し、値が大きいほど前面に表示されます。

:state()

:state()擬似クラスは、ElementInternals.states APIで設定されたカスタム状態に基づいてカスタム要素にマッチします。

@starting-style

要素が最初に表示される際の開始スタイルを定義し、出現アニメーションを可能にする。

Active view transition

:active-view-transition 擬似クラスは、ビュー遷移がアクティブな間にルート要素にマッチし、遷移中のスタイル制御を可能にします。

linear() easing function

linear() 関数で複数の制御ポイントを指定し、カスタムイージングカーブを定義する。

transition-behavior

display などの離散的プロパティにトランジションを適用可能にする。

View Transitions API

ページ間・DOM変更時にスムーズなトランジションアニメーションを付与。

view-transition-class

view-transition-class CSS プロパティは、複数の名前付きビュー遷移擬似要素に共通のスタイルを適用するためのクラス名を設定します。

Popover API

HTMLネイティブのポップオーバー。JSなしでトグル可能なレイヤーUI。

backdrop-filter

要素の背後にあるコンテンツにフィルターエフェクトを適用する。

Clip path boxes

clip-path の fill-box、stroke-box、view-box 値は、クリッピング形状の基準となるボックスを指定します。

CSS Masks

画像やグラデーションを使って要素の表示領域をマスクする。

rect() and xywh()

rect()とxywh()関数は、clip-pathやshape-outsideで使用する矩形を作成するCSS関数です。

shape()

shape()関数は、line、move、curveなどのコマンドで図形を作成し、clip-pathやshape-outsideで使用できます。

Gradient color interpolation

グラデーションの色補間に使用する色空間を指定する構文。oklch などで鮮やかなグラデーションを実現。

light-dark() function

ライトモードとダークモードの色を1つのプロパティで指定できる関数。

Relative color syntax

既存の色を基に、各チャンネルを個別に変更して新しい色を生成する構文。

content-visibility

画面外のコンテンツのレンダリングをスキップしてパフォーマンスを向上させるプロパティ。

scrollbar-color

スクロールバーのサムとトラックの色を指定するCSSプロパティ。

scrollbar-gutter

スクロールバーが出現するスペースをあらかじめ確保するCSSプロパティ。

scrollbar-width

スクロールバーの幅を制御するCSSプロパティ。

::details-content

details 要素の展開コンテンツ部分を選択してアニメーション等を適用できる擬似要素。

:dir() pseudo-class

文書や要素のテキスト方向（ltr/rtl）に基づいてスタイルを適用できる擬似クラス。

:has() selector

子の状態で親を選択できる「親セレクター」。JS不要で条件付きスタイルを実現。

:user-valid / :user-invalid

ユーザーが操作した後にのみバリデーション状態を表示する擬似クラス。

Spelling and grammar text decorations

spelling-error と grammar-error のテキスト装飾は、ブラウザのスペルチェックや文法チェックの表示を再現します。

transform-box

transform-box CSS プロパティは、変形の計算基準となる参照ボックスの位置とサイズを設定します。

zoom

zoom CSS プロパティは要素のサイズを拡大縮小しますが、transform と異なりページレイアウトに影響します。

::target-text

::target-text 擬似要素は、#:~:text=snippet のようなURLテキストフラグメントでハイライトされたテキストにスタイルを適用します。

@counter-style

リストマーカーのスタイルをカスタム定義するアットルール。

counter-set

counter-set プロパティは、CSSカウンターを作成し、任意の値を直接設定します。counter-reset との違いは、既存のカウンターの値を上書きできる点です。

font-size-adjust

フォールバックフォントの見た目のサイズを、優先フォントに合わせて調整するプロパティ。

Hyphenate character

hyphenate-character CSSプロパティは、行末のハイフネーション時に使用する文字または文字列を設定します。

hyphens (CSS Hyphenation)

テキストのハイフネーション（単語の途中での分割とハイフン挿入）を制御するプロパティ。

ruby-align

ruby-alignプロパティは、ルビテキストがベーステキストより短い場合の配置とスペーシングを設定します。

ruby-position

ruby-positionプロパティは、ルビ注釈をベーステキストに対して上、下、または行間に表示する位置を設定します。

text-wrap property

テキストの折り返しアルゴリズムを制御するプロパティ。wrap / nowrap / balance / pretty / stable を指定可能。

text-wrap: balance

テキストの各行の幅を均等に揃える折り返しモード。見出しに特に効果的。

white-space-collapse

空白文字の折りたたみ方法を制御するプロパティ。white-space の分離プロパティ。

Overflow media queries

overflow-blockおよびoverflow-inline CSSメディアクエリは、ビューポートを超えるコンテンツの表示方法に基づいてスタイルを設定します。

print-color-adjust

印刷時にブラウザが背景色や画像を最適化する挙動を制御するプロパティ。

scripting media query

JavaScriptが利用可能かどうかを検出するメディアクエリ。

Update frequency media query

update CSS メディアクエリは、デバイスの表示更新速度に基づいてスタイルを設定します。

abs() and sign() functions

CSS内で絶対値（abs）と符号（sign）を取得する関数。

cap unit

フォントの大文字の高さ（cap height）に基づく相対的なサイズ単位。

lh and rlh units

要素の行の高さ（line-height）に基づく相対的なサイズ単位。

pow(), sqrt(), hypot(), log(), exp()

CSS内で累乗・平方根・ユークリッド距離・対数・指数計算を行う関数群。

rcap unit

rcap単位は、ルート要素のキャップハイト（大文字ラテン文字のおおよその高さ）に等しいフォント相対長さです。

rch unit

rch単位は、ルート要素のch単位の値（ゼロ文字「0」の幅）に等しいフォント相対長さです。

rex unit

rex単位は、ルート要素のx-height（小文字「x」の高さ）に等しいフォント相対長さです。

ric unit

ric単位は、ルート要素のCJK文字（全角文字）の幅に等しいフォント相対長さです。

rlh unit

rlh単位は、ルート要素の行の高さに等しいフォント相対長さです。

round(), mod(), rem() functions

CSS内で丸め（round）・剰余（mod, rem）計算を行う関数。

align-content in block layouts

ブロックレイアウトで align-content を使用し、垂直方向の中央揃えなどが Flexbox/Grid なしで実現可能になった。

contain-intrinsic-size

contain-intrinsic-size プロパティは、サイズコンテインメント下の要素に固有サイズのヒントを提供します。

Page setup

@pageアットルールは、印刷ドキュメントや電子書籍など、ページ固有の寸法やマージンを設定します。

Subgrid

親グリッドのトラック定義を子要素に継承。複雑な整列を簡潔に実現。

@property (registered custom properties)

CSS変数に型・初期値・継承の有無を定義でき、アニメーションやバリデーションが可能になる。

@scope

CSSのスコープを特定のDOMサブツリーに限定し、スタイルの適用範囲を明示的に制御する。

Alt text for generated content

content プロパティの / 記法を使い、生成コンテンツに代替テキストを付与することで、アクセシビリティを向上させます。

CSS Nesting

プリプロセッサなしでSass的なネスト記法でCSSを記述できる。

image-set()

image-set() CSS関数は、異なる解像度やピクセル密度の画像セットを提供し、ブラウザがデバイスに応じて最適な画像を選択します。

paint-order

paint-orderプロパティは、テキストやSVG要素のストローク、フィル、マーカーの描画順序（z順序）を設定します。

Vertical form controls

writing-mode プロパティは、縦書きモードでフォーム要素（ラジオボタン、プログレスバー、セレクトメニューなど）を垂直方向に表示します。

Cross-document view transitions

ドキュメント間のビュー遷移を可能にする@view-transitionルールです。MPA（マルチページアプリケーション）でページ遷移時にアニメーションを適用できます。

interpolate-size

interpolate-size CSSプロパティは、数値とキーワード値（autoやfit-contentなど）の間でアニメーション・トランジションの補間を可能にします。

Scroll-driven animations

スクロール位置に連動してアニメーションを駆動する。

text-decoration-line: blink

text-decoration: blink CSS 宣言はテキストを点滅させ、表示と非表示を交互に切り替えます。

:autofill

:autofill 擬似クラスは、ブラウザによって自動入力された input 要素にマッチし、自動入力時のスタイルをカスタマイズできます。

Anchor Positioning

任意の要素を「アンカー」として相対配置できる新しいCSS配置システム。

Customizable <select>

<select>要素のボタン、選択オプション、ドロップダウン、オプション項目をCSSでカスタマイズできる機能です。

field-sizing

フォーム要素のサイズをコンテンツに合わせて自動調整するCSSプロパティ。

background-attachment

background-attachment プロパティは、背景画像がスクロール時に固定されるか、要素と共に移動するかを制御します。

background-clip: border-area

background-clip: border-area は、要素のボーダー部分の下にのみ背景を描画する新しい値です。

background-clip: text

background-clip: text は、背景をテキストの形状にクリッピングし、テキストをグラデーションや画像で塗りつぶす効果を実現します。

clip

clip プロパティは、position: absolute の要素の表示領域を矩形で制限します。非推奨のため clip-path の使用が推奨されます。

mask-border

mask-border CSSプロパティは、要素の端にマスクを適用するショートハンドです。

contrast-color()

contrast-color() 関数は、指定した前景色または背景色に対して十分なコントラストが保証される色を自動的に選択します。

::scroll-button

::scroll-button()擬似要素は、スクロールコンテナを指定方向にスクロールさせるフォーカス可能なボタンを生成します。

overflow-anchor

overflow-anchor CSSプロパティは、ドキュメント変更時の意図しないスクロール移動を防ぐスクロールアンカリングの対象を設定します。

Scroll marker target pseudo-classes

:target-current、:target-after、:target-before擬似クラスは、アクティブなスクロールマーカーとその前後の非アクティブマーカーを選択します。

Scroll markers

::scroll-marker擬似要素は、スクロールコンテナ内の要素にスクロールマーカーを生成し、ナビゲーションを提供します。

scroll-target-group

scroll-target-groupプロパティは、アンカーリンクがスクロールマーカーとして機能するコンテナを設定します。

::selection

::selection擬似要素は、ユーザーがハイライト（選択）したテキストにスタイルを適用します。

::spelling-error and ::grammar-error

::spelling-errorと::grammar-error擬似要素は、スペルミスや文法エラーとしてハイライトされたテキストにマッチします。

:has-slotted

:has-slotted CSS疑似クラスは、フォールバックコンテンツが表示されていない<slot>要素にマッチします。

:host-context()

:host-context() CSS疑似クラスは、Shadow DOMのホスト要素またはその祖先が指定セレクターにマッチする場合にスタイルを適用します。

:open pseudo-class

開いた状態の details・dialog・select などにマッチする擬似クラス。

Case-sensitive attribute selector

属性セレクターに s フラグを付けることで、HTMLでも属性値の大文字・小文字を厳密に区別してマッチングします。

Heading pseudo-classes

:headingおよび:heading() CSS疑似クラスは、さまざまなレベルの見出し要素にマッチします。

Page selectors

:first、:left、:right擬似クラスは、ページ分割後のページ位置に基づいてページを選択します。

text-decoration in ::selection

::selection ルール内の text-decoration プロパティは、ユーザーが選択したテキストの下線などの装飾スタイルを設定します。

Time-relative pseudo-selectors

:past と :future CSS 擬似クラスは、メディア再生中の過去または今後のテキストトラックキューにマッチします。

Anchor position container queries

@container anchored() クエリは、要素のアンカーポジションの状態に基づいてスタイルを適用するコンテナクエリです。

baseline-source

baseline-source プロパティは、複数行のインライン要素がどのタイポグラフィベースラインで周囲のテキストと揃うかを制御します。

box-decoration-break

box-decoration-break プロパティは、ページ・カラム・行の分割時にボーダーや背景がどのように描画されるかを制御します。

caret-shape

caret-shape プロパティは、テキスト入力フィールドにおける挿入キャレット（カーソル）の形状を設定します。

corner-shape

corner-shape プロパティは、border-radius で丸められた角の形状を、通常の円弧以外（squircle等）に変更します。

Custom ellipses

text-overflow CSSプロパティに文字列値を指定して、切り詰められたテキストの表示文字列をカスタマイズします。

Custom highlights

Custom Highlightsは、DOMに余分な要素を追加せずに、任意のテキスト範囲にスタイルを適用します。

Device posture

デバイスの物理的な姿勢（折りたたみ状態など）を検出し、それに応じたスタイルを適用するAPIとメディアクエリです。

DOM overlays for WebXR

DOM オーバーレイは、WebXRアプリケーションのWebGLコンテンツやカメラ映像の上に透過的な2D DOMコンテンツを表示します。

element()

element() CSS関数は、HTML要素からリアルタイムに更新される画像を生成し、背景画像などとして使用できます。

Fullscreen API

Fullscreen APIは、特定の要素を画面全体に表示し、ブラウザUIの大部分を非表示にします。

Hanging punctuation

hanging-punctuation CSSプロパティは、句読点をボックスの外側に配置し、テキストをドキュメントの他の部分と揃えます。

interactivity

interactivity: inert CSS宣言は、要素とその子孫をinert（不活性）状態にし、フォーカスやクリックを無効化します。

Interest invokers

Interest Invokersは、interestfor HTML属性によって登録され、ホバーやフォーカスなどのユーザーの関心表明時にターゲット要素のイベントやアクションをトリガーします。

Math font family

font-family: math CSS宣言は、数学的な表現を表示するためにブラウザのデフォルトフォントフェイスを使用します。

Media element pseudo-classes

:playing、:paused、:seeking等のCSS疑似クラスは、<audio>や<video>要素の再生状態に基づいてマッチします。

path()

path()関数は、SVGパス構文を使用してclip-pathやshape-outsideで使用する図形を作成するCSS関数です。

Picture-in-picture (video)

Picture-in-Picture APIにより、フローティングする常時最前面の動画ウィンドウを作成できます。

scroll-initial-target