EPUB 3 user agents that visually render content are expected to provide support for the CSS properties listed on this page, but support is not required. Properties not listed here may still be used (e.g., from evolving CSS 3 modules), but content authors should use due diligence and assess the impact on rendering and accessibility when using such properties.

CSS 2.1

Property Considerations
background

The background property is a shorthand for defining one or more properties. Refer to each individual background-* property for potential issues.

Note that background properties are largely unsupported in EPUB 3 at this time outside of fixed layouts.

background-attachment
background-color
  • Ensure sufficient contrast with text color
background-image
  • Ensure sufficient contrast with content color (text and graphic)
  • High mix of gradients and colors in images can make reading text that is overlaid difficult
background-position
background-repeat
These border properties are shorthands for defining one or more properties. Refer to each individual border-* property for issues
border-collapse
  • An element's border color must never be the sole means of conveying information about the nature of its content. See the Color info page
border-spacing
  • When using color to convey meaning, ensure borders are thick enough that visual users can discern the color
  • User agent support for absolute and fixed positioning in EPUB is not guaranteed
  • Content should not be positioned in a way that makes its discoverability problematic for users with low vision and/or using zooming software
caption-side
clear
clip
  • Although clipping content to 1 pixel is used on the Web to hide content that is only intended for users of assistive technoloies, support for the practice in EPUB reading systems remains inconsistent. Expect your hidden content to be visible in some reading systems.
color
  • See the Color info page for the range of considerations when coloring text and graphical content
content
cursor
  • Avoid changing the cursor such that clickable elements are no longer distinguishable
direction
  • The direction property is not supported in EPUB 3. HTML5 markup, such as the bdi and bdo elements and dir attribute, are used to express directionality
display
  • Setting the display property to the value none removes the element from rendering both visually and to assistive technologies. It is not a mechanism for hiding content from visual display that should be rendered by assistive technologies.
empty-cells
  • Setting the empty-cells property is not required for HTML5 tables, as borders are rendered (do not insert placeholder text such as dashes or non-breaking spaces)
  • For forwards compatibility with EPUB 2 user agents, the property should be set to the value show to ensure table borders are drawn around empty cells
float
  • Elements should not be floated in a way that makes their discoverability problematic for users with low vision and/or using zooming software
  • Ensure sufficient margins exist around floated content so that it is clearly distinguishable from the content that flows around it
  • When floating primary content to the right, ensure that it is not positioned in the markup to accommodate the float (i.e., it occurs at the logical reading point so that it makes sense in non-visual playback contexts)
font The font property is a shorthand for defining one or more properties. Refer to each individual font-* property for issues
font-family
  • Avoid fonts that do not provide sufficient character differentiation, such as sans-serif fonts that represent capital I, lower-case L and the number 1 as identical (or near-identical) characters (e.g., Arial).
  • Avoid cursive and highly ornamented fonts that can be difficult for users to decipher
  • Try to limit the number of fonts used in any given publication and use families consistently (e.g., one family for headings and one for body content)
  • Give preference to fonts that provide sufficient kerning between characters
font-size
  • Use relative sizes such as percentages and ems to facilitate scaling
  • Ensure default font size does not affect legibility of the prose (e.g., avoid specifying x-small, xx-small and equivalent font sizes)
font-style
  • Use CSS to apply italics only for decorative purposes (similar to using the i element). Use em tags if the words are to be stressed
  • Avoid lengthy use of decorative italics, as italicized words can be harder to read than roman face
font-variant
font-weight
  • Use CSS to apply bolding only for decorative purposes. Use strong tags if the words are to be stressed or b for keywords
  • Avoid lengthy use of decorative bolding, as bolded words can be harder to read than roman face
height
  • Assistive technologies typically ignore content that has 0 height and/or width set on its containing element, so do not use this property to hide content that is only intended for non-visual playback.
letter-spacing
  • The letter-spacing property can be used to increase the kerning between letters to improve the readability of tightly constructed fonts
  • Whitespace should never be added between the letters of a word that is not intended to be spelled out. Always use this property to visually expand the spacing between characters when such spacing is necessary
line-height
  • Use caution when changing line heights. Slight increases in the line height can improve overall readability, but too much space between lines can have the opposite effect (e.g., it becomes harder to distinguish paragraphs)
  • Avoid shrinking the line height to compress content
list-style The list-style property is a shorthand for defining one or more properties. Refer to each individual list-style-* property for issues
list-style-image
  • Avoid using images to convey the meaning of a list. If the image is important to comprehension of the items, ensure that a semantic is attached to the list to convey that meaning. If the list represents a figure or aside, use the appropriate container element and include a caption
list-style-position
list-style-type
  • Do not change the nature of a list using the list-style-type property (e.g., to not use the property to give an unordered list the appearance of ordering)
  • Changing margins to move content off screen, while common on the Web, is not guaranteed to work in EPUB user agents. This practice is also known to cause problems depending on the user's preferred reading direction and the placement of the content
  • Outlines surround borders and serve a similar function. The issues with each are the same. See the corresponding border properties for more information
  • Ensure when using both borders and outlines that sufficient contrast is maintained between them if they both visually convey information.
overflow
  • Avoid using the hidden value, as content may not be visible, especially when zoomed
position
  • Absolute positioning should not be used to re-order content differently than it is laid out in the markup
  • Elements should not be absolutely positioned in a way that makes their discoverability problematic for users with low vision and/or using zooming software
quotes
table-layout
text-align
  • Avoid justifying text, as the uneven spacing that occurs between words can reduce the readability for some people.
text-decoration
  • Use the del element to semantically mark deleted text
text-indent
  • A technique used to hide text for assistive technologies is to use a large negative value for the indent, but like negative margins this technique is not reliable in EPUB user agents and may cause issues depending on the user's preferred text direction
text-transform
  • Avoid lengthy decorative use of capitalization as it can make words difficult to distinguish and read
unicode-bidi
  • The unicode-bidi property is not supported in EPUB 3. HTML5 markup, such as the bdi and bdo elements and dir attribute, should be used to express directionality
vertical-align
visibility
  • Hidden content is not available to assistive technologies, so do not use this property to hide content from visual rendering that is intended to be read out
white-space
width
  • Assistive technologies typically ignore content that has 0 width and/or height set on its containing element, so do not use this property to hide content that is only intended for non-visual playback.
word-spacing
  • Increasing word spacing can help improve readability of tightly constructed fonts
  • Use this property in preference to adding non-breaking spaces to increase the space between words
z-index
  • azimuth
  • cue
  • cue-after
  • cue-before
  • elevation
  • pause
  • pause-after
  • pause-before
  • pitch
  • pitch-range
  • play-during
  • richness
  • speak
  • speak-header
  • speak-numeral
  • speak-punctuation
  • speech-rate
  • stress
  • voice-family
  • volume

CSS 2.1 Pseudo-Classes

Pseudo-Class Considerations
:active
:first-child
:focus
:hover The :hover pseudo-selector should never be used, as it is not device independent and may not be activatable by many users
:lang
:visited

CSS 2.1 Pseudo-Elements

Pseudo-Element Considerations
:before
and
:after
  • Assistive technologies will typically announce text injected using the :before and :after pseudo-elements with the exception of the IE 11 and Edge browsers.
  • Since the expected behavior is to announce the injected text, avoid the using the pseudo-elements for decorative purposes.
  • Users without CSS support will not have access to the injected text.
:first-letter
:first-line