CSS3

Table of contents

  1. 1. Modules and the standardization process
  2. 2. CSS modules status
    1. 2.1. Stable modules
      1. 2.1.1. Colors
      2. 2.1.2. Selectors
      3. 2.1.3. Namespaces
      4. 2.1.4. Media Queries
      5. 2.1.5. Style attribute
      6. 2.1.6. Backgrounds and Borders
      7. 2.1.7. Multi-column layout
      8. 2.1.8. Speech
    2. 2.2. Modules in the refining phase
      1. 2.2.1. Basic User Interface
      2. 2.2.2. Image Values and Replaced Content
      3. 2.2.3. Values and Units
    3. 2.3. Modules in the revising phase
      1. 2.3.1. Text
      2. 2.3.2. Transitions
      3. 2.3.3. Animations
      4. 2.3.4. Transforms
      5. 2.3.5. Fonts
      6. 2.3.6. Flexible box layout
      7. 2.3.7. Writing modes
    4. 2.4. Modules in the exploring phase
      1. 2.4.1. Conditional Rules
      2. 2.4.2. Device Adaptation
      3. 2.4.3. Grid Layout
      4. 2.4.4. Template Layout
      5. 2.4.5. GCPM
      6. 2.4.6. Exclusions and Shapes
      7. 2.4.7. Lists
      8. 2.4.8. Regions
      9. 2.4.9. Variables
      10. 2.4.10. Fragmentation
Page Notifications Off

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. [1] 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.pngFormally, 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.

CSS Color Level 3 Recommendation since June 7th, 2011

Adds the opacity property, and the hsl(), hsla(), rgba() and rgb() functions to create <color> 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.
Selectors Level 3 Recommendation 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 Level 3 Recommendation 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 @namespace CSS at-rule.
Media Queries Level 3 Proposed Recommendation

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 media attribute of the <link> element.
CSS Style Attribute Candidate Recommendation
Formally defines the syntax of the content of the HTML style global attribute.
CSS Backgrounds and Borders Level 3 Candidate Recommendation

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 Candidate Recommendation
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 Candidate Recommendation
Defines the speech media type, an aural formatting model and numerous properties specific for speech-rendering user agents.

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.

CSS Basic User Interface Module Level 3 Working Draft

Adds:

  • The ability to tweak the box model using the CSS 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 :indeterminate , :default , :valid , :invalid , :in-range , :out-of-range , :required , :optional , :read-only , and :read-write pseudo-classes and the ::value , ::choices , ::repeat-item , and ::repeat-index pseudo-elements.
    At risk: due to insufficient browser support, standardization of the pseudo-elements ::value , ::choices , ::repeat-item , and ::repeat-index may be postponed to the next iteration of this module.
  • Support for icons, defined by the CSS icon property simultaneously with the new icon value of the CSS content property.
    At risk: due to insufficient browser support, standardization of the icon property and the icon value may be postponed to CSS4.
  • Support for the CSS outline-offset property giving more control on the position of the outline.
  • Support for the CSS resize property allowing Web authors to control if and how elements should be resized.
  • Support for the CSS 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 <string> 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 cursor property.
  • The ability to specify the sequential navigation order (that is the tabbing order) using the CSS nav-index , nav-up , nav-right , nav-left , 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 ime-mode property.
    At risk: due to insufficient browser support, standardization of the 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.

CSS Image Values and Replaced Content Module Level 3 Candidate Recommendation

Defines the <resolution> and the <image> data types.

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

Adds:

  • 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.
  • The element() function to define an image from a live element of the document.
    At risk: due to insufficient browser support, standardization of the element() 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 object-fit property.
    At risk: due to insufficient browser support, standardization of the 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 image-resolution and image-orientation properties.
    At risk: due to insufficient browser support, standardization of the image-resolution and image-orientation properties may be postponed to the next iteration of this module.

Work on the CSS Image Values and Replaced Content Level 4 has begun:  image() will be extended, cross-fade() and image-rendering are proposed.

CSS Values and Units Module Level 3 Working Draft

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, 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 <angle> , <time> , <frequency> , <resolution> .
  • Normative value to the definition of <color> , <image> , and <position>.
  • Definition for the calc(), attr(), and cycle() functional notations.
    At risk: due to insufficient browser support, standardization of the calc(), attr(), and cycle() functional notations may be 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.

CSS Text Level 3 Working Draft

Extends :

Adds:

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

CSS Transitions Working Draft
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 Working Draft
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 Working Draft

Adds:

  • the support of bi-dimensional transforms to be applied to any element using the CSS transform and 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 transform-style , perspective , perspective-origin , and backface-visibility properties and extended the transform property with the following transforms are: matrix3d(), 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.

CSS Fonts Module Level 3 Working Draft

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

Adds:
CSS Flexible Box Layout Module Working Draft
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 Writing Modes Module Level 3 Working Draft
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 Conditional Rules Module Level 3 Working Draft
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 two new CSS at-rules, @document and @supports .
CSS Device Adaptation Working Draft
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 Working Draft

Adds a new layout based on a grid.

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

Adds a new layout based on grid templates.

Note: there are current experiment towards merging this specification with the CSS Grid Layout.
CSS Generated Content for Paged Media Module Working Draft
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.
CSS Exclusions and Shapes Module Level 3 Working Draft
Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.
CSS Lists and Counters Module Level 3 Working Draft
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 3 Working Draft
Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.
CSS Variables Module Level 1 Working Draft
Defines a mechanism allowing to define variables in CSS.
CSS Fragmentation Module Level 3 Working Draft
Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling.

Tags (2)

Edit tags

Attachments (1)

FileSizeDateAttached by 
 CSS_Modules_and_Snapshots.png
The evolution of the CSS Standard
121.78 kB07:37, 22 Feb 2012TeoliActions

Attach file