zum Artikelanfang springen

Alle geplanten CSS3 Module

Statt wie bisher in Kapitel wird CSS3 in Module unterteilt. Zwar werden einzelne Module weiterhin voneinander abhängig sein, doch hat diese neue Aufteilung durchaus Sinn, da so auch einzelne Module erweitert oder aktualisiert werden können, ohne gleich die gesamte Spezifikation zu überarbeiten.

Außerdem können einzelne Module für andere Technologien wiederverwendet werden, zum Beispiel für SVG (Scalable Vector Graphics). Weiterhin wird es dadurch möglich sein, Geräteprofile zu erstellen, die nur bestimmte Module unterstützen.

Da noch keine offizielle Beschreibung der Module (Introduction) vorliegt, hier ohne besondere Sortierung die aktuellen Hinweise (englisch) vom W3C.

Template Layout

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.

Aural Style Sheets

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.

Backgrounds and Borders

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.

Basic User Interface

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.

Basic Box Model

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

Extended Box Model

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


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


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


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.

Generated Content for Paged Media

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.

Generated and Replaced Content

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.

Hyperlink Presentation

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

Line Layout

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.


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


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.

Multi-column Layout

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

Paged Media

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


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

Presentation Levels

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.


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.


No description yet ...

Grid Positioning

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.


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

Tables Module

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.


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.

Text Layout

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.

Line Grid

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

Web Fonts

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.

Flexible Box Module

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.

Transformations Module

The Transformations Module defines a property that applies rotations, translations and other affine transformations to a box. This module is currently (summer 2008) under consideration for inclusion in the next charter of the CSS working group.

Transitions 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. This module is currently (summer 2008) under consideration for inclusion in the next charter of the CSS working group.

Animation Module

The Animation 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.) This module is currently (summer 2008) under consideration for inclusion in the next charter of the CSS working group.

Abschließend noch einige Module, die der 'Verwaltung' von CSS dienen bzw. noch nicht umfassend definiert wurden:


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.

Cascading and Inheritance

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.

style Attribute Syntax

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.


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.

Reader Media Type

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.


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.

Object Model

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.

CSSOM View Module

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.

Behavioral Extensions to CSS

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

Values and Units

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

Links zum W3C »


(c) 2009 e-workers
mailto: info@css-cafe.de