CSS3

  • Revision slug: CSS/CSS3
  • Revision title: CSS3
  • Revision id: 386717
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long awaited novelties, like rounded corners, shadows, gradients , transitions or animations , as well as new layouts like multi-columns , flexible box or grid layouts. Experimental parts are vendor-prefixed and should either be avoided in production environments, or used with extreme caution as both their syntax and semantic can change in the future.

Modules and the standardization process

CSS Level 2 needed 9 years, from August 2002 to June 2011 to reach the Recommendation status. This was due to the fact that a few secondary features hold back the whole specification. In order to accelerate the standardization of non-problematic features, the CSS Working Group of the W3C, in a decision referred as the Beijing doctrine , divided CSS in smaller components called modules . Each of these modules is now an independent part of the language and moves towards standardization at its own pace. While some modules are already W3C Recommendations, other still are early Working Drafts. New modules are also added when new needs are identified.

CSS Modules and Snapshots as defined since CSS3 Formally, there is no CSS3 standard per se . Each module being standardized independently, the standard CSS consists of CSS2.1 amended and extended by the completed modules, not necessary all with the same level number. At each point of time, a snapshot of the CSS standard can be defined, listing CSS2.1 and the mature modules.

The W3 consortium periodically publishes such snapshots, like in 2007 or 2010.

Though today no module with a level greater than 3 is standardized, this will change in the future. Some modules, like Selectors 4 or CSS Borders and Backgrounds Level 4 already have an Editor's Draft, though they haven't reach the First Published Working Draft status.

CSS modules status

Stable modules

A few CSS modules are already fairly stable and have reached one of the three recommendation level of the CSSWG: Candidate Recommendation, Proposed Recommendation or Recommendation. These can be used without prefixed and are pretty stable, though a few features can still be dropped at the Candidate Recommendation stage.

These modules extend and amend the CSS2.1 specification which build the core of the specification. Together with it, they are the current snapshot of the CSS specification.

{{ SpecName("CSS3 Colors", "", "") }} {{ Spec2("CSS3 Colors") }} since June 7th, 2011

Adds the {{ cssxref("opacity") }} property, and the hsl(), hsla(), rgba() and rgb() functions to create {{ xref_csscolorvalue() }} values. It also defines the currentColor keyword as a valid color.

The transparent color is now a real color (thanks to the support for the alpha channel) and is a now an alias for rgba(0,0,0,1.0) .

It deprecates the system-color keywords that shouldn't be used in a production environment anymore.

{{ SpecName("CSS3 Selectors", "", "") }} {{ Spec2("CSS3 Selectors") }} since September 29th, 2011

