Vivliostyle currently supports the following CSS values, selectors, at-rules, media queries, and properties:
In addition, essentially all CSS properties and values supported by the browser are available, since Vivliostyle.js lets the browser handle CSS properties that Vivliostyle.js does not handle on its own.
initial, inherit, unset, revertem, 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
*EE FE > FE + FE[foo], E[foo="bar"], E[foo~="bar"], E[foo|="bar"]E.fooE#foo:first-child pseudo-classE:linkE:lang(c):first-line pseudo-element
*). [Issue]:first-letter pseudo-element
*), or with non-ascii characters. [Issue]:before and :after pseudo-elementsns|E, *|Ens|*, *|*[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 ] | autospace-all | normal | space-first | trim-start | trim-both | autonormal | 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.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.