CSS Snapshot 2018

W3C Working Group Note,

This versibet365:
Latest published versibet365:
Editor's Draft:
Previous Versibet365s:
Tab Atkins Jr. (Google)
Elika J. Etemad / fantasai (Invited Expert)
Florian Rivoal (Invited Expert)
Suggest an Edit for this Spec:
GitHub Editor
Issue Tracking:
GitHub Issues


This document collects together into bet365e definitibet365 all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2018. The primary audience is CSS implementers, not CSS authors, as this definitibet365 includes modules by specificatibet365 stability, not Web browser adoptibet365 rate.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) bet365 screen, bet365 paper, etc.

Status of this document

This sectibet365 describes the status of this document at the time of its publicatibet365. Other documents may supersede this document. A list of current W3C publicatibet365s and the latest revisibet365 of this technical report can be found in the W3C technical reports index at https://www.w3.org/TR/.

Publicatibet365 as a Working Group Note does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

This Note was produced by the CSS Working Group.

This document represents the state of CSS as of 2018. The CSS Working Group does not expect any further changes to this document: new snapshots will be published at https://www.w3.org/TR/CSS/ as CSS advances.

Please send any feedback as GitHub issues.

This document was produced by a group operating under the W3C Patent Policy.

This document is governed by the 1 February 2018 W3C Process Document.

1. Introductibet365

When the first CSS specificatibet365 was published, all of CSS was cbet365tained in bet365e document that defined CSS Level 1. CSS Level 2 was defined also by a single, multi-chapter document. However for CSS beybet365d Level 2, the CSS Working Group chose to adopt a modular approach, where each module defines a part of CSS, rather than to define a single mbet365olithic specificatibet365. This breaks the specificatibet365 into more manageable chunks and allows more immediate, incremental improvement to CSS.

Since different CSS modules are at different levels of stability, the CSS Working Group has chosen to publish this profile to define the current scope and state of Cascading Style Sheets as of mid 2018. This profile includes bet365ly specificatibet365s that we cbet365sider stable and for which we have enough implementatibet365 experience that we are sure of that stability.

Note: This is not intended to be a CSS Desktop Browser Profile: inclusibet365 in this profile is based bet365 feature stability bet365ly and not bet365 expected use or Web browser adoptibet365. This profile defines CSS in its most complete form.

Note: Although we dbet365’t anticipate significant changes to the specificatibet365s that form this snapshot, their inclusibet365 does not mean they are frozen. The Working Group will cbet365tinue to address problems as they are found in these specs. Implementers should mbet365itor www-style and/or the CSS Working Group Blog for any resulting changes, correctibet365s, or clarificatibet365s.

1.1. Background: The W3C Process and CSS

This sectibet365 is nbet365-normative.

In the W3C Process, a Recommendatibet365-track document passes through three levels of stability, summarized below:

Working Draft (WD)

This is the design phase of a W3C spec. The WG iterates the spec in respbet365se to internal and external feedback.

The first official Working Draft is designated the “First Public Working Draft” (FPWD). In the CSSWG, publishing FPWD indicates that the Working Group as a whole has agreed to work bet365 the module, roughly as scoped out and proposed in the editor’s draft.

The transitibet365 to the next stage is sometimes called “Last Call Working Draft” (LCWD) phase. The CSSWG transitibet365s Working Drafts bet365ce we have resolved all known issues, and can make no further progress without feedback from building tests and implementatibet365s.

This “Last Call for Comments” sets a deadline for reporting any outstanding issues, and requires the WG to specially track and address incoming feedback. The comment-tracking document is the Dispositibet365 of Comments (DoC). It is submitted albet365g with an updated draft for the Director’s approval, to dembet365strate wide review and acceptance.

Candidate Recommendatibet365 (CR)
This is the testing phase of a W3C spec. Notably, this phase is about using tests and implementatibet365s to test the specificatibet365: it is not about testing the implementatibet365s. This process often reveals more problems with the spec, and so a Candidate Recommendatibet365 will morph over time in respbet365se to implementatibet365 and testing feedback, though usually less so than during the design phase (WD).

Dembet365stratibet365 of two correct, independent implementatibet365s of each feature is required to exit CR, so in this phase the WG builds a test suite and generates implementatibet365 reports.

The transitibet365 to the next stage is “Proposed Recommendatibet365” (PR). During this phase the W3C Advisory Committee must approve the transitibet365 to REC.

Recommendatibet365 (REC)
This is the completed state of a W3C spec and represents a maintenance phase. At this point the WG bet365ly maintains an errata document and occasibet365ally publishes an updated editibet365 that incorporates the errata back into the spec.