Adds:

  • Substring matching attribute selectors, E[attribute^="value"] , E[attribute$="value"] , E[attribute*="value"] .
  • New pseudo-classes: {{ cssxref(":target") }}, {{ cssxref(":enabled") }} and {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} and {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} and {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} and {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} and {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, and {{ cssxref(":not") }}.
  • Pseudo-elements are now characterized by two colons rather then one: :after becomes {{ cssxref("::after") }}, :before becomes {{ cssxref("::before") }}, :first-letter becomes {{ cssxref("::first-letter") }}, and :first-line becomes {{ cssxref("::first-line") }}.
  • The new general sibling combinator ( h1~pre ).

The next iteration of the Selectors specification is already in progress, though it still hasn't reached the First Public Working Draft stage.

{{ SpecName("CSS3 Namespaces", "", "") }} {{ Spec2("CSS3 Namespaces") }} since September 29th, 2011

Adds the support for the XML Namespaces by defining the notion of CSS qualified name , using the ' | ' syntax and adding the {{ cssxref("@namespace") }} CSS at-rule.

{{ SpecName("CSS3 Media Queries", "", "") }} {{ Spec2("CSS3 Media Queries") }} since June 19th, 2012

Extends the former media type ( print, screen, ) to a full language allowing queries on the device media capabilities like only screen and (color) .

Media queries are not only used in CSS document but also in some attributes of HTML Elements, like the {{ htmlattrxref("media","link") }} attribute of the {{ HTMLElement("link") }} element.

The next iteration of this specification is in the work, allowing to tailor a Web site regarding the input methods available on the user agent, with new media features like hover or pointer. Detection of EcmaScript support, using the script media features is also proposed.

{{ SpecName("CSS3 Style", "", "") }} {{ Spec2("CSS3 Style") }}
Formally defines the syntax of the content of the HTML style global attribute.
{{ SpecName("CSS3 Backgrounds", "", "") }} {{ Spec2("CSS3 Backgrounds") }}

Adds:

  • Support, on backgrounds, for any type of {{ xref_cssimage() }}, and not only for uri() defined ones.
  • Support for multiple background images.
  • The {{ cssxref("background-repeat") }} space and round values, and for the 2-value syntax of this CSS property.
  • The {{ cssxref("background-attachment") }} local value.
  • The CSS {{ cssxref("background-origin") }}, {{ cssxref("background-size") }}, and {{ cssxref("background-clip") }} properties.
  • Support for curved border corners, with the CSS {{ cssxref("border-radius") }}, {{ cssxref("border-top-left-radius") }}, {{ cssxref("border-top-right-radius") }}, {{ cssxref("border-bottom-left-radius") }}, and {{ cssxref("border-bottom-right-radius") }} properties.
  • Support for the use of an {{ xref_cssimage() }} as the border with the CSS {{ cssxref("border-image") }}, {{ cssxref("border-image-source") }}, {{ cssxref("border-image-slice") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }}, and {{ cssxref("border-image-repeat") }} properties.
  • Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS {{ cssxref("box-decoration-break") }} property.
    At risk : due to insufficient browser support, this feature is at risk to be postponed to the next iteration of this module.
  • Support for shadows of the element with the CSS {{ cssxref("box-shadow") }} property.
    At risk : due to insufficient browser support, the animability of this feature is at risk, and may be postponed to the next iteration of this module .

The CSS4 iteration of the Backgrounds and Borders specification is already in progress, though it still hasn't reached the First Public Working Draft stage, it plans to add the ability to clip a border (with the CSS {{ cssxref("border-clip") }}, {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}, and {{ cssxref("border-clip-left") }} properties) or to control the shape of the border in a corner (using the CSS {{ cssxref("border-corner-shape") }} property).

{{ SpecName("CSS3 Multicol", "", "") }} {{ Spec2("CSS3 Multicol") }}
Adds support for easy multi-column layouts using the CSS {{ cssxref("columns") }}, {{ cssxref("column-count") }}, {{ cssxref("column-fill") }}, {{ cssxref("column-gap") }}, {{ cssxref("column-rule") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("column-rule-style") }}, {{ cssxref("column-rule-width") }}, {{ cssxref("column-span") }}, {{ cssxref("column-width") }}, {{ cssxref("break-after") }}, {{ cssxref("break-before") }}, and {{ cssxref("break-inside") }}.
{{ SpecName("CSS3 Speech", "", "") }} {{ Spec2("CSS3 Speech") }}
Defines the speech media type, an aural formatting model and numerous properties specific for speech-rendering user agents.
{{ SpecName("CSS3 Images", "", "") }} {{ Spec2("CSS3 Images") }}

Defines the {{ xref_cssimage() }} data type.

Extends the url() syntax to support image slices using media fragments.

Adds:

  • The dppx unit to the {{ xref_cssresolution() }} data type.
  • The image() function as a more flexible alternative to url() to define an image from an url.
    At risk : due to insufficient browser support, standardization of the image() function may be postponed to the next iteration of this module .
  • Support for linear-gradient(), repeating-linear-gradient(), radial-gradient() and repeating-radial-gradient().
  • The ability to define how a replaced element should fit in its element, using the CSS {{ cssxref("object-fit") }} property.
    At risk : due to insufficient browser support, standardization of the {{ cssxref("object-fit") }} and property may be postponed to the next iteration of this module .
  • The ability to override the resolution and orientation of an external image using the CSS {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties.
    At risk : due to insufficient browser support, standardization of the {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties may be postponed to the next iteration of this module .

The CSS Image Values and Replaced Content Level 4 which will supersede CSS Image Level 3 is in development and is a {{Spec2("CSS4 Images")}}.

{{ SpecName("CSS3 Values", "", "") }} {{ Spec2("CSS3 Values") }}

Makes initial and inherit keywords usable on any CSS property.

Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions.

Adds:

  • Definition for new font-relative length units: rem and ch .
  • Definition for viewport-relative length units: vw, vh, vmax, and vmin .
  • Precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the reference pixel .
  • Definition for {{ xref_cssangle() }}, {{ xref_csstime() }}, {{ xref_cssfrequency() }}, {{ xref_cssresolution() }}.
  • Normative value to the definition of {{ xref_csscolorvalue() }}, {{ xref_cssimage() }}, and {{ xref_cssposition }}.
  • Definition for the {{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}, and toggle() functional notations.
    At risk: due to insufficient browser support, standardization of the calc(), attr(), and toggle() functional notations may be postponed to the next iteration of this module.

Several types definition, like <ident> and <custom-ident>, have been deferred to CSS Values and Units Module Level 4.

{{ SpecName("CSS3 Flexbox", "", "") }} {{ Spec2("CSS3 Flexbox") }}
Add a flexbox layout to the CSS {{ cssxref("display") }} property and several new CSS properties to control it: {{ cssxref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-direction") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-order") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }}.

Though formally also at the Candidate Recommendation level, the CSS Marquee module didn't see any progress recently and should not be considered on the standard track right now.

Modules in the refining phase

Specifications that are deemed to be in the refining phase are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.

{{ SpecName("CSS3 Basic UI", "", "") }} {{ Spec2("CSS3 Basic UI") }}

Adds:

  • The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.
    At risk: due to insufficient browser support, standardization of the padding-box value may be postponed to the next iteration of this module .
  • Allow the styling of forms according their content using the CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }}, and {{ cssxref(":read-write") }} pseudo-classes and the {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} pseudo-elements.
    At risk: due to insufficient browser support, standardization of the pseudo-elements {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} may be postponed to the next iteration of this module .
  • Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new icon value of the CSS {{ cssxref("content") }} property.
    At risk: due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the icon value may be postponed to CSS4.
  • Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.
  • Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.
  • Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.
    At risk: due to insufficient browser support, the 2-value syntax of this property as well as the support for {{ xref_cssstring() }} values may be postponed to the next iteration of this module .
  • The ability to define the hotspot of a cursor as well as the new none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in, zoom-out, extending the {{ cssxref("cursor") }} property.
  • The ability to specify the sequential navigation order (that is the tabbing order ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.
    At risk: due to insufficient browser support, standardization of the navigation properties may be postponed to the next iteration of this module .
  • The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.
    At risk: due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to the next iteration of this module .

An early list of what could be in the next iteration of the CSS Basic User Interface Module is available.

{{ SpecName("CSS3 Transitions", "", "") }} {{ Spec2("CSS3 Transitions") }}
Allows the definition of transitions effects between two properties values by adding the CSS {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, and {{ cssxref("transition-timing-function") }} properties.
{{ SpecName("CSS3 Animations", "", "") }} {{ Spec2("CSS3 Animations") }}
Allows the definition of animations effects by adding the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay") }},{{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, and {{ cssxref("animation-timing-function") }} properties, as well as the {{ cssxref("@keyframes") }} at-rule.
{{ SpecName("CSS3 Transforms", "", "") }} {{ Spec2("CSS3 Transforms") }}

Adds:

  • the support of bi-dimensional transforms to be applied to any element using the CSS {{ cssxref("transform") }} and {{ cssxref("transform-origin") }} properties. The supported transforms are: matrix(), translate(), translateX(), translateY(), scale(), scaleX(), scaleY(), rotate(), skewX(), and skewY().
  • the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }}, and {{ cssxref("backface-visibility") }} properties and extended the {{ cssxref("transform") }} property with the following transforms are: matrix 3d(), translate3d(), translateZ()scale3d(), scaleZ(), rotate3d(), rotateX() ,rotateY(), rotateZ(), and perspective().

Note: this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms.

{{ SpecName("CSS3 Fragmentation", "", "") }} {{ Spec2("CSS3 Fragmentation") }}
Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling.
{{ SpecName("CSS3 Conditional", "", "") }} {{ Spec2("CSS3 Conditional") }}
Adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the document the style sheet is being applied to. It consists mainly in allowing nested at-rules inside {{ cssxref("@media") }} and the adding of two new CSS at-rules, {{ cssxref("@document") }} and {{ cssxref("@supports") }}.
{{ SpecName("CSS3 Text", "", "") }} {{ Spec2("CSS3 Text") }}

Extends:

  • the CSS {{ cssxref("text-transform") }} property with the value full-width.
  • the CSS {{ cssxref("text-align") }} property with the value start, end, start end, and match-parent for a better support of documents with multiple directionalities of text.
  • the CSS {{ cssxref("text-align") }} property with a {{ xref_cssstring() }} value to align on that character. This is useful to align number on the decimal point.
  • the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.

Adds:

  • Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.
  • Control on line breaks and word boundaries using the CSS {{ cssxref("line-break") }}, {{ cssxref("word-break") }}, {{ cssxref("hyphens") }}, {{ cssxref("text-wrap") }}, {{ cssxref("overflow-wrap") }}, and {{ cssxref("text-align-last") }} properties.
  • Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.
  • Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.

A few features present in early CSS Text Level 3 draft have being postponed to the next iteration of this module .

Modules in the revising phase

Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntax are tested and often implemented.

{{ SpecName("CSS3 Fonts", "", "") }} {{ Spec2("CSS3 Fonts") }}

Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.

Adds:

  • Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.
  • The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.
  • The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.
  • The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.
  • The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.
  • The choice of alternative font faces using the CSS {{ cssxref("font-stretch") }}, {{ cssxref("font-variant-alternates") }}, {{ cssxref("font-variant-caps") }}, {{ cssxref("font-variant-east-asian") }}, {{ cssxref("font-variant-ligatures") }}, {{ cssxref("font-variant-numeric") }}, and {{ cssxref("font-variant-position") }} properties. It also extends the related CSS {{ cssxref("font-variant") }} shorthand property and introduces the {{ cssxref("@font-features-values") }} at-rule.
  • The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.
{{ SpecName("CSS3 Writing Modes", "", "") }} {{ Spec2("CSS3 Writing Modes") }}
Defines the writing modes of both horizontal and vertical scripts and precises how the CSS {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} properties interact with the new CSS {{ cssxref("text-orientation") }} property, and extends them where needed.
{{ SpecName("CSS3 Text-decoration", "", "") }} {{ Spec2("CSS3 Text-decoration") }}

Extends:

  • the CSS {{ cssxref("text-decoration") }} property by making it a shorthand for the CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, and {{ cssxref("text-decoration-style") }} properties. And adds the {{ cssxref("text-decoration-skip") }}, and {{ cssxref("text-underline-position") }} properties.

Adds:

  • Support for East-Asian-script emphasis marks with the CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, and {{ cssxref("text-emphasis-position") }} properties.
  • Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.

Modules in the exploring phase

{{ SpecName("CSS4 Images", "", "") }} {{ Spec2("CSS4 Images") }}

Extends:

  • the image() functional notation to describe the directionality of the image (rtl or ltr), allowing for bidi-sensitive images.
  • the {{ cssxref("image-orientation") }} property by adding the keyword from-image, allowing to follow EXIF data stored into images to be considered.

Adds:

  • the image-set() functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.
  • the element() functional notation allowing the use of part of the page as image.
  • the cross-fade() functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.
  • the conic-gradient() and repeating-conic-gradient() functional notation describing a new type of gradient.
  • the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.
{{ SpecName("CSS3 Device", "", "") }} {{ Spec2("CSS3 Device") }}
Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.
{{ SpecName("CSS3 Grid", "", "") }} {{ Spec2("CSS3 Grid") }}

Adds a new layout based on a grid.

Note: there are current experiment towards merging this specification with the CSS Template Layout .

{{ SpecName("CSS3 GCPM", "", "") }} {{ Spec2("CSS3 GCPM") }}
Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.
{{ SpecName("CSS3 Exclusions and Shapes", "", "") }} {{ Spec2("CSS3 Exclusions and Shapes") }}
Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.
{{ SpecName("CSS3 Lists", "", "") }} {{ Spec2("CSS3 Lists") }}
Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.
{{ SpecName("CSS3 Regions", "", "") }} {{ Spec2("CSS3 Regions") }}
Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.
{{ SpecName("CSS3 Variables", "", "") }} {{ Spec2("CSS3 Variables") }}
Defines a mechanism allowing to define variables in CSS.

 

Revision Source

<p><span class="seoSummary"><strong>CSS3</strong> is the latest evolution of the <em>Cascading Style Sheets</em> language and aims at extending CSS2.1. It brings a lot of long awaited novelties, like rounded corners, shadows, <a href="/en/CSS/Using_CSS_gradients" title="Using CSS gradients">gradients</a> , <a href="/en/CSS/CSS_transitions" title="CSS transitions">transitions</a> or <a href="/en/CSS/CSS_animations" title="CSS animations">animations</a> , as well as new layouts like <a href="/en/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">multi-columns</a> , flexible box or grid layouts.</span> Experimental parts are vendor-prefixed and should either be avoided in production environments, or used with extreme caution as both their syntax and semantic can change in the future.</p>
<h2 id="Modules_and_the_standardization_process">Modules and the standardization process</h2>
<p>CSS Level 2 needed 9 years, from August 2002 to June 2011 to reach the Recommendation status. This was due to the fact that a few secondary features hold back the whole specification. In order to accelerate the standardization of non-problematic features, the <a class="external" href="http://www.w3.org/blog/CSS/" title="http://www.w3.org/blog/CSS/">CSS Working Group</a> of the W3C, in a decision referred as the <a class="external" href="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules" title="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules">Beijing doctrine</a> , divided CSS in smaller components called <em>modules</em> . Each of these modules is now an independent part of the language and moves towards standardization at its own pace. While some modules are already W3C Recommendations, other still are early Working Drafts. New modules are also added when new needs are identified.</p>
<p><a href="/@api/deki/files/6120/=CSS_Modules_and_Snapshots.png" title="CSS_Modules_and_Snapshots.png"><img alt="CSS Modules and Snapshots as defined since CSS3" class="internal lwrap" src="/files/3623/CSS_Modules_and_Snapshots.png" style="width: 550px; float: left;" /> </a> Formally, there is no CSS3 standard <em>per se</em> . Each module being standardized independently, the standard CSS consists of CSS2.1 amended and extended by the completed modules, not necessary all with the same level number. At each point of time, a snapshot of the CSS standard can be defined, listing CSS2.1 and the mature modules.</p>
<p>The W3 consortium periodically publishes such snapshots, like in <a class="external" href="http://www.w3.org/TR/css-beijing/" title="http://www.w3.org/TR/css-beijing/">2007</a> or <a class="external" href="http://www.w3.org/TR/css-2010/" title="http://www.w3.org/TR/css-2010/">2010.</a></p>
<p>Though today no module with a level greater than 3 is standardized, this will change in the future. Some modules, like Selectors 4 or CSS Borders and Backgrounds Level 4 already have an Editor's Draft, though they haven't reach the First Published Working Draft status.</p>
<h2 id="CSS_modules_status" style="clear:both;">CSS modules status</h2>
<h3 id="Stable_modules">Stable modules</h3>
<p>A few CSS modules are already fairly stable and have reached one of the three recommendation level of the CSSWG: Candidate Recommendation, Proposed Recommendation or Recommendation. These can be used without prefixed and are pretty stable, though a few features can still be dropped at the Candidate Recommendation stage.</p>
<p>These modules extend and amend the CSS2.1 specification which build the core of the specification. Together with it, they are the current snapshot of the CSS specification.</p>
<h4 id="Colors_(Level_3)" style="display:none;">Colors (Level 3)</h4>
<table class="standard-table" style="width: 100%;">
  <tbody>
    <tr>
      <td style="border: solid 1px; width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Colors", "", "") }}</strong></td>
      <td style="border: solid 1px;">{{ Spec2("CSS3 Colors") }} since June 7th, 2011</td>
    </tr>
    <tr>
      <td colspan="2" style="border: solid 1px;">
        <p>Adds the {{ cssxref("opacity") }} property, and the <code>hsl</code><code>()</code>, <code>hsla()</code>, <code>rgba()</code> and <code>rgb()</code> functions to create {{ xref_csscolorvalue() }} values. It also defines the <code>currentColor</code> keyword as a valid color.</p>
        <p>The <code>transparent</code> color is now a real color (thanks to the support for the alpha channel) and is a now an alias for <code>rgba(0,0,0,1.0)</code> .</p>
        <p>It deprecates the system-color keywords that shouldn't be used in a production environment anymore.</p>
      </td>
    </tr>
  </tbody>
