supported-css-features.md

Supported CSS Features

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.

Values

• CSS-wide keywords: initial, inherit, unset, revert
• Length units: em, ex, ch, rem, lh, rlh, vw, vh, vmin, vmax, vi, vb, cm, mm, q, in, pc, pt, px.
• Sizing keywords: min-content, max-content, fit-content
• Color values
  • Named Colors
  • transparent color keyword
  • currentColor color keyword
  • RGB functions: rgb(), rgba()
  • RGB Hexadecimal Notations: #RRGGBB, #RRGGBBAA
  • HSL Colors: hsl(), hsla()
  • HWB Colors: hwb()
• Attribute references: attr()
  • Only supported in values of content property.
  • Only 'string' and 'url' types are supported.
• Cross references: target-counter(), target-counters() and target-text()
  • Only supported in values of content property.
• string() function (Named Strings)
• content() function
• running() function (Running Elements)
• element() function (Running Elements)
• leader() function
• calc() function
• env() function
  • Implemented only 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 documents
• var() function
  • Supports CSS Custom Properties for Cascading Variables

Selectors

CSS 2

• Universal selector *
• Type selectors E
• Descendant selectors E F
• Child selectors E > F
• Adjacent sibling selectors E + F
• Attribute selectors E[foo], E[foo="bar"], E[foo~="bar"], E[foo|="bar"]
• Class selectors E.foo
• ID selectors E#foo
• :first-child pseudo-class
• Link pseudo-class E:link
• Language pseudo-class E:lang(c)
• :first-line pseudo-element
  • Note: there is a bug when used alone or with the universal selector(*). [Issue]
• :first-letter pseudo-element
  • Note: there is a bug when used alone, with the universal selector(*), or with non-ascii characters. [Issue]
• :before and :after pseudo-elements

Not supported selectors

• Link pseudo-class E:visited
• Dynamic pseudo-classes E:active, E:hover, E:focus

Selectors 3

• Type selectors with namespaces ns|E, *|E
• Universal selector with namespaces ns|*, *|*
• Substring matching attribute selectors [att^=val], [att$=val], [att*=val]
• Attribute selectors with namespaces [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]
• The UI element states pseudo-classes :enabled, :disabled, :checked, :indeterminate
  • Note that the current implementation can use only initial states of those UI elements. Even if the actual state of the element is toggled by user interaction, the style does not change.
• :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
  • Note: there is a bug when used alone or with the universal selector(*). [Issue]
• ::first-letter pseudo-element
  • Note: there is a bug when used alone, with the universal selector(*), or with non-ascii characters. [Issue]
• ::before and ::after pseudo-elements
• General sibling combinator E ~ F

Selectors 4

• :is() pseudo-class
• :not() pseudo-class
• :where() pseudo-class
• :has() pseudo-class
• :nth-child(An+B of S) pseudo-class
• :nth-last-child(An+B of S) pseudo-class

CSS Overflow 4

• :nth-fragment() pseudo-element

CSS Pseudo-Elements 4

• ::marker pseudo-element

Not supported selectors

• Type selectors without namespaces |E
• Universal selector without namespaces |*
• Attribute selectors with universal namespace [*|att], [*|att=val], [*|att~=val], [*|att|=val]
• Target pseudo-class :target

At-rules

CSS 2

• @charset
• @import
  • Also in CSS Cascading and Inheritance 3

CSS Namespaces 3

• @namespace

CSS Conditional Rules 3

• @media
• @supports

CSS Conditional Rules 4

• @supports selector()

CSS Paged Media 3

• @page
• Page-margin boxes (@top-left-corner, @top-left, @top-center, @top-right, @top-right-corner, @left-top, @left-middle, @left-bottom, @right-top, @right-middle, @right-bottom, @bottom-left-corner, @bottom-left, @bottom-center, @bottom-right, @bottom-right-coner)
• Page selectors
  • :left, :right
  • :recto, :verso
  • :first
    • Note: In multi-document publications, the :first matches only the first page of the first document, and the :nth(1) matches the first page of each document. [Issue]
  • :blank
• Named pages (page type selector)
• Page-based counters (page, pages)

See also: Properties in CSS Paged Media 3

CSS Generated Content for Paged Media (GCPM) 3

• Nth page selector :nth(An+B [of <custom-ident>])
  • Note: In multi-document publications, the :nth(1) matches the first page of each document, but the :first matches only the first page of the first document. [Issue]

See also:

• Properties in CSS Generated Content for Paged Media (GCPM) 3
• Values - Cross references, content(), and string() functions

CSS Fonts 3

• @font-face
  • font-style, font-weight, font-stretch descriptors
  • unicode-range descriptor

See also: Properties in CSS Fonts 3

CSS Counter Styles 3

• @counter-style
• Extending list-style-type, counter(), and counters()
• Predefined Counter Styles

Media queries