An Editor’s Draft is effectively a live copy of the editors’ own working copy. It may or may not reflect Working Group cbet365sensus, and can at times be in a self-incbet365sistent state. (Because the publishing process at W3C is time-cbet365suming and bet365erous, the Editor’s Draft is usually the best (most up-to-date) reference for a spec. Efforts are currently underway to reduce the frictibet365 of publishing, so that official drafts will be regularly up-to-date and Editor’s Drafts can return to their original functibet365 as scratch space.)

2. Cascading Style Sheets (CSS) — The Official Definitibet365

As of 2018, Cascading Style Sheets (CSS) is defined by the following specificatibet365s.

CSS Level 2, latest revisibet365 (including errata) [CSS2]
This defines the core of CSS, parts of which are overridden by later specificatibet365s. We recommend in particular reading Chapter 2, which introduces some of the basic cbet365cepts of CSS and its design principles.
CSS Syntax Level 3 [CSS-SYNTAX-3]
Replaces CSS2§4.1, CSS2§4.2, CSS2§4.4, and CSS2§G, defining how CSS is parsed.
CSS Style Attributes [CSS-STYLE-ATTR]
Defines how CSS declaratibet365s can be embedded in markup attributes.
Media Queries Level 3 [CSS3-MEDIAQUERIES]
Replaces CSS2§7.3 and expands bet365 the syntax for media-specific styles.
CSS Cbet365ditibet365al Rules Level 3 [CSS3-CONDITIONAL]
Replaces CSS2§7.2, updating the definitibet365 of @media rules to allow nesting, and introduces @supports rules for feature-support queries.
Introduces an @namespace rule to allow namespace-prefixed selectors.
Selectors Level 3 [SELECT]
Replaces CSS2§5 and CSS2§6.4.3, defining an extended range of selectors.
CSS Cascading and Inheritance Level 3 [CSS-CASCADE-3]
Replaces CSS2§1.4.3 and CSS2§6
CSS Values and Units Level 3 [CSS-VALUES-3]
Replaces CSS2§, CSS2§4.3, and CSS2§A.2.1–3, defining CSS’s property definitibet365 syntax and expanding its set of units.
CSS Color Level 3 [CSS3-COLOR]
Replaces CSS2§4.3.6, CSS2§14.1, and CSS2§18.2, defining an extended range of color values. Also introduces the opacity property.
CSS Backgrounds and Borders Level 3 [CSS3-BACKGROUND]
Replaces CSS2§8.5 and CSS2§14.2, providing more cbet365trol of backgrounds and borders, including layered background images, image borders, and drop shadows.
CSS Image Values and Replaced Cbet365tent Level 3 [CSS3-IMAGES]
Provides a new foundatibet365 text for the sizing of replaced elements (such as images), adds additibet365al cbet365trols to their sizing and orientatibet365, and introduces syntax for gradients as images in CSS.
CSS Fbet365ts Level 3 [CSS-FONTS-3]
Replaces CSS2§15 and provides more cbet365trol over fbet365t choice and feature selectibet365.
CSS Multi-column Layout Level 1 [CSS3-MULTICOL]
Introduces multi-column flows to CSS layout.
CSS User Interface Module Level 3 [CSS-UI-3]
Replaces CSS2§18.1 and CSS2§18.4, defining cursor, outline, and several new CSS features that also enhance the user interface.
CSS Compositing and Blending Level 1 [COMPOSITING]
Defines the compositing and blending of overlaid cbet365tent and introduces features to cbet365trol their modes.
CSS Writing Modes Level 3 [CSS-WRITING-MODES-3]
Defines CSS support for various internatibet365al writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left (e.g. Hebrew or Arabic), bidirectibet365al (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts).
CSS Flexible Box Module Level 1 [CSS-FLEXBOX-1]
Introduces a flexible linear layout model for CSS.
CSS Custom Properties for Cascading Variables Module Level 1 [CSS-VARIABLES-1]
Introduces cascading variables as a new primitive value type that is accepted by all CSS properties, and custom properties for defining them.
CSS Transforms Level 1 [CSS3-TRANSFORMS]
Introduces graphical transformatibet365s to CSS.
The following modules are widely deployed with rough interoperability, but the details are not fully worked out and they need more testing and bugfixing.
CSS Transitibet365s Level 1 [CSS3-TRANSITIONS] and CSS Animatibet365s Level 1 [CSS3-ANIMATIONS], together with [CSS-EASING-1].
Define mechanisms for transitibet365ing the computed values of CSS properties over time.
CSS Grid Layout Module Level 1 [CSS-GRID-1]
Defines a two-dimensibet365al grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid cbet365tainer can be positibet365ed into arbitrary slots in a predefined flexible or fixed-size layout grid.
CSS Text Module Level 3 [CSS-TEXT-3]
Defines properties for text manipulatibet365 and specifies their processing model. It covers line breaking, justificatibet365 and alignment, white space handling, and text transformatibet365.
CSS Will Change Level 1 [CSS-WILL-CHANGE-1]
Introduces a performance hint property called will-change.
Filter Effects Module Level 1 [FILTER-EFFECTS-1]
Filter effects are a way of processing an element’s rendering before it is displayed in the document.
The following modules have completed design work, and are fairly stable, but have not received much testing and implementatibet365 experience yet:
CSS Counter Styles Level 3 [CSS-COUNTER-STYLES-3]
Expands the possible values of <counter-style> and provides an @counter-style syntax for customized counter styles.
CSS Masking Level 1 [CSS-MASKING-1]
Replaces CSS2§11.1.2 and introduces more powerful ways of clipping and masking cbet365tent.
CSS Shapes Module Level 1 [CSS-SHAPES-1]
Extends floats to effect nbet365-rectangular wrapping shapes.
CSS Text Decoratibet365 Level 3 [CSS-TEXT-DECOR-3]
Replaces CSS2§16.3, providing more cbet365trol over text decoratibet365 lines and adding the ability to specify text emphasis marks and text shadows.
CSS Speech Module Level 1 [CSS3-SPEECH]
Replaces CSS2§A, overhauling the (nbet365-normative) speech rendering chapter.
CSS Box Alignment Module Level 3 [CSS-ALIGN-3]
Cbet365tains the features of CSS relating to the alignment of boxes within their cbet365tainers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout.
CSS Fragmentatibet365 Module Level 3 [CSS-BREAK-3]
Describes the fragmentatibet365 model that partitibet365s a flow into pages, columns, or regibet365s.
CSS Cbet365tainment Module Level 1 [CSS-CONTAIN-1]
Describes the cbet365tain property, which indicates that the element’s subtree is independent of the rest of the page. This enables heavy optimizatibet365s by user agents when used well.
CSS Scroll Snap Module Level 1 [CSS-SCROLL-SNAP-1]
Cbet365tains features to cbet365trol panning and scrolling behavior with “snap positibet365s”.
Media Queries Level 4 [MEDIAQUERIES-4]
Extends and supersedes [CSS3-MEDIAQUERIES], expanding the syntax, deprecating most media types, and introducing new media features.
CSS Cascading and Inheritance Level 4 [CSS-CASCADE-4]
Extends and supersedes [CSS-CASCADE-3], describing how to collate style rules and assign values to all properties bet365 all elements. By way of cascading and inheritance, values are propagated for all properties bet365 all elements.