</table>
<h4 id="Selectors" style="display:none;">Selectors</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:rgb(128,255,128);"><strong>{{ SpecName("CSS3 Selectors", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Selectors") }} since September 29th, 2011</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">
        <p>Adds:</p>
        <ul>
          <li>Substring matching attribute selectors, <code>E[attribute^="value"]</code> , <code>E[attribute$="value"]</code> , <code>E[attribute*="value"]</code> .</li>
          <li>New pseudo-classes: {{ cssxref(":target") }}, {{ cssxref(":enabled") }} and {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} and {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} and {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} and {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} and {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, and {{ cssxref(":not") }}.</li>
          <li>Pseudo-elements are now characterized by two colons rather then one: <code>:after</code> becomes {{ cssxref("::after") }}, <code>:before</code> becomes {{ cssxref("::before") }}, <code>:first-letter</code> becomes {{ cssxref("::first-letter") }}, and <code>:first-line</code> becomes {{ cssxref("::first-line") }}.</li>
          <li>The new <span style="font-style: italic;">general sibling combinator</span> ( <code>h1~pre</code> ).</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
<p>The <a class="external" href="http://dev.w3.org/csswg/selectors4/" title="http://dev.w3.org/csswg/selectors4/">next iteration of the Selectors specification</a> is already in progress, though it still hasn't reached the First Public Working Draft stage.</p>
<h4 id="Namespaces" style="display:none;">Namespaces</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:rgb(128,255,128);"><strong>{{ SpecName("CSS3 Namespaces", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Namespaces") }} since September 29th, 2011</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">
        <p>Adds the support for the XML Namespaces by defining the notion of <em>CSS qualified name</em> , using the ' <code>|</code> ' syntax and adding the {{ cssxref("@namespace") }} CSS at-rule.</p>
      </td>
    </tr>
  </tbody>
