CSSプロパティ対応表
- 表示・可視性
- ボックスモデル
- 枠線・角丸・アウトライン・影
- 配置(positioning / float / transform)
- フォント・テキスト
- 背景
- テーブル
- リスト
- 生成コンテンツ・カウンタ
- ページ分割(CSS Fragmentation)
- Flexbox
- Grid
- 置換要素(画像)
- 非対応プロパティ一覧
表示・可視性
| プロパティ | 対応 | 備考 |
|---|---|---|
display | ⚠️ | block/inline/inline-block/list-item/table/table-row/table-cell/table-caption/flex/noneのみ。gridは対応(Grid節)。inline-flex/inline-grid・table-row-group等のテーブル内部値・flow-rootは非対応。<thead>/<tbody>/<tfoot>はUAスタイルでblockのままだが、行収集が透過するのでテーブルとして機能する |
visibility | ⚠️ | visible/hidden/collapse。collapseはhiddenと同一視(テーブル行/列の高さ再計算はしない)。継承プロパティ |
overflow | ⚠️ | visible以外(hidden/scroll/auto)は区別せず一律クリップ。スクロールバーの概念は無い。overflow-x/overflow-yは非対応 |
opacity | ⚠️ | <number>/<percentage>を0〜1にクランプ。PDFの透明グループ+ExtGStateで実装。要素単位の合成で、mix-blend-mode等のブレンドは非対応 |
z-index | ⚠️ | auto/<integer>。position: relativeの要素にのみ効く(仕様では他のpositioned要素にも効く)。同じ親を持つ兄弟間の描画順のみを制御し、スタッキングコンテキストの分離は非対応。絶対配置要素は常に通常フローの上に描かれる |
box-sizing | ⚠️ | content-box/border-box。標準外のpadding-boxは非対応 |
ボックスモデル
| プロパティ | 対応 | 備考 |
|---|---|---|
width / height | ⚠️ | auto/<length>/<percentage>/calc()。min-content/max-content/fit-contentは非対応。heightのパーセンテージはcontaining block高さ不定として無視される |
min-width / min-height | ⚠️ | <length>/<percentage>/calc()(初期値0)。auto/min-content等のキーワードは非対応。min-heightのパーセンテージは無視される |
max-width / max-height | ⚠️ | none/<length>/<percentage>/calc()(初期値none)。min > maxのときはminが勝つ(仕様通り)。max-heightのパーセンテージは無視される |
aspect-ratio | ⚠️ | auto | <ratio> | auto <ratio>。「幅確定→高さ導出」が基本で、「高さ確定→幅導出」はfloat/inline-block/絶対配置/<img>のshrink-to-fit文脈のみ(通常フローのブロックのwidth: autoはstretch優先、仕様通り)。min-*/max-*でクランプされて比が崩れた場合の再計算は行わない |
margin | ✅ | 1〜4値ショートハンド。auto(中央寄せ)・負値に対応 |
margin-top / -right / -bottom / -left | ✅ | 隣接兄弟間・親子間のマージン相殺に対応 |
padding | ✅ | 1〜4値ショートハンド |
padding-top / -right / -bottom / -left | ✅ | パーセンテージはcontaining block幅基準(仕様通り) |
margin-inline / margin-block / margin-inline-start等 | ⚠️ | 論理プロパティ。対応する書字方向がhorizontal-tb+LTRのみなので、inline-start=左、inline-end=右、block-start=上、block-end=下へ固定で写像する(writing-mode/directionは非対応)。2辺ショートハンドは1〜2値(start endの順)。autoも通るのでmargin-inline: autoで中央寄せできる |
padding-inline / padding-block / padding-inline-start等 | ⚠️ | 論理プロパティ。写像規則はmargin-inlineと同じ |
枠線・角丸・アウトライン・影
| プロパティ | 対応 | 備考 |
|---|---|---|
border | ✅ | <width> || <style> || <color>を任意順・任意省略で受け付け、4辺へ適用 |
border-top / -right / -bottom / -left | ✅ | 辺別ショートハンド(値文法はborderと同じ) |
border-inline / border-block / border-inline-start等(-width/-style/-colorのロングハンドを含む) | ⚠️ | 論理プロパティ。写像規則はmargin-inlineと同じ |
border-width / border-style / border-color | ✅ | 1〜4値ショートハンド |
border-*-width | ⚠️ | <length>のみ。thin/medium/thickキーワードは非対応 |
border-*-style | ⚠️ | none/hidden/solid/dashed/dotted/double/groove/ridge/inset/outset。hiddenはnoneと同一視(テーブルの枠線競合解決でも区別しない)。groove/ridge/inset/outsetはborder-colorから2階調の陰影を算出して描画 |
border-*-color | ✅ | 初期値はcurrentcolor |
border-radius | ⚠️ | 1〜4値+/区切りの楕円構文に対応。パーセンテージ指定は非対応(<length>のみ)。4辺の太さ・スタイル・色が揃っていない場合は角丸を諦めて直線4辺へフォールバックする。groove/ridge/inset/outsetとの併用も同様にフォールバック |
border-top-left-radiusほか3隅 | ⚠️ | <length>{1,2}(水平/垂直半径)。制約はborder-radiusと同じ |
border-start-start-radiusほか3隅 | ⚠️ | 論理プロパティ。1つ目がblock方向、2つ目がinline方向を指す(border-start-end-radius=右上)。写像規則はmargin-inlineと同じ |
outline | ✅ | <width> || <style> || <color>。border-boxの外側に描画し、レイアウトには影響しない |
outline-width / outline-style / outline-color | ⚠️ | outline-styleはborder-styleと同じ値集合。UA依存のautoは非対応 |
outline-offset | ❌ | 常に0固定 |
box-shadow | ⚠️ | none | <shadow>#(カンマ区切りで複数指定可、先頭が最前面)。insetはパースするが描画は非対応。ぼかしは4段階の同心矩形による近似 |
配置(positioning / float / transform)
| プロパティ | 対応 | 備考 |
|---|---|---|
float | ✅ | none/left/right。width: autoのshrink-to-fitに対応 |
clear | ✅ | none/left/right/both |
position | ⚠️ | static/relative/absolute/fixed。stickyは非対応。absolute/fixedには後述の制約あり |
top / right / bottom / left | ⚠️ | absolute/fixedではbottom単独指定による下端揃えが非対応(高さの循環参照を避けるためtop基準に解決する)。relativeでは背景・枠線と中身(テキスト・画像・子ボックス)をまとめてずらすオフセットとして機能する。relativeのtop/bottomのパーセンテージは0扱い |
inset(ショートハンド) | ✅ | 1〜4値ショートハンド(展開規則はmarginと同じ) |
inset-inline / inset-block / inset-inline-start等 | ⚠️ | 論理プロパティ。写像規則はmargin-inlineと同じ |
transform | ⚠️ | translate/translateX/translateY/scale/scaleX/scaleY/rotate/skew/skewX/skewY/matrix。3D系(translate3d/rotate3d/perspective()等)は非対応。PDFのCTM変換で実装するため、変換後の内容はページ分割の判定に影響しない |
transform-origin | ⚠️ | background-positionと同じ値文法(キーワード/長さ/パーセンテージの1〜2値)。初期値50% 50%。3値目(Z軸)は非対応 |
position: absolute/fixedの既知の制約:
- 絶対配置要素は「通常フローから外し、確定したページへ後付けするオーバーレイ」として配置する
- containing blockになれるのは、単一ページに収まっているpositioned祖先(またはページ領域)
- テキストの途中に置いた
absoluteは、その前後のテキストが別々の行に分かれる(ブラウザのように1行のまま残らない) - 絶対配置要素自身がページを跨ぐ分割は非対応(1ページにbest-effortで置く)
- ストリーミングモード(
Mode::Streaming)では絶対配置を無視する
フォント・テキスト
| プロパティ | 対応 | 備考 |
|---|---|---|
font-family | ⚠️ | カンマ区切りリスト。汎用family名はserif/sans-serif/monospaceをシステムフォントから解決する(cursive/fantasyは解決しない)。sans-serifの解決先はCLIの--gothic-fontで決定的に上書きできる |
font-size | ⚠️ | <length>(px/em/rem)のみ。smaller/larger/medium等のキーワード、パーセンテージ指定は非対応 |
font-weight | ⚠️ | normal/bold/100〜900。数値は600以上をboldとみなす2値化。太字フォントが無い場合は塗り+縁取りの疑似ボールドで描画 |
font-style | ⚠️ | normal/italic/oblique(obliqueはitalicと同一視、傾斜角の指定は不可)。イタリック字形が無い場合はテキスト行列のせん断による疑似イタリック |
font(ショートハンド) | ❌ | 個別のロングハンドを使う |
color | ✅ | 継承プロパティ。指定できる色の記法はセレクタ・値・at-ruleを参照 |
line-height | ✅ | normal/<number>/<length>/<percentage>。normalはフォント自身の推奨行送り(アセント+ディセント+行間)から求めるため、フォントによって値が変わる |
text-align | ⚠️ | left/right/center/justify。justifyは最終行以外の単語間で余白を配分する。start/endは非対応(direction自体が非対応のため) |
text-indent | ⚠️ | <length>/<percentage>。hanging/each-lineは非対応 |
text-transform | ⚠️ | none/uppercase/lowercase/capitalize(語頭のみ変換)。full-width/full-size-kanaは非対応 |
text-decoration / text-decoration-line | ⚠️ | none/underline/line-through(併記可)。overline/blinkは非対応。ショートハンドのtext-decoration-color/-style/-thickness部分も非対応。祖先から子孫への伝播は「継承プロパティとして扱う」簡略実装 |
text-shadow | ⚠️ | none | <shadow>#(<offset-x> <offset-y> <blur>? <color>?)。PDFにぼかしフィルタが無いため、blurはアルファを下げた多重描画による近似。継承プロパティ |
text-overflow | ⚠️ | clip/ellipsis。overflowがvisible以外のときのみ有効。幅方向にはみ出した行のみが対象(ブロック全体のオーバーフローは扱わない)。<string>指定は非対応 |
word-break | ✅ | normal(CJK文字が隣接する境界のみ改行可)/break-all/keep-all。非推奨値break-wordは非対応 |
overflow-wrap / word-wrap | ⚠️ | normal/break-word/anywhere(anywhereはbreak-wordと同一視)。改行機会は増やさず、行頭に置いても収まらない語だけを文字単位で割る |
hyphens | ⚠️ | none/manual/auto。soft hyphen(U+00AD)でのみ分割し、分割時に行末へハイフンを表示する。autoは辞書を持たないためmanualと同じ挙動(自動ハイフネーションはしない) |
text-emphasis / -style / -color / -position | ⚠️ | dot/circle/double-circle/triangle/sesame(filled/open)と<string>。キーワードのマークはPDFのパスで描くためフォントの字形に依存しない(<string>はグリフ描画で、字形が無ければ描かれない)。positionはover/underのみ(right/leftは読み飛ばし)。マーク分だけ行の高さが広がる。句読点をスキップするtext-emphasis-skipは非対応 |
letter-spacing | ⚠️ | normal/<length>。パーセンテージは非対応 |
word-spacing | ⚠️ | normal/<length> |
white-space | ⚠️ | normal/nowrap/pre。pre-wrap/pre-line/break-spacesは非対応 |
vertical-align | ✅ | baseline/sub/super/text-top/text-bottom/top/middle/bottom/<length>/<percentage>。テーブルセル文脈ではtop/middle/bottom(とbaseline)が意味を持つ |
quotes | ⚠️ | noneまたは"開き" "閉じ"のペアの繰り返し。contentのopen-quote/close-quoteと組で使う。継承プロパティ |
背景
| プロパティ | 対応 | 備考 |
|---|---|---|
background(ショートハンド) | ⚠️ | <color>/<image>/<repeat>/<attachment>/<position>[ / <size>]を任意順で受け付ける。指定しなかったロングハンドは仕様通り初期値へリセットされる。background-clip/-origin(padding-box等のキーワード)を含むとパースエラーになり宣言ごと無視される点に注意 |
background-color | ✅ | アルファ付きの色はExtGStateで透過描画 |
background-image | ⚠️ | none | url(...)のみ。linear-gradient()等のグラデーション関数、カンマ区切りの複数背景は非対応。既定ではintrinsicサイズでタイル配置 |
background-position | ✅ | キーワード(left/center/right/top/bottom)と長さ/パーセンテージの1〜2値。3〜4値構文(right 10px bottom 20px)は非対応 |
background-size | ✅ | cover/contain/<length-percentage> | autoの1〜2値 |
background-repeat | ⚠️ | repeat/repeat-x/repeat-y/no-repeat。CSS3のround/space、2値構文は非対応 |
background-attachment | ⚠️ | scroll/fixed(スクロールの概念が無いためfixedはscrollと同一視) |
background-clip / background-origin / background-blend-mode | ❌ | 未実装。背景はborder-box基準で描画する |
border-radiusとbackground-imageを併用した場合、角丸によるクリップは行わない(角丸は背景色の塗りにのみ効く)。
テーブル
| プロパティ | 対応 | 備考 |
|---|---|---|
table-layout | ✅ | auto/fixed。autoではセル内容の自然幅を測って列幅を決める(ネストしたテーブル・flexの自然幅測定のみ非対応で0扱い) |
border-collapse | ⚠️ | separate/collapse。collapseは見た目の枠線統合のみを行う(CSS2.1 §17.6.2の競合解決を「太い方が勝ち、同幅ならスタイル優先順」で簡略化)。継承プロパティ |
border-spacing | ✅ | <length>{1,2}。border-collapse: collapse時は0として扱う。継承プロパティ |
caption-side | ⚠️ | top/bottom。縦書き向けのleft/rightは非対応 |
empty-cells | ✅ | show/hide。border-collapse: separateでのみ意味を持つ。継承プロパティ |
vertical-align(セル) | ✅ | 上記フォント・テキストを参照 |
<colgroup>/<col>のwidth属性・CSSwidthによる列幅指定、rowspan/colspan、<thead>のページまたぎ繰り返しに対応。
rowspan="0"は1として扱う。
無名テーブルボックスの生成(CSS2.1 §17.2.1 規則2.1・2.2)に対応する。
display: tableの直下に置かれたdisplay: table-cellは無名の行にまとめられ、行やセルにならない子は無名のセルでくるまれる。
行を書かないdisplay: table + display: table-cellの段組みがそのまま動く。
セルのmin-width/max-widthは列幅アルゴリズムに反映される。
table-layout: autoでは列の自然幅をクランプする形で効くため、表を紙幅に収める比例縮尺の後はmin-widthが保証されない。
table-layout: fixedでは1行目のセルの指定幅をクランプし、width: autoかつmin-widthのみの指定はその値を列幅として使う。
リスト
| プロパティ | 対応 | 備考 |
|---|---|---|
list-style(ショートハンド) | ✅ | type/position/imageを任意順・任意省略で受け付ける |
list-style-type | ⚠️ | disc/circle/square/decimal/decimal-leading-zero/lower-roman/upper-roman/lower-alpha(lower-latin)/upper-alpha(upper-latin)/none。cjk-*/hiragana/katakana等は非対応。継承プロパティ |
list-style-position | ✅ | outside/inside。継承プロパティ |
list-style-image | ⚠️ | none | url(...)をパースするが描画には使わない(常にlist-style-typeのテキストマーカーへフォールバック) |
生成コンテンツ・カウンタ
| プロパティ | 対応 | 備考 |
|---|---|---|
content | ⚠️ | ::before/::after/::first-letterおよび@pageのmargin box用。文字列リテラル・attr()・counter()/counters()・open-quote/close-quote/no-open-quote/no-close-quoteの連結に対応。url()による画像挿入は非対応。ブロック子を持つ要素の::before/::afterは生成されない(簡略化) |
counter-reset | ✅ | noneまたはname [<integer>]の繰り返し |
counter-increment | ✅ | noneまたはname [<integer>]の繰り返し(値省略時は1) |
counter-set | ❌ | 未実装 |
counter(page)/counter(pages)によるページ番号は@pageのmargin box内で使える(counter(pages)はストリーミングモードでは総ページ数が確定しないためエラーになる)。
ページ分割(CSS Fragmentation)
| プロパティ | 対応 | 備考 |
|---|---|---|
break-before / break-after | ⚠️ | auto/avoid(avoid-page/avoid-columnも同義)/always(pageも同義)。left/right/recto/verso(見開き制御)、多段組み関連の値は非対応 |
break-inside | ⚠️ | auto/avoid(avoid-page/avoid-columnも同義) |
page-break-before / page-break-after / page-break-inside | ✅ | 上記break-*のエイリアス(wkhtmltopdf/wicked_pdf資産からの移行用) |
orphans / widows | ✅ | 1以上の整数。初期値2 |
page(名前付きページ) | ❌ | @page introのような名前付きページ自体が非対応 |
HTML属性data-page-break="before|after|avoid"によるシンタックスシュガーも利用できる。
Flexbox
display: flexのレイアウトはtaffyへ委譲する。
1ページに収まるflexコンテナはページ分割上アトミック(途中で分割せず、収まらなければ次ページへ送る)。
1ページに収まらない高さのコンテナは、縦に重ならないアイテム群を単位に分割する(詳細はページ分割を参照)。
| プロパティ | 対応 | 備考 |
|---|---|---|
flex-direction | ✅ | row/row-reverse/column/column-reverse |
flex-wrap | ✅ | nowrap/wrap/wrap-reverse |
justify-content | ⚠️ | normal(初期値)/flex-start(start)/flex-end(end)/center/space-between/space-around/space-evenly。safe/unsafeオーバーフローキーワードは非対応 |
align-items | ✅ | flex-start(start)/flex-end(end)/center/baseline/stretch |
align-content | ✅ | flex-start(start)/flex-end(end)/center/stretch/space-between/space-around/space-evenly |
align-self | ✅ | auto/flex-start(start)/flex-end(end)/center/baseline/stretch |
flex-grow / flex-shrink | ✅ | 非負の<number>(負値は無効な宣言として無視) |
flex-basis | ⚠️ | auto/content/<length-percentage>。contentはautoと同一視 |
flex(ショートハンド) | ✅ | noneおよび<grow> [<shrink>] [<basis>]。CSS仕様の既定値規則(flex: 1のbasisは0%、flex: <width>のgrow/shrinkは1)を再現 |
gap / row-gap / column-gap | ⚠️ | flexコンテナでのみ有効(多段組みのcolumn-gapとしては機能しない) |
order | ❌ | taffy 0.12系が未対応のため |
place-content / place-items / place-self(ショートハンド) | ❌ | 未実装。個別のロングハンドを使う |
justify-items / justify-self | — | flexアイテムには適用されない(下記) |
justify-items/justify-selfがflexで効かないのは仕様
CSS Box Alignmentではjustify-items/justify-selfはGrid・ブロックレイアウト用のプロパティで、flexアイテムには適用されない(主軸方向のアイテム個別の配置はjustify-contentとmargin: autoで表現する、という設計)。
ブラウザも無視する。
レイアウトを委譲しているtaffyでも、これらを参照するのはGridのアルゴリズムだけで、flexboxのアルゴリズムは一切参照しない。
したがってこのエンジンでパースに対応しても見た目は変わらないため、意図的に実装していない。
flexで特定のアイテムだけを寄せたい場合はmargin: autoを使う(こちらは対応済み):
.item { margin-left: auto; } /* justify-self: end 相当(主軸の終端へ) */
.item { margin-left: auto; margin-right: auto; } /* justify-self: center 相当 */
Grid
display: gridのレイアウトはFlexboxと同じくtaffyへ委譲する。
1ページに収まらないグリッドは行単位でページ分割される(テーブルと同じ方針。複数行にまたがるアイテムがある境界では分割しない)。
| プロパティ | 対応 | 備考 |
|---|---|---|
grid-template-columns / grid-template-rows | ✅ | none/<length>/<percentage>/fr/auto/min-content/max-content/minmax()/fit-content()/repeat(<整数>|auto-fill|auto-fit)/[name](ライン名)。トラックサイズにcalc()は非対応 |
grid-template-areas | ✅ | 文字列マトリクス。列数の不一致・非矩形のエリアは不正な値として宣言ごと無視する(仕様通り)。.は名前なしセル |
grid-auto-columns / grid-auto-rows | ✅ | <track-size>+ |
grid-auto-flow | ✅ | row/column/dense(併記可) |
grid-row-start / -end / grid-column-start / -end | ✅ | auto/<integer>/span <integer>/<custom-ident>/span <custom-ident> |
grid-row / grid-column / grid-area | ✅ | /区切りのショートハンド。grid-area: <name>で名前付きエリアを指定できる |
justify-items / justify-self | ✅ | Gridでのみ意味を持つ(flexアイテムには適用されない、上記) |
align-items / align-self / justify-content / align-content / gap | ✅ | Flexboxと共有(値の範囲はFlexbox節を参照) |
grid / grid-template(ショートハンド) | ❌ | 個別のロングハンドを使う。トラック定義とエリア定義を1つの構文へ詰め込む複雑な文法のため非対応 |
display: inline-grid | ❌ | inline-flexと同じ理由で非対応 |
| subgrid / masonry | ❌ | 未実装 |
autoトラックだけで構成したグリッドにコンテナ幅の指定がある場合、余った幅はautoトラックへ配分されますが、その配分比率はCSSの規定(autoトラックへ均等)と一致しません。
列幅を厳密に決めたい場合はfrか長さで指定してください。
置換要素(画像)
| プロパティ | 対応 | 備考 |
|---|---|---|
object-fit | ✅ | fill/contain/cover/none/scale-down。<img>にのみ意味を持つ |
object-position | ✅ | background-positionと同じ値文法。初期値50% 50% |
<img>はインライン配置・width/height属性/CSSによるサイズ指定に対応。
対応フォーマットはPNG/JPEG/WebP。
CSSでwidth/heightの片方だけを指定した場合は内在アスペクト比でもう一方を導出する(aspect-ratio、)。
非対応プロパティ一覧
以下は宣言ごと無視される(パースエラー)。
実装が無いだけで、意図的に永久除外と決めたものだけではない。
カテゴリ表の❌行も参照。
- ショートハンド:
font/place-content/place-items/place-self/text-decorationの色・線種部分 - 論理プロパティのうち寸法系:
inline-size/block-size/min-inline-size/max-block-size等(margin/padding/inset/borderの論理プロパティは対応済み) - 書字方向:
direction/unicode-bidi/writing-mode/text-orientation/text-combine-upright - テキスト詳細:
text-decoration-color/-style/-thickness/text-underline-offset/text-emphasis-skip/tab-size/ruby-*/text-justify/line-break - フォント詳細:
font-variant/font-stretch/font-feature-settings/font-variation-settings/font-kerning/font-display - 多段組み:
columns/column-count/column-width/column-rule/column-span/column-fill - 視覚効果:
filter/backdrop-filter/mix-blend-mode/background-blend-mode/clip/clip-path/mask/isolation - 3D/アニメーション:
perspective/transform-style/backface-visibility/translate/rotate/scale(個別プロパティ版)/transition-*/animation-*/will-change - 枠線・背景の拡張:
border-image-*/background-clip/background-origin/outline-offset - オーバーフロー:
overflow-x/overflow-y/resize/scroll-*/overscroll-behavior - UI/対話:
cursor/pointer-events/user-select/caret-color/accent-color/appearance - その他:
all/content-visibility/counter-set/page(名前付きページ)/speak等の音声メディア系/zoom