サポートするCSS機能
Vivliostyle は現在、以下の各 CSS 機能(Values、Selectors、At-rules、Media queries、Properties)をサポートしています。
このほかにも、ブラウザでサポートされる CSS プロパティと値は基本的にすべて利用可能です。Vivliostyle.js は独自の処理をしない CSS プロパティについてはブラウザに処理を任せるためです。
値
- 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
- Attribute references:
attr()
- Only supported in values of
content
property. - Only 'string' and 'url' types are supported.
- Only supported in values of
- Cross references:
target-counter()
andtarget-counters()
- Only supported in values of
content
property.
- Only supported in values of
string()
function (Named Strings)content()
functionleader()
functioncalc()
functionenv()
function- Implemented only
env(pub-title)
andenv(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
- Implemented only
var()
function
セレクタ
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]
- Note: there is a bug when used alone or with the universal selector(
:first-letter
pseudo-element- Note: there is a bug when used alone, with the universal selector(
*
), or with non-ascii characters. [Issue]
- Note: there is a bug when used alone, with the universal selector(
: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]
- Note: there is a bug when used alone or with the universal selector(
::first-letter
pseudo-element- Note: there is a bug when used alone, with the universal selector(
*
), or with non-ascii characters. [Issue]
- Note: there is a bug when used alone, with the universal selector(
::before
and::after
pseudo-elements- General sibling combinator
E ~ F
Selectors 4
CSS Overflow 4
対応していないセレクタ
- 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
CSS Namespaces 3
CSS Conditional Rules 3
CSS Conditional Rules 4
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]
- Note: In multi-document publications, the
- :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)
- The
:nth(An+B)
syntax is supported but the:nth(An+B of <custom-ident>)
is not yet supported. - 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]
- The
See also:
- Properties in CSS Generated Content for Paged Media (GCPM) 3
- Values - Cross references, content(), and string() functions
CSS Fonts 3
See also: Properties in CSS Fonts 3
Media queries
- Vivliostyle uses styles specified for
print
media (as well asall
).- Vivliostyle specific media type
vivliostyle
is enabled in addition toprint
media.
- Vivliostyle specific media type
- Supported media features
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
- 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]
- Note: not supported within
- right
- table-layout
- text-align
- text-decoration
- text-indent
- text-transform
- top
- unicode-bidi
- 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
- Only effective when specified within an
- marks
- Only effective when specified within an
@page
rule without page selectors
- Only effective when specified within an
- size
- Supports all required values and proposed values
A0
-A10
,B0
-B10
,C0
-C10
andJIS-B0
-JIS-B10
. See [Pull Request]
- Supports all required values and proposed values
- crop-offset
- Specifies distance between the edge of the trim size and the edge of the output page media size
- Only effective when specified within an
@page
rule without page selectors - This property is not standardized yet. See [Issue]
- page (Named Pages)
See also: At-rules in CSS Paged Media 3
CSS Generated Content for Paged Media (GCPM) 3
- string-set (Named Strings)
- footnote-policy
- Supports
auto
,line
values.
- Supports
See also:
- At-rules in CSS Generated Content for Paged Media (GCPM) 3
- Values - Cross references, string(), content(), and leader() functions
CSS Fragmentation 3
- break-after
- break-before
- break-inside
- Note: All of
avoid-page
,avoid-column
andavoid-region
values are treated as if they wereavoid
. [Issue]
- Note: All of
- 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.
- Note: Background, box-shadow and border images on inline-start/end borders are always rendered as if
CSS Fragmentation 4
CSS Page Floats
- clear
- Supports
none
,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 aclear
value on it forbidden such placement, the float is instead placed at the block-end side (unless theclear
value also forbidden such placement).
- Supports
- float
- float-reference
- 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
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]
andvideo
(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.
- Only
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]
- Supports all required values,
- 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 treatstext-align
for now as an independent property (defined in CSS 2.1) rather than a shorthand.
- Note: While
- white-space
- word-break
CSS Text 4
- text-spacing
Supported values:
normal | auto | none | [ trim-start | space-start | space-first ] || [ trim-end | space-end | allow-end ] || [ trim-adjacent | space-adjacent ] || ideograph-alpha || ideograph-numeric
Note:
normal
is equivalent tospace-first trim-end trim-adjacent ideograph-alpha ideograph-numeric
auto
is equivalent totrim-start trim-end trim-adjacent ideograph-alpha ideograph-numeric
ideograph-alpha
andideograph-numeric
create 1/8em space
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 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. Whenauto
value is specified, either a single column or all columns are spanned depending on the min-content inline size of the page float.
- Note: Currently
CSS Basic User Interface 3
CSS Writing Modes 3
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
Compositing and Blending 1
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
CSS Masking 1
Filter Effects 1
Pointer Events
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
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
- EPUB Adaptive Layout パーティションに指定した場合のみ有効です。
CSS Repeated Headers and Footers
Note: 本仕様案は、CSS Working Groupへの提出は未定です。