</table>
<h4 id="Media_Queries" style="display:none;">Media Queries</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border: solid 1px; width: 30%; background-color:rgb(128,255,128);"><strong>{{ SpecName("CSS3 Media Queries", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Media Queries") }} since June 19th, 2012</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">
        <p>Extends the former media type ( <code>print</code>, <code>screen</code>, <code>…</code> ) to a full language allowing <a href="/en/CSS/Media_queries" title="en/CSS/Media_queries">queries on the device media capabilities</a> like <code>only screen and (color)</code> .</p>
        <p>Media queries are not only used in CSS document but also in some attributes of HTML Elements, like the {{ htmlattrxref("media","link") }} attribute of the {{ HTMLElement("link") }} element.</p>
      </td>
    </tr>
  </tbody>
</table>
<p>The <a href="http://dev.w3.org/csswg/mediaqueries4" title="http://dev.w3.org/csswg/mediaqueries4">next iteration of this specification</a> is in the work, allowing to tailor a Web site regarding the input methods available on the user agent, with new media features like <code>hover</code> or <code>pointer</code>. Detection of EcmaScript support, using the <code>script</code> media features is also proposed.</p>
<h4 id="Style_attribute" style="display:none;">Style attribute</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:rgb(220,255,220);"><strong>{{ SpecName("CSS3 Style", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Style") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">Formally defines the syntax of the content of the HTML <a href="/en/HTML/Global_attributes#attr-style" title="en/HTML/Global_attributes#attr-style"> <code>style</code> </a> global attribute.</td>
    </tr>
  </tbody>
