CSS 値と単位

CSS 宣言はすべて、プロパティと値のペアから成っています。値には、単一のキーワード、整数、関数、異なる型の組み合わせなど、プロパティに応じてさまざまなデータ型を含めることがあります。また、値には単位を持つものもあれば、持たないものもあります。すべてのプロパティは、CSS 全体で有効な値も受け入れます。CSS 値と単位モジュールでは、CSS プロパティが受け入れる値と単位というデータの型を定義しています。このモジュールでは、CSS プロパティと関数に対して有効な値の設定するには、CSS 値定義構文、つまり形式文法を定義します。

リファレンス

プロパティ

interpolate-size

関数

CSS 値と単位モジュールでは、 calc-mix(), crossorigin(), first-valid(), integrity(), progress(), random(), random-item(), referrerpolicy(), src(), type(), toggle() の関数も導入しています。現在のところ、これらの機能に対応しているブラウザーはありません。

データ型

<angle-percentage>
<angle>
<animation-timeline>
<attr-name>
<attr-type>
<calc-keyword> (e, pi, infinity, NaN)
<calc-size-basis>
<calc-sum>
<custom-ident>
<dashed-ident>
<dimension>
<easing-function>
<first-valid()>
<ident>
<integer>
<length-percentage>
<length>
<number>
<percentage>
<position>
<ratio>
<resolution>
<rounding-strategy> (down, up, to-zero)
<string>
<syntax>
<time-percentage>
<time>
<url>
<url-modifier>
<view-timeline-name>

CSS の値と単位のモジュールでは、 <frequency> および <frequency-percentage> データ型も導入しています。現在のところ、これらの機能に対応しているブラウザーはありません。

単位

フレックス単位 (fr) およびコンテナー単位 (cqb, cqh, cqi, cqmax, cqmin, cqw) が、それぞれ CSS グリッドレイアウトおよび CSS 条件付きルールモジュールで定義されています。

単位の分類

絶対的な長さの単位 (cm, in, mm, pc, pt, px, Q)
角度の単位 (deg, grad, rad, turn)
既定ビューポート単位 (vb , vh, vi , vmax, vmin, vw)
動的ビューポート単位 (dvb, dvh, dvi, dvmax, dvmin, dvw)
周期の単位 (Hz, kHz)
大ビューポート単位 (lvb, lvh, lvi, lvmax, lvmin, lvw)
ローカルフォント相対長 (cap, ch, em, ex, ic, lh)
物理的な単位 (cm, in, mm, pc, pt, Q)
相対的な長さの単位 (cap, ch, em, ex, ic, lh, rem, rlh, vb, vh, vi, vmax, vmin, vw)
解像度の単位 (dpcm, dpi , dppx, x)
ルートフォント相対長 (rcap, rch, rem, rex, ric, rlh)
小ビューポート単位 (svb, svh, svi, svmax, svmin, svw)
時間の単位 (ms, s)
ビューポート単位 (dvh, dvw, lvh, lvw, svh, svw, vb , vh, vi , vmax, vmin, vw)
視覚角度単位 (px)