Descriptions of all CSS specifications
History
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.
Editors: Tantek Çelik, Elika J. Etemad, Daniel
Glazman, Ian Hickson, Peter Linss, John Williams
History
Selectors Level 4 extends
level 3 with new ways to select
elements. based, e.g., on what they contain or on what follows.
Editors: Elika J. Etemad, Tab Atkins Jr.
History
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.
Editors: Bert Bos, Tantek Çelik, Ian Hickson,
Håkon Wium Lie
History
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.
Editors: Bert Bos
History
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.
Editors: Elika J. Etemad
History
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.
Editors: Elika J. Etemad
History
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.
Editors: Elika J. Etemad
History
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.
Editors: Tab Atkins Jr., Elika J. Etemad /
fantasai, Florian Rivoal
History
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.
Editors: Tab Atkins Jr., Elika J. Etemad /
fantasai, Florian Rivoal
History
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.
Editors: Tab Atkins Jr., Elika J. Etemad /
fantasai, Florian Rivoal
History
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.
Editors: Tab Atkins Jr., Elika J. Etemad /
fantasai, Florian Rivoal
History
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.
Editors: Tab Atkins Jr., Elika J. Etemad /
fantasai, Florian Rivoal
History
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.
Editors: Tab Atkins Jr., Elika J. Etemad /
fantasai, Florian Rivoal, Chris Lilley
History
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.
Editors: 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.
Editors: Dave Raggett, Daniel Glazman
History
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.
Editors: 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).
Editors: Bert Bos, Elika J. Etemad, Brad Kemper,
Lea Verou
History
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.
Editors: Tantek Çelik
History
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).
Editors: Elika J. Etemad Bert Bos
History
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).
Editors: Elika J. Etemad
CSS Extended Box Model
The Extended Box Model
provides extra control over positioning of floats and the size of
boxes.
Editors: Bert Bos
History
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.)
Editors: Bert Bos
History
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.’
Editors: Elika J. Etemad, Tab Atkins Jr., Håkon Wium Lie
History
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).
Editors: Elika J. Etemad / fantasai, Tab Atkins
Jr.
History
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.
Editors: Elika J. Etemad / fantasai, Miriam E.
Suzanne, Tab Atkins Jr.
History
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.
Editors: Elika J. Etemad / fantasai, Miriam E.
Suzanne, Tab Atkins Jr.
History
Tests
Color specifies the
color-related aspects of CSS, including transparency and the
various notations for the <color>
value type.
Editors: L. David Baron, Tantek Çelik, Chris
Lilley
History
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.
Editors: Tab Atkins Jr., Chris Lilley, Lea Verou,
L. David Baron
History
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
Editors: John Daggett, Paul Nelson, Jason Cranford
Teague, Michel Suignard,
Chris Lilley
History
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.
Editors: Håkon Wium Lie
History
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.
Editors: Johannes Wilm, Håkon Wium Lie
History
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.)
Editors: Ian Hickson
History
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.)
Editors: Tantek Çelik, Bert Bos, Daniel Glazman
History
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.
Editors: Håkon Wium Lie, Eric A. Meyer, Bert Bos
History
Lists contains the
properties for styling lists, in particular various types of
bullets and numbering systems.
Editors: 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.
Editors: -
History
Multi-column Layout
contains properties to flow content into flexibly-defined columns.
Editors: Håkon Wium Lie
History
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.
Editors: Elika J. Etemad, Anne van Kesteren, Chris Lilley, Peter Linss
History
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.
Editors: Anne van Kesteren
History
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.
Editors: Anne van Kesteren
History
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.
Editors: Melinda
Grant, Elika J. Etemad, Håkon Wium Lie, Simon Sapin, Jim Bigelow
History
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.
Editors: Arron Eicholz
History
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.
Editors: Håkon Wium Lie
History
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.
Editors: Bert Bos
History
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.
Editors: Richard Ishida, Paul Nelson, Michel Suignard
History
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.’
Editors: Tab Atkins Jr., Elika Etemad
History
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.
Editors: Alex
Mogilevsky, Phil Cupp,
Markus Mielke, Daniel Glazman, Tab Atkins Jr., Elika
J. Etemad / fantasai, Rossen Atanassov
History
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.
Editors: Tab Atkins Jr., Elika J. Etemad /
fantasai, Rossen Atanassov
History
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.
Editors: Tab Atkins Jr., Elika J. Etemad /
fantasai, Jen Simmons, Brandon Stewart
History
‘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.
Editors: Vincent Hardy, Rossen Atanassov, Alan
Stearns
History
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.)
Editors: Daniel Weck, Dave Raggett, Claudio
Santambrogio, Daniel
Glazman
History
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.
Editors: Elika J. Etemad, Tantek Çelik, Bert Bos, Marc Attinasi
History
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.
Editors: 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.
Editors: Francois Remy, Greg Whitworth
History
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.
Editors: Elika J. Etemad, Koji Ishii, Shinyu Murakami, Paul Nelson, Michel Suignard, Chris Lilley
History
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.
Editors: Elika Etemad / fantasai, Koji Ishii, Shinyu Murakami, Paul Nelson, Michel Suignard
History
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.
Editors: Elika Etemad / fantasai, Koji Ishii
History
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.)
Editors: Elika Etemad, Koji Ishii, Alan Stearns
History
Values and Units
describes the common values and units that CSS properties accept.
Editors: Håkon Wium
Lie, Tab Atkins, fantasai, Chris
Lilley
History
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.
Editors: Tab Atkins, fantasai
History
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.
Editors: Tab Atkins, Elika J. Etemad / fantasai,
Miriam E. Suzanne
History
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.
Editors: John Daggett, Chris Lilley, Michel
Suignard
History
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.)
Editors: Ian Hickson
History
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.
Editors: Tab Atkins Jr., Elika J. Etemad /
fantasai, Rossen Atanassov, Alex
Mogilevsky, L. David Baron, Neil Deakin, Ian Hickson, David Hyatt
History
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.
Editors: Elika J. Etemad, Tab Atkins Jr.
History
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.
Editors: Tab Atkins Jr., Elika J. Etemad /
fantasai, Lea Verou
History
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.
Editors: Rossen Atanassov, Elika J. Etemad /
fantasai
History
The CSS Fragmentation Module
Level 4 extends Level 3 with
control over margins at page breaks and other enhancements.
Editors: Rossen Atanassov, Elika J. Etemad /
fantasai
History
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.
Editors: Dean Jackson, David Hyatt, Chris Marrin,
Sylvain Galineau, L. David Baron
History
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.
Editors: L. David Baron, Brian Birtles
History
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.)
Editors: Dean Jackson, David Hyatt, Chris Marrin
History
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.
Editors: L. David Baron, Brian Birtles
History
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.
Editors: Brian Birtles, Shane Stephens, Alex
Danilo, Tab Atkins
History
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.
Editors: Brian Birtles, Robert Flack
History
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.
Editors: Svante Schubert, Robin Berjon, Ted Wugofski, Doug Dominiak, Peter Stark, Tapas Roy
History
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.
Editors: Elika J. Etemad, Melinda Grant, Jim Bigelow
History
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.
Editors: Glenn Adams, Tantek Çelik, Sean Hayes,
Håkon Wium Lie
History
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.
Editors: L. David Baron
History
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">
Editors: Florian Rivoal, Emilio Cobos Álvarez,
Matt Rakow, Rune Lillesveen, Ryan Betts, Øyvind Stenhaug
History
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.
Editors: Vincent Hardy, Rossen Atanassov, Alan
Stearns
History
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.
Editors: Vincent Hardy, Rossen Atanassov, Alan
Stearns
History
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.
Editors: Rik Cabanier
History
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.
Editors: Vincent Hardy, Dean Jackson, Erik
Dahlström
History
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.
Editors: Dirk Schulze, Brian Birtles, Tab Atkins
Jr.
History
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).
Editors: Elika J. Etemad / fantasai, Tab Atkins
Jr.
History
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.
Editors: Elika J. Etemad, Koji Ishii
History
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.
Editors: Elika J. Etemad, Koji Ishii
History
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.
Editors: Tab Atkins, Elika J. Etemad / fantasai
History
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.
Editors: Tab Atkins, Elika J. Etemad / fantasai,
Jen Simmons
History
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
(•).
Editors: Tab Atkins Jr.
History
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.
Editors: Luke Macpherson, Tab Atkins Jr., Daniel
Glazman
History
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.
Editors: L. David Baron
History
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.
Editors: L. David Baron, Florian Rivoal
History
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.
Editors: Tab Atkins Jr.
History
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.
Editors: Tab Atkins Jr.
History
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.
Editors: Tab Atkins Jr.
History
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.
Editors: Jirka Kosek, Tab Atkins Jr.
History
Geometry Interfaces
defines APIs for scripts that manipulate points, rectangles,
quadrilaterals and transformation matrices.
Editors: Simon Pieters, Dirk Schulze, Rik Cabanier
History
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.
Editors: Anne van Kesteren, Tantek Çelik
History
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.
Editors: Dave Cramer, Elika J. Etemad / fantasai,
Steve Zilles
History
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.
Editors: Daniel Glazman, Elika J. Etemad /
fantasai, Alan Stearns
History
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.
Editors: Dirk Schulze, Shane Stephens
History
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).
Editors: Matt Rakow, Jacob Rossi, Tab
Atkins-Bittner, Elika J. Etemad / fantasai
History
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.
Editors: Hyojin Song, Jihye Hong
History
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.
Editors: Florian Rivoal
History
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.
Editors: Elika J. Etemad / fantasai, Koji Ishii,
Alan Stearns
History
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.
Editors: Shane Stephens, Ian Kilpatrick, Dean
Jackson
History
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.
Editors: Tab Atkins, Shane Stephens, Daniel
Glazman, Alan Stearns, Elliot Sprehn, Greg Whitworth
History
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.
Editors: Shane Stephens
History
The Worklets Level 1 is part of the Houdini specifications. It defines an API to
insert JavaScript code into the rendering pipeline.
Editors: Ian Kilpatrick
History
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.
Editors: Greg Whitworth, Ian Kilpatrick, Tab
Atkins-Bittner, Shane Stephens, Robert O'Callahan, Rossen Atanassov
History
Fonts Module Level 4 extends Fonts level 3. It adds support for, among other things,
colored fonts, variable fonts and emoji.
Editors: John Daggett, Myles C. Maxfield
History
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.
Editors: Myles C. Maxfield, Chris Lilley
History
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.
Editors: Koji Ishii, Elika J. Etemad / fantasai
History
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.
Editors: Elika J. Etemad / fantasai, Tab
Atkins-Bittner
History
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.
Editors: Tab Atkins, Florian Rivoal
History
The 2nd level of the Containment
Module extends Containment
level 1 with additional values for the 'contain' property.
Editors: Tab Atkins, Florian Rivoal
History
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.
Editors: Tab Atkins, Florian Rivoal, Miriam E.
Suzanne
History
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.
Editors: Brian Birtles, Dean Jackson, Matt Rakow,
Shane Stephens
History
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).
Editors: Brian Birtles, Dean Jackson, Tab Atkins
Jr., Chris Lilley
History
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.
Editors: Rossen Atanassov, Elika J. Etemad /
fantasai
History
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.)
Editors: Tab Atkins-Bittner, Fergal Daly
History
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.
Editors: Jihye Hong, Florian Rivoal
History
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.
Editors: Elika J. Etemad / fantasai, Rossen
Atanassov, Rune Lillesveen, Tab Atkins Jr.
History
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.
Editors: Majid Valipour, Robert Flack, Stephen
McGruer
History
Resize Observer defines
an API for scripts that need to react to changes in an element's
size.
Editors: Aleks Totic, Greg Whitworth
History
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.
Editors: Chris Lilley, Una Kravets, Lea Verou,
Adam Argyle
History
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.
Editors: L. David Baron, Elika J. Etemad /
fantasai, Chris Lilley
History
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.
Editors: Florian Rivoal, Sanket Joshi, Megan
Gardner
History
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.
Editors: Tab Atkins-Bittner, Adam Argyle
History
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.
Editors: Tab Atkins-Bittner, Jake Archibald,
Khushal Sagar
History
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.
Editors: Tab Atkins-Bittner, Jake Archibald,
Khushal Sagar
History
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.
Editors: Tab Atkins-Bittner, Elika J. Etemad /
fantasai, Ian Kilpatrick
History
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.
Editors: 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.