</table>
<h4 id="Backgrounds_and_Borders" style="display:none;">Backgrounds and Borders</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:rgb(220,255,220);"><strong>{{ SpecName("CSS3 Backgrounds", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Backgrounds") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">
        <p>Adds:</p>
        <ul>
          <li>Support, on backgrounds, for any type of {{ xref_cssimage() }}, and not only for <code>uri()</code> defined ones.</li>
          <li>Support for multiple background images.</li>
          <li>The {{ cssxref("background-repeat") }} <code>space</code> and <code>round</code> values, and for the 2-value syntax of this CSS property.</li>
          <li>The {{ cssxref("background-attachment") }} <code>local</code> value.</li>
          <li>The CSS {{ cssxref("background-origin") }}, {{ cssxref("background-size") }}, and {{ cssxref("background-clip") }} properties.</li>
          <li>Support for curved border corners, with the CSS {{ cssxref("border-radius") }}, {{ cssxref("border-top-left-radius") }}, {{ cssxref("border-top-right-radius") }}, {{ cssxref("border-bottom-left-radius") }}, and {{ cssxref("border-bottom-right-radius") }} properties.</li>
          <li>Support for the use of an {{ xref_cssimage() }} as the border with the CSS {{ cssxref("border-image") }}, {{ cssxref("border-image-source") }}, {{ cssxref("border-image-slice") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }}, and {{ cssxref("border-image-repeat") }} properties.</li>
          <li>Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS {{ cssxref("box-decoration-break") }} property.<br />
            <em><strong>At risk</strong> : due to insufficient browser support, this feature is at risk to be postponed to the next iteration of this module.</em></li>
          <li>Support for shadows of the element with the CSS {{ cssxref("box-shadow") }} property.<br />
            <em><strong>At risk</strong> : due to insufficient browser support, the animability of this feature is at risk, and may be postponed to</em> <em>the next iteration of this module</em> <em>.</em></li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
