サポートする CSS 機能

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

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

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

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

CSS Repeated Headers and Footers

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

• repeat-on-break

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.