日本語 | English
サポートする CSS 機能

サポートする CSS 機能

Vivliostyle は現在、以下の各 CSS 機能（値、セレクタ、アットルール、メディアクエリ、プロパティ）をサポートしています。

このほかにも、ブラウザでサポートされる CSS プロパティと値は基本的にすべて利用可能です。Vivliostyle.js は独自の処理をしない CSS プロパティについてはブラウザに処理を任せるためです。

値

セレクタ

CSS 2

サポートされていないセレクタ

Selectors 3

Selectors 4

CSS Overflow 4

CSS Pseudo-Elements 4

CSS Generated Content for Paged Media (GCPM) 3

サポートされていないセレクタ

アットルール

CSS 2

CSS Namespaces 3

CSS Conditional Rules 3

CSS Conditional Rules 4

CSS Paged Media 3

参照: CSS Paged Media 3 のプロパティ

CSS Generated Content for Paged Media (GCPM) 3

  • @footnote ルール（脚注エリア）
    • @page { @footnote { … } } の形式で脚注エリアのスタイルを指定します
    • ページセレクタの組み合わせをサポート: 例 @page :left { @footnote { … } }
    • @footnote ::before で content プロパティなどによる脚注セパレータのスタイル指定をサポート
    • @page @footnote はトップレベルの @footnote より優先されます
    • PR #1644 を参照
  • N番目ページセレクタ :nth(An+B [of <custom-ident>])
    • :nth(An+B of <page-type>) はページグループを考慮したマッチングを行い、現在のページ上のすべてのアクティブなページグループに対して評価されます。PR #1745 を参照
    • 注: 複数ドキュメントの出版物では、:nth(1) は各ドキュメントの最初のページに一致しますが、:first は最初のドキュメントの最初のページにのみ一致します。Issue #667

参照:

CSS Fonts 3

参照: CSS Fonts 3 のプロパティ

CSS Counter Styles 3

メディアクエリ

プロパティ

CSS 2

CSS Paged Media 3

  • bleed
    • ページセレクタのない @page ルール内で指定した場合にのみ有効
  • marks
    • ページセレクタのない @page ルール内で指定した場合にのみ有効
  • size
    • 必須値すべてと、提案値 A0–A10、B0–B10、C0–C10、JIS-B0–JIS-B10 をサポートします。PR #713 を参照
  • crop-offset
    • トリムサイズの端から出力ページメディアサイズの端までの距離を指定します
    • このプロパティはまだ標準化されていません。Issue #913 を参照
  • crop-marks-line-color
    • トンボマークの色を指定します
    • このプロパティはまだ標準化されていません。PR #1505 を参照
  • page (名前付きページ)

参照: CSS Paged Media 3 のアットルール

CSS Generated Content for Paged Media (GCPM) 3

参照:

CSS Fragmentation 3

CSS Fragmentation 4

CSS Page Floats

  • clear
    • none、inline-start、inline-end、block-start、block-end、left、right、top、bottom、both、all、same 値をサポートします。
    • ブロックレベルボックス（ページフロート以外）に all を指定すると、ドキュメント順序でこのボックスより前にアンカーがある block-start / block-end ページフロートの後にボックスの block-start 辺が来るように下げられます。
    • ページフロートに clear 値を指定すると、先行のページフロートの後に配置されます。
    • same 値は、そのページフロートがフロートしている方向と同じ方向を意味します。
    • float: snap-block のページフロートが block-start 端に配置されるところが、clear 値によりその配置が禁止される場合、フロートは代わりに block-end 側に配置されます（clear 値がその配置も禁止しない場合）。
    • page、column、region 値は、先行のページフロートが clear プロパティを持つ要素（ページフロート、通常フロート、またはブロックレベルボックス）を含むページ/カラム/リージョンの前に配置されることを保証します。
  • float
    • block-start、block-end、inline-start、inline-end、snap-block、left、right、top、bottom、none 値をサポートします。
    • 複数のキーワードを組み合わせた値をサポートします。例:
      • float: top right; → 右上隅にフロート
      • float: bottom left; → 左下隅にフロート
      • float: top bottom; → 上端または下端にフロート
      • float: top bottom left; → 左上隅または左下隅にフロート
      • float: top bottom left right; → 左上、右上、左下、または右下隅にフロート
      • float: block-start inline-start; → block-start かつ inline-start の隅にフロート
      • float: block-start block-end; → block-start または block-end 端にフロート（'snap-block' と同じ）
      • PR #1444 を参照
  • float-reference
    • float-reference: page（または column / region）を指定してページ（またはカラム/リージョン）フロートを有効化します。
  • float-min-wrap-block
    • ページフロートに対して適用されます
    • パーセンテージ値は、ページフロートのフロート参照のブロック寸法に対して解釈されます
    • 正の長さを指定すると、ページフロートの横の空間のブロック方向の長さが指定した長さ未満の場合、インフローコンテンツはその空間に流れ込めなくなり、その空間は空白のままになってコンテンツは次のカラムへ送られます
    • このプロパティはまだ標準化されていません。PR #382 を参照