<p>The <a class="external" href="http://dev.w3.org/csswg/css4-background/" title="http://dev.w3.org/csswg/css4-background/">CSS4 iteration of the Backgrounds and Borders specification</a> is already in progress, though it still hasn't reached the First Public Working Draft stage, it plans to add the ability to clip a border (with the CSS {{ cssxref("border-clip") }}, {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}, and {{ cssxref("border-clip-left") }} properties) or to control the shape of the border in a corner (using the CSS {{ cssxref("border-corner-shape") }} property).</p>
<h4 id="Multi-column_layout" style="display:none;">Multi-column layout</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:rgb(220,255,220);"><strong>{{ SpecName("CSS3 Multicol", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Multicol") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">Adds support for easy multi-column layouts using the CSS {{ cssxref("columns") }}, {{ cssxref("column-count") }}, {{ cssxref("column-fill") }}, {{ cssxref("column-gap") }}, {{ cssxref("column-rule") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("column-rule-style") }}, {{ cssxref("column-rule-width") }}, {{ cssxref("column-span") }}, {{ cssxref("column-width") }}, {{ cssxref("break-after") }}, {{ cssxref("break-before") }}, and {{ cssxref("break-inside") }}.</td>
    </tr>
  </tbody>
</table>
<h4 id="Speech" style="display:none;">Speech</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:rgb(220,255,220);"><strong>{{ SpecName("CSS3 Speech", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Speech") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">Defines the <code>speech</code> media type, an aural formatting model and numerous properties specific for speech-rendering user agents.</td>
    </tr>
  </tbody>
</table>
<h4 id="Image_Values_and_Replaced_Content" style="display:none;">Image Values and Replaced Content</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:rgb(220,255,220);"><strong>{{ SpecName("CSS3 Images", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Images") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">
        <p>Defines the {{ xref_cssimage() }} data type.</p>
        <p>Extends the <code>url()</code> syntax to support image slices using media fragments.</p>
        <p>Adds:</p>
        <ul>
          <li>The <code>dppx</code> unit to the {{ xref_cssresolution() }} data type.</li>
          <li>The <code>image()</code> function as a more flexible alternative to <code>url()</code> to define an image from an url.<br />
            <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the <code>image()</code> function may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
          <li>Support for <code>linear-gradient()</code>, <code>repeating-linear-gradient()</code>, <code>radial-gradient()</code> and <code>repeating-radial-gradient()</code>.</li>
          <li>The ability to define how a replaced element should fit in its element, using the CSS {{ cssxref("object-fit") }} property.<br />
            <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the {{ cssxref("object-fit") }} and property may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
          <li>The ability to override the resolution and orientation of an external image using the CSS {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties.<br />
            <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
<p>The <a href="#Images_(Level_4)">CSS Image Values and Replaced Content Level 4</a> which will supersede CSS Image Level 3 is in development and is a {{Spec2("CSS4 Images")}}.</p>
<h4 id="Values_and_Units" style="display:none;">Values and Units</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border: 1px solid; width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Values", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Values") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">
        <p>Makes <code>initial</code> and <code>inherit</code> keywords usable on any CSS property.</p>
        <p>Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions.</p>
        <p>Adds:</p>
        <ul>
          <li>Definition for new font-relative length units: <code>rem</code> and <code>ch</code> .</li>
          <li>Definition for viewport-relative length units: <code>vw</code>, <code>vh</code>, <code>vmax</code>, and <code>vmin</code> .</li>
          <li>Precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the <em>reference pixel</em> .</li>
          <li>Definition for {{ xref_cssangle() }}, {{ xref_csstime() }}, {{ xref_cssfrequency() }}, {{ xref_cssresolution() }}.</li>
          <li>Normative value to the definition of {{ xref_csscolorvalue() }}, {{ xref_cssimage() }}, and {{ xref_cssposition }}.</li>
          <li>Definition for the {{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}, and <code>toggle()</code> functional notations.<br />
            <em><strong>At risk:</strong> due to insufficient browser support, standardization of the <code>calc()</code>, <code>attr()</code>, and <code>toggle()</code> functional notations may be postponed to </em> <em>the next iteration of this module</em><em>.</em></li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
<p>Several types definition, like <code>&lt;ident&gt;</code> and <code>&lt;custom-ident&gt;</code>, have been deferred to CSS Values and Units Module Level 4.</p>
<h4 id="Flexible_box_layout" style="display:none;">Flexible box layout</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:rgb(220,255,220);"><strong>{{ SpecName("CSS3 Flexbox", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Flexbox") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">Add a flexbox layout to the CSS {{ cssxref("display") }} property and several new CSS properties to control it: {{ cssxref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-direction") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-order") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }}.</td>
    </tr>
  </tbody>
