Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）は、HTML や XML の要素をどのように修飾（表示）するかを指示する仕様の一つで、World Wide Web Consortium (W3C) がとりまとめ勧告する。文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。

CSS は HTML で表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。以下の点を特徴とする。

 ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変化させることができる。
 ユーザーエージェント（多くの場合ウェブブラウザ）、ウェブサイト制作者、ユーザがそれぞれ定義した CSS のもたらす効果を重ね合わせる（カスケードする）ことができるただし拡張・修正の続いているCSS仕様の全てを完全に実装しているユーザーエージェントは事実上皆無といってよく、実際シェアで多数を占めるユーザエージェントは部分対応にすぎない。しかし実用上支障のないレベルの実装はされてきており、なおかつ表現の互換性についても考慮されてきている。。

CSS は、1994年にWWW生誕の地である CERN に勤務するホーコン・ウィウム・リーにより提唱された。

 記述
スタイルの情報は読み込む内容（作成者スタイルシート）やユーザーエージェントの設定（ユーザースタイルシート）の2か所に記載できる。ユーザーエージェントも独自のスタイル（デフォルトスタイルシート）を持っている。

作成者スタイルシートはマークアップ文書の中に直接記述するか、別文書として読み込ませる形で利用される。CSS の利便性を最大限発揮するために、別文書として読み込ませる事が推奨されている。

 記述方法
ここでは CSS Level 2 について説明する。CSS の文法は異なるレベル間でも後方互換性を持つように設計されており、例えば CSS Level 1 で書かれたスタイルシートを CSS Level 2 として扱うことも可能である（ただし一部に解釈の相違などに伴う非互換部分も存在する）。CSS では要素にスタイルを与えるため、次のような仕様が定められている。

以下のCSS断片を例にとる。

p#id { color: #ff3300 }

 { から } までの部分を宣言ブロックという
 p#id をセレクタ（選択子）といい、スタイルが適用される対象をしめす
 宣言ブロックとセレクタを合わせて規則集合という
 color: #ff3300 部分を宣言という
 宣言の内、: より前（上例では color ）をプロパティ（特性）という
 宣言の内、: より後（上例では #ff3300 ）を値という

上例の CSS 断片を適用すると宣言している文書のうち、セレクタが指定しているものと一致する部位（HTML 文書においては要素、要素の親子関係、特定のクラス、ID など）に、宣言ブロック内の宣言が適用される。宣言は、「プロパティ: 値」か、「空（何も記述しない）」のどちらかで構成され、プロパティ、: 、値の前後には空白文字（スペース、タブ、改行など）を自由に入れられ、また ; で区切ることにより宣言を並べて書くことができる。

上例は HTML 文書に適用する場合、「 id という ID を持った p 要素の文字色を赤 FF(=255) 、緑 33(=51) 、青 0 にせよ」という指定を意味する。

color: #ff3300;
width: 35%

color: "#0033ff";
width: '53%'

このような宣言があったとき、後者二つは " や ' を付したために不正である。なぜなら、" や ' で囲ったものは文字列として扱われ、color プロパティが取りうる色の値（ #rrggbb 、rgb([0-255], [0-255], [0-255]) 、または、 black や red などのキーワードなど）ではないからである。また、

p#id { color: #ff3300 }
p#id { font-size: 24px }

は、

p#id { color: #ff3300; font-size: 24px }

と等価である。; は前者のように宣言をセレクタに一つずつ書いてあるのを、ひとつのセレクタのブロックで記述するときに宣言を分けるのに使う。そのため、必ずしも宣言に ; をつけるのを強制するものではない。

セレクタは、実装レベルの高いブラウザならばどの属性であっても CSS を適用することが可能であり、この場合 ID に関する属性セレクタであるので、#id は [id="id"] と等価である。セレクタの簡単なマッチングが可能である。
そのほかHTMLタグに対する適用、文書構造からみた子・兄妹構造へ適用するセレクタ、更にはリンクや動的な表現・言語に関する疑似クラス( :link 、:hover 、:lang )などがある。

 優先順位
CSS は必ずしも一つのところで一意に指定できず、そのため指定内容の衝突を避けるために優先順位がユーザーエージェントによって計算される。その結果は、以下のような条件により算出される。

 作成者スタイルシートはユーザースタイルシートより優先される
 デフォルトスタイルシートは他のスタイルシートを優先する
 最重要指定されている宣言はユーザースタイルシートが作成者スタイルシートより優先される（CSS1 では逆）
 外部から読み込んだものは読み込んだ先とまとめて扱う
 詳細度によって整理する
 そのセレクタ内で指定先を一意に決められるもの（ID の類）が多い方を優先する
 ID の類による優先順位が同じ場合は、属性や擬似クラスの数が多い方を優先する
 それでも優先順位が決まらない場合は、要素の数が多い方を優先する
 これでもまだ優先順位が同一の場合、作成者スタイルシートにおいて以下の順で優先する
 インラインのもの
 外部からのもの
 HTML の align 属性など、CSS 以外によるスタイルの指定は、それと等価な CSS によるスタイル指定が製作者スタイルシートの先頭にあるものとして扱う。ただし、これらの詳細度は最も低いものとする（CSS1 においては要素名による指定を一つだけ含むセレクタと同じ詳細度）

記載可能な方法の詳細は次の通りで、一般的に優先される順位で並べ替えている（CSS2で最重要指定の優先順位の仕様が変更されている、勧告6章4）。

 ユーザスタイルシート中で最重要指定された宣言 - ユーザーエージェントの設定のスタイルの中で !important を宣言に付加する
 作成者スタイルシート中で最重要指定された宣言 - 作成者が内容に付随させたスタイル中で !important を宣言に付加する。
 作成者スタイルシート中の通常の宣言
 ユーザースタイルシート中の通常の宣言
 デフォルトスタイルシートの宣言

作成者スタイルシートの記述方法による優先順位は以下の通り。
 特定の要素にスタイルを記述する
 HTML や XML のヘッダ部にそのページ全体を対象にスタイルを定義する
 CSS のみを記述した外部ファイルを用意し、HTML ファイルのヘッダ部からリンクを張ってスタイルを参照させる

 勧告等
CSS の仕様にはレベルという段階があり、2011年11月段階で、Level 1 から Level 4 までの仕様が公開されている。

 Cascading Style Sheets, level 1 (CSS1), 勧告 1996年12月
 フォントプロパティ
 色および背景のプロパティ
 テキストプロパティ
 語間の調整
 行寄せ
 ボックスプロパティ
 マージン
 ボーダー
 パディング
 類別プロパティ
 表示
 リスト
ボックスモデルの参考図
マージン
ボーダー
パディング
内容
パディング
ボーダー
マージン
ボックスに width 属性を設定したとき、W3C のボックスのモデルでは内容の横幅であると解釈される。そしてパディングとボーダー分の横幅は要素の横幅に追加される。

他方マイクロソフトのボックスのモデルでは width 属性は内容の横幅とパディングとボーダー分を足したもの、すなわち要素全ての横幅になる:en:Internet Explorer box model bug。そのため Internet Explorer 5.5 以下と 6.0 以上および Internet Explorer 以外のWebブラウザでの表示を近づけるためには、パディングとボーダーを0にする、もしくはCSSハックを使う必要がある。

Internet Explorer 6 では DOCTYPE が正確ならば標準準拠モードに移行できる（ただ XML や XHTML の場合、XML 宣言を仕様通り書くと過去互換モードでレンダリングされるバグがある）。

 Cascading Style Sheets, level 2 (CSS2), 勧告 1998年5月
CSS2 は CSS1 の上位互換。幾つかの概念の追加・拡大・改訂が行われた。

具体的には表示媒体（モニターや TV、紙媒体など）によって自動的にスタイルシートを変更できるようにし、それに附随して音声ブラウザへの対応、印刷媒体への対応が行われ、フォントなどの表示機能の拡張や、ボックスの概念の修正などが行われた。

ただし2002年頃以降に発表されたCSS対応UAで、これを仕様と見なしているものは存在せず、実質的に、CSS2.1 に仕様としての役割を委ねた形になっている。CSS2勧告の仕様書にアクセスすると、CSS2 は管理されておらず、仕様の参照や実装は CSS 2.1 を基にせよと奨励する注意書きがある。

 Cascading Style Sheets, level 2 revision 1 (CSS 2.1), 勧告 2011年6月
CSS2 の改訂版。CSS2仕様書の不明瞭な定義が原因で各ユーザーエージェントのCSS2実装に非互換が生じたため、曖昧な記述を明確にする改訂が行われた。また、 text-shadow プロパティのように、CSS2 で策定されていながら長い間実装が行われなかったもの、display プロパティの run-in 値のように、複数のユーザーエージェントで相互運用性を確保できなかった機能は削除されている。それらは CSS3 以降のレベルで定義され直すことになる。

CSS の実装に際してベンダは、2002年頃から CSS2.1 を基本仕様と見なしている。

 Cascading Style Sheets, level 3 (CSS3)
サムネイル|150px|CSS3のロゴ

CSS3 以降では CSS 2.1 を中核とし、新たな機能の追加や改良をモジュールとすることで実現するものとする§2.1 CSS Levels, 『CSS Snapshot 2015』  W3C。ユーザーエージェントは各モジュールへ対応するか否かを自由に選択できるようになる他、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。2018年7月現在で勧告されているモジュールは以下の通り。
+ Summary of main module-specificationsModuleSpecification titleStatusDatecss3-backgroundCSS Backgrounds and Borders Module Level 3 Candidate Rec.  css3-boxCSS basic box modelWorking Draft,  css-cascade-3CSS Cascading and Inheritance Level 3 Candidate Rec.  css3-colorCSS Color Module Level 3Recommendation  css3-contentCSS3 Generated and Replaced Content Module Working Draft  css-fonts-3CSS Fonts Module Level 3Candidate Rec.  css3-gcpmCSS Generated Content for Paged Media ModuleWorking Draft  css3-layoutCSS Template Layout ModuleNote  css3-mediaqueries Media QueriesRecommendation  mediaqueries-4 Media Queries Level 4Candidate Rec.  css3-multicol Multi-column Layout Module Level 1Working Draft  css3-pageCSS Paged Media Module Level 3Working Draft  selectors-3Selectors Level 3Candidate Rec.  selectors-4Selectors Level 4Working Draft  css3-uiCSS Basic User Interface Module Level 3 (CSS3 UI)Recommendation

 Cascading Style Sheets, Level 4 (CSS4)

CSS4 はモジュール化されたため、単一の統合された仕様は存在せず、「Level 4」モジュールの総称となる。

Level 4 モジュールで追加される機能は、Level 3 モジュールで未定義だった新しい機能のほか、草案に一度含まれながら、相互運用性を十分に確保出来ず仕様から省かれた機能からなる。

未だに勧告候補に至っていない Level 3 モジュールが存在する中、既に Level 4 モジュールの公開草案がいくつか公開されている。

 脚注

 注釈

 出典

 関連項目
 スタイルシート
 XSL
 DSSSL
 リキッドデザイン
 ホーコン・ウィウム・リー
 CSSの拡張
 LESS
 Sass

 外部リンク

 W3C
 Cascading Style Sheets home page
 Cascading Style Sheets, level 1 (CSS1)
 Cascading Style Sheets, level 2 (CSS2)
 Cascading Style Sheets, level 2 revision 1 (CSS2.1)
 Cascading Style Sheets (CSS) Snapshots
 CSS current work & how to participate
 勧告・ノートの非公式日本語訳
 段階スタイルシート 水準1(CSS1) 標準情報(TR) TR X 0011:1998
 段階スタイルシート 水準2(CSS2) 標準情報(TR) TR X 0032:2000
 CSS2勧告邦訳について
 CSS2.1勧告の日本語訳について
 セレクタ Level 3
 CSS 名前空間モジュール
 CSS カラーモジュール Level 3
 CSS スナップショット 2010
ウェブブラウザ
 MSDN Library - Cascading Style Sheets
 CSS - MDC
その他
 W3C CSS 検証サービス
 CSS2 tests by Peter-Paul Koch
 Box model hack
 Another box model workaround
 CSS Panic Guide - a fast resource
 CSS-discus wiki - A wiki dedicated to CSS
 Acid2 Test
CSSフレームワーク
 ブートストラップユーザーインターフェイスキット - MDBootstrap

Category:W3C勧告
Category:World Wide Web
Category:スタイルシート言語
Category:HTML
mk:CSS селектори

