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
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.
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.
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
CSS Aural Style Sheets
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.
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.
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.
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
CSS 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.)
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.”
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.
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.
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.
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.)
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 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.
Editors: Tab Atkins Jr., Shinyu Murakami, Ian Hickson
CSS Math
Math is a proposed module for
properties targeted at styling mathematical formulas, building on
on the layout model of the “presentational” elements of MathML. It is currently not being worked on.
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.
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.
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.
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.
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.
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
CSS Scoping
How to apply a style sheet to only part of a document. No work is
currently planned on this module.
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” 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
The syntax of CSS rules in HTML's “style” attribute is
strictly speaking not part of CSS, but is mentioned here, because
it is produced by the CSS working group. It was made necessary,
because XHTML 1.0, in contrast to HTML 4.0, doesn't define the
syntax of CSS rules in its style attribute. However, the
specification is valid for all similar attributes (e.g., those in
SVG), not just for HTML.
Editors: Elika J. Etemad, Tantek Çelik, Bert Bos,Marc Attinasi
Syntax contains the generic
(forward-compatible) grammar that all levels of CSS adhere to.
Every property also has restrictions on the syntax of its value,
but those can be found in the other CSS modules.
Editors: Tab Atkins Jr., Simon Sapin, L. David Baron
CSS Tables Module
Tables describes the layout of
tables: rows, columns, cells and captions, with their borders and
alignments. The model in level 3 will probably not have anything
new compared to level 2, but it will be described in more detail.
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.
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
CSS 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 Writing
Modes.)
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.)
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., 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.)
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.
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 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.)
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 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.
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.)
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.
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).
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.
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.
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 (•).
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.
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.
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.
Level 1 contains just the most basic properties of CSS, such as
'margin', 'padding', 'background', 'color' and 'font', with
restrictions on the allowed values. It was the first level of CSS
to be completed (in 1996) and matched the capabilities of
implementations of the time. It is currently only of historical
interest; all implementations should be able to support level 2
and probably large parts of level 3, too.
Editors: Håkon Wium Lie, Bert Bos
SVG
Some properties are specifically for styling SVG (or similar
graphics languages) and are defined in the SVG spec, rather than in
a CSS module. They can be used together with other properties in a
style sheet, but usually don't apply to the same elements. They
specify things such as the color of strokes and fills, and the
shape of the ends of strokes.