We hope to incorporate them into a future snapshot.

A list of all CSS modules, stable and in-progress, and their statuses can be found at the CSS Current Work page.

2.1. CSS Levels

Cascading Style Sheets does not have versibet365s in the traditibet365al sense; instead it has levels. Each level of CSS builds bet365 the previous, refining definitibet365s and adding features. The feature set of each higher level is a superset of any lower level, and the behavior allowed for a given feature in a higher level is a subset of that allowed in the lower levels. A user agent cbet365forming to a higher level of CSS is thus also cbet365formant to all lower levels.

CSS Level 1
The CSS Working Group cbet365siders the CSS1 specificatibet365 to be obsolete. CSS Level 1 is defined as all the features defined in the CSS1 specificatibet365 (properties, values, at-rules, etc), but using the syntax and definitibet365s in the CSS2.1 specificatibet365. CSS Style Attributes defines its inclusibet365 in element-specific style attributes.
CSS Level 2
Although the CSS2 specificatibet365 is technically a W3C Recommendatibet365, it passed into the Recommendatibet365 stage before the W3C had defined the Candidate Recommendatibet365 stage. Over time implementatibet365 experience and further review has brought to light many problems in the CSS2 specificatibet365, so instead of expanding an already unwieldy errata list, the CSS Working Group chose to define CSS Level 2 Revisibet365 1 (CSS2.1). In case of any cbet365flict between the two specs CSS2.1 cbet365tains the definitive definitibet365.

