This page contains descriptions of all specifications that the CSS WG is working on. See the ‘current work’ page for a compact view and how to give feedback.
Media Queries is an enhancement of the @media rules of CSS and the “media” attribute in HTML. It adds parameters such as size of display, color depth and aspect ratio. This is because within a class of media (such as TV sets) there can still be important variations. It is related to the work on CC/PP, but is a much more light-weight and limited solution.
Editors: Florian Rivoal, Håkon Wium Lie, Tantek Çelik, Daniel Glazman, Anne van Kesteren
Media Queries defines a syntax for short expressions that describe required features of media (or devices), e.g.: minimum or maximum screen size, color capabilities, resolution, aspect ratio, type of pointing device, viewing environment, scripting capabilities, etc. Media Queries is related to the work on CC/PP, but is a more light-weight and limited solution.
Such expressions can be attached as labels to style sheets or
other resources, to indicate what media they are designed for. They
are used, e.g., in HTML (in the media attribute).
CSS uses them on '@import' and '@media' and they occur in similar
ways in SVG and generic XML.
Media Queries level 4 is an extended version of the first Media Queries. It adds a handful of new media features, such as 'pointer' and 'hover' (for capabilities of the pointing device) and 'block-overflow' (for paged vs scrolling media), which provide more precise information about the media than the old 'handheld' vs 'screen' and 'projection' vs 'screen' distinctions.
Editors: Florian Rivoal, Tab Atkins Jr.
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
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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
The Extended Box Model provides extra control over positioning of floats and the size of boxes.
Editors: 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.)
Editors: 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.’
Editors: 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).
Editors: 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.
Editors: 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.
Editors: Elika J. Etemad / fantasai, Miriam E. Suzanne, Tab Atkins Jr.
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
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
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
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
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
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
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
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
The Line Layout Module has been replaced by the Inline Layout module.
Editors: Ian Hickson
Lists contains the properties for styling lists, in particular various types of bullets and numbering systems.
Editors: Tab Atkins Jr., Shinyu Murakami, Ian Hickson
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: -
Multi-column Layout contains properties to flow content into flexibly-defined columns.
Editors: Håkon Wium Lie
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
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
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
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
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
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
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
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
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
This module has been abandoned in favor of in Grid Template Layout and Grid Layout.
Editors: Markus Mielke, Alex Mogilevsky
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
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
‘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
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
style Attribute SyntaxThe 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
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
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
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
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
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
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
Values and Units describes the common values and units that CSS properties accept.
Editors: 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.
Editors: Tab Atkins, fantasai,
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
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
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
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.
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
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
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
The CSS Transforms Module
defines 2D transforms (rotations, translations, etc.) that can be
applied to elements after the normal layout (i.e., a
transform does not affect the position of surrounding elements).
The transforms are also available in SVG (as values for the transform attribute) and the specification is a joint work
of the CSS and SVG working groups.
Editors: Simon Fraser, Dean Jackson, David Hyatt, Chris Marrin, Edward O'Connor, Dirk Schulze, Aryeh Gregor
Level 2 of CSS Transforms Module extends level 1 with 3D transforms.
Editors: Tab Atkins Jr., Simon Fraser, Dean Jackson, Theresa O'Connor
The 2D Transformations Module has been replaced by the CSS Transforms module.
Editors: Simon Fraser, Dean Jackson, David Hyatt, Chris Marrin, Edward O'Connor
The 3D Transformations Module has been replaced by the CSS Transforms module.
Editors: Dean Jackson, David Hyatt, Chris Marrin
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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.
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
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
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
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
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.
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
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
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
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.
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.
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.
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.
Geometry Interfaces defines APIs for scripts that manipulate points, rectangles, quadrilaterals and transformation matrices.
Editors: 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.
Editors: 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.
Editors: 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.
Editors: 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.
Editors: 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).
Editors: 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.
Editors: 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.
Editors: 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.
Editors: 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.
Editors: 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.
Editors: 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.
Editors: Shane Stephens
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
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
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
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
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
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
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
The 2nd level of the Containment Module extends Containment level 1 with additional values for the 'contain' property.
Editors: 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.
Editors: 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.
Editors: Brian Birtles, Dean Jackson, Matt Rakow, Shane Stephens
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
The CSS Scrollbars Module provides properties to set the base colors of an element's scrollbar (or comparable scrolling mechanism) and to set the scrollbar's width. The former is useful in applications that use HTML/CSS for the UI. The latter can help gain some room in small elements.
The precise effect, however, depends on the operating system or graphics system. If the scrollbar has a thumb and an opaque track, the colors are meant to be used for those. Other, related colors needed by the scrollbar (for shadows, arrows, animations, etc.) are chosen automatically.
Editors: Tantek Çelik, Rossen Atanassov
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
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
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.
The CSS Overscroll Behavior module defines a property to control the behavior of nested scrolling elements. In particular, it controls whether attempting to scroll an element that is already at its maximum causes its parent element to scroll instead.
Editors: Majid Valipour
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
Scroll Anchoring defines a property to specify whether an element inside a scrolling region should move when elements above it shrink or grow (e.g., due to scripts), or if instead the scrollbar should automatically change to keep the element in the same location on the screen.
Editors: Steve Kobes, Tab Atkins-Bittner
Resize Observer defines an API for scripts that need to react to changes in an element's size.
Editors: 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.
Editors: Chris Lilley, Una Kravets, Lea Verou, Adam Argyle
Conditional Rules Level 4 extends Conditional Rules Level 3. It defines how to test for selector support.
Editors: L. David Baron
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
Media Queries Level 5 allows authors to test for the level of ambient light and for the presence of JavaScript, in addition to the tests of Media Queries Level 4.
Editors: Dean Jackson, Florian Rivoal, Tab Atkins Jr.
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
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
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
Scroll-driven Animations allows CSS Animations that are not tied to the progress of a clock (in seconds or milliseconds), but to the progress of a scrollbar. The initial state of the animation (0%) corresponds to the start of the scrollbar and the final state (100%) to the end of the scrollbar. E.g., you can change the color of an element based on how far it scrolled. You can also restrict the animation to when the element is fully visible, or, on the contrary, start the animation only when the element is no longer fully in view. The animation can be tied to the scrollbar of the element's own container, or the scrollbar of the root element.
Editors: Brian Birtles, Botond Ballo, Antoine Quint, Olga Gerchikov, Elika J. Etemad / fantasai, Robert Flack
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
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
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.
The two icons, and
, are from the Nuvola
collection by David
Vignoni.
Bert Bos, style activity leadLast updated Fri 15 Mar 2024 11:23:45 AM UTC