Descriptions
of all CSS specifications
Tests
Selectors describes the element
selectors used in CSS and some other technologies. Selectors are
used to select elements in an HTML or XML document, in order to
attach (style) properties to them. Elements can be selected
based on their name, attributes, context, and other aspects.
Tantek Çelik, Elika J. Etemad, Daniel Glazman, Ian Hickson,
Peter Linss, John Williams
Selectors Level 4
extends level 3 with new ways to select
elements. based, e.g., on what they contain or on what follows.
Elika J. Etemad,
Tab Atkins Jr.
Tests
CSS Level 2 Revision 1 corrects errors in
the 1998 Recommendation of
CSS level 2 and adds a select few highly
requested features originally planned for level 3, which have
already been widely implemented. But most of all CSS 2.1
represents a ‘snapshot’ of CSS usage: it consists of all CSS
features that are implemented interoperably for HTML and XML at
the date of publication of the Recommendation.
Bert Bos, Tantek Çelik, Ian Hickson, Håkon Wium Lie
Preview of CSS Level 2 shows how CSS2 looks with the proposed errata applied and
redundant text replaced by references to other CSS modules. It is
not a specification itself, but a candidate for the next (i.e.,
2nd) revision of CSS level 2.
Bert Bos
CSS Snapshot 2007 links to all the
specifications
that together represent the state of CSS as of 2006. Because large
parts of CSS are still under development and it is often
difficult to know what their state is, the CSS working group
decided to publish this document, which contains only the
parts of CSS that are stable and have been shown to work.
Elika J. Etemad
CSS Snapshot 2010 links to all
the specifications that together represent the state of CSS as of
2010. With this document, the CSS WG aims to help implementors distinguish between
the parts of CSS that are ready for production and the parts that
are still experimental.
Elika J. Etemad
CSS Snapshot 2015 links to
all the specifications that together represent the state of CSS as
of 2015. With this document, the CSS WG aims to help implementors distinguish between the
parts of CSS that are ready for production and the parts that are
still experimental.
This Note also includes best practices for experimental and
partial implementations, including rules for so-called ‘vendor
prefixes’ on proprietary and unstable features.
Elika J. Etemad
CSS Snapshot 2017 links to
all the specifications that together represent the state of CSS as
of 2017. It is the successor to the similar snapshots for 2015, 2010 and 2007. With this document, the CSS WG aims to help implementors
distinguish between the parts of CSS that are ready for production
and the parts that are still experimental.
The Note also defines best practices for experimental and
partial implementations, including rules for so-called ‘vendor
prefixes’ on proprietary and unstable features.
Tab Atkins Jr.,
Elika J. Etemad / fantasai,
Florian Rivoal
CSS Snapshot 2018 links to
all the specifications that together represent the state of CSS as
of 2018. It is the successor to the similar snapshots for 2017, 2015, 2010 and 2007. With this document, the CSS WG aims to help implementors
distinguish between the parts of CSS that are ready for production
and the parts that are still experimental.
The Note also defines best practices for experimental and
partial implementations, including rules for so-called ‘vendor
prefixes’ on proprietary and unstable features.
Tab Atkins Jr.,
Elika J. Etemad / fantasai,
Florian Rivoal
CSS Snapshot 2020 links to
all the specifications that together represent the state of CSS as
of 2020. It is the successor to the similar snapshots for 2018, 2017, 2015, 2010 and 2007. With this document, the CSS WG aims to help implementors
distinguish between the parts of CSS that are ready for production
and the parts that are still experimental.
The Note also defines best practices for experimental and
partial implementations, including rules for so-called ‘vendor
prefixes’ on proprietary and unstable features.
Tab Atkins Jr.,
Elika J. Etemad / fantasai,
Florian Rivoal
CSS Snapshot 2021 links to
all the specifications that together represent the state of CSS as
of 2021. It is the successor to the similar snapshots for 2020, 2018, 2017, 2015, 2010 and 2007. With this document, the CSS WG aims to help implementors
distinguish between the parts of CSS that are ready for production
and the parts that are still experimental.
The Note also defines best practices for experimental and
partial implementations, including rules for so-called ‘vendor
prefixes’ on proprietary and unstable features.
Tab Atkins Jr.,
Elika J. Etemad / fantasai,
Florian Rivoal
CSS Snapshot 2022 links to
all the specifications that together represent the state of CSS as
of 2021. It is the successor to the similar snapshots for 2021, 2020, 2018, 2017, 2015, 2010 and 2007. With this document, the CSS WG aims to help implementors
distinguish between the parts of CSS that are ready for production
and the parts that are still experimental.
The Note also defines best practices for experimental and
partial implementations, including rules for so-called ‘vendor
prefixes’ on proprietary and unstable features.
Tab Atkins Jr.,
Elika J. Etemad / fantasai,
Florian Rivoal
CSS Snapshot 2023 links to
all the specifications that together represent the state of CSS as
of 2023. It is the successor to the similar snapshots for 2022, 2021, 2020, 2018, 2017, 2015, 2010 and 2007. With this document, the CSS WG aims to help implementors
distinguish between the parts of CSS that are ready for production
and the parts that are still experimental.
The Note also defines best practices for experimental and
partial implementations, including rules for so-called ‘vendor
prefixes’ on proprietary and unstable features.
Tab Atkins Jr.,
Elika J. Etemad / fantasai,
Florian Rivoal,
Chris Lilley
Grid Template Layout (formerly:
Advanced Layout) describes a new way to position elements using
constraints on their alignment to each other and on their
flexibility. Document elements are flowed into one or more
templates, which resemble a traditional layout grid, with rows
and columns as in a table. It can be applied to a page or to
individual elements, e.g., to lay out a form. This module
and Grid Layout are in the process of
being merged.
Bert Bos, César Acebal
Many primarily visual devices are in fact capable of making
sound as well, sometimes even of very high quality. The audio
module contains properties for attaching background sounds to
elements and sound effects to state transitions, such as link
activation or ‘hovering’ over an element. Expected possibilities
include overlaying multiple sounds, positioning a sound left or
right in stereo space and playing a sound in a loop.
Dave Raggett, Daniel Glazman
Tests
Backgrounds and Borders describes
background colors
and images and the style of borders. New functionality includes
the ability to stretch the background image, to use images for
the borders, to round the corners of the box and to add a box
shadow outside the border.
Bert Bos, Elika J. Etemad
Backgrounds and Borders level 4 is
a repository for proposed features for the next level of the Backgrounds and Borders module. If (some
of) those features are maintained, the module will eventually
supersede the level-3 module. No draft has been published yet, but
currently expected features include corner shapes,
writing-mode-relative background positions (to automatically
rotate, mirror and/or position a background depending on whether
the element happens to contain vertical, right-to-left or
left-to-right text), and partial borders (clipping out parts of an
edge).
Bert Bos,
Elika J. Etemad,
Brad Kemper,
Lea Verou
Basic User Interface contains
features for styling some
interactive, dynamic aspects of Web pages: the look of form elements
in their various states and more cursors and colors to describe GUIs
(graphical user interfaces) that blend well with the user's desktop
environment.
Tantek Çelik
The Box Model describes the layout
of block-level
content in normal flow. When documents are laid out on visual media
(e.g. screen or paper), CSS represents the elements of the document as
rectangular boxes that are laid out one after the other or nested inside
each other in an ordering that is called a flow. The flow can
be horizontal (typical for most languages) or vertical (often used
for Japanese & Chinese).
Elika J. Etemad
Bert Bos
The Box Model describes the
layout of block-level content in normal flow. Level 4 extends
level 3 with a way to automatically suppress the margin of the
first or the last element inside a line or a block (which is often
not possible otherwise, because there is no way to always know
which element falls at the edge).
Elika J. Etemad
CSS Extended Box Model
The Extended Box Model provides
extra control over
positioning of floats and the size of boxes.
Bert Bos
Marquee contains the properties that control the
speed and direction of the “marquee” effect. Marquees
are a scrolling mechanism that needs no user intervention:
overflowing content moves into and out of view by itself. Marquee
is mostly used on mobile phones. (Until April 2008, the marquee
properties were part of the Box module.)
Bert Bos
Cascading and Inheritance describes
how values are
assigned to properties. CSS allows several style sheets to influence
the rendering of a document, and the process of combining these style
sheets is called ‘cascading.’ If no value can be found through cascading,
a value can be inherited from the parent element or the property's
initial value is used.
Also, the module describes how ‘specified values,’ which is what
a style sheet contains, are processed into ‘computed values’ and
‘actual values.’
Elika J. Etemad,
Tab Atkins Jr.,
Håkon Wium Lie
Compared to level 3, level 4 adds a
'default' keyword to override the normal order of cascading and
inheritance, and the possibility to qualify the '@import' rule not
only with a Media Query, but also with
a 'supports()' clause (for details of which, see CSS Conditional Rules).
Elika J. Etemad / fantasai,
Tab Atkins Jr.
Cascading and Inheritance
Level 5 extends level 4 with the
ability to classify style sheets into into an arbitrary number of
‘layers’: base layers and override layers. This makes it easier to
re-use style sheets and add local overrides, without the need for
'!important' or very specific selectors.
Elika J. Etemad / fantasai,
Miriam E. Suzanne,
Tab Atkins Jr.
Cascading and Inheritance
Level 6 extends level 5 with
‘scoped styles’, a way to group style rules that apply to the same
part of a document.
Elika J. Etemad / fantasai,
Miriam E. Suzanne,
Tab Atkins Jr.
Tests
Color specifies the color-related
aspects of CSS,
including transparency and the various notations for the
<color>
value type.
L. David Baron, Tantek Çelik, Chris Lilley
Color Module Level 4 extends Color
level 3. It defines various color notations, including RGB,
HSL, hexadecimal, named colors, HWB, Lab, LCH and relative colors
('color-mod'). It defines the 'color' and 'opacity' properties. And
it provides ways to work in color spaces other than the default
sRGB.
Tab Atkins Jr.,
Chris Lilley,
Lea Verou,
L. David Baron
Fonts contains the properties to
select fonts, as well as properties for font ‘adjustments,’ such
as glyph variants (e.g., swash letters, small caps, oldstyle
digits), and kerning. Font selection is identical to
the similar section in CSS2. The font adjustment properties are new to
level 3. The module also contains the @font-face rule for
downloadable fonts, which was previously in a separate module.
The module will eventually be replaced by the larger Fonts level 4
John Daggett, Paul Nelson,
Jason Cranford Teague, Michel Suignard, Chris Lilley
Generated Content for Paged Media
contains advanced
properties for printing, beyond what the Paged Media module provides.
It has properties for creating footnotes, cross references ("see
section X on page Y") and constructing running headers from section
titles.
Håkon Wium Lie
Page Floats was split off from Generated Content for Paged Media. It contains
properties to float elements to the top, bottom or side of a page
in paginated renderings, and to float elements to particular
positions with text wrapping at both sides.
Johannes Wilm,
Håkon Wium Lie
Generated and Replaced Content
defines how to put content before, after, or in place of an
element. The content can be text or an external object, such as
an image. E.g., when a document contains an element that links to
an image, it is this module that allows a designer to choose
whether the image is shown in place of the element or not. (The
computation of the size of replaced elements is defined
in the CSS Image Values module.)
Ian Hickson
Hyperlinks Presentation deals with
the various ways
hyperlinks can be presented. CSS1 already provided the ':visited'
and ':link' pseudo-classes to select hyperlinks. This module will
provide properties to control which hyperlinks are active and where
the target is shown when the user traverses the link (e.g., in a
new window or in-line in the current document). Note that not all
links have to be presented as hyperlinks; some may be handled as
replaced elements (see the Generated and replaced
content module) and some are outside the scope of CSS (such as
links to scripts, namespace definitions, P3P policies, etc.)
Tantek Çelik, Bert Bos, Daniel Glazman
The Introduction has been
dropped and replaced by a series of Notes called
the ‘CSS Snapshots.’ See, e.g.,
the Snapshot 2010 for a description.
Håkon Wium Lie, Eric A. Meyer, Bert Bos
Lists contains the properties for styling lists, in
particular various types of bullets and numbering systems.
Tab Atkins Jr., Shinyu Murakami,
Ian Hickson
CSS Math
Math is a proposed module for
properties targeted at styling mathematical formulas, building on
on the layout model of the ‘presentational’ elements of MathML. It is currently not being worked
on.
-
Multi-column Layout contains
properties to flow content
into flexibly-defined columns.
Håkon Wium Lie
Tests
XML-based formats can use “namespaces” to
distinguish multiple uses
of the same element name from each other, and this draft explains how
CSS selectors can be extended to select those elements based on their
“namespace” as well as their local name.
Elika J. Etemad,
Anne van Kesteren,
Chris Lilley,
Peter Linss
The DOM specifies the functions that are found in several
programming libraries (and browsers) to manipulate HTML, XML &
CSS documents. Programmers can call them from their programs
rather than write their own. Some of those functions deal with
adding & deleting rules and changing properties in CSS style
sheets. These APIs form the CSS Object
Model or CSS-OM. They are
useful for stand-alone programs as well as for scripts and
applets. DOM level 2 contains two chapters on the CSS-OM
(CSS Object Model) and the CSS WG will develop a level 3
CSS-OM.
Anne van Kesteren
The APIs introduced by this specification provide authors with
a way to inspect and manipulate the view information of a
document. This includes getting the position of element layout
boxes, obtaining the width of the viewport through script, and
also scrolling an element.
Anne van Kesteren
Tests
Paged Media extends the
properties that CSS2 already had with new ones to control such
things as running headers and footers and page numbers.
Melinda Grant,
Elika J. Etemad,
Håkon Wium Lie,
Simon Sapin,
Jim Bigelow
CSS Positioned Layout defines one
of several ways in CSS to layout parts of a document. It contains
properties to position an element at a fixed position relative to
other positioned elements, to offset elements from their normal
position, and to position them at a fixed position on a page. A
'z-index' property defines whether elements are in front of or
behind other elements at the same position.
Arron Eicholz
Presentation Levels introduces a
way to step forward and backward through multiple renderings of
the same document, which is especially useful for slide show
presentations (highlight list items one at a time) and outline
views (show more or less detail). The model is that each element
has a presentation level and three styles (three states): one for
when the browser is at a lower presentation level, one for an
exact match and one when the browser's presentation level is
above that of the element. The browser must offer the user an
easy way to increase and decrease the browser's level.
Håkon Wium Lie
This module was dropped in March 2008.
The keyword 'reader' is a media type for use in Media Queries
(similar to 'screen', 'print', 'projection', etc.). Devices that
might choose to apply rules inside '@media reader' are devices
like screen readers, that display a page on screen and speak it
at the same time, or display the page and simultaneously render
it on a dynamic braille device. The properties that apply to this
media type are therefore the combination of the properties for
screen, speech and braille.
Bert Bos
Ruby describes CSS properties to
manipulate the position of "ruby", which are small annotations on
top of or next to words, especially common in Chinese and
Japanese. They are often used to give the pronunciation or
meaning of difficult ideograms.
Richard Ishida, Paul Nelson, Michel Suignard
The CSS Scoping module level 1
defines the CSS counterpart to HTML5's scoped styles, mechanisms
for styling pseudo-elements (‘regions’) and selectors for the
‘shadow DOM.’
Tab Atkins Jr.,
Elika Etemad
Grid Layout allows to set up a flexible design grid for an
element so that the descendants of the element can be positioned
relative to that grid and thereby be aligned to each other in two
dimensions. Areas of the grid can be assigned names both for ease
of use and to create a level of indirection that facilitates
reordering of elements. Like the other grid/template modules,
this module builds on frame-based layout
ideas that started in 1996 and produced, among other things
absolute positioning in CSS level 2. The Grid Layout module
thus has a large overlap with Multi-column
Layout, Template Layout, Flexible Box Layout, Grid
Positioning, and Regions, but doesn't
replace them. It is expected, however, that the six modules can
eventually be condensed to just three: Multi-column, Flexible
Box, and a third one for grids/templates/regions.
Alex Mogilevsky,
Phil Cupp,
Markus Mielke,
Daniel Glazman,
Tab Atkins Jr.,
Elika J. Etemad / fantasai,
Rossen Atanassov
Level 2 of the Grid Layout module extends the capabilities of
the grid, in particular with the ability to make descendant
elements of a grid element other than direct children into grid
items.
Tab Atkins Jr.,
Elika J. Etemad / fantasai,
Rossen Atanassov
Level 3 of the Grid Layout module adds ‘masonry layout’, an
automatic placement algorithm that places the next grid item in the
shortest row or column thus far.
Tab Atkins Jr.,
Elika J. Etemad / fantasai,
Jen Simmons,
Brandon Stewart
‘Regions’ is the collective name for a some kinds of areas on
the canvas, which can be selected by pseudo-elements. Regions are
created by certain other modules, such as Paged Media (which creates regions called
‘margin boxes’), Selectors (which
creates, e.g., the '::first-line' region) and Grid Template Layout (which creates ‘slots’).
The Regions module defines two
kinds of things you can do with regions: Some kinds of regions can
be chained together and content flowed into them, such that text
that is too long for one region doesn't overflow, but automatically
continues in another region; and, secondly, content can be styled
based on what region it ends up in. E.g., a paragraph that flows
into two regions can have bold text in the first region and normal
text in the second, even though there is no element boundary.
Vincent Hardy,
Rossen Atanassov,
Alan Stearns
Speech contains properties to
specify how a document is rendered by a speech synthesizer:
volume, voice, speed, pitch, cues, pauses, etc. There was already
an ACSS (Aural CSS) module in CSS2, but it was never correctly
implemented and it was not compatible with the Speech Synthesis
Markup Language (SSML), W3C's language for controling speech
synthesizers. The ACSS module of CSS2 has therefore been split in
two parts: speech (for actual speech, compatible with SSML) and
audio (for sound effects on other devices).
The speech properties in level 3 will be similar to those in level 2,
but have different values. (The old properties can still be used
with the deprecated 'aural' media type, but the new ones should
be used inside the new 'speech' medium, as well as in style
sheets for 'all' media.)
Daniel Weck, Dave Raggett,
Claudio Santambrogio, Daniel Glazman
The syntax of CSS rules in HTML's ‘style’ attribute is
strictly speaking not part of CSS, but is mentioned here,
because it is produced by the CSS working group. It was made
necessary, because XHTML 1.0, in contrast to HTML 4.0,
doesn't define the syntax of CSS rules in its style attribute.
However, the specification is valid for all similar attributes
(e.g., those in SVG), not just for HTML.
Elika J. Etemad, Tantek
Çelik, Bert
Bos, Marc Attinasi
Syntax contains the generic
(forward-compatible) grammar that all levels of CSS adhere to.
Every property also has restrictions on the syntax of its value,
but those can be found in the other CSS modules.
Tab Atkins Jr.,
Simon Sapin,
L. David Baron
CSS Tables Module
Tables describes the layout of
tables: rows, columns, cells and captions, with their borders and
alignments. The model in level 3 will probably not have anything
new compared to level 2, but it will be
described in more detail.
Francois Remy,
Greg Whitworth
Text contains the text-related
properties of CSS2 (justification, text wrapping,
etc.) plus several new properties, many for dealing with text in
different languages and scripts (line breaking, kashida,
hyphenation, etc.). It includes (and replaces) the proposal in
the International layout draft. Also see the Line module for
things like vertical alignment within a line, line height
calculation and styles for first-line/first-letter. The Text
module reached CR status in 2003, but very little was
implemented. Some common typography required too many properties,
while many combinations of values were not useful. The rewrite
started in 2004 and should result in the same functionality, but
with fewer properties and better defaults. The Text module has
been split into four parts: Text, Writing
Modes, Line Grid and Text Decoration.
Elika J. Etemad, Koji Ishii,
Shinyu Murakami,
Paul
Nelson, Michel Suignard,
Chris Lilley
Writing Modes
(previously: Text Layout) describes the
properties that control text direction: horizontal lines of text
that are stacked from top to bottom (normal for most languages),
vertical lines of text that are stacked from right to left (often
used for Japanese), or vertical lines that stack from left to right
(Mongolian). It also describes the order of letters inside the line
(bi-directionality) and the rotation that may occur for certain
letters inside vertical text.
Elika Etemad / fantasai, Koji Ishii,
Shinyu Murakami,
Paul Nelson, Michel
Suignard
Level 4 expands level 3 with a few extra features, such
as 'sideways-lr/sideways-rl', combining digits horizontally
inside vertical text, and automatically putting text in columns
when the text is orthogonal (vertical or horizontal) to the
surrounding text (horizontal or vertical). 'Sideways-lr' and
'sideways-rl' are alternative vertical writing modes that are
very useful for writing text vertically in scripts that are
normally horizontal, e.g., to write English text on book spines
or along the edge of a page.
Elika Etemad / fantasai,
Koji Ishii
The CSS Line Grid module level 1
defines properties to make it easier to align the lines in
side-by-side column or on the two sides of a sheet of paper,
despite images or headings that interrupt the regular grid. It
also defines mechanisms to align letters vertically in a series of
lines, which is a common design in ideographic scripts, such as
Japanese. (These feature were previously part of the Writing Modes.)
Elika Etemad,
Koji Ishii,
Alan Stearns
Values and Units describes the
common values and units that CSS properties accept.
Håkon Wium Lie,
Tab Atkins,
fantasai,
Chris Lilley
Values and Units describes
the common values and units that CSS properties accept. Compared
to level 3, this level has a few more units
and more arithmetical operations.
Tab Atkins,
fantasai
Values and Units describes
the common values and units that CSS properties accept. Compared
to level 4, this level adds values
that depend on the relative nesting level and a way to copy
attribute values into property values.
Tab Atkins,
Elika J. Etemad / fantasai,
Miriam E. Suzanne
The Web Fonts module has been
merged with the Fonts module. Web
Fonts allows downloading fonts for use with a document. The
technology is also included in SVG and, conversely, one can
create fonts for download in SVG. Previously, this functionality
was part of CSS level 2, but with the revison of
level 2, it has been moved to level 3.
John Daggett, Chris Lilley,
Michel Suignard
Behavioral Extensions to CSS
defines the 'binding' property for XBL. The property was called
'behavior' in the first draft. That draft contained a number of
other proposals that are no longer pursued. (To some extent, they
have been replaced by XBL.)
Ian Hickson
The Flexible Box Layout Module
defines the 'flex' and 'inline-flex' keywords for the 'display'
property, which cause an element to be displayed as either a
column or a row of child elements. Additional properties
determine the order of the child boxes (left to right, bottom to
top, etc.) and how space is distributed over the children and the
spaces between them. The module is primarily intended for forcing
rows of controls in a GUI to equal height or width.
Tab Atkins Jr.,
Elika J. Etemad / fantasai,
Rossen Atanassov,
Alex Mogilevsky,
L. David Baron,
Neil Deakin,
Ian Hickson,
David Hyatt
The CSS Images Module defines
how properties can refer to images by URL. All properties that
can take images as a value, such as 'background-image' and
'list-style-image', use this syntax. It also defines color
gradients. as a built-in image type.
Elika J. Etemad,
Tab Atkins Jr.
The Images defines how
properties can refer to images
by URL. All properties that can take images as a value, such as
'background-image' and 'list-style-image', use this syntax. It
also defines color gradients. The level-4 module extends the level-3 module of the same name with, among
other things conic color gradients.
Tab Atkins Jr.,
Elika J. Etemad / fantasai,
Lea Verou
The CSS Fragmentation Module
defines properties to force or avoid page and column breaks. It
combines features that were previously in two different
specifications, CSS Paged Media and Multi-column Layout.
Rossen Atanassov,
Elika J. Etemad / fantasai
The CSS Fragmentation Module
Level 4 extends Level 3 with control over margins at page
breaks and other enhancements.
Rossen Atanassov,
Elika J. Etemad / fantasai
The Transitions Module defines a
property to animate the transitions between pseudo-classes (e.g.,
when an element enters or leaves the ':hover' state). During a
given delay, certain property values gradually change from the
old value to the new, rather than instantaneously, as in
level 2.
Dean Jackson, David Hyatt, Chris Marrin, Sylvain Galineau,
L. David Baron
The CSS Transitions Module
Level 2 extends level 1 with
transitions on properties with discrete values and transitions on
elements are not displayed (‘display: none’) either before or after
the transition.
L. David Baron,
Brian Birtles
The Animations Module specifies
which properties change their values during an animation, what
values they take successively, and during how much time. It does
not define what causes a particular animation to start, only what
happens during one. (Compare this to the Transitions module, which also animates
properties, but between state changes, i.e., pseudo-classes.)
Dean Jackson, David Hyatt, Chris Marrin
CSS Animations Level 2
extends CSS Animations Level 1. A new
'animation-timeline' property allows to select another time line
than a number of seconds on the wall clock. E.g., the progress of
loading of a resource from 0% to 100% might provide a time line, or
the position of a scrollbar.
L. David Baron,
Brian Birtles
Web Animations is a joint
specification by the CSS and SVG workng groups. CSS Transitions, CSS Animations and SVG all provide
mechanisms that generate animated content on a Web page. Although
the three specifications provide many similar features, they are
described in different terms. This specification proposes an
abstract animation model that encompasses the common features of
all three specifications. This model is backwards-compatible with
the current behavior of these specifications such that they can be
defined in terms of this model without any observable change.
Brian Birtles,
Shane Stephens,
Alex Danilo,
Tab Atkins
Web Animations Level 2
defines a model and an API for animations in web pages, which
underlies CSS animations and transitions, but also JavaScript-based
animations.
Level 2 extends level 1 with,
among other things, defintions of grouped and sequenced
animations.
Brian Birtles,
Robert Flack
Tests
CSS Mobile Profile describes a
subset of CSS that is suitable for handheld devices, such as
mobile phones. This profile further fills in the 'handheld' media
type.
Svante Schubert,
Robin Berjon,
Ted Wugofski,
Doug Dominiak,
Peter Stark,
Tapas Roy
Tests
CSS Print Profile describes a
subset of CSS that is
suitable for documents printed on low-cost printers. It is a
companion to the XHTML Print
Profile.
Elika J. Etemad,
Melinda Grant, Jim Bigelow
CSS TV profile describes a
subset of CSS that is
suitable for documents displayed on TV sets, including text
documents that are broadcast over digital TV.
Glenn Adams, Tantek Çelik, Sean Hayes, Håkon Wium Lie
CSS Conditional Rules defines a
number of ways to make style rules depend on factors outside the
document, such as the output media ('@media', for the most part
already in level 2), the capabilities of the user agent, and the
URL of the document.
L. David Baron
CSS Viewport Level 1
(formerly ‘CSS Device Adaptation’) defines the effect of the
<META NAME=VIEWPORT> element that may occur in HTML5
documents. On certain devices, that element influences the size of
the initial containing block and the mapping of CSS units
(‘px’, ‘cm’, ‘pt’, etc.) to real units.
The initial containing block is a hypothetical rectangle in the
CSS rendering model that defines the (0,0) position and the
meaning of percentages on the root element. On devices with a
screen it is normally equal to the viewport (i.e., the
window on which the document is drawn). But, for historical
reasons, some devices use an initial containing block that is
bigger than the viewport. Typically, this is the case on mobile
phones and tablets that are less than about 1000px wide. Such
devices also scale the CSS units by the ratio of the viewport and
the initial containing block, which makes the units smaller than
recommended by CSS. The <META> element can override the size
of the initial containing block and it can define an explicit zoom
factor to change the size of the CSS units.
Most commonly, the <META< element is used to tell mobile
phones to make the initial containing block equal to the viewport.
That looks like this:
<meta name="viewport" content="width=device-width">
Florian Rivoal,
Emilio Cobos Álvarez,
Matt Rakow,
Rune Lillesveen,
Ryan Betts,
Øyvind Stenhaug
CSS Exclusions defines properties to set on
positioned elements so that they act as ‘exclusions’ and cause
text to wrap around themselves, similar to how text wraps around
floating elements.
Vincent Hardy, Rossen Atanassov, Alan Stearns
CSS
Shapes defines properties to assign a shape (circle,
polygon, or arbitrary image) to a CSS box, so that the lengths of
the lines inside the box are determined by that shape, rather
than by the box's margins. The shape can also be used on floating
elements to define how the text outside the float wraps around
it.
Vincent Hardy, Rossen Atanassov, Alan Stearns
Compositing and Blending
allows boxes not only to be opaque or semi-transparent, but also
to combine with underlying boxes in other ways (color difference,
color mask, color shift, etc.) for various effects. This module is
made in cooperation with SVG.
Rik Cabanier
Filter Effects allows
graphics filters to be applied to an element (after it has been
rendered, but before it has been composited, see Compositing and Blending). Filters can
blur an element, add a shadow, modify colors, increase contrast,
add a ‘texture,’ etc. The module defines a number of common
graphics effects, but also allows to use filters written in OpenGL
(OpenGL ES Shading Language). This module is made in cooperation
with SVG.
Vincent Hardy, Dean Jackson, Erik Dahlström
CSS Masking provides two
means for partially or fully hiding portions of visual elements:
masking and clipping. Masking describes how to use another
graphical element or image as a luminance or alpha
mask. Clipping describes the visible region of visual
elements. This module defines features both for CSS and for SVG.
Dirk Schulze,
Brian Birtles,
Tab Atkins Jr.
The anonymous box that encloses the content of a table cell or a grid
slot, and the one or more boxes inside a flexbox have in common that they can all be aligned to each
of the four edges of their container, or centered between those
edges. If the flexbox contains several boxes, they can also be
spread out (‘justified’) between two edges. The Box Alignment module defines
various properties for such alignments. It is under investigation
if the properties can be extended to apply to boxes in other
contexts, in particular to the normal flow. That would allow,
e.g., the content of a floating box to be aligned to the bottom of
the float, similar to how 'vertical-align: bottom' aligns the
content of a table cell. Another possible addition is control over
alignment by means of flexible margins (like 'margin: auto'
without its limitations).
Elika J. Etemad / fantasai,
Tab Atkins Jr.
The Text Decoration module defines the properties that control
the style and position of various decorations around text, usually
to emphasize it, and that do not affect the layout of the text
itself: 'text-decoration' (underline, overline, blink, etc.),
'text-emphasis' (East Asian emphasis marks on top of ideographs)
and 'text-shadow'. These properties were previously in the Text module.
Elika J. Etemad,
Koji Ishii
Level 4 of the Text Decoration module extends level 3 with more
control over various aspects of the decoration, such as the style
and position of underlines.
Elika J. Etemad,
Koji Ishii
The sizing module defines keywords for use on the 'width' and
'height' properties to specify that the size of an element should
be as narrow as possible or as wide as possible, rather than the
width inherited from the element's parent. These keywords are split
off from the definition of 'width' and 'height' in the Basic Box Model and will probably be merged back
into that module at a later date.
Tab Atkins,
Elika J. Etemad / fantasai
Level 4 extends level 3 with more keywords
to select different algoriths to determine the size of a box, and
also defines an ‘aspect-ratio’ property to give boxes a fixed width
to height ratio, whatever their size.
Tab Atkins,
Elika J. Etemad / fantasai,
Jen Simmons
The Counter Styles module defines the
'@counter-styles' rule with which authors can define their own
numbering styles for lists, section headings, figures, etc. The
numbering styles from level 2 are predefined. They include decimal
(1, 2, 3, 4…), upper-roman (I, II, III, IV…), lower-alpha (a, b, c,
d…), etc, as well as some styles for bullet lists, such as disc
(•).
Tab Atkins Jr.
The Cascading variables module allows arbitrary data
(name/value pairs) to be associated with elements. The data is in
the form of properties of the form '--NAME: VALUE'. The
properties are inherited. They can be accessed through the DOM and
also referred to in other properties (on the same element or in
descendant elements) via the 'var(--NAME)' functional notation.
Luke Macpherson,
Tab Atkins Jr.,
Daniel Glazman
The CSS overflow module level 3
defines the 'overflow' property, which specifies how text is
treated that is too wide or too tall for its box. The text can be
left to overflow, be clipped or scroll. See the CSS marquee module for different
scrolling mechanisms and the CSS
fragmentation module level 3 for control over how the text is
broken into pages.
L. David Baron
The CSS overflow module
level 4 extends the level-3 module with a mechanism to break
a box into multiple pages with either one page showing or all
pages showing at the same time. A pseudo-element allows to select
the individual pages and apply some style to them.
L. David Baron,
Florian Rivoal
The CSS Display module level 3
redefines the 'display' property as a shorthand for three other
properties, each for a more or less independent aspect of the
'display' property: whether the element starts a new block or
continues inline; how the contents of the element are laid out;
and whether the element has a label on the side. The module also
defines a new property that does the same as 'display: none'
(i.e., do not display or speak the element). These low-level
properties are expected to be useful mostly in scripts.
Tab Atkins Jr.
The CSS Font Loading module level 3
defines a part of the DOM API for the '@font-face' rule of CSS. In
particular, it defines methods to allow a script to explicitly
load a font (e.g., to load it earlier than the renderer would load
it by itself) and be informed when a font is loaded.
Tab Atkins Jr.
The CSS Will Change Module Level 1
allows an author to give hints to the renderer about which
elements are likely to change style in some way (e.g., because of
animations or transitions) and where speed is critical. This may
help a renderer to decide where it should do some work ahead of
time.
Tab Atkins Jr.
Non-element Selectors Module
Level 1 defines selectors for other kinds of nodes in a
tree-structured document than elements. In particular, it provides
ways to select attributes of elements.
These selectors have no effect in CSS, as CSS only styles
elements. They are meant for other contexts where selectors are
used to select parts of a tree, such as the Selectors API and
ITS 2.0. They thus provide an alternative to XPath, when XPath is
not usable or not desired.
Jirka Kosek,
Tab Atkins Jr.
Geometry Interfaces defines
APIs for scripts that manipulate points, rectangles,
quadrilaterals and transformation matrices.
Simon Pieters,
Dirk Schulze,
Rik Cabanier
Fullscreen is no longer
being developed. It contained a proposal for an API and some CSS
selectors to style elements that are shown maximized on a screen.
Anne van Kesteren,
Tantek Çelik
The CSS Inline Layout Module
describes the layout within a line and the stacking of lines, and
also the styling of drop caps. It replaces the CSS Line Layout module.
Dave Cramer,
Elika J. Etemad / fantasai,
Steve Zilles
The CSS Pseudo-Elements Module
defines various pseudo-elements, i.e., parts of documents that
correspond to something rendered, but not directly to an element
in the source document. A number of them were already defined in
CSS2 (::first-line
, ::first-letter
,
etc.), a few others are new, such as ::selection
(selected text) and ::placeholder
(placeholder text
in an input element).
The Selectors module describes how to
use pseudo-elements as part of selectors.
Daniel Glazman,
Elika J. Etemad / fantasai,
Alan Stearns
The Motion Path Module defines an
additional way to set the position and rotation of absolutely
positioned elements. The position is given by a trajectory (an SVG
shape) and an offset along that trajectory between 0 and 100%. In
combination with animations, the offset can also be animated.
This module is joint work by the SVG and CSS working groups.
Dirk Schulze,
Shane Stephens
The CSS Scroll Snap Module defines properties
to control some aspects of scrolling of an overflowing element:
when scrolling with a mouse or similar device, the element can be
made to "snap’ to particular positions, e.g., the first line of a
child element or the center of an image. These snap points can be
either by proximity (the element snaps to a position only when the
scrolling action ended close to that position) or mandatory (the
element always snaps to the nearest snap point when the scrolling
action ends).
Matt Rakow,
Jacob Rossi,
Tab Atkins-Bittner,
Elika J. Etemad / fantasai
The CSS Round Display module
defines new properties and new keywords for existing properties to
better handle circular or rounded viewports. It includes, among
other things, media queries to select style rules based on the
shape of the viewport and polar coordinates for absolute
positioning.
Hyojin Song,
Jihye Hong
The CSS Basic User Interface Module
describes CSS properties and values to style basic user interface
elements. It includes and extends CSS Basic User
Interface level 3 with, among other things, properties to
style the insertion caret.
Florian Rivoal
The CSS Text Module level 4
includes and extends CSS Text Module level 3.
It defines line breaking, justification and alignment, white space
handling and text transformations.
Elika J. Etemad / fantasai,
Koji Ishii,
Alan Stearns
The specifications by the Houdini Task Force (a joint
task force of the CSS WG and the TAG) aim to specify low-level
access to a CSS rendering engine such as found in a typical
browser, including, e.g., the CSS parser, the box model, font
loading, overflow handling and scrolling. An application that uses
such a CSS engine can thus override or extend certain of its
features.
The CSS Painting API Level 1 is one of those
specifications and defines an API to hook into the functions that
paint a CSS box on the screen, including its background, borders
and content. It can be used, e.g., to paint a background given by
an algorithm rather than an image.
Shane Stephens,
Ian Kilpatrick,
Dean Jackson
The CSS Properties and Values API Level 1 is part of
the Houdini specifications. It defines an
API to register new properties with the CSS engine. In contrast to
the Custom properties module (which
allows to define properties in a declarative way), the API allows
properties with special syntaxes and properties that do not
inherit.
Tab Atkins,
Shane Stephens,
Daniel Glazman,
Alan Stearns,
Elliot Sprehn,
Greg Whitworth
The CSS Typed OM Level 1 is part of the Houdini specifications. It defines an API to
access property values in the CSS Object Model in efficient ways,
i.e., typically as numbers rather than as strings.
Shane Stephens
The Worklets Level 1 is part of the Houdini specifications. It defines an API to
insert JavaScript code into the rendering pipeline.
Ian Kilpatrick
The CSS Layout API Level 1 is part of the Houdini specifications. It defines a
JavaScript API to attach scripts that react to computed style and
box tree changes.
Greg Whitworth,
Ian Kilpatrick,
Tab Atkins-Bittner,
Shane Stephens,
Robert O'Callahan,
Rossen Atanassov
Fonts Module Level 4 extends Fonts
level 3. It adds support for, among other things, colored
fonts, variable fonts and emoji.
John Daggett,
Myles C. Maxfield
Fonts Module Level 5 extends Fonts level 4 with more precise control over font selectton
and font substitution (fallback fonts), such as an enhanced
'font-size-adjust' property.
Myles C. Maxfield,
Chris Lilley
CSS Rhythmic Sizing Level 1 provides a property to
force the distance between lines, which is normally set by the
line height, to be rounded to a multiple of a given value. This
allows lines to remain aligned to a fixed grid, even if there are
occasional lines that need more space (e.g., because they contain
a mathematical formula or an inline image). This module is a
possible complement to the Line Grid
module.
Koji Ishii,
Elika J. Etemad / fantasai
The Fill and Stroke Module
defines properties to set the colors and fill patterns of SVG
shapes and of text. The CSS syntax allows SVG shapes to be styled
with an (external) style sheet, instead of with attributes on each
shape itself. ‘Filling’ refers to the inside of the shapes,
‘stroke’ to the edges. Both can be simple colors, but also
patterns, gradients or images.
Elika J. Etemad / fantasai,
Tab Atkins-Bittner
The Containment Module
provides a property 'contain' that is especially useful in highly
dynamic GUIs: It
declares that an element does not influence the rendering of other
elements outside itself and does not paint outside its own box.
That means the element can be added and removed very quickly,
without having to recalculate the style of other elements. E.g.,
such an element does not increase the size of its parent and does
not increment any list counters.
Tab Atkins,
Florian Rivoal
The 2nd level of the Containment
Module extends Containment
level 1 with additional values for the 'contain' property.
Tab Atkins,
Florian Rivoal
Containment Level 3 extends
level 2. It introduces the concept of
‘container queries’, which allow style rules to be written that
only apply if an element has a given size, or certain other
characteristics.
Tab Atkins,
Florian Rivoal,
Miriam E. Suzanne
Animations and transitions use timing functions to specify how the speed of
an animation varies over the duration of the animation. (Animation
refer to them as ‘easing functions’, hence the name of the module.)
The most
common kinds are predefined. But it is possible to define others,
including some that overshoot their target for a bouncing effect.
This module defines the possible values for all timing properties.
Brian Birtles,
Dean Jackson,
Matt Rakow,
Shane Stephens
CSS Easing Functions Level 2
extends level 1 with a new function,
called 'linear()'. It allows to precisely define how far an
animation or transition has progressed at different points in
time. The more points, the more complex the animation. E.g.,
animations can slow down and speed up several times, or ‘bounce’
(go forward and backward a few times before reaching their final
state).
Brian Birtles,
Dean Jackson,
Tab Atkins Jr.,
Chris Lilley
The Logical Properties and
Values Module provides ways to set properties indirectly,
depending on the direction and writing mode of the element or its
containing block. E.g., setting 'margin-inline-start' indirectly
sets one of the four margin properties (margin-top, -right,
-bottom or -left), depending on whether the element's text is
written left to right, right to left, top to bottm or bottom to
top. This is useful in simple, generic style sheets, such as User
Agent style sheets, but can occasionally also shorten styles for
documents that mix left-to-right and right-to-left text, in
particular for elements whose layouts for right-to-left and
left-to-right text are (mostly) mirror images.
Rossen Atanassov,
Elika J. Etemad / fantasai
The CSS Shadow Parts module
defines the selector syntax (viz., the pseudo-element ‘::part()’)
to select the ‘parts’ of a ‘shadow tree’.
CSS knows about ‘replaced elements’, elements in a document that
do not display their own content, but are replaced by some other
object, such as an image or a ‘shadow tree’. A shadow tree is an
object that, typically, has one or more configurable aspects,
called ‘parts’, that are configured by setting CSS properties on
them. E.g., the shadow tree may represent a calendar or an
embedded video player and it may be possible to configure the
background color or the font on some buttons. What parts exist
(and what their name is), which properties apply to them and what
their precise effect is depends on the object. This module of CSS
defines how to write selectors that select such a part. (See also
CSS Scoping.)
Tab Atkins-Bittner,
Fergal Daly
The specification CSS Spatial
Navigation Level 1 defines a general model for directional
navigation: up, down, left, right, within a group or across
groups of elements; and it defines JavaScript functions and
events that implement that model. It does not define what
keypresses or other physical action cause those events. That
depends on the User Agent.
The CSS Basic User Interface Module
defines properties that help specify what is considered up, left,
etc.
Jihye Hong,
Florian Rivoal
The CSS Color Adjust module
defines ways for an author to adapt a style to the user's color
scheme, and in particular to a ‘light’ color scheme (i.e., dark
text on a light background), a ‘dark’ scheme (i.e., light text on
a dark background) or a printer-friendly scheme (i.e., using less
ink). A Media Query allows to know
if the system has a specific color scheme and a property allows to
set the initial values of color and background to those from the
system's scheme.
The module also defines how a user can force a color scheme on a
page (for accessibility reasons) and how an author can adapt the
style to such a forced scheme.
The Color module defines keywords
representing system colors. They are deprecated, but they also
follow the system's color scheme.
Elika J. Etemad / fantasai,
Rossen Atanassov,
Rune Lillesveen,
Tab Atkins Jr.
Animation Worklet API
defines two APIs to create animations in JavaScript. The code for
such animations can be run in a separate thread (background
process), so that the main thread is not interrupted or can be
given priority.
Majid Valipour,
Robert Flack,
Stephen McGruer
Resize Observer defines an
API for scripts that need to react to changes in an element's size.
Aleks Totic,
Greg Whitworth
Color Level 5
expands Color Level 4 with notations
for relative colors: colors in between other colors, colors that
are lighter or darker than a given color, or complementary.
Chris Lilley,
Una Kravets,
Lea Verou,
Adam Argyle
Conditional Rules Level 5
extends Conditional Rules Level 4.
It defines how to combine media queries and @supports rules and
adds an ‘@else’ group to implicitly negate media queries and
@supports rules.
It also makes it possible to check for font features inside
conditional rules.
L. David Baron,
Elika J. Etemad / fantasai,
Chris Lilley
CSS Custom Highlight API
Level 1 defines a library of functions that can be called
from a script to select (highlight) one or more ranges of text in a
document and assign them a name. It also defines a CSS selector to
style such named ranges of text from a style sheet.
E.g., if a range of text has been selected by a script and
assigned the name ‘my-key-phrase’, the CSS rule
'::highlight(my-key-phrase) {color: blue}' makes that text blue.
Florian Rivoal,
Sanket Joshi,
Megan Gardner
CSS Nesting defines a
syntax that avoids having to type (long) selectors several
times. An abbreviation allows the selector of the previous style
rule to be reused in the next style rule.
Tab Atkins-Bittner,
Adam Argyle
CSS View Transitions
Level 1 provides a way to animate the removal of elements
from a document. When an element is removed, its last rendering is
kept around briefly as a set of pseudo-elements that can be
animated with CSS Animations. You can
also associate a removed element with a newly added element, which
automatically creates an animation that, by default, appears to
move the old element to the new one.
A future level of this module might also provide page
transitions using the same technique: an image of the old document
and of selected elements might be kept for a bit and animated while
the new document is already loaded.
Tab Atkins-Bittner,
Jake Archibald,
Khushal Sagar
CSS View Transitions
Level 2 extends CSS View
Transitions Level 1 to define transitions between two
documents.
The author of a document can use a JavaScript API to start
animations when the user navigates from one document to another,
e.g., by clicking a hyperlink or submitting a form. The animations
affect designated elements in the old document and corresponding
elements in the new document.
CSS properties define which elements take part in the animation
and the animations themselves can be styled
with CSS Animations. A typical
animation is to move and resize the old elements to the position
and size of the new elements.
The animations start when sufficiently many elements of the new
document have been loaded from the network. The old document is
kept on screen for the duration of the animations.
Tab Atkins-Bittner,
Jake Archibald,
Khushal Sagar
CSS Anchor Positioning
defines a way to place an absolutely positioned element relative to
an arbitrary other element (the ‘anchor element’) instead of
relative to its default containing block. It also allows to define
alternative positions in case there is not enough room in the
first.
Tab Atkins-Bittner,
Elika J. Etemad / fantasai,
Ian Kilpatrick
Level 1 contains just the most basic properties of CSS, such as
'margin', 'padding', 'background', 'color' and 'font', with
restrictions on the allowed values. It was the first level of CSS
to be completed (in 1996) and matched the capabilities of
implementations of the time. It is currently only of historical
interest; all implementations should be able to support level 2 and
probably large parts of level 3, too.
Håkon Wium Lie,
Bert Bos
SVG
Some properties are specifically for styling SVG (or similar
graphics languages) and are defined in the SVG spec, rather than
in a CSS module. They can be used together with other properties
in a style sheet, but usually don't apply to the same elements.
They specify things such as the color of strokes and fills, and the
shape of the ends of strokes.