Template Layout (formerly: Advanced Layout) describes a new way to position elements using constraints on their alignment to each other and on their flexibility. The layout is described by a template, which resembles 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.

Current Work Template Layout

Many primarily visual devices are in fact capable of making sound as well, sometimes even of very high quality. In CSS3 those multimedia capabilities will be available to designers. 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.

Current Work Aural Style Sheets

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.

Current Work Backgrounds and Borders

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.

Current Work Basic User Interface

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).

Current Work Basic Box Model

The Extended Box Model provides extra control over positioning of floats and the size of boxes.

Current Work Extended Box Model

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.)

Current Work Marquee

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.

Current Work Cascading and Inheritance

Color specifies the color-related aspects of CSS, including transparency and the various notations for the <color> value type.

Current Work Color

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 CSS3.

Current Work Fonts

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.

Current Work Content Paged Media

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.

Current Work Replaced Content

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.)

Current Work Hyperlink Presentation

The Introduction will eventually contain the introductory chapter of CSS3, with short descriptions of each module. This is likely to be the last draft to be finished and thus, until CSS3 is ready, the page you are reading now will be more up to date.

Current Work Introduction

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.

Current Work Line Layout

Lists contains the properties for styling lists, in particular various types of bullets and numbering systems.

Current Work Lists

Math contains properties targeted at styling mathematical formulas, building on on the layout model of the "presentational" elements of MathML. The module is being developed in cooperation with the Math interest group.

Current Work Math

Multi-column Layout proposes new properties to flow content into flexibly-defined columns.

Current Work Multi-column Layout

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.

Current Work Namespaces

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.

Current Work Object Model

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.

Current Work CSSOM View Module

Paged Media extends the properties that CSS2 already had with new ones to control such things as running headers and footers and page numbers.

Current Work Paged Media

Positioning defines "absolute", "fixed" and "relative" postioning. These are ways to take an element out of the normal flow of elements (as specified by the box model) and put it somewhere else: either relative to the root or some other element's box (absolute), relative to the viewport (fixed), or simply slightly offset from where it would normally be (relative).

Current Work Positioning

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.

Current Work Presentation Levels

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.

Current Work Reader Media Type

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.

Current Work ruby

Editors Daniel Glazman, Specification Track CSS Scoping

Current Work Scoping

An element with columns (as in Multi-column Layout) establishes an implicit grid. Together with optional explicit grid lines, that establishes a coordinate system for positioning floats and absolutely positioned boxes. This module proposes properties to position and size floating boxes relative to this grid.

Current Work Grid Positioning

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 CSS3 will be similar to those in CSS2, 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.)

Current Work Speech

Syntax of CSS rules in HTML's "style" attribute is strictly speaking not part of CSS3, 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.

Current Work Style Attribute Syntax

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.

Current Work Syntax

Tables describes the layout of tables: rows, columns, cells and captions, with their borders and alignments. The model in CSS3 will be the same as in CSS2, but described in more detail.

Current Work Tables Module

Template Layout (formerly: Advanced Layout) describes a new way to position elements using constraints on their alignment to each other and on their flexibility. The layout is described by a template, which resembles 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.

Text contains the text-related properties of CSS2 (underlining, 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 three parts: Text, Text Layout, and Line Grid.

Current Work Text

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.

Current Work Text Layout

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 Text Layout module.)

Current Work Line Grid

Values and Units describes the common values and units that CSS properties accept. Also, it describes how "specified values", which is what a style sheet contains, are processed into "computed values" and "actual values".

Current Work Values and Units

Web Fonts provides syntax for describing fonts: their name, their style, which characters they cover and also where to download them from. Adding such descriptions to a style sheet allows a designer to be more precise in font selection and, if the browser supports font downloading, to use fonts that people are unlikely to have installed, including fonts that the designer created himself for the purpose. Web fonts are also used by SVG and, conversely, one can use SVG to create fonts for download. Web fonts existed already in CSS2.

Current Work Web Fonts

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.)

Current Work Behavioral Extensions

The Flexible Box Module allows an element to be displayed as either a column or a row of child elements. Several properties then determine how the size of each element depends on the total length of the row/column and the size of sibling elements. Other properties specify the size of the space between the elements. This is primarily useful for row-column layouts in a graphical user interface.

Current Work Flexible Box Module

The 2D Transformations Module defines a property that applies rotations, translations and other affine transformations to a box. These are the same transformations as in SVG.

Current Work 2D Transformations Module

The 3D Transformations Module extends the 2D transformations with a perspective transformation. The module is being developed in cooperation with SVG.

Current Work 3D Transforms Module

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.

Current Work Transitions Module

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.)

Current Work Animations Module