• Vivliostyle uses styles specified for print media (as well as all).
  • Vivliostyle specific media type vivliostyle is enabled in addition to print media.
• Supported media features
  • (min-|max-)width
  • (min-|max-)height
  • (min-|max-)device-width
  • (min-|max-)device-height
  • (min-|max-)color

Properties

CSS 2

• background
  • Supports CSS Backgrounds 3 syntax
• background-attachment
  • Supports CSS Backgrounds 3 syntax
• background-color
  • Supports CSS Backgrounds 3 syntax
• background-image
  • Supports CSS Backgrounds 3 syntax
• background-position
  • Supports CSS Backgrounds 3 syntax
• background-repeat
  • Supports CSS Backgrounds 3 syntax
• border
• border-bottom
• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-style
• border-top-width
• border-width
• bottom
• caption-side
• clear
  • See also CSS Page Floats
• clip
• color
• content
• counter-increment
• counter-reset
• counter-set
• cursor
• direction
• display
  • Supports flex, inline-flex, ruby, ruby-base, ruby-text, ruby-base-container and ruby-text-container values.
• empty-cells
• float
  • See also CSS Page Floats
• font
• font-family
• font-size
• font-style
• font-variant
  • Supports CSS Fonts 3 font-variant
• font-weight
• height
• left
• letter-spacing
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• max-height
• max-width
• min-height
• min-width
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• padding
• padding-bottom
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• position
• quotes
  • Note: not supported within @page rules. [Issue]
• right
• table-layout
• text-align
• text-decoration
• text-indent
• text-transform
• top
• unicode-bidi
  • Supports new values (isolate, isolate-override, plaintext) in CSS Writing Modes 3
• vertical-align
• visibility
• white-space
• widows
• width
• word-spacing
• z-index

CSS Paged Media 3

• bleed
  • Only effective when specified within an @page rule without page selectors
• marks
  • Only effective when specified within an @page rule without page selectors
• size
  • Supports all required values and proposed values A0-A10, B0-B10, C0-C10 and JIS-B0-JIS-B10. See [Pull Request]
• crop-offset
  • Specifies distance between the edge of the trim size and the edge of the output page media size
  • This property is not standardized yet. See [Issue]
• crop-marks-line-color
  • Specifies color of the crop marks
  • This property is not standardized yet. See [Pull Request]
• page (Named Pages)

See also: At-rules in CSS Paged Media 3

CSS Generated Content for Paged Media (GCPM) 3

• string-set (Named Strings)
• position: running() (Running Elements)
• footnote-policy
  • Supports auto, line values.

See also:

• At-rules in CSS Generated Content for Paged Media (GCPM) 3
• Values - Cross references, string(), content(), running(), element(), and leader() functions

CSS Fragmentation 3

• break-after
• break-before
• break-inside
  • Note: All of avoid-page, avoid-column and avoid-region values are treated as if they were avoid. [Issue]
• orphans
• widows
• box-decoration-break
  • Note: Background, box-shadow and border images on inline-start/end borders are always rendered as if box-decoration-break: clone is specified.

CSS Fragmentation 4

• margin-break

CSS Page Floats

• clear
  • Supports none, inline-start, inline-end, block-start, block-end, left, right, top, bottom, both, all, same values.
  • When 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.
  • When a 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.
  • If a page float with 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).
  • The page, column, and region values ensure that preceding page floats are placed before the page/column/region containing the element that has the clear property, which can be a page float, a normal float, or a block-level box.
• float
  • Supports block-start, block-end, inline-start, inline-end, snap-block, left, right, top, bottom and none values.
  • Supports values combining keywords. For example,
    • float: top right; float to top right corner
    • float: bottom left; float to bottom left corner
    • float: top bottom; float to top or bottom edge
    • float: top bottom left; float to top left or bottom left corner
    • float: top bottom left right; float to top left, top right, bottom left, or bottom right corner
    • float: block-start inline-start; float to block-start and inline-start corner
    • float: block-start block-end; float to block-start or block-end edge (same as 'snap-block')
    • See [Pull Request]
• float-reference
  • Specify float-reference: page (or column/region) to enable page (or column/region) float.
• float-min-wrap-block
  • Applies to a page float
  • A percentage value is respect to the block dimension of the float reference of the page float
  • When set to a positive length, in-flow contents are not allowed to be flown into a space next to the page float if the block extent of the space is less than the specified length. In that case, the space is kept empty and the in-flow contents are deferred to the next column.
  • This property is not standardized yet. See [Pull Request]

CSS Color 3

• color
• opacity

See also: Values - Supported color values

CSS Backgrounds and Borders 3

• background
• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-color
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• box-shadow

CSS Images 3

• object-fit
• object-position
• image-resolution
  • Only <resolution> value is supported.
  • Only supported for content of 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.
  • The property is applied to vector images such as SVG, as well as raster images. This behavior is different from what the spec specifies.

CSS Fonts 3