1. Introduction
When the first CSS specification was published, all of CSS was contained in one document that defined CSS Level 1. CSS Level 2 was defined also by a single, multi-chapter document. However for CSS beyond 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 monolithic specification. This breaks the specification 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 2021.
1.1. Background: The W3C Process and CSS
This section is non-normative.
In the W3C Process, a Recommendation-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 response 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 on the module, roughly as scoped out and proposed in the editor’s draft.
The transition to the next stage is sometimes called “Last Call Working Draft” (LCWD) phase. The CSSWG transitions Working Drafts once we have resolved all known issues, and can make no further progress without feedback from building tests and implementations.
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 Disposition of Comments (DoC). It is submitted along with an updated draft for the Director’s approval, to demonstrate wide review and acceptance.
- Candidate Recommendation (CR)
- This is the testing phase of a W3C spec. Notably, this phase is about using tests and implementations to test the specification: it is not about testing the implementations. This process often reveals more problems with the spec, and so a Candidate Recommendation will morph over time in response to implementation and testing feedback, though usually less so than during the design phase (WD).
Demonstration of two correct, independent implementations of each feature is required to exit CR, so in this phase the WG builds a test suite and generates implementation reports.
The transition to the next stage is “Proposed Recommendation” (PR). During this phase the W3C Advisory Committee must approve the transition to REC.
- Recommendation (REC)
- This is the completed state of a W3C spec and represents a maintenance phase. At this point the WG only maintains an errata document and occasionally publishes an updated edition 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 consensus, and can at times be in a self-inconsistent state. (Because the publishing process at W3C is time-consuming and onerous, the Editor’s Draft is usually the best (most up-to-date) reference for a spec. Efforts are currently underway to reduce the friction of publishing, so that official drafts will be regularly up-to-date and Editor’s Drafts can return to their original function as scratch space.)
2. Classification of CSS Specifications
A list of all CSS modules, stable and in-progress, and their statuses can be found at the CSS Current Work page.
2.1. Cascading Style Sheets (CSS) — The Official Definition
This profile includes only specifications that we consider stable and for which we have enough implementation experience that we are sure of that stability.
Note: This is not intended to be a CSS Desktop Browser Profile: inclusion in this profile is based on feature stability only and not on expected use or Web browser adoption. This profile defines CSS in its most complete form.
Note: Although we don’t anticipate significant changes to the specifications that form this snapshot, their inclusion does not mean they are frozen. The Working Group will continue to address problems as they are found in these specs. Implementers should monitor www-style and/or the CSS Working Group Blog for any resulting changes, corrections, or clarifications.
As of 2021, Cascading Style Sheets (CSS) is defined by the following specifications.
- CSS Level 2, latest revision (including errata) [CSS2]
- This defines the core of CSS, parts of which are overridden by later specifications. We recommend in particular reading Chapter 2, which introduces some of the basic concepts 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, redefining how CSS is parsed.
- CSS Style Attributes [CSS-STYLE-ATTR]
- Defines how CSS declarations can be embedded in markup attributes.
- Media Queries Level 3 [CSS3-MEDIAQUERIES]
- Replaces CSS2§7.3 and expands on the syntax for media-specific styles.
- CSS Conditional Rules Level 3 [CSS-CONDITIONAL-3]
- Extends and supersedes CSS2§7.2, updating the definition of @media rules to allow nesting and introducing the @supports rule for feature-support queries.
- Selectors Level 3 [SELECTORS-3]
- Replaces CSS2§5 and CSS2§6.4.3, defining an extended range of selectors.
- CSS Namespaces [CSS3-NAMESPACE]
- Introduces an @namespace rule to allow namespace-prefixed selectors.
- CSS Cascading and Inheritance Level 4 [CSS-CASCADE-4]
- Extends and supersedes CSS2§1.4.3 and CSS2§6, as well as [CSS-CASCADE-3]. Describes how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements.
- CSS Values and Units Level 3 [CSS-VALUES-3]
- Extends and supersedes CSS2§1.4.2.1, CSS2§4.3, and CSS2§A.2.1–3, defining CSS’s property definition syntax and expanding its set of units.
- 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 Box Model Level 3 [CSS-BOX-3]
- Replaces CSS2§8.1, §8.2, §8.3 (but not §8.3.1), and §8.4.
- CSS Color Level 3 [CSS-COLOR-3]
- Extends and supersedes CSS2§4.3.6, CSS2§14.1, and CSS2§18.2, introducing an extended range of color values. Also introduces the opacity property.
- CSS Backgrounds and Borders Level 3 [CSS-BACKGROUNDS-3]
- Extends and supersedes CSS2§8.5 and CSS2§14.2, providing more control of backgrounds and borders, including layered background images, image borders, and drop shadows.
- CSS Images Level 3 [CSS-IMAGES-3]
- Redefines and incorporates the external 2D image value type, introduces native 2D gradients, and adds additional controls for replaced element sizing and rendering.
- CSS Fonts Level 3 [CSS-FONTS-3]
- Extends and supersedes CSS2§15 and provides more control over font choice and feature selection.
- CSS Writing Modes Level 3 [CSS-WRITING-MODES-3]
- Defines CSS support for various international writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts). Replaces and extends CSS2§8.6 and §9.10.
- CSS Multi-column Layout Level 1 [CSS-MULTICOL-1]
- Introduces multi-column flows to CSS layout.
- CSS Flexible Box Module Level 1 [CSS-FLEXBOX-1]
- Introduces a flexible linear layout model for CSS.
- CSS User Interface Module Level 3 [CSS-UI-3]
- Extends and supersedes CSS2§18.1 and CSS2§18.4, defining cursor, outline, and several new CSS features that also enhance the user interface.
- CSS Containment Module Level 1 [CSS-CONTAIN-1]
- Introduces the contain property, which enforces the independent CSS processing of an element’s subtree in order to enable heavy optimizations by user agents when used well.
- CSS Transforms Level 1 [CSS-TRANSFORMS-1]
- Introduces coordinate-based graphical transformations to CSS.
- CSS Compositing and Blending Level 1 [COMPOSITING]
- Defines the compositing and blending of overlaid content and introduces features to control their modes.
- CSS Easing Functions Level 1 [CSS-EASING-1].
- Describes a way for authors to define a transformation that controls the rate of change of some value. Applied to animations, such transformations can be used to produce animations that mimic physical phenomena such as momentum or to cause the animation to move in discrete steps producing robot-like movement.
- CSS Counter Styles Level 3 [CSS-COUNTER-STYLES-3]
- Introduces the @counter-style rule, which allows authors to define their own custom counter styles for use with CSS list-marker and generated-content counters [CSS-LISTS-3]. It also predefines a set of common counter styles, including the ones present in CSS2 and CSS2.1.
2.2. Fairly Stable Modules with limited implementation experience
The following modules have completed design work, and are fairly stable, but have not received much testing and implementation experience yet. We hope to incorporate them into the official definition of CSS in a future snapshot.
- Media Queries Level 4 [MEDIAQUERIES-4]
- Extends and supersedes [CSS3-MEDIAQUERIES], expanding the syntax, deprecating most media types, and introducing new media features.
- CSS Color Level 4 [CSS-COLOR-4]
- Extends and supersedes [CSS-COLOR-3], further expanding the range of colors expressible in CSS.
- CSS Display Module Level 3 [CSS-DISPLAY-3]
- Replaces CSS2§9.1.2, §9.2.1 (but not §9.2.1.1), §9.2.2 (but not §9.2.2.1), §9.2.3, and §9.2.4 (and lays the foundations for replacing §9.7), defining how the CSS formatting box tree is generated from the document element tree and defining the display property that controls it.
- CSS Writing Modes Level 4 [CSS-WRITING-MODES-4]
- Extends and supersedes [CSS-WRITING-MODES-3], adding more options for vertical writing.
- CSS Fragmentation Module Level 3 [CSS-BREAK-3]
- Describes the fragmentation model that partitions a flow into pages, columns, or regions and defines properties that control it. Extends and supersedes CSS2§13.3.
- CSS Box Alignment Module Level 3 [CSS-ALIGN-3]
- Introduces properties to control the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout.
- CSS Shapes Module Level 1 [CSS-SHAPES-1]
- Extends floats (CSS2§9.5) to effect non-rectangular wrapping shapes.
- CSS Text Module Level 3 [CSS-TEXT-3]
- Extends and supersedes CSS2§16 excepting §16.2, defining properties for text manipulation and specifying their processing model. It covers line breaking, justification and alignment, white space handling, and text transformation.
- CSS Text Decoration Level 3 [CSS-TEXT-DECOR-3]
- Extends and supersedes CSS2§16.3, providing more control over text decoration lines and adding the ability to specify text emphasis marks and text shadows.
- CSS Masking Level 1 [CSS-MASKING-1]
- Replaces CSS2§11.1.2 and introduces more powerful ways of clipping and masking content.
- CSS Scroll Snap Module Level 1 [CSS-SCROLL-SNAP-1]
- Contains features to control panning and scrolling behavior with “snap positions”.
- CSS Speech Module Level 1 [CSS-SPEECH-1]
- Replaces CSS2§A, overhauling the (non-normative) speech rendering chapter.
- CSS Scrollbars Styling Module Level 1 [CSS-SCROLLBARS-1]
- Defines properties to influence the visual styling of scrollbars, introducing controls for their color and width.
2.3. Modules with Rough Interoperability
Although the following modules have been widely deployed with rough interoperability, their details are not fully worked out or sufficiently well-specified and they need more testing and bugfixing. We hope to incorporate them into the official definition of CSS in a future snapshot.
- CSS Transitions Level 1 [CSS-TRANSITIONS-1] and CSS Animations Level 1 [CSS-ANIMATIONS-1].
- Introduces mechanisms for transitioning the computed values of CSS properties over time.
- CSS Grid Layout Module Level 1 [CSS-GRID-1]
- Introduces a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.
- CSS Grid Layout Module Level 2 [CSS-GRID-2]
- Extends and supersedes [CSS-GRID-1], introducing “subgrids” for managing nested markup in a shared grid framework.
- 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]
- Introduces filter effects as a way of processing an element’s rendering before it is displayed in the document.
- CSS Font Loading Module Level 3 [CSS-FONT-LOADING-3]
- Introduces events and interfaces used for dynamically loading font resources.
- CSS Box Sizing Level 3 [CSS-SIZING-3]
- Overlays and extends CSS§10., expanding the value set of the sizing properties, introducing more precise sizing terminology, and defining with more precision and detail various automatic sizing concepts only vaguely defined in CSS2.
- CSS Transforms Level 2 [CSS-TRANSFORMS-2]
- Builds upon [CSS-TRANSFORMS-1] to add new transform functions and properties for three-dimensional transforms, and convenience functions for simple transforms.
- CSS Lists and Counters Module Level 3 [CSS-LISTS-3]
- Contains CSS features related to list counters: styling them, positioning them, and manipulating their value.
- CSS Logical Properties and Values Level 1 [CSS-LOGICAL-1]
- Introduces logical properties and values that provide the author with the ability to control layout through logical, rather than physical, direction and dimension mappings. Also defines logical properties and values for the features defined in [CSS2]. These properties are writing-mode relative equivalents of their corresponding physical properties.
- CSS Positioned Layout Module Level 3 [CSS-POSITION-3]
- Contains defines coordinate-based positioning and offsetting schemes of CSS: relative positioning, sticky positioning, absolute positioning, and fixed positioning.
- Resize Observer [RESIZE-OBSERVER-1]
- This specification describes an API for observing changes to element’s principal box’s size.
- Web Animations [WEB-ANIMATIONS-1]
- Defines a model for synchronization and timing of changes to the presentation of a Web page. Also defines an application programming interface for interacting with this model.
- CSS Fonts Module Level 4 [CSS-FONTS-4]
- Extends and supersedes CSS Fonts 3 and provides more control over font choice and feature selection, including support for OpenType variations.
- CSS Color Adjustment Module Level 1 [CSS-COLOR-ADJUST-1]
- This module introduces a model and controls over automatic color adjustment by the user agent to handle user preferences and device output optimizations.
2.4. CSS Levels
Cascading Style Sheets does not have versions in the traditional sense; instead it has levels. Each level of CSS builds on the previous, refining definitions 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 conforming to a higher level of CSS is thus also conformant to all lower levels.
- CSS Level 1
- The CSS Working Group considers the CSS1 specification to be obsolete. CSS Level 1 is defined as all the features defined in the CSS1 specification (properties, values, at-rules, etc), but using the syntax and definitions in the CSS2.1 specification. CSS Style Attributes defines its inclusion in element-specific style attributes.
- CSS Level 2
- Although the CSS2 specification is technically a W3C Recommendation, it passed into the Recommendation stage before the W3C had defined the Candidate Recommendation stage. Over time implementation experience and further review has brought to light many problems in the CSS2 specification, so instead of expanding an already unwieldy errata list, the CSS Working Group chose to define CSS Level 2 Revision 1 (CSS2.1). In case of any conflict between the two specs CSS2.1 contains the definitive definition.
Once CSS2.1 became Candidate Recommendation—effectively though not officially the same level of stability as CSS2—obsoleted the CSS2 Recommendation. Features in CSS2 that were dropped from CSS2.1 should be considered to be at the Candidate Recommendation stage, but note that many of these have been or will be pulled into a CSS Level 3 working draft, in which case that specification will, once it reaches CR, obsolete the definitions in CSS2.
The CSS2.1 specification defines CSS Level 2 and the CSS Style Attributes specification defines its inclusion in element-specific style attributes.
- CSS Level 3
- CSS Level 3 builds on CSS Level 2 module by module, using the CSS2.1 specification as its core. Each module adds functionality and/or replaces part of the CSS2.1 specification. The CSS Working Group intends that the new CSS modules will not contradict the CSS2.1 specification: only that they will add functionality and refine definitions. As each module is completed, it will be plugged in to the existing system of CSS2.1 plus previously-completed modules.
From this level on 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 beyond
- There is no CSS Level 4. Independent modules can reach level 4 or beyond, but CSS the language no longer has levels. ("CSS Level 3" as a term is used only to differentiate it from the previous monolithic versions.)
2.5. CSS Profiles
Not all implementations will implement all functionality 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 discontinued, as the Working Group was not finding it effective or useful, and the profiles previously defined are now unmaintained.
Note: Partial implementations of CSS, even if that subset is an official profile, must follow the forward-compatible parsing rules for partial implementations.
3. Requirements for Responsible Implementation of CSS
The following sections define several conformance requirements for implementing CSS responsibly, in a way that promotes interoperability in the present and future.
3.1. Partial Implementations
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 constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported property values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.
3.2. Implementations of Unstable and Proprietary Features
To avoid clashes with future stable CSS features, the CSSWG recommends the following best practices for the implementation of unstable features and proprietary extensions to CSS:
3.2.1. Experimentation and Unstable Features
Implementations of unstable features that are described in W3C specifications but are not interoperable should not be released broadly for general use; but may be released for limited, experimental use in controlled environments.
Why?We want to allow both authors and implementors to experiment with the feature and give feedback, but prevent authors from relying on them in production websites and thereby accidentally "locking in" (through content dependence) certain syntax or behavior that might change later.
A CSS feature is considered unstable until its specification has reached the Candidate Recommendation (CR) stage in the W3C process. In exceptional cases, the CSSWG may additionally, by an officially-recorded resolution, add pre-CR features to the set that are considered safe to release for broad use. See § 4 Safe to Release pre-CR Exceptions.
Note: Vendors should consult the WG explicitly and not make assumptions on 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 Non-standardized Features
To avoid clashes with future CSS features, the CSS2.1 specification reserves a prefixed syntax [CSS2] for proprietary and experimental extensions to CSS. A CSS feature is a proprietary extension if it is meant for use in a closed environment accessible only to a single vendor’s user agent(s). A UA should support such proprietary extensions only through a vendor-prefixed syntax and not expose them to open (multi-UA) environments such as the World Wide Web.
Why?The prefixing requirement allows shipping specialized features in closed environments without conflicting with future additions to standard CSS. The restriction on exposure to open systems is to prevent accidentally causing the public CSS environment to depend on an unstandardized proprietary extensions.
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 yet stabilized), but
at least three UAs implement the feature (or a UA has broken the other rules and shipped for broad use an unstable or otherwise non-standard feature in a production release),
and the implementations have rough interoperability,
and the CSS Working Group has recorded consensus that this feature should exist and be released,
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 implementations are sufficiently similar to be used in production websites for a substantial number of use cases.
Note that the CSSWG must still be consulted to ensure coordination across vendors and to ensure coherency 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 ironed 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 standardization, this clause allows releasing the pressure to ship. Also, if a feature has already escaped into the wild and sites have started depending on it, pretending it’s still “experimental” doesn’t help anyone. Allowing others to ship unprefixed recognizes that the feature is now de facto standardized and encourages authors to write cross-platform code.
3.2.3.1. Vendor-prefixing Unstable Features
When exposing such a standards-track unstable feature to the Web in a production release, implementations should support both vendor-prefixed and unprefixed syntaxes for the feature. Once the feature has stabilized and the implementation 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 implementations, but when necessary, can target specific implementations to work around incompatibilities among implementations as they get ironed out through the standards/bugfixing process.
The lack of a phase where only the prefixed syntax is supported greatly reduces the risk of stylesheets being written with only the vendor-prefixed syntax. This in turn allows UA vendors to retire their prefixed syntax once the feature is stable, with a lower risk of breaking existing content. It also reduces the need occasionally felt by some vendors to support a feature with the prefix of another vendor, due to content depending on that syntax.
Anyone 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 implementation differences.
3.2.3.2. 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 standardization of such features, and avoid other obstacles (e.g., platform dependency, licensing restrictions) to their competitors shipping the feature.
3.3. Implementations of CR-level Features
Once a specification reaches the Candidate Recommendation stage, implementers should release an unprefixed implementation of any CR-level feature they can demonstrate 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 implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.
Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at https://www.w3.org/Style/CSS/Test/. Questions should be directed to the public-css-testsuite@w3.org mailing list.
4. Safe to Release pre-CR Exceptions
The following features have been explicitly and proactively cleared by the CSS Working Group for broad release prior to the spec reaching Candidate Recommendation. See § 3.2.1 Experimentation and Unstable Features.
- The flow-relative equivalents of the sizing properties (width, height, etc.), the border properties, the margin and padding properties. See explanation and specification.
- The min-content and max-content keywords of the sizing properties. See decision and specification.
- The conic-gradient() gradient notation. See decision.
- The aspect-ratio property. [CSS-SIZING-4]
- The translate, rotate, and scale properties. [CSS-TRANSFORMS-2]
The following features have been explicitly and retroactively cleared by the CSS Working Group for broad release prior to the spec reaching Candidate Recommendation:
- Everything in CSS Animations Level 1 and CSS Transitions Level 1.
- The :dir(), :lang(), and :focus-within pseudo-classes from [SELECTORS-4].
5. Indices
These sections are non-normative.
5.1. Terms Index
- 100...900 weight values
- 1st <length>
- 2d matrix
- 2nd <length>
- 3rd <length [0,∞]>
- 4th <length>
- absolute length
- absolutely positioned element
- abstract dimensions
- activeborder
- activecaption
- active duration
- actual value
- actual values
- additive tuple
- adjoining
- adjoining margins
- advance measure
- after-change style
- aliceblue
- aligned subtree
- alignment baseline
- alignment container
- alignment context
- alignment subject
- 'all' media group
- all-petite-caps
- all-small-caps
- alphabetic baseline
- ambiguous image url
- an+b
- ancestor
- anchor
- anchor unit
- animation origin
- animation-tainted
- anonymous
- anonymous box
- anonymous inline boxes
- antiquewhite
- apply to
- appworkspace
- aqua
- aquamarine
- are a valid escape
- as conformance class
- aspect value
- at-keyword
- atomic inline
- atomic inline box
- atomic inline-level boxes
- at-rule
- at-rules
- attribute
- 'audio' media group
- augmented grid
- aural "box" model
- aural box model
- author
- authoring tool
- author origin
- author-origin
- author presentational hint origin
- author style sheet
- auto!!font-kerning
- automatic column position
- automatic grid position
- automatic numbering
- automatic placement
- automatic position
- automatic row position
- auto-placement
- auto-placement cursor
- available font faces
- available grid space
- avoid break values
- axis-lock
- axis value
- azure
- backdrop
- background
- background painting area
- background positioning area
- backslash escapes
- baseline
- baseline alignment
- baseline alignment preference
- baseline content-alignment
- baseline self-alignment
- baseline set
- baseline-sharing group
- baseline table
- base size
- bearing angle
- before-change style
- before flag
- beige
- bfc
- bidi formatting characters
- bidi-isolate
- bidi-isolated
- bidi isolation
- bidi paragraph
- bidirectionality
- bidirectionality (bidi)
- bi-orientational
- bi-orientational transform
- bisque
- 'bitmap' media group
- black
- blanchedalmond
- ()-block
- []-block
- block
- {}-block
- block at-rule
- block axis
- block-axis
- block box
- block boxes
- block container
- block container box
- block dimension
- block end
- block-end
- block flow direction
- block formatting context
- block formatting context root
- blockification
- blockify
- block layout
- block-level
- block-level box
- block-level boxes
- block-level content
- block-level elements
- block scripts
- block size
- block-size
- block start
- block-start
- blue
- blueviolet
- blur radius
- bold
- bolder
- boolean context
- border
- border box
- border-box
- border edge
- border image area
- border (of a box)
- border radius
- bottom
- box
- box alignment properties
- box-corner
- box fragment
- box tree
- break
- brown
- burlywood
- buttonface
- buttonhighlight
- buttonshadow
- buttontext
- cadetblue
- cancel
- canonical unit
- canvas
- canvas background
- canvas surface
- captiontext
- captures snap positions
- cascade
- cascaded value
- cascade origin
- central baseline
- character
- character encoding
- character map
- "@charset"
- chartreuse
- check if three code points would start an ident sequence
- check if three code points would start a number
- check if two code points are a valid escape
- child
- child combinator
- child selector
- chinese
- chocolate
- circled-lower-latin
- clamp a grid area
- clearance
- clearance.
- clipping path
- clipping region
- closest-side
- clustered scripts
- collapse
- collapsed
- collapsed flex item
- collapsed gutter
- collapsed margin
- collapsed track
- collapse through
- collapsible white space
- collapsing margin
- color stop
- color stop list
- color transition hint
- column box
- column break
- column gap
- column height
- column rule
- column width
- combinators
- combined duration
- comments
- common-ligatures
- compatible baseline alignment preferences
- compatible units
- complete
- completed transition
- component value
- composite face
- computed <image>
- computed track list
- computed value
- computed values
- concrete object size
- condensed
- conditional group rule
- conditional import
- conditionally hang
- conformance
- consecutive
- constraint rectangle
- consume a component value
- consume a declaration
- consume a function
- consume a list of declarations
- consume a list of rules
- consume an at-rule
- consume an escaped code point
- consume an ident-like token
- consume an ident sequence
- consume a number
- consume a numeric token
- consume a qualified rule
- consume a simple block
- consume a string token
- consume a style block's contents
- consume a token
- consume a url token
- consume comments
- consume the next input token
- consume the remnants of a bad url
- contain constraint
- containing block
- containing block chain
- containing block for all descendants
- containment
- content
- content area
- content-based minimum size
- content box
- content-box
- content distribution
- content-distribution properties
- content edge
- content height
- content language
- content (of a box)
- content size suggestion
- content width
- content writing system
- contextual
- continuous media
- 'continuous' media group
- convert a string to a number
- coordinated self-alignment preference
- coral
- cornflowerblue
- cornsilk
- counters
- counter style
- counter symbol
- cover constraint
- crimson
- cross axis
- cross-axis
- cross-axis baseline set
- cross dimension
- cross-end
- cross size
- cross-size
- cross size property
- cross-start
- css bracketed range notation
- css-connected
- css feature queries
- cssfontfacerule
- css ident
- css identifier
- css ident sequence
- css qualified name
- css-wide keywords
- cubic bézier easing function
- currentcolor
- current input code point
- current input token
- current transformation matrix
- current value
- cursive
- cursive script
- custom property
- cyan
- darkblue
- darkcyan
- darkgoldenrod
- darkgray
- darkgreen
- darkgrey
- darkkhaki
- darkmagenta
- darkolivegreen
- darkorange
- darkorchid
- darkred
- darksalmon
- darkseagreen
- darkslateblue
- darkslategray
- darkslategrey
- darkturquoise
- darkviolet
- declaration
- declaration block
- declared
- declared value
- decode bytes
- decorating box
- deeppink
- deepskyblue
- default face
- default namespace
- default object size
- default sizing algorithm
- default style sheet
- definite
- definite column position
- definite column span
- definite grid position
- definite grid span
- definite position
- definite row position
- definite row span
- definite size
- definite span
- descendant
- descendant-selectors
- descriptor
- descriptor_declaration
- descriptor declarations
- destination
- determine the fallback encoding
- diagonal-fractions
- dice
- digit
- dimension
- dimgray
- dimgrey
- directional embedding
- directional override
- discretionary-ligatures
- display
- display type
- distributed alignment
- distribute extra space
- document
- document language
- document order
- documents
- document tree
- document white space
- document white space characters
- dodgerblue
- dominant baseline
- easing function
- east asian width property
- effective character map
- element
- element tree
- empty
- empty float area
- encapsulation contexts
- end
- ending point
- ending shape
- ending token
- end time
- end value
- environment encoding
- eof code point
- escaping
- establish an independent formatting context
- establish an orthogonal flow
- established an independent formatting context
- establishes an independent formatting context
- establishing an independent formatting context
- exact matching
- expanded
- expanded name
- explicit grid
- explicit grid column
- explicit grid properties
- explicit grid row
- explicit grid track
- explicitly-assigned line name
- extra-condensed
- extra-expanded
- fallback alignment
- false in the negative range
- fantasy
- farthest-side
- fetch an @import
- fictional tag sequence
- filter code points
- filtered code points
- filter primitive
- filter primitive attributes
- filter primitive subregion
- filter primitive tree
- filter region
- find the matching font faces
- fire a font load event
- firebrick
- first available font
- first-baseline alignment
- first-baseline content-alignment
- first baselines
- first-baseline self-alignment
- first baseline set
- first cross-axis baseline set
- first formatted line
- first main-axis baseline set
- first symbol value
- fixed sizing function
- flex base size
- flex basis
- flex container
- flex direction
- flex factor
- flex factor sum
- flex formatting context
- flex fraction
- flex grow factor
- flexible
- flexible length
- flexible sizing function
- flexible tracks
- flex item
- flex layout
- flex-level
- flex line
- flex shrink factor
- float area
- float rules
- floralwhite
- flow layout
- flow of an element
- flow-relative
- flow-relative direction
- focus
- following element
- font_face_rule
- font_face_sym
- font-family
- font-kerning
- font-relative lengths
- font-size-adjust
- font source
- font-stretch
- font-style
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-weight
- footnote
- forced break
- forced break values
- forced line break
- forced paragraph break
- forestgreen
- formatting context
- formatting structure
- forward-compatible parsing
- fragment
- fragmentainer
- fragmentation
- fragmentation break
- fragmentation container
- fragmentation context
- fragmentation direction
- fragmentation root
- fragmented flow
- free space
- frequency
- fuchsia
- full-size
- full-size kana
- full-width
- fully inflexible
- function
- functional notation
- gainsboro
- general category
- generate a counter
- generate a counter representation
- generate baselines
- generated content
- ghostwhite
- go
- gold
- goldenrod
- gradient-average-color
- gradient box
- gradient center
- gradient function
- gradient line
- grapheme cluster
- gray
- graytext
- green
- greenyellow
- grey
- grid
- grid area
- grid cell
- grid column
- grid column line
- grid container
- grid formatting context
- grid item
- grid item placement algorithm
- grid layout
- grid-level
- grid line
- 'grid' media group
- grid-modified document order
- grid order
- grid placement
- grid-placement property
- grid position
- grid row
- grid row line
- grid sizing algorithm
- grid span
- grid track
- growth limit
- guaranteed-invalid value
- gutter
- half-width
- hang
- hanging glyph
- height
- hex digit
- highlight
- highlighttext
- historical-ligatures
- honeydew
- horizontal axis
- horizontal block flow
- horizontal dimension
- horizontal offset
- horizontal-only
- horizontal script
- horizontal typographic mode
- horizontal writing mode
- hotpink
- hyphenate
- hyphenation
- hyphenation opportunity
- hyphen-separated matching
- hypothetical cross size
- hypothetical fr size
- hypothetical main size
- ident
- ident code point
- identifier
- identifiers
- identity transform function
- ident sequence
- ident-start code point
- ignore
- ignored
- ignore unknown
- ignore valid
- illegal
- implicit grid
- implicit grid column
- implicit grid lines
- implicit grid properties
- implicit grid row
- implicit grid track
- implicitly-assigned line name
- implicitly-named area
- important
- import conditions
- inactiveborder
- inactivecaption
- inactivecaptiontext
- indefinite
- indefinite size
- independent formatting context
- indianred
- indigo
- infinitely growable
- in flow
- in-flow
- infobackground
- infotext
- inherit
- inheritance
- inherited property
- inherited value
- initial containing block
- initial free space
- initial representation for the counter value
- initial value
- inline
- inline axis
- inline-axis
- inline base direction
- inline block
- inline block box
- inline box
- inline dimension
- inline end
- inline-end
- inline formatting context
- inline-level
- inline-level box
- inline-level boxes
- inline-level content
- inline-level elements
- inline size
- inline-size
- inline start
- inline-start
- inlinification
- inlinify
- inner box-shadow
- inner display type
- inner edge
- input progress value
- input stream
- integer
- intended direction
- intended direction and end position
- intended end position
- 'interactive media group
- internal ruby box
- internal ruby element
- internal table box
- internal table element
- interpreter
- intrinsic dimensions
- intrinsic sizing function
- invalid
- invalid at computed-value time
- invalid image
- invisible
- isolated sequence
- isolation
- italic
- iteration order
- ivory
- japanese
- jis04
- jis78
- jis83
- jis90
- justification opportunity
- keyword
- khaki
- known
- korean
- last-baseline alignment
- last-baseline content-alignment
- last baselines
- last-baseline self-alignment
- last baseline set
- last cross-axis baseline set
- last main-axis baseline set
- lavender
- lavenderblush
- lawngreen
- laying out in-place
- layout containment
- layout containment box
- layout-internal
- left
- leftover space
- legacy name alias
- legacy shorthand
- legacy value alias
- lemonchiffon
- letter
- lightblue
- lightcoral
- lightcyan
- lighter
- lightgoldenrodyellow
- lightgray
- lightgreen
- lightgrey
- lightpink
- lightsalmon
- lightseagreen
- lightskyblue
- lightslategray
- lightslategrey
- light source
- lightsteelblue
- lightyellow
- lime
- limegreen
- limited max-content contribution
- limited min-content contribution
- linear easing function
- linear timing function
- line box
- line break
- line breaking
- line breaking process
- line-left
- linen
- line name
- line name set
- line orientation
- line-over
- line-relative
- line-relative direction
- line-right
- line-under
- lining-nums
- list properties
- list-style-image
- list-style-type
- loading image
- local coordinate system
- local url flag
- logical height
- logical width
- longhand
- longhand property
- lowercase letter
- magenta
- main axis
- main-axis
- main-axis baseline set
- main dimension
- main-end
- main size
- main-size
- main size property
- main-start
- map document language elements to table elements
- margin
- margin box
- margin-box
- margin edge
- margin (of a box)
- maroon
- mask border image
- mask border image area
- mask image
- mask layer image
- mask painting area
- mask-position
- mask positioning area
- mask-size
- matches
- matching transition delay
- matching transition duration
- matching transition-property value
- matching transition timing function
- max cross size
- max cross size property
- maximum allowed code point
- max inner height
- max inner width
- max main size
- max main size property
- max track sizing function
- may
- media condition
- media-dependent import
- media feature
- media groups
- media query
- media query list
- media query modifier
- media type
- mediumaquamarine
- mediumblue
- mediumorchid
- mediumpurple
- mediumseagreen
- mediumslateblue
- mediumspringgreen
- mediumturquoise
- mediumvioletred
- menu
- menutext
- midnightblue
- min cross size
- min cross size property
- minimum contribution
- min inner height
- min inner width
- min main size
- min main size property
- mintcream
- min track sizing function
- mistyrose
- moccasin
- monolithic
- monospace
- multicol container
- multi-col line
- multicol line
- multi-column container
- multi-column formatting context
- multi-column layout
- multi-column line
- multi-line flex container
- multiple declarations
- multiply
- must
- must not
- named cell token
- named grid area
- namespace prefix
- name-start code point
- natural aspect ratio
- natural dimension
- natural end-point
- natural height
- natural size
- natural width
- navajowhite
- navy
- newline
- next input code point
- next input token
- next-sibling combinator
- no-common-ligatures
- no-contextual
- no-discretionary-ligatures
- no-historical-ligatures
- non-ascii code point
- none!!font-kerning
- none!!font-size-adjust
- none!!font-variant-ligatures
- non-negative-number
- non-printable code point
- non-replaced
- non-replaced element
- no pending font loads
- normal
- normal!!font-kerning
- normal!!font-stretch
- normal!!font-style
- normal!!font-variant-caps
- normal!!font-variant-east-asian
- normal!!font-variant-ligatures
- normal!!font-variant-numeric
- normal!!font-variant-position
- normal!!font-weight
- normalize into a token stream
- null cell token
- number
- numeric data types
- objects
- object size negotiation
- oblique
- occupied
- oldlace
- oldstyle-nums
- olive
- olivedrab
- operating coordinate space
- optimal viewing region
- optional
- orange
- orangered
- orchid
- order-modified document order
- ordinal
- orthogonal
- orthogonal flow
- other space separators
- outer box-shadow
- outer display type
- outer edge
- out of flow
- out-of-flow
- output of the cascade
- output progress value
- over
- overflow
- overflow alignment
- overflow columns
- padding
- padding box
- padding-box
- padding edge
- padding (of a box)
- page area
- page box
- page break
- page context
- page-context
- paged media
- 'paged' media group
- page selector
- pagination
- paint containment
- paint containment box
- palegoldenrod
- palegreen
- paleturquoise
- palevioletred
- papayawhip
- parent
- parent box
- parse
- parse a comma-separated list according to a css grammar
- parse a comma-separated list of component values
- parse a component value
- parse a css stylesheet
- parse a declaration
- parse a list
- parse a list of component values
- parse a list of declarations
- parse a list of rules
- parse a rule
- parse a style block's contents
- parse a stylesheet
- parse error
- parse something according to a css grammar
- parsing a list
- participates in baseline alignment
- pass through filter
- peachpuff
- pending on the environment
- pending-substitution value
- percentage
- peru
- petite-caps
- physical
- physical bottom
- physical dimensions
- physical direction
- physical left
- physical right
- physical top
- physical units
- pink
- pixel
- pixel unit
- plum
- positional alignment
- positioned
- positioned element/box
- positioning scheme
- positioning schemes:
- possibly pending font loads
- post-multiplied
- post-multiply
- powderblue
- preceding element
- pre-multiplied
- pre-multiply
- preserved tokens
- preserved white space
- primary filter primitive tree
- principal block-level box
- principal box
- principal writing mode
- propagate
- propagation
- proper table child
- proper table row parent
- property
- property declarations
- proportional-nums
- proportional-width
- pseudo-classes
- pseudo-elements
- purple
- qualified rule
- range context
- recommended
- reconsume the current input code point
- reconsume the current input token
- red
- reference box
- reference pixel
- region break
- relative length
- relative positioning
- relative units
- remaining fragmentainer extent
- remaining free space
- rendered content
- renderer
- replaced
- replaced element
- representation
- required
- reset-only sub-property
- re-snap
- resolved type
- reversing-adjusted start value
- reversing shortening factor
- right
- root
- rosybrown
- row group box
- row groups
- royalblue
- ruby
- rule set
- rules on anonymous table objects
- run-in
- run-in box
- run-in sequence
- running transition
- saddlebrown
- salmon
- sandybrown
- sans-serif
- scaled flex shrink factor
- scope
- screen reader
- script property
- scrollbar
- scroll snap
- scroll snap area
- scroll snap container
- scroll snapport
- scroll snap position
- seagreen
- seashell
- segment break
- selector
- selector matches
- self-alignment
- self-alignment properties
- semi-condensed
- semi-expanded
- semitone
- separated borders model
- sequence of simple selectors
- serialize an <an+b> value
- serif
- set entries
- shall
- shall not
- shared alignment context
- sheets
- shorthand
- shorthand properties
- shorthand property
- should
- should not
- sibling
- sideways typesetting
- sienna
- silver
- simple block
- simple selector
- simplified
- single-line flex container
- size containment
- size containment box
- sizing as if empty
- sizing function
- skyblue
- slashed-zero
- slateblue
- slategray
- slategrey
- small
- small-caps
- small kana
- snow
- soft wrap break
- soft wrap opportunity
- source
- source document
- spaces
- space-separated matching
- space to fill
- span count
- spanner
- spanning element
- specified size
- specified size suggestion
- specified value
- specified values
- 'speech' media group
- spread break
- spread distance
- springgreen
- stacked-fractions
- stacking context
- stack level
- start
- starting point
- starts with an ident sequence
- starts with a number
- starts with a valid escape
- start time
- start value
- start with an ident sequence
- start with a number
- statement at-rule
- 'static' media group
- static-position containing block
- static position rectangle
- static-position rectangle
- steelblue
- step easing function
- step position
- steps
- stop or comma
- stretched
- strictness value
- string
- strings
- stroke bounding box
- structural pseudo-classes
- strut size
- stuck on the environment
- style attribute
- style change event
- style rule
- style sheet
- style sheet!!as conformance class
- sub
- subject (of selector)
- subjects
- subjects of the selector
- sub-property
- subsequent-sibling combinator
- substitute a var()
- super
- support
- supports queries
- switch the fontfaceset to loaded
- switch the fontfaceset to loading
- synthesize baseline
- synthesized baseline
- system font fallback
- system fonts
- table
- table caption box
- table element
- table grid box
- table wrapper box
- tabs
- tab size
- tab stop
- tabular container
- tabular-nums
- 'tactile' media group
- tan
- target main size
- teal
- text node
- text run
- textual data types
- thistle
- threeddarkshadow
- threedface
- threedhighlight
- threedlightshadow
- threedshadow
- time
- timing function
- titling-caps
- tokenization
- tokenize
- tokenizer
- tomato
- top
- tracking
- track list
- track section
- track sizing algorithm
- track sizing function
- traditional
- transfer function element
- transfer function element attributes
- transferred size suggestion
- transformable element
- transformation matrix
- transformed element
- transitionable
- transition origin
- transparent
- trash token
- triangle
- trinary
- turquoise
- type selector
- typeset sideways
- typesetting sideways
- typesetting upright
- typeset upright
- typographic character
- typographic character unit
- typographic letter unit
- typographic mode
- ua
- ua origin
- ua-origin
- ua style sheet
- ultra-condensed
- ultra-expanded
- under
- unforced break
- unicase
- unicode category
- unicode east asian width
- unicode general category
- unicode script
- unicode vertical orientation
- universal selector
- unknown
- unoccupied
- upper-alpha-legal
- uppercase letter
- upright typesetting
- url
- use a negative sign
- used value
- used values
- user
- user agent
- user-agent origin
- user-agent style sheet
- user agent (ua)
- user coordinate system
- user origin
- user-origin
- user style sheet
- uses a negative sign
- valid image
- validity
- valid style sheet
- value definition syntax
- values
- var() substitution
- vertical axis
- vertical block flow
- vertical dimension
- vertical offset
- vertical-only
- vertical orientation
- vertical script
- vertical typographic mode
- vertical writing mode
- viewport
- viewport-percentage lengths
- violet
- visual angle unit
- visual box model
- visual formatting model
- 'visual' media group
- weight
- wheat
- white
- whitesmoke
- white space
- whitespace
- white space characters
- width
- window
- windowframe
- windowtext
- word separator
- word-separator character
- would start an ident sequence
- would start a number
- wrap
- wrapping
- writing mode
- x-axis
- y-axis
- yellow
- yellowgreen
5.2. Selector Index
- *
- :active
- ::after
- :after
- ::before
- :before
- :checked
- :disabled
- :empty
- :enabled
- :first
- :first-child
- first-child
- ::first-letter
- :first-letter
- ::first-line
- :first-line
- :first-of-type
- :focus
- :hover
- :lang
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :right
- :root
- :target
- :visited
5.3. At-Rule Index
5.4. Property Index
- --*
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- azimuth
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- break-after
- break-before
- break-inside
- caption-side
- caret-color
- clear
- clip
- clip-path
- clip-rule
- color
- color-interpolation-filters
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- columns
- column-span
- column-width
- contain
- content
- counter-increment
- counter-reset
- cue
- cue-after
- cue-before
- cursor
- direction
- display
- elevation
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- flood-color
- flood-opacity
- font
- font-family
- font-feature-settings
- font-kerning
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-weight
- gap
- globalcompositeoperation
- glyph-orientation-vertical
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-gap
- grid-column-start
- grid-gap
- grid-row
- grid-row-end
- grid-row-gap
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- hanging-punctuation
- height
- hyphens
- image-orientation
- image-rendering
- isolation
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- lighting-color
- line-break
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- mask
- mask-border
- mask-border-mode
- mask-border-outset
- mask-border-repeat
- mask-border-slice
- mask-border-source
- mask-border-width
- mask-clip
- mask-composite
- mask-image
- mask-mode
- mask-origin
- mask-position
- mask-repeat
- mask-size
- mask-type
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- object-position
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-wrap
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- pause
- pause-after
- pause-before
- pitch
- pitch-range
- place-content
- place-items
- place-self
- play-during
- position
- quotes
- resize
- rest
- rest-after
- rest-before
- richness
- right
- row-gap
- scroll-margin
- scroll-margin-block
- scroll-margin-block-end
- scroll-margin-block-start
- scroll-margin-bottom
- scroll-margin-inline
- scroll-margin-inline-end
- scroll-margin-inline-start
- scroll-margin-left
- scroll-margin-right
- scroll-margin-top
- scroll-padding
- scroll-padding-block
- scroll-padding-block-end
- scroll-padding-block-start
- scroll-padding-bottom
- scroll-padding-inline
- scroll-padding-inline-end
- scroll-padding-inline-start
- scroll-padding-left
- scroll-padding-right
- scroll-padding-top
- scroll-snap-align
- scroll-snap-stop
- scroll-snap-type
- shape-image-threshold
- shape-margin
- shape-outside
- speak
- speak-as
- speak-header
- speak-numeral
- speak-punctuation
- speech-rate
- stress
- table-layout
- tab-size
- text-align
- text-align-all
- text-align-last
- text-combine-upright
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-justify
- text-orientation
- text-overflow
- text-shadow
- text-transform
- text-underline-position
- top
- transform
- transform-box
- transform-origin
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- vertical-align
- visibility
- voice-balance
- voice-duration
- voice-family
- voice-pitch
- voice-range
- voice-rate
- voice-stress
- voice-volume
- volume
- white-space
- widows
- width
- will-change
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
5.5. Values Index
-
- absolute
- add
- additive
- alias
- all
- allow-end
- all-scroll
- alpha
- alphabetic
- alternate
- alternate-reverse
- always
- <angle>
- anywhere
- aqua
- arabic-indic
- armenian
- attr(x)
- aural
- auto
- in css-align-3, for align-self
- in css-align-3, for justify-self
- in css-backgrounds-3, for background-size
- in css-backgrounds-3, for border-image-width
- in css-break-3, for break-before, break-after
- in css-break-3, for break-inside, page-break-inside
- in css-counter-styles-3, for @counter-style/range
- in css-counter-styles-3, for @counter-style/speak-as
- in css-flexbox-1, for align-items, align-self
- in css-flexbox-1, for flex-basis
- in css-grid-1, for <grid-line>
- in css-grid-1, for grid-template-columns, grid-template-rows
- in css-images-3, for image-rendering
- in css-multicol-1, for column-count
- in css-multicol-1, for column-fill
- in css-multicol-1, for column-width
- in css-scroll-snap-1, for scroll-padding, scroll-padding-inline, scroll-padding-inline-start, scroll-padding-inline-end, scroll-padding-block, scroll-padding-block-start, scroll-padding-block-end
- in css-speech-1, for speak
- in css-speech-1, for voice-duration
- in css-text-3, for hyphens
- in css-text-3, for line-break
- in css-text-3, for text-align-last
- in css-text-3, for text-justify
- in css-text-decor-3, for text-underline-position
- in css-ui-3, for caret-color
- in css-ui-3, for cursor
- in css-will-change-1, for will-change
- in css2, for <top>, <right>, <bottom>, <left>
- in css2, for clip
- in css2, for height
- in css2, for overflow
- in css2, for page-break-before, page-break-after, page-break-inside
- in css2, for table-layout
- in css2, for top, right, bottom, left
- in css2, for width
- in css2, for z-index
- in filter-effects-1, for color-interpolation-filters
- auto-fill
- auto-fit
- [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
- avoid
- avoid-column
- avoid-page
- avoid-region
- backwards
- balance
- balance-all
- baseline
- <basic-shape>
- bengali
- bidi-override
- black
- blink
- block
- blue
- bold
- bolder
- border-box
- both
- bottom
- braille
- break-all
- break-spaces
- break-word
- bullets
- cambodian
- capitalize
- caption
- cell
- center
- in css-align-3, for <self-position>, <content-position>, justify-self, align-self, justify-content, align-content
- in css-backgrounds-3, for background-position
- in css-flexbox-1, for align-content
- in css-flexbox-1, for align-items, align-self
- in css-flexbox-1, for justify-content
- in css-scroll-snap-1, for scroll-snap-align
- in css-speech-1, for voice-balance
- in css-text-3, for text-align
- in css-transforms-1, for transform-origin
- ch
- child
- circle
- cjk-decimal
- cjk-earthly-branch
- cjk-heavenly-stem
- cjk-ideographic
- clip
- clone
- close-quote
- closest-corner
- closest-side
- cm
- coarse
- collapse
- <color>
- color
- color-burn
- color-dodge
- col-resize
- column
- column-reverse
- contain
- content
- content-box
- contents
- context-menu
- copy
- <counter>
- <counter-style-name>
- cover
- crisp-edges
- crosshair
- cursive
- <custom-ident>
- cyclic
- darken
- dashed
- <decibel>
- decimal
- decimal-leading-zero
- default
- deg
- dense
- devanagari
- difference
- digits
- digits <integer>?
- disc
- disclosure-closed
- disclosure-open
- distribute
- dot
- dotted
- double
- double-circle
- dpcm
- dpi
- dppx
- each-line
- ease
- ease-in
- ease-in-out
- ease-out
- ellipse
- ellipsis
- em
- embed
- embossed
- end
- <ending-shape>
- e-resize
- ethiopic-numeric
- evenodd
- ew-resize
- ex
- exclude
- exclusion
- extends
- <family-name>
- fantasy
- farthest-corner
- farthest-side
- fast
- female
- fill
- fill-box
- filled
- fine
- first
- first baseline
- fit-content()
- fixed
- <flex>
- flex
- <'flex-basis'>
- flex-end
- <'flex-grow'>
- <'flex-shrink'>
- flex-start
- flip
- flow
- flow-root
- font-feature-settings
- font-variant
- force-end
- forwards
- fr
- <frequency>
- from-image
- fr unit
- fuchsia
- full-size-kana
- full-width
- georgian
- grab
- grabbing
- grad
- gray
- green
- grid
- <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
- <'grid-template-rows'> / <'grid-template-columns'>
- groove
- gujarati
- gurmukhi
- handheld
- hanging
- hard-light
- hebrew
- help
- hidden
- in css-backgrounds-3, for <line-style>, border-style, border-top-style, border-left-style, border-bottom-style, border-right-style, border
- in css-display-3, for visibility
- in css2
- in css2, for <border-style>, border-top-style, border-right-style, border-bottom-style, border-left-style, border-style
- in css2, for overflow
- hide
- high
- high-quality
- hiragana
- hiragana-iroha
- horizontal-tb
- hover
- hue
- hz
- icon
- <image>
- in
- infinite
- inherit
- initial
- inline
- inline-block
- inline-flex
- inline-grid
- inline-table
- inset
- in css-backgrounds-3, for <line-style>, border-style, border-top-style, border-left-style, border-bottom-style, border-right-style, border
- in css-backgrounds-3, for box-shadow
- in css2
- in css2, for <border-style>, border-top-style, border-right-style, border-bottom-style, border-left-style, border-style
- inside
- <integer>
- <integer [1,∞]>
- <integer> && <custom-ident>?
- inter-character
- interlace
- intersect
- inter-word
- invert
- isolate
- isolate-override
- italic
- japanese-formal
- japanese-informal
- jump-both
- jump-end
- jump-none
- jump-start
- justify
- justify-all
- kannada
- katakana
- katakana-iroha
- keep-all
- <keyframes-name>
- khmer
- khz
- korean-hangul-formal
- korean-hanja-formal
- korean-hanja-informal
- landscape
- lao
- large
- last
- last baseline
- layout
- left
- in css-align-3, for justify-content, justify-self, justify-items
- in css-backgrounds-3, for background-position
- in css-break-3, for break-before, break-after
- in css-speech-1, for voice-balance
- in css-text-3, for text-align
- in css-text-decor-3, for text-emphasis-position
- in css-text-decor-3, for text-text-emphasis-position
- in css-text-decor-3, for text-underline-position
- in css-transforms-1, for transform-origin
- in css2, for clear
- in css2, for float
- in css2, for page-break-before, page-break-after, page-break-inside
- leftwards
- legacy
- <length>
- in css-backgrounds-3, for background-position
- in css-images-3, for <size>
- in css-shapes-1, for shape-margin
- in css-text-3, for letter-spacing
- in css-text-3, for text-indent
- in css-text-3, for word-spacing
- in css2, for <border-width>, border-top-width, border-right-width, border-bottom-wight, border-left-width, border-width
- in css2, for <padding-width>
- in css2, for top, right, bottom, left
- in css2, for vertical-align
- <length [0,∞]>
- <length-percentage>
- <length-percentage [0,∞]>
- <length-percentage>{2}
- lighten
- lighter
- lime
- linear
- linearrgb
- [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
- line-through
- list-item
- literal-punctuation
- local
- loose
- loud
- low
- lower-alpha
- lower-armenian
- lowercase
- lower-greek
- lower-latin
- lower-roman
- ltr
- luminance
- luminosity
- malayalam
- male
- mandatory
- manual
- margin-box
- maroon
- match-parent
- match-source
- max-content
- medium
- in css-backgrounds-3, for <line-width>, border-width, border-top-width, border-left-width, border-bottom-width, border-right-width, border
- in css-speech-1, for pause-before, pause-after
- in css-speech-1, for rest-before, rest-after
- in css-speech-1, for voice-pitch
- in css-speech-1, for voice-range
- in css-speech-1, for voice-rate
- in css-speech-1, for voice-volume
- in css2, for <border-width>, border-top-width, border-right-width, border-bottom-wight, border-left-width, border-width
- in css2, for font-size
- menu
- message-box
- middle
- min-content
- minmax()
- mixed
- mm
- moderate
- mongolian
- monospace
- move
- ms
- multiply
- myanmar
- navy
- ne-resize
- nesw-resize
- neutral
- never
- no-clip
- no-close-quote
- no-drop
- none
- in css-animations-1, for animation-fill-mode
- in css-animations-1, for animation-name
- in css-backgrounds-3, for <line-style>, border-style, border-top-style, border-left-style, border-bottom-style, border-right-style, border
- in css-backgrounds-3, for background-image
- in css-backgrounds-3, for box-shadow
- in css-contain-1, for contain
- in css-display-3, for display, <display-box>
- in css-flexbox-1, for flex
- in css-grid-1, for grid-template
- in css-grid-1, for grid-template-areas
- in css-grid-1, for grid-template-rows, grid-template-columns
- in css-images-3, for image-orientation
- in css-images-3, for object-fit
- in css-multicol-1, for column-span
- in css-scroll-snap-1, for scroll-snap-align
- in css-scroll-snap-1, for scroll-snap-type
- in css-shapes-1, for shape-outside
- in css-speech-1, for pause-before, pause-after
- in css-speech-1, for rest-before, rest-after
- in css-speech-1, for voice-stress
- in css-text-3, for hanging-punctuation
- in css-text-3, for hyphens
- in css-text-3, for text-justify
- in css-text-3, for text-transform
- in css-text-decor-3, for text-decoration-line
- in css-text-decor-3, for text-emphasis-style
- in css-text-decor-3, for text-text-emphasis-style
- in css-transitions-1, for transition-property
- in css-ui-3, for cursor
- in css-writing-modes-4, for text-combine-upright
- in css2
- in css2, for <border-style>, border-top-style, border-right-style, border-bottom-style, border-left-style, border-style
- in css2, for clear
- in css2, for content
- in css2, for counter-reset, counter-increment
- in css2, for display
- in css2, for float
- in css2, for list-style-type
- in css2, for max-height
- in css2, for max-width
- in css2, for quotes
- in css2, for text-decoration
- in mediaqueries-4, for @media/hover
- in mediaqueries-4, for @media/overflow-block
- in mediaqueries-4, for @media/overflow-inline
- in mediaqueries-4, for @media/pointer
- in mediaqueries-4, for @media/update
- none!!font-variant
- nonzero
- no-open-quote
- no-punctuation
- no-repeat
- normal
- in compositing-1, for <blend-mode>
- in css-align-3, for align-self
- in css-align-3, for justify-content, align-content
- in css-align-3, for justify-self
- in css-align-3, for row-gap, column-gap, gap
- in css-animations-1, for animation-direction
- in css-scroll-snap-1, for scroll-snap-stop
- in css-speech-1, for speak-as
- in css-speech-1, for voice-rate
- in css-speech-1, for voice-stress
- in css-text-3, for letter-spacing
- in css-text-3, for line-break
- in css-text-3, for overflow-wrap
- in css-text-3, for white-space
- in css-text-3, for word-break
- in css-text-3, for word-spacing
- in css-writing-modes-4, for unicode-bidi
- in css2, for content
- in css2, for font-style
- in css2, for font-variant
- in css2, for font-weight
- in css2, for line-height
- normal!!font-feature-settings
- normal!!font-variant
- not
- not-allowed
- nowrap
- n-resize
- ns-resize
- <number>
- <number [0,∞]>
- numbers
- numeric
- nw-resize
- nwse-resize
- objectboundingbox
- oblique
- old
- olive
- only
- open
- open-quote
- orange
- oriya
- outset
- outside
- over
- overlay
- overline
- p3
- padding-box
- page
- paged
- paint
- paused
- pc
- <percentage>
- in css-backgrounds-3, for background-position
- in css-shapes-1, for shape-margin
- in css-speech-1, for voice-pitch
- in css-speech-1, for voice-range
- in css-speech-1, for voice-rate
- in css-text-3, for text-indent
- in css2, for <padding-width>
- in css2, for top, right, bottom, left
- in css2, for vertical-align
- <percentage [0,∞]>
- persian
- pixelated
- pixel unit
- plaintext
- pointer
- portrait
- <position>
- pre
- pre-line
- preserve
- pre-wrap
- progress
- progressive
- projection
- proximity
- pt
- purple
- px
- q
- rad
- rec2020
- recto
- red
- reduced
- region
- relative
- rem
- repeat
- repeat-x
- repeat-y
- reverse
- revert
- ridge
- right
- in css-align-3, for justify-content, justify-self, justify-items
- in css-backgrounds-3, for background-position
- in css-break-3, for break-before, break-after
- in css-speech-1, for voice-balance
- in css-text-3, for text-align
- in css-text-decor-3, for text-emphasis-position
- in css-text-decor-3, for text-text-emphasis-position
- in css-text-decor-3, for text-underline-position
- in css-transforms-1, for transform-origin
- in css2, for clear
- in css2, for float
- in css2, for page-break-before, page-break-after, page-break-inside
- rightwards
- round
- row
- row-resize
- row-reverse
- rtl
- ruby
- ruby-base
- ruby-base-container
- ruby-text
- ruby-text-container
- run-in
- running
- s
- safe
- sans-serif
- saturation
- scale-down
- screen
- scroll
- scroll-position
- self-end
- self-start
- <semitones>
- separate
- se-resize
- serif
- sesame
- show
- sideways
- sideways-lr
- sideways-right
- sideways-rl
- silent
- silver
- simp-chinese-formal
- simp-chinese-informal
- <size>
- size
- slice
- slow
- small
- small-caps
- small-caption
- smooth
- soft
- soft-light
- solid
- space
- space-around
- space-between
- space-evenly
- span && [ <integer> || <custom-ident> ]
- speech
- spell-out
- square
- s-resize
- srgb
- start
- static
- status-bar
- step-end
- step-start
- stretch
- strict
- <string>
- <string>+
- [<string> <string>]+
- stroke-box
- strong
- sub
- subtract
- super
- sw-resize
- symbolic
- table
- table-caption
- table-cell
- table-column
- table-column-group
- table-footer-group
- table-header-group
- table-row
- table-row-group
- tamil
- teal
- telugu
- text
- text-bottom
- text-top
- thai
- thick
- thin
- tibetan
- <time>
- top
- <track-list> | <auto-track-list>
- trad-chinese-formal
- trad-chinese-informal
- transparent
- triangle
- tty
- turn
- tv
- under
- underline
- unsafe
- unset
- upper-alpha
- upper-armenian
- uppercase
- upper-latin
- upper-roman
- upright
- <urange>
- <uri>
- <url>
- userspaceonuse
- verso
- vertical-lr
- vertical-rl
- vertical-text
- vh
- view-box
- visible
- vmax
- vmin
- vw
- wait
- weak
- white
- words
- wrap
- wrap-reverse
- w-resize
- x
- x-fast
- x-high
- x-large
- x-loud
- x-low
- x-slow
- x-small
- x-soft
- x-strong
- x-weak
- xx-large
- xx-small
- y
- yellow
- young
- zoom-in
- zoom-out
6. Acknowledgements
Special thanks to Florian Rivoal for creating the initial draft of the § 3.2.1 Experimentation and Unstable Features recommendations.

Question: how is styles 2.1 achieved in CSS3

、 新た な 機能 の 追加 や 改良

Question: what is the latest version of stylesheet

Question: what is the latest version of cascading styles

Question: what are the different styles of cascading styles

Question: what is the main goal of cascading styles

機能 の 追加 や 改良

Question: where does the CSS 2.1 come from

Question: when was the last time styles were changed

In CSS3 and later , CSS 2.1 will be centralized and achieved by adding and improving new features as a module § 2.1 CSS Levels , CSS Snapshot 2015 and W3C.

Descriptions of all CSS specifications
History
Tests
Selectors describes the
element selectors used in CSS and some other technologies.
Selectors are used to select elements in an HTML or XML document,
in order to attach (style) properties to them. Elements can be
selected based on their name, attributes, context, and other
aspects.
Editors: Tantek Çelik, Elika J. Etemad, Daniel
Glazman, Ian Hickson,
Peter Linss, John Williams
History
Selectors Level 4 extends
level 3 with new ways to select
elements. based, e.g., on what they contain or on what follows.
Editors: Elika J. Etemad, Tab Atkins Jr.
History
Tests
CSS Level 2 Revision 1 corrects errors in the 1998 Recommendation of CSS
level 2 and adds a select few highly requested features
originally planned for level 3, which have already been widely
implemented. But most of all CSS 2.1 represents a ‘snapshot’ of CSS
usage: it consists of all CSS features that are implemented
interoperably for HTML and XML at the date of publication of the
Recommendation.
Editors: Bert Bos, Tantek Çelik, Ian Hickson,
Håkon Wium Lie
History
Preview of CSS Level 2 shows how CSS2 looks with the proposed errata applied and redundant
text replaced by references to other CSS modules. It is not a
specification itself, but a candidate for the next (i.e., 2nd)
revision of CSS level 2.
Editors: Bert Bos
History
CSS Snapshot 2007 links
to all the specifications that together represent the state of CSS
as of 2006. Because large parts of CSS are still under development
and it is often difficult to know what their state is, the CSS
working group decided to publish this document, which contains only
the parts of CSS that are stable and have been shown to work.
Editors: Elika J. Etemad
History
CSS Snapshot 2010 links
to all the specifications that together represent the state of CSS
as of 2010. With this document, the CSS WG aims to help implementors
distinguish between the parts of CSS that are ready for production
and the parts that are still experimental.
Editors: Elika J. Etemad
History
CSS Snapshot 2015 links
to all the specifications that together represent the state of CSS
as of 2015. With this document, the CSS WG aims to help implementors
distinguish between the parts of CSS that are ready for production
and the parts that are still experimental.
This Note also includes best practices for experimental and
partial implementations, including rules for so-called ‘vendor
prefixes’ on proprietary and unstable features.
Editors: Elika J. Etemad
History
CSS Snapshot 2017 links
to all the specifications that together represent the state of CSS
as of 2017. It is the successor to the similar snapshots for 2015, 2010 and 2007. With this document, the CSS WG aims to help implementors
distinguish between the parts of CSS that are ready for production
and the parts that are still experimental.
The Note also defines best practices for experimental and
partial implementations, including rules for so-called ‘vendor
prefixes’ on proprietary and unstable features.
Editors: Tab Atkins Jr., Elika J. Etemad /
fantasai, Florian Rivoal
History
CSS Snapshot 2018 links
to all the specifications that together represent the state of CSS
as of 2018. It is the successor to the similar snapshots for 2017, 2015, 2010 and 2007. With
this document, the CSS WG aims
to help implementors distinguish between the parts of CSS that are
ready for production and the parts that are still experimental.
The Note also defines best practices for experimental and
partial implementations, including rules for so-called ‘vendor
prefixes’ on proprietary and unstable features.
Editors: Tab Atkins Jr., Elika J. Etemad /
fantasai, Florian Rivoal
History
CSS Snapshot 2021 links
to all the specifications that together represent the state of CSS
as of 2021. It is the successor to the similar snapshots for 2020,
2018, 2017, 2015, 2010 and 2007. With this document, the CSS WG aims to help implementors
distinguish between the parts of CSS that are ready for production
and the parts that are still experimental.
The Note also defines best practices for experimental and
partial implementations, including rules for so-called ‘vendor
prefixes’ on proprietary and unstable features.
Editors: Tab Atkins Jr., Elika J. Etemad /
fantasai, Florian Rivoal
History
Grid Template Layout
(formerly: Advanced Layout) describes a new way to position
elements using constraints on their alignment to each other and on
their flexibility. Document elements are flowed into one or more
templates, which resemble a traditional layout grid, with rows and
columns as in a table. It can be applied to a page or to individual
elements, e.g., to lay out a form. This module and Grid Layout are in the process of being
merged.
Editors: Bert Bos, César Acebal
CSS Aural Style Sheets
Many primarily visual devices are in fact capable of making
sound as well, sometimes even of very high quality. The audio
module contains properties for attaching background sounds to
elements and sound effects to state transitions, such as link
activation or ‘hovering’ over an element. Expected possibilities
include overlaying multiple sounds, positioning a sound left or
right in stereo space and playing a sound in a loop.
Editors: Dave Raggett, Daniel Glazman
History
Tests
Backgrounds and Borders
describes background colors and images and the style of borders.
New functionality includes the ability to stretch the background
image, to use images for the borders, to round the corners of the
box and to add a box shadow outside the border.
Editors: Bert Bos, Elika J. Etemad
Backgrounds and Borders
level 4 is a repository for proposed features for the next
level of the Backgrounds and Borders
module. If (some of) those features are maintained, the module
will eventually supersede the level-3 module. No draft has been
published yet, but currently expected features include corner
shapes, writing-mode-relative background positions (to
automatically rotate, mirror and/or position a background depending
on whether the element happens to contain vertical, right-to-left
or left-to-right text), and partial borders (clipping out parts of
an edge).
Editors: Bert Bos, Elika J. Etemad, Brad Kemper,
Lea Verou
History
Basic User Interface
contains features for styling some interactive, dynamic aspects of
Web pages: the look of form elements in their various states and
more cursors and colors to describe GUIs (graphical user
interfaces) that blend well with the user's desktop environment.
Editors: Tantek Çelik
History
The Box Model describes
the layout of block-level content in normal flow. When documents
are laid out on visual media (e.g. screen or paper), CSS represents
the elements of the document as rectangular boxes that are laid out
one after the other or nested inside each other in an ordering that
is called a flow. The flow
can be horizontal (typical for most languages) or vertical (often
used for Japanese & Chinese).
Editors: Elika J. Etemad
Bert Bos
History
The Box Model describes
the layout of block-level content in normal flow. Level 4 extends
level 3 with a way to automatically suppress the margin of the
first or the last element inside a line or a block (which is often
not possible otherwise, because there is no way to always know
which element falls at the edge).
Editors: Elika J. Etemad
CSS Extended Box Model
The Extended Box Model
provides extra control over positioning of floats and the size of
boxes.
Editors: Bert Bos
History
Marquee contains the properties that control the
speed and direction of the “marquee” effect. Marquees are a
scrolling mechanism that needs no user intervention: overflowing
content moves into and out of view by itself. Marquee is mostly
used on mobile phones. (Until April 2008, the marquee properties
were part of the Box module.)
Editors: Bert Bos
History
Cascading and Inheritance
describes how values are assigned to properties. CSS allows several
style sheets to influence the rendering of a document, and the
process of combining these style sheets is called ‘cascading.’ If
no value can be found through cascading, a value can be inherited
from the parent element or the property's initial value is used.
Also, the module describes how ‘specified values,’ which is what a
style sheet contains, are processed into ‘computed values’ and
‘actual values.’
Editors: Elika J. Etemad, Tab Atkins Jr.,
Håkon Wium Lie
History
Compared to level 3, level 4 adds a
'default' keyword to override the normal order of cascading and
inheritance, and the possibility to qualify the '@import' rule not
only with a Media Query, but also
with a 'supports()' clause (for details of which, see CSS Conditional Rules).
Editors: Elika J. Etemad / fantasai, Tab Atkins
Jr.
History
Cascading and Inheritance
Level 5 extends level 4 with the
ability to classify style sheets into into an arbitrary number of
‘layers’: base layers and override layers. This makes it easier to
re-use style sheets and add local overrides, without the need for
'!important' or very specific selectors.
Editors: Elika J. Etemad / fantasai, Miriam E.
Suzanne, Tab Atkins Jr.
History
Cascading and Inheritance
Level 6 extends level 5 with
‘scoped styles’, a way to group style rules that apply to the same
part of a document.
Editors: Elika J. Etemad / fantasai, Miriam E.
Suzanne, Tab Atkins Jr.
History
Tests
Color specifies the
color-related aspects of CSS, including transparency and the
various notations for the
<color> value type.
Editors: L. David Baron, Tantek Çelik, Chris
Lilley
History
Color Module Level 4 extends Color level 3. It defines various color notations, including
RGB, HSL, hexadecimal, named colors, HWB, Lab, LCH and relative
colors ('color-mod'). It defines the 'color' and 'opacity'
properties. And it provides ways to work in color spaces other than
the default sRGB.
Editors: Tab Atkins Jr., Chris Lilley,
L. David Baron
History
Fonts contains the
properties to select fonts, as well as properties for font
‘adjustments,’ such as glyph variants (e.g., swash letters, small
caps, oldstyle digits), and kerning. Font selection is identical to
the similar section in CSS2. The font adjustment properties are new
to level 3. The module also contains the @font-face rule for
downloadable fonts, which was previously in a separate module.
The module will eventually be replaced by the larger Fonts level 4
Editors: John Daggett,
Paul Nelson, Jason Cranford
Teague, Michel Suignard,
Chris Lilley
History
Generated Content for Paged
Media contains advanced properties for printing, beyond what
the Paged Media module provides. It has properties for creating
footnotes, cross references ("see section X on page Y") and
constructing running headers from section titles.
Editors: Håkon Wium Lie
History
Page Floats was split off
from Generated Content for Paged Media. It
contains properties to float elements to the top, bottom or side of
a page in paginated renderings, and to float elements to particular
positions with text wrapping at both sides.
Editors: Johannes Wilm,
Håkon Wium Lie
History
Generated and Replaced
Content defines how to put content before, after, or in
place of an element. The content can be text or an external object,
such as an image. E.g., when a document contains an element that
links to an image, it is this module that allows a designer to
choose whether the image is shown in place of the element or not.
(The computation of the size of replaced elements is
defined in the CSS Image Values module.)
Editors: Ian Hickson
History
Hyperlinks Presentation
deals with the various ways hyperlinks can be presented. CSS1
already provided the ':visited' and ':link' pseudo-classes to
select hyperlinks. This module will provide properties to control
which hyperlinks are active and where the target is shown when the
user traverses the link (e.g., in a new window or in-line in the
current document). Note that not all links have to be presented as
hyperlinks; some may be handled as replaced elements (see the Generated and replaced content module) and
some are outside the scope of CSS (such as links to scripts,
namespace definitions, P3P policies, etc.)
Editors: Tantek Çelik, Bert Bos, Daniel Glazman
History
The Introduction has been
dropped and replaced by a series of Notes called the ‘CSS Snapshots.’ See, e.g., the Snapshot 2010 for a description.
Editors: Håkon Wium Lie,
Eric A. Meyer, Bert Bos
History
Lists contains the
properties for styling lists, in particular various types of
bullets and numbering systems.
Editors: Tab Atkins Jr.,
Shinyu Murakami, Ian Hickson
CSS Math
Math is a proposed module
for properties targeted at styling mathematical formulas, building
on on the layout model of the ‘presentational’ elements of MathML. It is currently not being worked
on.
Editors: -
History
Multi-column Layout
contains properties to flow content into flexibly-defined columns.
Editors: Håkon Wium Lie
History
Tests
XML-based formats can use “namespaces” to distinguish multiple
uses of the same element name from each other, and this draft
explains how CSS selectors can be extended to select those elements
based on their “namespace” as well as their local name.
Editors: Elika J. Etemad,
Anne van Kesteren, Chris Lilley, Peter Linss
History
The DOM specifies the functions that are found in several
programming libraries (and browsers) to manipulate HTML, XML & CSS
documents. Programmers can call them from their programs rather
than write their own. Some of those functions deal with adding &
deleting rules and changing properties in CSS style sheets. These
APIs form the CSS Object Model or CSS-OM. They are useful
for stand-alone programs as well as for scripts and applets. DOM
level 2 contains two chapters on the CSS-OM (CSS Object Model) and
the CSS WG will develop a level 3 CSS-OM.
Editors: Anne van Kesteren
History
The APIs introduced by this specification provide authors with a
way to inspect and manipulate the view information of a document.
This includes getting the position of element layout boxes,
obtaining the width of the viewport through script, and also
scrolling an element.
Editors: Anne van Kesteren
History
Tests
Paged Media extends the
properties that CSS2 already had with new ones to control such
things as running headers and footers and page numbers.
Editors:
Melinda
Grant, Elika J. Etemad, Håkon Wium Lie, Simon Sapin, Jim Bigelow
History
CSS Positioned Layout
defines one of several ways in CSS to layout parts of a document.
It contains properties to position an element at a fixed position
relative to other positioned elements, to offset elements from
their normal position, and to position them at a fixed position on
a page. A 'z-index' property defines whether elements are in front
of or behind other elements at the same position.
Editors: Arron Eicholz
History
Presentation Levels
introduces a way to step forward and backward through multiple
renderings of the same document, which is especially useful for
slide show presentations (highlight list items one at a time) and
outline views (show more or less detail). The model is that each
element has a presentation level and three styles (three states):
one for when the browser is at a lower presentation level, one for
an exact match and one when the browser's presentation level is
above that of the element. The browser must offer the user an easy
way to increase and decrease the browser's level.
Editors: Håkon Wium Lie
History
This module was dropped in March 2008. The keyword
'reader' is a media type for use in Media Queries (similar to
'screen', 'print', 'projection', etc.). Devices that might choose
to apply rules inside '@media reader' are devices like screen
readers, that display a page on screen and speak it at the same
time, or display the page and simultaneously render it on a dynamic
braille device. The properties that apply to this media type are
therefore the combination of the properties for screen, speech and
braille.
Editors: Bert Bos
History
Ruby describes CSS
properties to manipulate the position of "ruby", which are small
annotations on top of or next to words, especially common in
Chinese and Japanese. They are often used to give the pronunciation
or meaning of difficult ideograms.
Editors: Richard Ishida,
Paul Nelson, Michel Suignard
History
The CSS Scoping module
level 1 defines the CSS counterpart to HTML5's scoped
styles, mechanisms for styling pseudo-elements (‘regions’) and
selectors for the ‘shadow DOM.’
Editors: Tab Atkins Jr., Elika Etemad
History
Grid Layout allows to set up a flexible design grid for an
element so that the descendants of the element can be positioned
relative to that grid and thereby be aligned to each other in two
dimensions. Areas of the grid can be assigned names both for ease
of use and to create a level of indirection that facilitates
reordering of elements. Like the other grid/template modules, this
module builds on frame-based layout
ideas that started in 1996 and produced, among other things
absolute positioning in CSS level 2. The Grid Layout module thus
has a large overlap with Multi-column
Layout, Template Layout, Flexible Box Layout, Grid
Positioning, and Regions, but doesn't
replace them. It is expected, however, that the six modules can
eventually be condensed to just three: Multi-column, Flexible Box,
and a third one for grids/templates/regions.
Editors:
Alex
Mogilevsky, Phil Cupp,
Markus Mielke, Daniel Glazman, Tab Atkins Jr., Elika
J. Etemad / fantasai, Rossen Atanassov
History
Level 2 of the Grid Layout module extends the capabilities of
the grid, in particular with the ability to make descendant
elements of a grid element other than direct children into grid
items.
Editors: Tab Atkins Jr., Elika J. Etemad /
fantasai, Rossen Atanassov
History
‘Regions’ is the collective name for a some kinds of areas on
the canvas, which can be selected by pseudo-elements. Regions are
created by certain other modules, such as Paged Media (which creates regions called ‘margin boxes’), Selectors (which creates, e.g., the
'::first-line' region) and Grid Template
Layout (which creates ‘slots’).
The Regions module
defines two kinds of things you can do with regions: Some kinds of
regions can be chained together and content flowed into them, such
that text that is too long for one region doesn't overflow, but
automatically continues in another region; and, secondly, content
can be styled based on what region it ends up in. E.g., a paragraph
that flows into two regions can have bold text in the first region
and normal text in the second, even though there is no element
boundary.
Editors: Vincent Hardy, Rossen Atanassov, Alan
Stearns
History
Speech contains
properties to specify how a document is rendered by a speech
synthesizer: volume, voice, speed, pitch, cues, pauses, etc. There
was already an ACSS (Aural CSS) module in CSS2, but it was never
correctly implemented and it was not compatible with the Speech Synthesis
Markup Language (SSML), W3C's language for controling speech
synthesizers. The ACSS module of CSS2 has therefore been split in
two parts: speech (for actual speech, compatible with SSML) and audio (for sound effects on other devices). The
speech properties in level 3 will be similar to those in level 2,
but have different values. (The old properties can still be used
with the deprecated 'aural' media type, but the new ones should be
used inside the new 'speech' medium, as well as in style sheets for
'all' media.)
Editors: Daniel Weck,
Dave Raggett, Claudio
Santambrogio, Daniel
Glazman
History
The syntax of CSS rules in HTML's ‘style’ attribute is strictly
speaking not part of CSS, but is mentioned here, because it is
produced by the CSS working group. It was made necessary, because
XHTML 1.0, in contrast to HTML 4.0, doesn't define the syntax of
CSS rules in its style attribute. However, the specification is
valid for all similar attributes (e.g., those in SVG), not just for
HTML.
Editors: Elika J. Etemad, Tantek Çelik,
Bert Bos, Marc Attinasi
History
Syntax contains the
generic (forward-compatible) grammar that all levels of CSS adhere
to. Every property also has restrictions on the syntax of its
value, but those can be found in the other CSS modules.
Editors: Tab Atkins Jr., Simon Sapin,
L. David Baron
CSS Tables Module
Tables describes the
layout of tables: rows, columns, cells and captions, with their
borders and alignments. The model in level 3 will probably not have
anything new compared to level 2, but it will be described in more
detail.
Editors: Francois Remy, Greg Whitworth
History
Text contains the
text-related properties of CSS2 (justification, text wrapping,
etc.) plus several new properties, many for dealing with text in
different languages and scripts (line breaking, kashida,
hyphenation, etc.). It includes (and replaces) the proposal in the
International layout draft. Also see the Line module for things
like vertical alignment within a line, line height calculation and
styles for first-line/first-letter. The Text module reached CR
status in 2003, but very little was implemented. Some common
typography required too many properties, while many combinations of
values were not useful. The rewrite started in 2004 and should
result in the same functionality, but with fewer properties and
better defaults. The Text module has been split into four parts:
Text, Writing Modes, Line Grid and Text
Decoration.
Editors: Elika J. Etemad, Koji Ishii,
Shinyu Murakami, Paul Nelson, Michel Suignard, Chris Lilley
History
Writing Modes
(previously: Text Layout) describes the properties that control
text direction: horizontal lines of text that are stacked from top
to bottom (normal for most languages), vertical lines of text that
are stacked from right to left (often used for Japanese), or
vertical lines that stack from left to right (Mongolian). It also
describes the order of letters inside the line (bi-directionality)
and the rotation that may occur for certain letters inside vertical
text.
Editors: Elika Etemad / fantasai, Koji Ishii,
Shinyu Murakami, Paul Nelson, Michel Suignard
History
Level 4 expands level 3 with a few extra
features, such as 'sideways-lr/sideways-rl', combining digits
horizontally inside vertical text, and automatically putting text
in columns when the text is orthogonal (vertical or horizontal) to
the surrounding text (horizontal or vertical). 'Sideways-lr' and
'sideways-rl' are alternative vertical writing modes that are very
useful for writing text vertically in scripts that are normally
horizontal, e.g., to write English text on book spines or along the
edge of a page.
Editors: Elika Etemad / fantasai, Koji Ishii
History
The CSS Line Grid module
level 1 defines properties to make it easier to align the
lines in side-by-side column or on the two sides of a sheet of
paper, despite images or headings that interrupt the regular grid.
It also defines mechanisms to align letters vertically in a series
of lines, which is a common design in ideographic scripts, such as
Japanese. (These feature were previously part of the Writing Modes.)
Editors: Elika Etemad, Koji Ishii, Alan Stearns
History
Values and Units
describes the common values and units that CSS properties accept.
Editors:
Håkon Wium
Lie, Tab Atkins, fantasai, Chris
Lilley
History
Values and Units
describes the common values and units that CSS properties accept.
Compared to level 3, this level has a few
more units and more arithmetical operations.
Editors: Tab Atkins, fantasai,
History
The Web Fonts module
has been merged with the Fonts module.
Web Fonts allows downloading fonts for use with a document. The
technology is also included in SVG and, conversely, one can create
fonts for download in SVG. Previously, this functionality was part
of CSS level 2, but with the revison of level 2, it has been moved
to level 3.
Editors: John Daggett,
Chris Lilley, Michel
Suignard
History
Behavioral Extensions to
CSS defines the 'binding' property for XBL. The property was called
'behavior' in the first draft. That draft contained a number of
other proposals that are no longer pursued. (To some extent, they
have been replaced by XBL.)
Editors: Ian Hickson
History
The Flexible Box Layout
Module defines the 'flex' and 'inline-flex' keywords for the
'display' property, which cause an element to be displayed as
either a column or a row of child elements. Additional properties
determine the order of the child boxes (left to right, bottom to
top, etc.) and how space is distributed over the children and the
spaces between them. The module is primarily intended for forcing
rows of controls in a GUI to equal height or width.
Editors: Tab Atkins Jr., Elika J. Etemad /
fantasai, Rossen Atanassov,
Alex
Mogilevsky, L. David Baron, Neil Deakin, Ian Hickson, David Hyatt
History
The CSS Images Module
defines how properties can refer to images by URL. All properties
that can take images as a value, such as 'background-image' and
'list-style-image', use this syntax. It also defines color
gradients. as a built-in image type.
Editors: Elika J. Etemad, Tab Atkins Jr.
History
The Image Values and Replaced
Content Module defines how properties can refer to images by
URL. All properties that can take images as a value, such as
'background-image' and 'list-style-image', use this syntax. It also
defines color gradients. The level-4 module extends the level-3 module of the same name with, among
other things conic color gradients.
Editors: Tab Atkins Jr., Elika J. Etemad /
fantasai, Lea Verou
History
The CSS Fragmentation
Module defines properties to force or avoid page and column
breaks. It combines features that were previously in two different
specifications, CSS Paged Media and Multi-column Layout.
Editors: Rossen Atanassov, Elika J. Etemad /
fantasai
History
The CSS Fragmentation Module
Level 4 extends Level 3 with
control over margins at page breaks and other enhancements.
Editors: Rossen Atanassov, Elika J. Etemad /
fantasai
History
The CSS Transforms Module
defines 2D transforms (rotations, translations, etc.) that can be
applied to elements after the normal layout (i.e., a
transform does not affect the position of surrounding elements).
The transforms are also available in SVG (as values for the
transform attribute) and the specification is a joint work
of the CSS and SVG working groups.
Editors: Simon Fraser, Dean Jackson, David Hyatt,
Chris Marrin, Edward O'Connor, Dirk Schulze, Aryeh Gregor
Level 2 of CSS Transforms
Module extends level 1 with 3D
transforms.
Editors: Tab Atkins Jr., Simon Fraser, Dean
Jackson, Theresa O'Connor
History
The 2D Transformations
Module has been replaced by the CSS
Transforms module.
Editors: Simon Fraser, Dean Jackson, David Hyatt,
Chris Marrin, Edward O'Connor
History
The 3D Transformations
Module has been replaced by the CSS
Transforms module.
Editors: Dean Jackson, David Hyatt, Chris Marrin
History
The Transitions Module
defines a property to animate the transitions between
pseudo-classes (e.g., when an element enters or leaves the ':hover'
state). During a given delay, certain property values gradually
change from the old value to the new, rather than instantaneously,
as in level 2.
Editors: Dean Jackson, David Hyatt, Chris Marrin,
Sylvain Galineau, L. David Baron
History
The Animations Module
specifies which properties change their values during an animation,
what values they take successively, and during how much time. It
does not define what causes a particular animation to start, only
what happens during one. (Compare this to the Transitions module, which also animates
properties, but between state changes, i.e., pseudo-classes.)
Editors: Dean Jackson, David Hyatt, Chris Marrin
History
Web Animations is a joint
specification by the CSS and SVG workng groups. CSS Transitions, CSS Animations and SVG all provide
mechanisms that generate animated content on a Web page. Although
the three specifications provide many similar features, they are
described in different terms. This specification proposes an
abstract animation model that encompasses the common features of
all three specifications. This model is backwards-compatible with
the current behavior of these specifications such that they can be
defined in terms of this model without any observable change.
Editors: Brian Birtles, Shane Stephens, Alex
Danilo, Tab Atkins
History
Tests
CSS Mobile Profile
describes a subset of CSS that is suitable for handheld devices,
such as mobile phones. This profile further fills in the 'handheld'
media type.
Editors: Svante Schubert,
Robin Berjon, Ted Wugofski, Doug Dominiak,
Peter Stark, Tapas Roy
History
Tests
CSS Print Profile
describes a subset of CSS that is suitable for documents printed on
low-cost printers. It is a companion to the XHTML Print Profile.
Editors: Elika J. Etemad, Melinda Grant,
Jim Bigelow
History
CSS TV profile describes
a subset of CSS that is suitable for documents displayed on TV
sets, including text documents that are broadcast over digital TV.
Editors: Glenn Adams, Tantek Çelik, Sean Hayes,
Håkon Wium Lie
History
CSS Conditional Rules
defines a number of ways to make style rules depend on factors
outside the document, such as the output media ('@media', for the
most part already in level 2), the capabilities of the user agent,
and the URL of the document.
Editors: L. David Baron
History
CSS Device Adaptation
defines (1) how the initial containing block relates to
the viewport and (2) how CSS units ('px', 'cm', 'pt',
etc.) relate to real units. The initial containing block is a
hypothetical rectangle in the CSS rendering model that defines the
(0,0) position and the meaning of percentages on the root element.
In CSS level 2, it is equal to the viewport (i.e., the window or
the page on which the document is drawn). This module defines the
'@viewport' rule that allows the initial containing block to be
bigger or smaller than the viewport. It can also set a zoom factor,
to change the mapping between CSS units and real units.
('@viewport' isn't normally useful for authors, but it lets readers
get rid of the effect of any <META NAME=VIEWPORT> element
that may occur in HTML5 documents.)
Editors: Rune Lillesveen
History
CSS Exclusions defines
properties to set on positioned elements so that they act as
‘exclusions’ and cause text to wrap around themselves, similar to
how text wraps around floating elements.
Editors: Vincent Hardy, Rossen Atanassov, Alan
Stearns
History
CSS Shapes defines
properties to assign a shape (circle, polygon, or arbitrary image)
to a CSS box, so that the lengths of the lines inside the box are
determined by that shape, rather than by the box's margins. The
shape can also be used on floating elements to define how the text
outside the float wraps around it.
Editors: Vincent Hardy, Rossen Atanassov, Alan
Stearns
History
Compositing and Blending
allows boxes not only to be opaque or semi-transparent, but also to
combine with underlying boxes in other ways (color difference,
color mask, color shift, etc.) for various effects. This module is
made in cooperation with SVG.
Editors: Rik Cabanier
History
Filter Effects allows
graphics filters to be applied to an element (after it has been
rendered, but before it has been composited, see Compositing and Blending). Filters can
blur an element, add a shadow, modify colors, increase contrast,
add a ‘texture,’ etc. The module defines a number of common
graphics effects, but also allows to use filters written in OpenGL
(OpenGL ES Shading Language). This module is made in cooperation
with SVG.
Editors: Vincent Hardy, Dean Jackson, Erik
Dahlström
History
CSS Masking provides two
means for partially or fully hiding portions of visual elements:
masking and clipping. Masking describes how to use another
graphical element or image as a luminance or alpha mask. Clipping
describes the visible region of visual elements. This module
defines features both for CSS and for SVG.
Editors: Dirk Schulze, Brian Birtles, Tab Atkins
Jr.
History
The anonymous box that encloses the content of a table cell or a grid
slot, and the one or more boxes inside a flexbox have in common that they can all be aligned to each
of the four edges of their container, or centered between those
edges. If the flexbox contains several boxes, they can also be
spread out (‘justified’) between two edges. The Box Alignment module defines
various properties for such alignments. It is under investigation
if the properties can be extended to apply to boxes in other
contexts, in particular to the normal flow. That would allow, e.g.,
the content of a floating box to be aligned to the bottom of the
float, similar to how 'vertical-align: bottom' aligns the content
of a table cell. Another possible addition is control over
alignment by means of flexible margins (like 'margin: auto' without
its limitations).
Editors: Elika J. Etemad / fantasai, Tab Atkins
Jr.
History
The Text Decoration module defines the properties that control
the style and position of various decorations around text, usually
to emphasize it, and that do not affect the layout of the text
itself: 'text-decoration' (underline, overline, blink, etc.),
'text-emphasis' (East Asian emphasis marks on top of ideographs)
and 'text-shadow'. These properties were previously in the Text module.
Editors: Elika J. Etemad, Koji Ishii
History
Level 4 of the Text Decoration module extends level 3 with more
control over various aspects of the decoration, such as the style
and position of underlines.
Editors: Elika J. Etemad, Koji Ishii
History
The sizing module defines keywords for use on the 'width' and
'height' properties to specify that the size of an element should
be as narrow as possible or as wide as possible, rather than the
width inherited from the element's parent. These keywords are split
off from the definition of 'width' and 'height' in the Basic Box Model and will probably be merged back
into that module at a later date.
Editors: Tab Atkins, Elika J. Etemad / fantasai
History
Level 4 extends level 3 with more
keywords to select different algoriths to determine the size of a
box, and also defines an ‘aspect-ratio’ property to give boxes a
fixed width to height ratio, whatever their size.
Editors: Tab Atkins, Elika J. Etemad / fantasai,
Jen Simmons
History
The Counter Styles module defines the
'@counter-styles' rule with which authors can define their own
numbering styles for lists, section headings, figures, etc. The
numbering styles from level 2 are predefined. They include decimal
(1, 2, 3, 4…), upper-roman (I, II, III, IV…), lower-alpha (a, b, c,
d…), etc, as well as some styles for bullet lists, such as disc
(•).
Editors: Tab Atkins Jr.
History
The Cascading variables module allows arbitrary
data (name/value pairs) to be associated with elements. The data is
in the form of properties of the form '--NAME: VALUE'. The
properties are inherited. They can be accessed through the DOM and
also referred to in other properties (on the same element or in
descendant elements) via the 'var(--NAME)' functional notation.
Editors: Luke Macpherson, Tab Atkins Jr., Daniel
Glazman
History
The CSS overflow module
level 3 defines the 'overflow' property, which specifies how
text is treated that is too wide or too tall for its box. The text
can be left to overflow, be clipped or scroll. See the CSS marquee module for different
scrolling mechanisms and the CSS
fragmentation module level 3 for control over how the text is
broken into pages.
Editors: L. David Baron
History
The CSS overflow module
level 4 extends the level-3 module with a mechanism to break
a box into multiple pages with either one page showing or all pages
showing at the same time. A pseudo-element allows to select the
individual pages and apply some style to them.
Editors: L. David Baron, Florian Rivoal
History
The CSS Display module
level 3 redefines the 'display' property as a shorthand for
three other properties, each for a more or less independent aspect
of the 'display' property: whether the element starts a new block
or continues inline; how the contents of the element are laid out;
and whether the element has a label on the side. The module also
defines a new property that does the same as 'display: none' (i.e.,
do not display or speak the element). These low-level properties
are expected to be useful mostly in scripts.
Editors: Tab Atkins Jr.
History
The CSS Font Loading module
level 3 defines a part of the DOM API for the '@font-face'
rule of CSS. In particular, it defines methods to allow a script to
explicitly load a font (e.g., to load it earlier than the renderer
would load it by itself) and be informed when a font is loaded.
Editors: Tab Atkins Jr.
History
The CSS Will Change Module
Level 1 allows an author to give hints to the renderer about
which elements are likely to change style in some way (e.g.,
because of animations or transitions) and where speed is critical.
This may help a renderer to decide where it should do some work
ahead of time.
Editors: Tab Atkins Jr.
History
Non-element Selectors Module
Level 1 defines selectors for other kinds of nodes in a
tree-structured document than elements. In particular, it provides
ways to select attributes of elements.
These selectors have no effect in CSS, as CSS only styles
elements. They are meant for other contexts where selectors are
used to select parts of a tree, such as the Selectors API and
ITS 2.0. They thus provide an alternative to XPath, when XPath is
not usable or not desired.
Editors: Jirka Kosek, Tab Atkins Jr.
History
Geometry Interfaces
defines APIs for scripts that manipulate points, rectangles,
quadrilaterals and transformation matrices.
Editors: Simon Pieters, Dirk Schulze, Rik Cabanier
History
Fullscreen is no longer
being developed. It contained a proposal for an API and some CSS
selectors to style elements that are shown maximized on a screen.
Editors: Anne van Kesteren, Tantek Çelik
History
The CSS Inline Layout Module
describes the layout within a line and the stacking of lines, and
also the styling of drop caps. It replaces the CSS Line Layout module.
Editors: Dave Cramer, Elika J. Etemad / fantasai,
Steve Zilles
History
The CSS Pseudo-Elements Module
defines various pseudo-elements, i.e., parts of documents that
correspond to something rendered, but not directly to an element in
the source document. A number of them were already defined in CSS2
(
::first-line,
::first-letter, etc.),
a few others are new, such as
::selection (selected
text) and
::placeholder (placeholder text in an
input element).
The Selectors module describes how
to use pseudo-elements as part of selectors.
Editors: Daniel Glazman, Elika J. Etemad /
fantasai, Alan Stearns
History
The Motion Path Module defines an
additional way to set the position and rotation of absolutely
positioned elements. The position is given by a trajectory (an SVG
shape) and an offset along that trajectory between 0 and 100%. In
combination with animations, the offset can also be animated.
This module is joint work by the SVG and CSS working groups.
Editors: Dirk Schulze, Shane Stephens
History
The CSS Scroll Snap Module defines properties to
control some aspects of scrolling of an overflowing element: when
scrolling with a mouse or similar device, the element can be made
to "snap’ to particular positions, e.g., the first line of a child
element or the center of an image. These snap points can be either
by proximity (the element snaps to a position only when the
scrolling action ended close to that position) or mandatory (the
element always snaps to the nearest snap point when the scrolling
action ends).
Editors: Matt Rakow, Jacob Rossi, Tab
Atkins-Bittner, Elika J. Etemad / fantasai
History
The CSS Round Display module
defines new properties and new keywords for existing properties to
better handle circular or rounded viewports. It includes, among
other things, media queries to select style rules based on the
shape of the viewport and polar coordinates for absolute
positioning.
Editors: Hyojin Song, Jihye Hong
History
The CSS Basic User Interface Module describes CSS properties and values to style basic user interface
elements. It includes and extends CSS Basic User
Interface level 3 with, among other things, properties to
style the insertion caret.
Editors: Florian Rivoal
History
The CSS Text Module level 4
includes and extends CSS Text Module level 3.
It defines line breaking, justification and alignment, white space
handling and text transformations.
Editors: Elika J. Etemad / fantasai, Koji Ishii,
Alan Stearns
History
The specifications by the Houdini Task Force (a joint
task force of the CSS WG and the TAG) aim to specify low-level access to a CSS rendering engine such
as found in a typical browser, including, e.g., the CSS parser, the
box model, font loading, overflow handling and scrolling. An
application that uses such a CSS engine can thus override or extend
certain of its features.
The CSS Painting API Level 1 is one of those
specifications and defines an API to hook into the functions that
paint a CSS box on the screen, including its background, borders
and content. It can be used, e.g., to paint a background given by
an algorithm rather than an image.
Editors: Shane Stephens, Ian Kilpatrick, Dean
Jackson
History
The CSS Properties and Values API Level 1 is part
of the Houdini specifications. It defines
an API to register new properties with the CSS engine. In contrast
to the Custom properties module (which
allows to define properties in a declarative way), the API allows
properties with special syntaxes and properties that do not
inherit.
Editors: Tab Atkins, Shane Stephens, Daniel
Glazman, Alan Stearns, Elliot Sprehn, Greg Whitworth
History
The CSS Typed OM Level 1 is part of the Houdini specifications. It defines an API to
access property values in the CSS Object Model in efficient ways,
i.e., typically as numbers rather than as strings.
Editors: Shane Stephens
History
The Worklets Level 1 is part of the Houdini specifications. It defines an API to
insert JavaScript code into the rendering pipeline.
Editors: Ian Kilpatrick
History
The CSS Layout API Level 1 is part of the Houdini specifications. It defines a
JavaScript API to attach scripts that react to computed style and
box tree changes.
Editors: Greg Whitworth, Ian Kilpatrick, Tab
Atkins-Bittner, Shane Stephens, Robert O'Callahan, Rossen Atanassov
History
Fonts Module Level 4 extends Fonts level 3. It adds support for, among other things,
colored fonts, variable fonts and emoji.
Editors: John Daggett, Myles C. Maxfield
History
Fonts Module Level 5 extends Fonts level 4 with more precise control over font selectton
and font substitution (fallback fonts), such as an enhanced
'font-size-adjust' property.
Editors: Myles C. Maxfield, Chris Lilley
History
CSS Rhythmic Sizing Level 1 provides a property to
force the distance between lines, which is normally set by the line
height, to be rounded to a multiple of a given value. This allows
lines to remain aligned to a fixed grid, even if there are
occasional lines that need more space (e.g., because they contain a
mathematical formula or an inline image). This module is a possible
complement to the Line Grid module.
Editors: Koji Ishii, Elika J. Etemad / fantasai
History
The Fill and Stroke Module defines properties to set the colors and fill patterns of SVG
shapes and of text. The CSS syntax allows SVG shapes to be styled
with an (external) style sheet, instead of with attributes on each
shape itself. ‘Filling’ refers to the inside of the shapes,
‘stroke’ to the edges. Both can be simple colors, but also
patterns, gradients or images.
Editors: Elika J. Etemad / fantasai, Tab
Atkins-Bittner
History
The Containment Module
provides a property 'contain' that is especially useful in highly
dynamic GUIs: It
declares that an element does not influence the rendering of other
elements outside itself and does not paint outside its own box.
That means the element can be added and removed very quickly,
without having to recalculate the style of other elements. E.g.,
such an element does not increase the size of its parent and does
not increment any list counters.
Editors: Tab Atkins, Florian Rivoal
History
The 2nd level of the Containment
Module extends Containment
level 1 with additional values for the 'contain' property.
Editors: Tab Atkins, Florian Rivoal
History
Containment Level 3
extends level 2. It introduces the
concept of ‘container queries’, which allow style rules to be
written that only apply if an element has a given size, or certain
other characteristics.
Editors: Tab Atkins, Florian Rivoal, Miriam E.
Suzanne
History
Animations and transitions use timing functions to
specify how the speed of an animation varies over the duration of
the animation. (Animation refer to them as ‘easing functions’,
hence the name of the module.) The most common kinds are
predefined. But it is possible to define others, including some
that overshoot their target for a bouncing effect. This module
defines the possible values for all timing properties.
Editors: Brian Birtles, Dean Jackson, Matt Rakow,
Shane Stephens
History
The Logical Properties and
Values Module provides ways to set properties indirectly,
depending on the direction and writing mode of the element or its
containing block. E.g., setting 'margin-inline-start' indirectly
sets one of the four margin properties (margin-top, -right, -bottom
or -left), depending on whether the element's text is written left
to right, right to left, top to bottm or bottom to top. This is
useful in simple, generic style sheets, such as User Agent style
sheets, but can occasionally also shorten styles for documents that
mix left-to-right and right-to-left text, in particular for
elements whose layouts for right-to-left and left-to-right text are
(mostly) mirror images.
Editors: Rossen Atanassov, Elika J. Etemad /
fantasai
History
The CSS Shadow Parts module defines the selector syntax (viz., the pseudo-element ‘::part()’)
to select the ‘parts’ of a ‘shadow tree’.
CSS knows about ‘replaced elements’, elements in a document that
do not display their own content, but are replaced by some other
object, such as an image or a ‘shadow tree’. A shadow tree is an
object that, typically, has one or more configurable aspects,
called ‘parts’, that are configured by setting CSS properties on
them. E.g., the shadow tree may represent a calendar or an embedded
video player and it may be possible to configure the background
color or the font on some buttons. What parts exist (and what their
name is), which properties apply to them and what their precise
effect is depends on the object. This module of CSS defines how to
write selectors that select such a part. (See also CSS Scoping.)
Editors: Tab Atkins-Bittner, Fergal Daly
History
The specification CSS Spatial
Navigation Level 1 defines a general model for directional
navigation: up, down, left, right, within a group or across groups
of elements; and it defines JavaScript functions and events that
implement that model. It does not define what keypresses or other
physical action cause those events. That depends on the User Agent.
The CSS Basic User Interface Module
defines properties that help specify what is considered up, left,
etc.
Editors: Jihye Hong, Florian Rivoal
History
The CSS Color Adjust module defines ways for an author to adapt a style to the user's color
scheme, and in particular to a ‘light’ color scheme (i.e., dark
text on a light background), a ‘dark’ scheme (i.e., light text on a
dark background) or a printer-friendly scheme (i.e., using less
ink). A Media Query allows to know
if the system has a specific color scheme and a property allows to
set the initial values of color and background to those from the
system's scheme.
The module also defines how a user can force a color scheme on a
page (for accessibility reasons) and how an author can adapt the
style to such a forced scheme.
The Color module defines keywords
representing system colors. They are deprecated, but they also
follow the system's color scheme.
Editors: Elika J. Etemad / fantasai, Rossen
Atanassov, Rune Lillesveen, Tab Atkins Jr.
History
Animation Worklet API
defines two APIs to create animations in JavaScript. The code for
such animations can be run in a separate thread (background
process), so that the main thread is not interrupted or can be
given priority.
Editors: Majid Valipour, Robert Flack, Stephen
McGruer
History
Resize Observer defines
an API for scripts that need to react to changes in an element's
size.
Editors: Aleks Totic, Greg Whitworth
History
Color Level 5 expands Color Level 4 with notations for relative
colors: colors in between other colors, colors that are lighter or
darker than a given color, or complementary.
Editors: Chris Lilley, Una Kravets, Lea Verou,
Adam Argyle
History
Conditional Rules Level 5
extends Conditional Rules Level 4.
It defines how to combine media queries and @supports rules and
adds an ‘@else’ group to implicitly negate media queries and
@supports rules.
It also makes it possible to check for font features inside
conditional rules.
Editors: L. David Baron, Elika J. Etemad /
fantasai, Chris Lilley
History
CSS Custom Highlight API
Level 1 defines a library of functions that can be called
from a script to select (highlight) one or more ranges of text in a
document and assign them a name. It also defines a CSS selector to
style such named ranges of text from a style sheet.
E.g., if a range of text has been selected by a script and
assigned the name ‘my-key-phrase’, the CSS rule
'::highlight(my-key-phrase) {color: blue}' makes that text blue.
Editors: Florian Rivoal, Sanket Joshi, Megan
Gardner
History
CSS Nesting defines a
syntax that avoids having to type (long) selectors several times.
An abbreviation allows the selector of the previous style rule to
be reused in the next style rule.
Editors: Tab Atkins-Bittner, Adam Argyle
History
Level 1 contains just the most basic properties of CSS, such as
'margin', 'padding', 'background', 'color' and 'font', with
restrictions on the allowed values. It was the first level of CSS
to be completed (in 1996) and matched the capabilities of
implementations of the time. It is currently only of historical
interest; all implementations should be able to support level 2 and
probably large parts of level 3, too.
Editors: Håkon Wium Lie, Bert Bos
SVG
Some properties are specifically for styling SVG (or similar
graphics languages) and are defined in the SVG spec, rather than in
a CSS module. They can be used together with other properties in a
style sheet, but usually don't apply to the same elements. They
specify things such as the color of strokes and fills, and the
shape of the ends of strokes.

Question: who has the ability to respond to styles styles

Question: who is responsible for designing styles in styles sheets

Question: what are the standards used in cascading styles sheets

Question: how is styles 2.1 achieved

、 新た な 機能 の 追加 や 改良

Question: what is the latest version of cascading styles sheets

Question: what is the latest version of cascading stylesets

Question: what is the main goal of cascading style sheets

機能 の 追加 や 改良

Question: what is the structure of cascading style sheets

The user agent will be able to choose whether or not to respond to each module and will be involved in vertical letters and other standards other than HTML .

CSS3 以降では CSS 2.1 を中核とし、新たな機能の追加や改良をモジュールとすることで実現するものとする§2.1 CSS Levels, 『CSS Snapshot 2015』 W3C。 ユーザーエージェントは各モジュールへ対応するか否かを自由に選択できるようになる他、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。

In CSS3 and later, CSS 2.1 will be centralized and achieved by adding and improving new features as a module § 2.1 CSS Levels, CSS Snapshot 2015 and W3C. The user agent will be able to choose whether or not to respond to each module and will be involved in vertical letters and other standards other than HTML.