</table>
<p>Though formally also at the Candidate Recommendation level, the CSS Marquee module didn't see any progress recently and should not be considered on the standard track right now.</p>
<h3 id="Modules_in_the_refining_phase">Modules in the refining phase</h3>
<p>Specifications that are deemed to be in the <em>refining phase</em> are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.</p>
<h4 id="Basic_User_Interface" style="display:none;">Basic User Interface</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:rgb(255,255,220);"><strong>{{ SpecName("CSS3 Basic UI", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Basic UI") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">
        <p>Adds:</p>
        <ul>
          <li>The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.<br />
            <strong><em>At risk:</em> </strong> <em> due to insufficient browser support, standardization of the <code>padding</code><code>-box</code> value may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
          <li>Allow the styling of forms according their content using the CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }}, and {{ cssxref(":read-write") }} pseudo-classes and the {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} pseudo-elements.<br />
            <em><strong>At risk:</strong> due to insufficient browser support, standardization of the pseudo-elements {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
          <li>Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new <code>icon</code> value of the CSS {{ cssxref("content") }} property.<br />
            <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the <code>icon</code> value may be postponed to CSS4. </em></li>
          <li>Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.</li>
          <li>Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.</li>
          <li>Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.<br />
            <em><strong>At risk:</strong> due to insufficient browser support, the 2-value syntax of this property as well as the support for {{ xref_cssstring() }} values may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
          <li>The ability to define the hotspot of a cursor as well as the new <code>none</code>, <code>context-menu</code>, <code>cell</code>, <code>vertical-text</code>, <code>alias</code>, <code>copy</code>, <code>no-drop</code>, <code>not-allowed</code>, <code>nesw-</code><code>resize</code>, <code>nwse-</code><code>resize</code>, <code>col-resize</code>, <code>row-resize</code>, <code>all-scroll</code>, <code>zoom-in</code>, <code>zoom-out</code>, extending the {{ cssxref("cursor") }} property.</li>
          <li>The ability to specify the sequential navigation order (that is the <em>tabbing order</em> ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.<br />
            <em><strong>At risk:</strong> due to insufficient browser support, standardization of the navigation properties may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
          <li>The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.<br />
            <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
<p>An early list of what could be in the next iteration of the CSS Basic User Interface Module is <a class="external" href="http://wiki.csswg.org/spec/css4-ui" title="http://wiki.csswg.org/spec/css4-ui">available</a>.</p>
<h4 id="Transitions" style="display:none;">Transitions</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transitions", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Transitions") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">Allows the definition of transitions effects between two properties values by adding the CSS {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, and {{ cssxref("transition-timing-function") }} properties.</td>
    </tr>
  </tbody>
</table>
<h4 id="Animations" style="display:none;">Animations</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:rgb(255,255,220);"><strong>{{ SpecName("CSS3 Animations", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Animations") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">Allows the definition of animations effects by adding the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay") }},{{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, and {{ cssxref("animation-timing-function") }} properties, as well as the {{ cssxref("@keyframes") }} at-rule.</td>
    </tr>
  </tbody>
</table>
<h4 id="Transforms" style="display:none;">Transforms</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transforms", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Transforms") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">
        <p>Adds:</p>
        <ul>
          <li>the support of bi-dimensional transforms to be applied to any element using the CSS {{ cssxref("transform") }} and {{ cssxref("transform-origin") }} properties. The supported transforms are: <code>matrix</code><code>()</code>, <code>translate()</code>, <code>translateX()</code>, <code>translateY()</code>, <code>scale()</code>, <code>scaleX()</code>, <code>scaleY()</code>, <code>rotate()</code>, <code>skewX()</code>, and <code>skewY()</code>.</li>
          <li>the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }}, and {{ cssxref("backface-visibility") }} properties and extended the {{ cssxref("transform") }} property with the following transforms are: <code>matrix</code> <code>3d()</code>, <code>translate3d()</code>, <code>translateZ()</code>,&nbsp; <code>scale3d()</code>, <code>scaleZ()</code>, <code>rotate3d()</code>, <code>rotateX</code><code>()</code> ,<code>rotateY</code><code>()</code>, <code>rotateZ()</code>, and <code>perspective()</code>.</li>
        </ul>
        <p><em><strong>Note:</strong> this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms. </em></p>
      </td>
    </tr>
  </tbody>
</table>
<h4 id="Fragmentation" style="display:none;">Fragmentation</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border: 1px solid; width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Fragmentation", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Fragmentation") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling.</td>
    </tr>
  </tbody>
</table>
<h4 id="Conditional_Rules" style="display:none;">Conditional Rules</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Conditional", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Conditional") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">Adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the document the style sheet is being applied to. It consists mainly in allowing nested at-rules inside {{ cssxref("@media") }} and the adding of two new CSS at-rules, {{ cssxref("@document") }} and {{ cssxref("@supports") }}.</td>
    </tr>
  </tbody>
</table>
<h4 id="Text" style="display:none;">Text</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:rgb(255,255,220);"><strong>{{ SpecName("CSS3 Text", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Text") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">
        <p>Extends:</p>
        <ul>
          <li>the CSS {{ cssxref("text-transform") }} property with the value <code>full-width</code>.</li>
          <li>the CSS {{ cssxref("text-align") }} property with the value <code>start</code>, <code>end</code>, <code>start end</code>, and <code>match-parent</code> for a better support of documents with multiple directionalities of text.</li>
          <li>the CSS {{ cssxref("text-align") }} property with a {{ xref_cssstring() }} value to align on that character. This is useful to align number on the decimal point.</li>
          <li>the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.</li>
        </ul>
        <p>Adds:</p>
        <ul>
          <li>Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.</li>
          <li>Control on line breaks and word boundaries using the CSS {{ cssxref("line-break") }}, {{ cssxref("word-break") }}, {{ cssxref("hyphens") }}, {{ cssxref("text-wrap") }}, {{ cssxref("overflow-wrap") }}, and {{ cssxref("text-align-last") }} properties.</li>
          <li>Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.</li>
          <li>Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
