CSS3 é a mais recente evolução da linguagem Cascading Style Sheets (Folhas de Estilo em Cascata) que estende o CSS2.1. Ela traz uma série de novidades bastante esperadas, como cantos arredondados, sombras, gradientes , transições ou animações , bem como novos layouts como multi-colunas , caixas flexíveis ou layouts de grade. O vendor-prefixed são peças experimentais que deve ser evitado em ambientes de produção, ou usado com extrema cautela, pois tanto a sua sintaxe e semântica podem mudar no futuro.
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.
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 yet reached 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.
CSS Color Module Level 3 | Recomendação since June 7th, 2011 |
Adds the The It deprecates the system-color keywords that shouldn't be used in a production environment anymore. |
Selectors Level 3 | Recomendação since September 29th, 2011 |
Adds:
|
The next iteration of the Selectors specification is already in progress, though it still hasn't reached the First Public Working Draft stage.
CSS Namespaces Module | Recomendação since September 29th, 2011 |
Adds the support for the XML Namespaces by defining the notion of CSS qualified name , using the ' |
Media Queries | Recomendação since June 19th, 2012 |
Extends the former media type ( Media queries are not only used in CSS document but also in some attributes of HTML Elements, like the |
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.
CSS Style Attributes | Recomendação since November 7th, 2013 |
Formally defines the syntax of the content of the HTML style global attribute. |
CSS Backgrounds and Borders Module Level 3 | Candidata a Recomendação |
Adds:
|
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 border-clip
, border-clip-top
, border-clip-right
, border-clip-bottom
, and border-clip-left
properties) or to control the shape of the border in a corner (using the CSS border-corner-shape
property).
CSS Multi-column Layout Module | Rascunho atual |
Adds support for easy multi-column layouts using the CSS columns , column-count , column-fill , column-gap , column-rule , column-rule-color , column-rule-style , column-rule-width , column-span , column-width , break-after , break-before , and break-inside . |
CSS Speech Module | Candidata a Recomendação |
Defines the speech media type, an aural formatting model and numerous properties specific for speech-rendering user agents. |
CSS Images Module Level 3 | Candidata a Recomendação |
Defines the Extends the Adds:
|
The CSS Image Values and Replaced Content Level 4 which will supersede CSS Image Level 3 is in development and is a Rascunho atual.
CSS Values and Units Module Level 3 | Candidata a Recomendação |
Makes Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions. Adds:
|
Several types definition, like <ident>
and <custom-ident>
, have been deferred to CSS Values and Units Module Level 4.
CSS Flexible Box Layout Module | Candidata a Recomendação |
Add a flexbox layout to the CSS display property and several new CSS properties to control it: flex , flex-align , flex-direction , flex-flow , flex-item-align , flex-line-pack , flex-order , flex-pack , and flex-wrap . |
CSS Conditional Rules Module Level 3 | Candidata a Recomendação |
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 @media and the adding of a new CSS at-rule, @supports , and a new DOM method CSS.supports() . |
Unknown | Desconhecido |
Extends:
Adds:
Precises:
At risk: due to insufficient browser support, standardization of the |
CSS Fonts Module Level 3 | Candidata a Recomendação |
Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented. Adds:
|
CSS Syntax Level 3 | Candidata a Recomendação |
Precises how charsets are determined; minor changes in parsing and tokenization algorithms. |
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.
CSS Basic User Interface Module Level 3 | Recomendação |
Adds:
|
An early list of what could be in the next iteration of the CSS Basic User Interface Module is available.
CSS Transitions | Rascunho atual |
Allows the definition of transitions effects between two properties values by adding the CSS transition , transition-delay , transition-duration , transition-property , and transition-timing-function properties. |
CSS Animations | Rascunho atual |
Allows the definition of animations effects by adding the CSS animation , animation-delay ,animation-direction , animation-duration , animation-fill-mode , animation-iteration-count , animation-name , animation-play-state , and animation-timing-function properties, as well as the @keyframes at-rule. |
CSS Transforms Level 1 | Rascunho atual |
Adds:
Note: this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms. |
CSS Fragmentation Module Level 3 | Candidata a Recomendação |
Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling.
Adds:
|
CSS Text Module Level 3 | Rascunho atual |
Extends:
Adds:
|
A few features present in early CSS Text Level 3 draft have being postponed to the next iteration of this module .
CSS Custom Properties for Cascading Variables Module Level 1 | Candidata a Recomendação |
Defines a mechanism allowing to define variables in CSS. |
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.
CSS Writing Modes Module Level 3 | Candidata a Recomendação |
Defines the writing modes of both horizontal and vertical scripts and precises how the CSS direction and unicode-bidi properties interact with the new CSS text-orientation property, and extends them where needed. |
Modules in the exploring phase
CSS Images Module Level 4 | Rascunho atual |
Extends:
Adds:
|
CSS Device Adaptation | Rascunho atual |
Adds a new at-rule, @viewport , allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block. |
CSS Grid Layout | Candidata a Recomendação |
Add a grid layout to the CSS display property and several new CSS properties to control it: grid , grid-area , grid-auto-columns , grid-auto-flow , grid-auto-position , grid-auto-rows , grid-column , grid-column-start , grid-column-end , grid-row , grid-row-start , grid-row-end , grid-template , grid-template-areas , grid-template-rows , and grid-template-columns . |
CSS Generated Content for Paged Media Module | Rascunho atual |
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. |
Unknown | Desconhecido |
Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows. |
CSS Lists Module Level 3 | Rascunho atual |
Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes. |
CSS Regions Module Level 1 | Rascunho atual |
Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions. |