• font-family
• font-feature-settings
• font-kerning
• font-size
• font-style
• font-variant
• font-variant-ligatures
• font-variant-caps
• font-variant-numeric
• font-variant-east-asian
• font-weight
• font-stretch

See also: At-rules in CSS Fonts 3

CSS Text 3

• hanging-punctuation
  • Supports all required values, none | [ first || [ force-end | allow-end ] || last ]. See [Pull Request]
• hyphens
• letter-spacing
• line-break
• overflow-wrap, word-wrap
• tab-size
• text-align-last
  • Note: While 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.
• white-space
• word-break

CSS Text 4

• text-autospace
  • Supported values: normal | no-autospace | [ ideograph-alpha || ideograph-numeric ] | auto
• text-spacing-trim
  • Values: space-all | normal | space-first | trim-start | trim-both | auto
• text-spacing
  • Values: normal | none | auto | [<autospace> || <spacing-trim>]
  • Note: This is a shorthand property that sets the text-autospace and text-spacing-trim properties. See [Pull Request ]

CSS Text Decoration 3

• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-shadow
• text-underline-position

CSS Inline Layout 3

• initial-letter

CSS Multi-column 1

Note: Currently the multi-column layout works well only when specified on the root or body element. [Issue]

• column-count
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-width
• columns
• column-fill
• column-span
  • Note: Currently 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.

CSS Basic User Interface 3

• box-sizing
• outline
• outline-color
• outline-style
• outline-width
• text-overflow

CSS Writing Modes 3

• direction
• text-combine-upright
• text-orientation
• unicode-bidi
• writing-mode

CSS Flexible Box 1

• align-content
• align-items
• align-self
• display
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• justify-content
• order

CSS Transforms 1

• transform
• transform-origin
• backface-visibility

Compositing and Blending 1

• background-blend-mode
• isolation
• mix-blend-mode

Scalable Vector Graphics (SVG) 2

• color-interpolation
• color-rendering
• fill
• fill-opacity
• fill-rule
• glyph-orientation-vertical
• image-rendering
• marker
• marker-start
• marker-mid
• marker-end
• pointer-events
• paint-order
• shape-rendering
• stop-color
• stop-opacity
• stroke
• stroke-dasharray
• stroke-dashoffset
• stroke-linecap
• stroke-linejoin
• stroke-miterlimit
• stroke-opacity
• stroke-width
• text-anchor
• text-rendering
• vector-effect

Scalable Vector Graphics (SVG) 1.1

• alignment-baseline
• baseline-shift
• dominant-baseline
• mask

CSS Masking 1

• clip-path
• clip-rule

Filter Effects 1

• filter
• flood-color
• flood-opacity
• lighting-color

Pointer Events

• touch-action

CSS Logical Properties and Values 1

• block-size, inline-size, min-block-size, min-inline-size, max-block-size, max-inline-size
• margin-block-start, margin-block-end, margin-inline-start, margin-inline-end, margin-block, margin-inline
• inset-block-start, inset-block-end, inset-inline-start, inset-inline-end, inset-block, inset-inline
• padding-block-start, padding-block-end, padding-inline-start, padding-inline-end, padding-block, padding-inline
• border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width, border-block-width, border-inline-width, border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style, border-block-style, border-inline-style, border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color, border-block-color, border-inline-color, border-block-start, border-block-end, border-inline-start, border-inline-end, border-block, border-inline

Page spread inside/outside properties and values

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:

• 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

Extended properties with inside and outside values:

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

EPUB Adaptive Layout

Note: This spec is not on a W3C standards track. Future version of Vivliostyle may drop support for this spec.

At-rules

• @-epubx-define
• @-epubx-flow
• @-epubx-page-master
• @-epubx-page-template
• @-epubx-partition
• @-epubx-partition-group
• @-epubx-region
• @-epubx-viewport
• @-epubx-when

Properties

• -epubx-conflicting-partitions
• -epubx-enabled
• -epubx-flow-consume
• -epubx-flow-from
  • Only effective when specified to EPUB Adaptive Layout partitions.
• -epubx-flow-into
• -epubx-flow-linger
• -epubx-flow-options
• -epubx-flow-priority
• -epubx-min-page-height
• -epubx-min-page-width
• -epubx-required
• -epubx-required-partitions
• -epubx-shape-outside
  • Only effective when specified to EPUB Adaptive Layout partitions.
  • Note: only old syntaxes from 3 May 2012 Working Draft are supported.
• -epubx-shape-inside
  • Only effective when specified to EPUB Adaptive Layout partitions.
  • Note: only old syntaxes from 3 May 2012 Working Draft are supported.
• -epubx-snap-height
• -epubx-snap-width
• -epubx-text-zoom
• -epubx-utilization
• -epubx-wrap-flow
  • Only effective when specified to EPUB Adaptive Layout partitions.

CSS Repeated Headers and Footers

Note: This spec proposal is not submitted to CSS Working Group yet.

• repeat-on-break