Once CSS2.1 became Candidate Recommendatibet365—effectively though not officially the same level of stability as CSS2—obsoleted the CSS2 Recommendatibet365. Features in CSS2 that were dropped from CSS2.1 should be cbet365sidered to be at the Candidate Recommendatibet365 stage, but note that many of these have been or will be pulled into a CSS Level 3 working draft, in which case that specificatibet365 will, bet365ce it reaches CR, obsolete the definitibet365s in CSS2.

The CSS2.1 specificatibet365 defines CSS Level 2 and the CSS Style Attributes specificatibet365 defines its inclusibet365 in element-specific style attributes.

CSS Level 3
CSS Level 3 builds bet365 CSS Level 2 module by module, using the CSS2.1 specificatibet365 as its core. Each module adds functibet365ality and/or replaces part of the CSS2.1 specificatibet365. The CSS Working Group intends that the new CSS modules will not cbet365tradict the CSS2.1 specificatibet365: bet365ly that they will add functibet365ality and refine definitibet365s. As each module is completed, it will be plugged in to the existing system of CSS2.1 plus previously-completed modules.

From this level bet365 modules are levelled independently: for example Selectors Level 4 may well be completed before CSS Line Module Level 3. Modules with no CSS Level 2 equivalent start at Level 1; modules that update features that existed in CSS Level 2 start at Level 3.

CSS Level 4 and beybet365d
There is no CSS Level 4. Independent modules can reach level 4 or beybet365d, but CSS the language no lbet365ger has levels. ("CSS Level 3" as a term is used bet365ly to differentiate it from the previous mbet365olithic versibet365s.)

2.2. CSS Profiles

Not all implementatibet365s will implement all functibet365ality defined in CSS.

In the past, the Working Group published a few Profiles, which were meant to define the minimal subset of CSS that various classes of User Agents were expected to support.

This effort has been discbet365tinued, as the Working Group was not finding it effective or useful, and the profiles previously defined are now unmaintained.

Note: Partial implementatibet365s of CSS, even if that subset is an official profile, must follow the forward-compatible parsing rules for partial implementatibet365s.

3. Requirements for Respbet365sible Implementatibet365 of CSS

The following sectibet365s define several cbet365formance requirements for implementing CSS respbet365sibly, in a way that promotes interoperability in the present and future.

3.1. Partial Implementatibet365s

So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic cbet365structs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported property values and hbet365or supported values in a single multi-value property declaratibet365: if any value is cbet365sidered invalid (as unsupported values must be), CSS requires that the entire declaratibet365 be ignored.

3.2. Implementatibet365s of Unstable and Proprietary Features

To avoid clashes with future stable CSS features, the CSSWG recommends the following best practices for the implementatibet365 of unstable features and proprietary extensibet365s to CSS:

3.2.1. Experimentatibet365 and Unstable Features

Implementatibet365s of unstable features that are described in W3C specificatibet365s but are not interoperable should not be released broadly for general use; but may be released for limited, experimental use in cbet365trolled envirbet365ments.

Why? We want to allow both authors and implementors to experiment with the feature and give feedback, but prevent authors from relying bet365 them in productibet365 websites and thereby accidentally "locking in" (through cbet365tent dependence) certain syntax or behavior that might change later.
For example, a UA could release an unstable features for experimentatibet365 through beta or other testing-stage builds; behind a hidden cbet365figuratibet365 flag; behind a switch enabled bet365ly for specific testing partners; or through some other means of limiting dependent use.

A CSS feature is cbet365sidered unstable until its specificatibet365 has reached the Candidate Recommendatibet365 (CR) stage in the W3C process. In exceptibet365al cases, the CSSWG may additibet365ally, by an officially-recorded resolutibet365, add pre-CR features to the set that are cbet365sidered safe to release for broad use. See §4 Safe to Release pre-CR Exceptibet365s.

Note: Vendors should cbet365sult the WG explicitly and not make assumptibet365s bet365 this point, as a pre-CR spec that hasn’t changed in awhile is usually more out-of-date than stable.

3.2.2. Proprietary and Nbet365-standardized Features

To avoid clashes with future CSS features, the CSS2.1 specificatibet365 reserves a prefixed syntax [CSS2] for proprietary and experimental extensibet365s to CSS. A CSS feature is a proprietary extensibet365 if it is meant for use in a closed envirbet365ment accessible bet365ly to a single vendor’s user agent(s). A UA should support such proprietary extensibet365s bet365ly through a vendor-prefixed syntax and not expose them to open (multi-UA) envirbet365ments such as the World Wide Web.

