Vivliostyle は現在、以下の各 CSS 機能(Values、Selectors、At-rules、Media queries、Properties)をサポートしています。
このほかにも、ブラウザでサポートされる CSS プロパティと値は基本的にすべて利用可能です。Vivliostyle.js は独自の処理をしない CSS プロパティについてはブラウザに処理を任せるためです。
initial
, inherit
, unset
, revert
em
, ex
, ch
, rem
, lh
, rlh
, vw
, vh
, vmin, vmax
, vi
, vb
, cm
, mm
, q
, in
, pc
, pt
, px
.attr()
content
property.target-counter()
and target-counters()
content
property.string()
function (Named Strings)content()
functionrunning()
function (Running Elements)element()
function (Running Elements)leader()
functioncalc()
functionenv()
function
env(pub-title)
and env(doc-title)
that are not yet defined in the css-env draft spec but useful for making page header.
env(pub-title)
: publication title = EPUB, Web publication, or primary entry page HTML title.env(doc-title)
: document title = HTML title, which may be chapter or section title in a publication composed of multiple HTML documentsvar()
function
*
E
E F
E > F
E + F
E[foo]
, E[foo="bar"]
, E[foo~="bar"]
, E[foo|="bar"]
E.foo
E#foo
:first-child
pseudo-classE:link
E:lang(c)
:first-line
pseudo-element
*
). [Issue]:first-letter
pseudo-element
*
), or with non-ascii characters. [Issue]:before
and :after
pseudo-elementsns|E
, *|E
ns|*
, *|*
[att^=val]
, [att$=val]
, [att*=val]
[ns|att]
, [|att]
, [ns|att=val]
, [|att=val]
, [ns|att~=val]
, [|att~=val]
, [ns|att|=val]
, [|att|=val]
, [ns|att^=val]
, [|att^=val]
, [ns|att$=val]
, [|att$=val]
, [ns|att*=val]
, [|att*=val]
:enabled
, :disabled
, :checked
, :indeterminate
:root
pseudo-class:nth-child()
pseudo-class:nth-last-child()
pseudo-class:nth-of-type()
pseudo-class:nth-last-of-type()
pseudo-class:first-child
pseudo-class:last-child
pseudo-class:first-of-type
pseudo-class:last-of-type
pseudo-class:only-child
pseudo-class:only-of-type
pseudo-class:empty
pseudo-class:not()
pseudo-class::first-line
pseudo-element
*
). [Issue]::first-letter
pseudo-element
*
), or with non-ascii characters. [Issue]::before
and ::after
pseudo-elementsE ~ F
|E
|*
[*|att]
, [*|att=val]
, [*|att~=val]
, [*|att|=val]
:target
:first
matches only the first page of the first document, and the :nth(1)
matches the first page of each document. [Issue]See also: Properties in CSS Paged Media 3
:nth(An+B)
syntax is supported but the :nth(An+B of <custom-ident>)
is not yet supported.:nth(1)
matches the first page of each document, but the :first
matches only the first page of the first document. [Issue]See also:
See also: Properties in CSS Fonts 3
print
media (as well as all
).
vivliostyle
is enabled in addition to print
media.@page
rules. [Issue]@page
rule without page selectors@page
rule without page selectorsA0
-A10
, B0
-B10
, C0
-C10
and JIS-B0
-JIS-B10
. See [Pull Request]See also: At-rules in CSS Paged Media 3
auto
, line
values.See also:
avoid-page
, avoid-column
and avoid-region
values are treated as if they were avoid
. [Issue]box-decoration-break: clone
is specified.none
, inline-start
, inline-end
, block-start
, block-end
, left
, right
, top
, bottom
, both
, all
, same
values.all
is specified on a block-level box (not a page float), the block-start edge of the box gets pushed down so that the edge comes after any block-start/block-end page float of which anchors are before the box in the document order.clear
value is specified on a page float, it is placed so that it comes after any of preceding page floats.same
value means the same direction as one which the page float is floated to.float: snap-block
would be placed at the block-start end but a clear
value on it forbidden such placement, the float is instead placed at the block-end side (unless the clear
value also forbidden such placement).block-start
, block-end
, inline-start
, inline-end
, snap-block
, left
, right
, top
, bottom
and none
values.float: top right;
float to top right cornerfloat: bottom left;
float to bottom left cornerfloat: top bottom;
float to top or bottom edgefloat: top bottom left;
float to top left or bottom left cornerfloat: top bottom left right;
float to top left, top right, bottom left, or bottom right cornerfloat: block-start inline-start;
float to block-start and inline-start cornerfloat: block-start block-end;
float to block-start or block-end edge (same as ‘snap-block’)float-reference: page
(or column
/region
) to enable page (or column/region) float.See also: Values - Supported color values
<resolution>
value is supported.img
, input[type=image]
and video
(applied to poster images) elements and before/after pseudoelements. Other images such as background images, list images or border images are not supported.See also: At-rules in CSS Fonts 3
none | [ first || [ force-end | allow-end ] || last ]
. See [Pull Request]text-align
property is a shorthand in CSS Text 3, Vivliostyle treats text-align
for now as an independent property (defined in CSS 2.1) rather than a shorthand.normal | no-autospace | [ ideograph-alpha || ideograph-numeric ] | auto
space-all | normal | space-first | trim-start | trim-both | auto
normal | none | auto | [<autospace> || <spacing-trim>]
text-autospace
and text-spacing-trim
properties. See [Pull Request ]Note: Currently the multi-column layout works well only when specified on the root or body element. [Issue]
column-span
is effective only when specified on a page float. When auto
value is specified, either a single column or all columns are spanned depending on the min-content inline size of the page float.In these properties and values, the inside
and outside
keywords resolve to left
and right
depending on whether the page is left or right page.
Note: These CSS properties and values are not standardized yet. See [Pull Request]
Added *-inside/outside properties:
Extended properties with inside
and outside
values:
Note: This spec is not on a W3C standards track. Future version of Vivliostyle may drop support for this spec.
Note: This spec proposal is not submitted to CSS Working Group yet.