<p>A few features present in early CSS Text Level 3 draft have being <a class="external" href="http://dev.w3.org/csswg/css3-text/#recent-changes" title="http://dev.w3.org/csswg/css3-text/#recent-changes">postponed to the next iteration of this module</a> .</p>
<h3 id="Modules_in_the_revising_phase">Modules in the revising phase</h3>
<p>Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntax are tested and often implemented.</p>
<h4 id="Fonts" style="display:none;">Fonts</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:rgb(255,160,100);"><strong>{{ SpecName("CSS3 Fonts", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Fonts") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">
        <p>Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.</p>
        <p>Adds:</p>
        <ul>
          <li>Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.</li>
          <li>The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.</li>
          <li>The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.</li>
          <li>The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.</li>
          <li>The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.</li>
          <li>The choice of alternative font faces using the CSS {{ cssxref("font-stretch") }}, {{ cssxref("font-variant-alternates") }}, {{ cssxref("font-variant-caps") }}, {{ cssxref("font-variant-east-asian") }}, {{ cssxref("font-variant-ligatures") }}, {{ cssxref("font-variant-numeric") }}, and {{ cssxref("font-variant-position") }} properties. It also extends the related CSS {{ cssxref("font-variant") }} shorthand property and introduces the {{ cssxref("@font-features-values") }} at-rule.</li>
          <li>The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
<h4 id="Writing_modes" style="display:none;">Writing modes</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:rgb(255,160,100);"><strong>{{ SpecName("CSS3 Writing Modes", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Writing Modes") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">Defines the writing modes of both horizontal and vertical scripts and precises how the CSS {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} properties interact with the new CSS {{ cssxref("text-orientation") }} property, and extends them where needed.</td>
    </tr>
  </tbody>
</table>
<h4 id="Text_decorations" style="display:none;">Text decorations</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:rgb(255,160,100);"><strong>{{ SpecName("CSS3 Text-decoration", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Text-decoration") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">
        <p>Extends:</p>
        <ul>
          <li>the CSS {{ cssxref("text-decoration") }} property by making it a shorthand for the CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, and {{ cssxref("text-decoration-style") }} properties. And adds the {{ cssxref("text-decoration-skip") }}, and {{ cssxref("text-underline-position") }} properties.</li>
        </ul>
        <p>Adds:</p>
        <ul>
          <li>Support for East-Asian-script emphasis marks with the CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, and {{ cssxref("text-emphasis-position") }} properties.</li>
          <li>Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="Modules_in_the_exploring_phase">Modules in the exploring phase</h3>
<h4 id="Images_(Level_4)" style="display:none;">Images (Level 4)</h4>
<table class="standard-table" style="width: 100%;">
  <tbody>
    <tr>
      <td style="border: solid 1px; width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS4 Images", "", "") }}</strong></td>
      <td style="border: solid 1px;">{{ Spec2("CSS4 Images") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border: solid 1px;">
        <p>Extends:</p>
        <ul>
          <li>the <code>image()</code> functional notation to describe the directionality of the image (<code>rtl</code> or <code>ltr</code>), allowing for bidi-sensitive images.</li>
          <li>the {{ cssxref("image-orientation") }} property by adding the keyword <code>from-image</code>, allowing to follow EXIF data stored into images to be considered.</li>
        </ul>
        <p>Adds:</p>
        <ul>
          <li>the <code>image-set()</code> functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.</li>
          <li>the <code>element()</code> functional notation allowing the use of part of the page as image.</li>
          <li>the <code>cross-fade()</code> functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.</li>
          <li>the <code>conic-gradient()</code> and <code>repeating-conic-gradient()</code> functional notation describing a new type of gradient.</li>
          <li>the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
<h4 id="Device_Adaptation" style="display:none;">Device Adaptation</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:#F66;"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Device") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.</td>
    </tr>
  </tbody>
</table>
<h4 id="Grid_Layout" style="display:none;">Grid Layout</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:#F66;"><strong>{{ SpecName("CSS3 Grid", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Grid") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">
        <p>Adds a new layout based on a grid.</p>
        <p><em><strong>Note:</strong> there are current experiment towards merging this specification with the <strong>CSS Template Layout</strong> . </em></p>
      </td>
    </tr>
  </tbody>
</table>
<h4 id="GCPM" style="display:none;">GCPM</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:#F66;"><strong>{{ SpecName("CSS3 GCPM", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 GCPM") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.</td>
    </tr>
  </tbody>
</table>
<h4 id="Exclusions_and_Shapes" style="display:none;">Exclusions and Shapes</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:#F66;"><strong>{{ SpecName("CSS3 Exclusions and Shapes", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Exclusions and Shapes") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.</td>
    </tr>
  </tbody>
</table>
<h4 id="Lists" style="display:none;">Lists</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:#F66;"><strong>{{ SpecName("CSS3 Lists", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Lists") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.</td>
    </tr>
  </tbody>
</table>
<h4 id="Regions" style="display:none;">Regions</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:#F66;"><strong>{{ SpecName("CSS3 Regions", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Regions") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.</td>
    </tr>
  </tbody>
</table>
<h4 id="Variables" style="display:none;">Variables</h4>
<table class="standard-table" style="width:100%;">
  <tbody>
    <tr>
      <td style="border:solid 1px; width:30%; background-color:#F66;"><strong>{{ SpecName("CSS3 Variables", "", "") }}</strong></td>
      <td style="border:solid 1px;">{{ Spec2("CSS3 Variables") }}</td>
    </tr>
    <tr>
      <td colspan="2" style="border:solid 1px;">Defines a mechanism allowing to define variables in CSS.</td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
Revert to this revision