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
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
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
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: Bert Bos
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: Håkon Wium Lie
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
Fonts contains the properties to select fonts, as well as properties for font “adjustments,” such as emboss and outline effects, kerning, and smoothing/anti-aliasing. 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.
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
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
Line describes the alignment of text and other boxes within a line. It expands the 'vertical-align' property of CSS1 and CSS2 to allow for alignment of multiple scripts, including Indic scripts and ideographs. The module also describes the formatting of the 'first-line' and 'first-letter' pseudo-elements: compared to CSS1 and CSS2 there is better control over the size and alignment of drop caps.
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 Etemad (fantasai), Anne van
Kesteren, 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: Simon Sapin, Håkon Wium Lie, Elika J.
Etemad, Melinda Grant, 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
How to apply a style sheet to only part of a document. No work is currently planned on this module.
Editors: Daniel Glazman
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
Regions allow a box to look other than rectangular. It defines two complementary methods: several boxes can form a chain where each is filled with the text that overflows from the previous one; and a box can define a shape inside its rectangle that constrains all text to the inside of the shape. It is expected that these features will eventually be moved into one of the grid/template modules, possibly the Grid Layout module, to reduce the number of separate specifications.
Editors: Vincent Hardy
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: 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: Bert Bos
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 Etemad (fantasai), 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), vertical lines that stack from left to right (Mongolian), or horizontal lines that stack from bottom to top (for special effects, such as the XING PED sign on American streets). 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
Line Grid describes text where each symbol in a line is aligned to an invisible grid, so that symbols in all lines line up vertically. This is commonly used for text that mainly consists of ideographs, such as Japanese. (This feature previously was part of the Writing Modes.)
Editors: Koji Ishii, Alex Mogilevsky
Values and Units describes the common values and units that CSS properties accept.
Editors: Håkon Wium Lie, Tab Atkins, Elika J.
Etemad, Chris Lilley
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 'box' and 'inline-box' 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., Alex Mogilevsky, L. David Baron
The Image Values 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. (This module might be merged later with the Values and Units module.)
Editors: Elika J. Etemad
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
The CSS Transforms Module defines 2D
and 3D 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
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 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 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 Device Adaptation defines (1) how the initial containing block relates to the viewport and (2) how CSS units ('px', 'cm', 'pt', etc.) relate 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. In CSS level 2, it is equal to the viewport (i.e., the window or the page on which the document is drawn). This module defines the '@viewport' rule that allows the initial containing block to be bigger or smaller than the viewport. It can also set a zoom factor, to change the mapping between CSS units and real units. ('@viewport' isn't normally useful for authors, but it lets readers get rid of the effect of any <META NAME=VIEWPORT> element that may occur in HTML5 documents.)
Editors: Rune Lillesveen
CSS Exclusions and 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. And, finally, the module 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
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 is 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
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
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 Jr., Elika J. Etemad
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 'var-NAME: VALUE'. The properties are inherited. They can be accessed through the DOM and also referred to in other properties 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, scroll, or (new in level 3:) be broken 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. 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
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.