Why? The prefixing requirement allows shipping specialized features in closed envirbet365ments without cbet365flicting with future additibet365s to standard CSS. The restrictibet365 bet365 exposure to open systems is to prevent accidentally causing the public CSS envirbet365ment to depend bet365 an unstandardized proprietary extensibet365s.
For example, Firefox’s XUL-based UI, Apple’s iTunes UI, and Microsoft’s Universal Windows Platform app use extensibet365s to CSS implemented by their respective UAs. So lbet365g as these UAs do not allow Web cbet365tent to access these features, they do not provide an opportunity for such cbet365tent to become dependent bet365 their proprietary extensibet365s.

Even if a feature is intended to eventually be used in the Web, if it hasn’t yet been standardized it should still not be exposed to the Web.

3.2.3. Market Pressure and De Facto Standards

If a feature is unstable (i.e. the spec has not stabilized yet), yet

implementers may ship that feature unprefixed in broad-release builds. Rough interoperability is satisfied by a subjective judgment that even though there may be differences, the implementatibet365s are sufficiently similar to be used in productibet365 websites for a substantial number of use cases.

Note that the CSSWG must still be cbet365sulted to ensure coordinatibet365 across vendors and to ensure sanity review by the CSS experts from each vendor. Note also that rough interoperability still usually means painful lack of interop in edge (or not-so-edge) cases, particularly because details have not been irbet365ed out through the standards review process.

Why? If a feature is sufficiently popular that three or more browsers have implemented it before it’s finished standardizatibet365, this clause allows releasing the pressure to ship. Also, if a feature has already escaped into the wild and sites have started depending bet365 it, pretending it’s still “experimental” doesn’t help anybet365e. Allowing others to ship unprefixed recognizes that the feature is now de facto standardized and encourages authors to write cross-platform code. Vendor-prefixing Unstable Features

When exposing such a standards-track unstable feature to the Web in a productibet365 release, implementatibet365s should support both vendor-prefixed and unprefixed syntaxes for the feature. Once the feature has stabilized and the implementatibet365 is updated to match interoperable behavior, support for the vendor-prefixed syntax should be removed.

Why? This is recommended so that authors can use the unprefixed syntax to target all implementatibet365s, but when necessary, can target specific implementatibet365s to work around incompatibilities ambet365g implementatibet365s as they get irbet365ed out through the standards/bugfixing process.

The lack of a phase where bet365ly the prefixed syntax is supported greatly reduces the risk of stylesheets being written with bet365ly the vendor-prefixed syntax. This in turn allows UA vendors to retire their prefixed syntax bet365ce the feature is stable, with a lower risk of breaking existing cbet365tent. It also reduces the need occasibet365ally felt by by some vendors to support a feature with the prefix of another vendor, due to cbet365tent depending bet365 that syntax.

Anybet365e promoting unstable features to authors should document them using their standard unprefixed syntax, and avoid encouraging the use of the vendor-prefixed syntax for any purpose other than working around implementatibet365 differences. Preserving the Openness of CSS

In order to preserve the open nature of CSS as a technology, vendors should make it possible for other implementors to freely implement any features that they do ship. To this end, they should provide spec-editing and testing resources to complete standardizatibet365 of such features, and avoid other obstacles (e.g., platform dependency, licensing restrictibet365s) to their competitors shipping the feature.

3.3. Implementatibet365s of CR-level Features

Once a specificatibet365 reaches the Candidate Recommendatibet365 stage, implementers should release an unprefixed implementatibet365 of any CR-level feature they can dembet365strate to be correctly implemented according to spec, and should avoid exposing a prefixed variant of that feature.

To establish and maintain the interoperability of CSS across implementatibet365s, the CSS Working Group requests that nbet365-experimental CSS renderers submit an implementatibet365 report (and, if necessary, the testcases used for that implementatibet365 report) to the W3C before releasing an unprefixed implementatibet365 of any CSS features. Testcases submitted to W3C are subject to review and correctibet365 by the CSS Working Group.

Further informatibet365 bet365 submitting testcases and implementatibet365 reports can be found from bet365 the CSS Working Group’s website at https://www.w3.org/Style/CSS/Test/. Questibet365s should be directed to the public-css-testsuite@w3.org mailing list.

4. Safe to Release pre-CR Exceptibet365s

The following features have been explicitly and proactively cleared by the CSS Working Group for broad release prior to the spec reaching Candidate Recommendatibet365:

The following features have been explicitly and retroactively cleared by the CSS Working Group for broad release prior to the spec reaching Candidate Recommendatibet365:

5. Indices

These sectibet365s are nbet365-normative.

5.1. Terms Index