CSS Color 3

参照: 値 - サポートしているカラー値

CSS Backgrounds and Borders 3

CSS Images 3

  • object-fit
  • object-position
  • image-resolution
    • <resolution> 値のみサポートします。
    • img、input[type=image]、video（ポスター画像に適用）要素と before/after 擬似要素のコンテンツのみサポートします。背景画像、リスト画像、ボーダー画像などはサポートしません。
    • ベクター画像（SVG など）にもラスター画像と同様に適用されます。この挙動は仕様記載と異なります。

CSS Fonts 3

参照: CSS Fonts 3 のアットルール

CSS Text 3

CSS Text 4

  • text-autospace
    • サポート値: normal | no-autospace | [ ideograph-alpha || ideograph-numeric ] | auto
  • text-spacing-trim
    • 値: space-all | normal | space-first | trim-start | trim-both | auto
  • text-spacing
    • 値: normal | none | auto | [<autospace> || <spacing-trim>]
    • 注: text-autospace と text-spacing-trim プロパティをまとめて設定するショートハンドプロパティです。PR #1142 を参照

CSS Text Decoration 3

CSS Inline Layout 3

CSS Multi-column 1

Vivliostyle は CSS マルチカラムレイアウトをサポートしていますが、ルート・body 要素に指定された場合と、ルート・body 以外の要素に指定された場合とで扱いが異なり、それぞれに制限があります：

  • ルート段組（ルート要素または body 要素に指定）:

    • ルート要素と body 要素の両方に段組が指定された場合は、ルート要素に指定された段組のみがルート段組として扱われます。
    • ページエリアがマルチカラムコンテナになります。
    • Vivliostyle が独自に実装しているため、ブラウザの段組実装に依存しません。
    • CSS Page Floats の float-reference: column はルート段組にのみ対応しています。
    • 制限: column-span: all はルート段組の場合にはページフロートに対してのみ対応しています。

  • 非ルート段組（ルート・body 要素以外に指定）:

    • 段組の処理はブラウザの段組実装に依存します。
    • 同一ページ内に段数の異なる複数の段組を混在させたり、段組の中に段組をネストしたり、column-span: all で段抜きのレイアウトもできます。
    • 注: この機能はブラウザの段組機能を利用しているため、Safari/WebKit で Vivliostyle.js を使用する場合には、WebKit の既知のバグによりネストした段組レイアウトが崩れることがある、または非ルート段組でのページ分割がうまくいかないことがあります。Issue #1821 を参照

  • column-count

  • column-gap

  • column-rule

  • column-rule-color

  • column-rule-style

  • column-rule-width

  • column-width

  • columns

  • column-fill

  • column-span

    • 注: ルート段組では、column-span はページフロートに指定した場合にのみ有効です。auto 値を指定すると、ページフロートの min-content インラインサイズに応じて 1 カラムまたは全カラムにスパンします。
    • 非ルート段組では、column-span: all を制限なく使えます。

CSS Basic User Interface 3

CSS Writing Modes 3

CSS Flexible Box 1

CSS Transforms 1

Compositing and Blending 1

Scalable Vector Graphics (SVG) 2

Scalable Vector Graphics (SVG) 1.1

CSS Masking 1

Filter Effects 1

Pointer Events

CSS Logical Properties and Values 1

ページ方向 inside/outside プロパティと値

これらのプロパティと値では、inside および outside キーワードは、ページが左ページか右ページかに応じて left または right に解決されます。

注: これらの CSS プロパティと値はまだ標準化されていません。PR #1519 を参照

追加された *-inside/outside プロパティ:

  • margin-inside, margin-outside
  • padding-inside, padding-outside
  • border-inside, border-outside
  • border-inside-color, border-outside-color
  • border-inside-style, border-outside-style
  • border-inside-width, border-outside-width
  • inset-inside, inset-outside

inside および outside 値が拡張されたプロパティ:

  • float, clear
  • text-align, text-align-last

CSS Repeated Headers and Footers

注: この仕様提案はまだ CSS Working Group に提出されていません。

セマンティック脚注（role 属性 / epub:type 属性）

Vivliostyle は、CSS GCPM の float: footnote プロパティによる脚注に加えて、HTML 要素のセマンティック属性を使った脚注をサポートしています。role 属性（DPUB-ARIA）または epub:type 属性（EPUB 3 Structural Semantics Vocabulary）によって、脚注参照と脚注本文を識別します。

  • 脚注参照: <a role="doc-noteref" href="#fn">1</a> または <a epub:type="noteref" href="#fn">1</a>
  • 脚注本文: <aside role="doc-footnote" id="fn"><p>1. 脚注の本文</p></aside> または <aside epub:type="footnote" id="fn"><p>1. 脚注の本文</p></aside>

Issue #1700 を参照

EPUB Adaptive Layout

注: この仕様は W3C 標準化トラックにはありません。将来の Vivliostyle バージョンではこの仕様のサポートを廃止する可能性があります。

アットルール

プロパティ