Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

セレクタ・値・at-rule対応表

セレクタ

マッチングはServo由来のselectorsクレートに委譲しているため、CSS3セレクタは概ねそのまま使える。

セレクタ対応備考
タイプ(p)・ユニバーサル(*)
クラス(.foo)・ID(#foo)
属性([a]/[a=v]/[a^=v]/[a$=v]/[a*=v]/[a~=v]/[a|=v])大文字小文字を無視するiフラグも使える
子孫(空白)・子(>)
隣接兄弟(+)・一般兄弟(~)
セレクタリスト(,)
名前空間(ns|E)@namespace自体が非対応

擬似クラス

擬似クラス対応備考
:root
:first-child / :last-child / :only-childストリーミングモードでは:last-childが常に非マッチ(下記参照)
:nth-child() / :nth-last-child()同上(:nth-last-child()はストリーミングモードで非マッチ)
:first-of-type / :last-of-type / :only-of-type / :nth-of-type() / :nth-last-of-type()同上
:empty同上
:not()
:is() / :where() / :has()パースエラー(セレクタごと無視される)
:hover / :active / :focus / :focus-within / :focus-visible / :target / :enabled / :disabled / :checked / :visited⚠️パースは通るが常に非マッチ。対話状態を持たない静的なPDF出力では意味を持たないため
:link / :any-linkhrefを持つ<a>にマッチする

非対応の擬似クラスがセレクタに含まれるとルール全体が捨てられる(:is()等)。 一方:hoverのようにパースが通るものは、ルールとしては生き残った上でマッチしない。

擬似要素

擬似要素対応備考
::before / ::after⚠️contentによる生成テキストのみ。ホスト要素の計算スタイルをそのまま流用して描画し、擬似要素専用のボックススタイル(margin/padding/display等)は持たない。ブロック子を持つ要素では生成されない
::first-letter⚠️font-family/font-size/font-weight/font-style/color/text-decoration-line/text-transformのみ上書きできる(float・box model系は非対応)
::first-lineパースエラー
::marker / ::selection / ::placeholderパースエラー

値・単位・関数

長さ

単位対応
px / em / rem
mm / cm / in / pt / pc / Q
%(パーセンテージを取るプロパティで)
単位なしの0
ex / ch / vw / vh / vmin / vmax / lh

絶対単位は1インチ = 96pxとして解釈する(10mmは37.795px)。 印刷向けに寸法を実寸で書けるので、@page { size: 210mm 297mm; margin: 15mm; }のような指定がそのまま通る。

@pagesizeだけは例外的にページサイズのキーワード(a4/letter等)とlandscape/portraitを受け付ける。

角度(transform専用)

deg / rad / grad / turn、および単位なしの0に対応 ✅。

関数

関数対応備考
calc()⚠️+/-/*//と括弧のネスト。項に使えるのは長さ(絶対単位・em/rem)・%・数値のみ。長さ・パーセンテージを取るプロパティ全般で使える
min() / max() / clamp()
var()⚠️カスタムプロパティ(--foo)をパース前のテキスト置換で解決する。フォールバック(var(--x, 10px))・カスタムプロパティ同士の参照に対応。カスケードや継承には従わず、文書全体で「最後に書かれた宣言が勝つ」単純な解決になる点が本来の仕様と異なる
url()background-image/list-style-image/@font-facesrc/@import。相対URLは<base href>または入力元を基準に解決する
attr()⚠️contentの中でのみ使える
counter() / counters()contentの中。第2引数のスタイルはlist-style-typeの値集合
linear-gradient()等のグラデーション
env() / image-set() / element()

記法対応
名前付き色(red等のCSS色キーワード)
#rgb / #rgba / #rrggbb / #rrggbbaa
rgb() / rgba()(カンマ区切り・スペース区切りとも)
hsl() / hsla() / hwb()
lab() / lch() / oklab() / oklch()✅ (sRGBへ変換して描画)
currentcolor / transparent
color()(color(display-p3 ...)等)
color-mix() / 相対色構文(rgb(from ...))

アルファ付きの色は塗り・背景ともPDFのExtGStateで透過描画する。

at-rule

at-rule対応備考
@media⚠️メディアタイプのみを評価する。screen(およびnot screen以外の否定)はブロックごと無視し、print/all/タイプ省略は適用する。(min-width: ...)のような特性クエリは評価せず読み飛ばす(=タイプさえ合致すれば中身が適用される)
@page⚠️size(キーワード/<length>{1,2}/landscape/portrait)とmargin系に対応。:first/:left/:right擬似クラス単体に対応し、名前付きページ(@page intro)・:blank・複合擬似クラス(:first:left)は非対応
@page内のmargin box⚠️@top-left-corner/@top-left/@top-center/@top-right…の16種すべて。contentのテキスト描画のみで、背景色・枠線等の装飾は非対応。counter(page)/counter(pages)でページ番号を出力できる(counter(pages)はストリーミングモードでは非対応)
@font-face⚠️font-family/src/unicode-range/font-weight/font-styleディスクリプタに対応(srclocal()format()/tech()付きurl()も受理)。font-display等その他のディスクリプタは無視。フォントファイルはTTF/OTFのみで、WOFF/WOFF2は非対応
@importネスト(深さ上限16、超過分はその1件だけ無視)・循環参照の検出に対応。@import url(...) screen;のようなメディアクエリ条件は評価せず常に取り込む
@charset入力はUTF-8前提
@supports / @keyframes / @namespace / @counter-style / @layer / @container / @propertyブロックごと無視される

ストリーミングモード固有の制約

Mode::Batch(一括処理)ではDOM全体が揃っているため下記の制約は無い。 Mode::Streamingでのみ以下が適用される。

  • 後方参照セレクタは常に非マッチ: :last-child/:last-of-type/:nth-last-child()/:nth-last-of-type()/:empty(対象要素の親の子リストが完結するまで原理的に判定できないため)
  • <body>開始後の<style>タグはエラー: EngineError::UnsupportedInStreamingModeを返す。 黙って見た目が崩れるのを避けるため、<style><head>に集約する
  • position: absolute/fixedは無視される
  • counter(pages)(総ページ数)は使えない