--- title: CSS3 slug: Archive/CSS3 tags: - CSS - CSS 参考 - CSS3 - 进阶 translation_of: Archive/CSS3 ---

CSS3层叠样式表(Cascading Style Sheets)语言的最新版本,旨在扩展CSS2.1。

它带来了许多期待已久的新特性, 例如圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式,如 multi-columns flexible box 与 grid layouts。实验性特性以浏览器引擎为前缀(vendor-prefixed),应避免在生产环境中使用,或极其谨慎地使用,因为将来它们的语法和语义都有可能被更改。

模块和标准化进程

CSS Level 2 经历了 9 年的时间(从 2002 年 8 月到 2011 年 6 月)才达到 Recommendation(推荐) 状态,主要原因是被一些次要特性拖了后腿。为了加快那些已经确认没有问题的特性的标准化速度,W3C 的 CSS Working Group(CSS 工作组)  作出了一项被称为 Beijing doctrine 的决定,将 CSS 划分为许多小组件,称之为模块。这些模块彼此独立,按照各自的进度来进行标准化。其中一些已经是 W3C Recommendation 状态,也有一些仍是 early Working Drafts(早期工作草案)。当新的需求被肯定后, 新的模块也会同样地添加进来。

CSS Modules and Snapshots as defined since CSS3

 

 

 

 

 

 

从形式上来说,CSS3 标准自身已经不存在了。每个模块都被独立的标准化,现在标准 CSS 包括了修订后的 CSS2.1 以及完整模块对它的扩充,模块的 level(级别)数并不一致。可以在每个时间点上为 CSS 标准定义一个 snapshots(快照),列出 CSS 2.1 和成熟的模块。

W3C 会定期的发布这些 snapshots,如 2007, 2010, 20152017

目前为止,还没有 level 超过 3 的模块被标准化,未来应该会有所改变。 不过有些模块,比如 Selectors(选择器)4 或 CSS Borders and Backgrounds(边框和背景)Level 4 早已拥有了 Editor's Draft(编辑草案),即使它们还没达到 First Published Working Draft(初次发布工作草案)状态。

 

CSS 模块状态

稳定模块(Stable modules)

有些 CSS 模块已经十分稳定,其状态为 CSSWG 规定的三个推荐品级之一:Candidate Recommendation(候选推荐), Proposed Recommendation(建议推荐)或 Recommendation(推荐)。表明这些模块已经十分稳定,使用时也不必添加前缀, 但有些特性仍有可能在 Candidate Recommendation 阶段被放弃。

这些模块扩展并修改了 CSS2.1 规范(核心规范)。 以下为 CSS 规范当前的 snapshot。

{{ SpecName("CSS3 Colors", "", "") }} {{ Spec2("CSS3 Colors") }} 自 2011 年 6 月 7 日

增加 {{ cssxref("opacity") }} 属性,还有 hsl(), hsla(), rgba() 和 rgb() 函数来创建 {{cssxref("<color>")}} 值。 它还将 currentColor 关键字定义为合法的颜色值。

transparent 颜色目前是真彩色 (多亏了支持 alpha 通道) 并且是 rgba(0,0,0,0.0) 的别名。

它废弃了 system-color keywords(系统颜色关键字), 它们已经不能在生产环境中使用。

{{ SpecName("CSS3 Selectors", "", "") }} {{ Spec2("CSS3 Selectors") }} 自 2011 年 9 月 29 日

增加:

  • 子串匹配的属性选择器, E[attribute^="value"], E[attribute$="value"], E[attribute*="value"]。
  • 新的伪类:{{ cssxref(":target") }}, {{ cssxref(":enabled") }} 和 {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} 和 {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} 和 {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} 和 {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} 和 {{ cssxref(":only-of-type") }}, {{ cssxref(":empty") }}, 和 {{ cssxref(":not") }}。
  • 伪元素使用两个冒号而不是一个来表示::after 变为 {{ cssxref("::after") }}, :before 变为 {{ cssxref("::before") }}, :first-letter 变为 {{ cssxref("::first-letter") }}, 还有 :first-line 变为 {{ cssxref("::first-line") }}。
  • 新的 general sibling combinator(普通兄弟选择器)  ( h1~pre )。

下一个迭代的选择器规范早已开始运作,它还没有达到 First Public Working Draft 阶段。

{{ SpecName("CSS3 Namespaces", "", "") }} {{ Spec2("CSS3 Namespaces") }} 自 2011 年 9 月 29 日

通过定义 CSS qualified name(CSS 限定名) 的概念来增加对 XML Namespace(名空间) 的支持, 使用 ' | ' 语法并增加 {{ cssxref("@namespace") }} CSS @ 规则。

{{ SpecName("CSS3 Media Queries", "", "") }} {{ Spec2("CSS3 Media Queries") }} 自 2012 年 6 月 19 日

将之前的媒体类型 ( print, screen,……) 扩充为完整的语言, 允许使用类似 only screen 和 (color) 来实现 设备媒体能力查询功能

媒体查询并非仅能用于 CSS 文档中,它也被用于 HTML 元素的某些属性中, 例如 {{ HTMLElement("link") }} 元素的 {{ htmlattrxref("media","link") }} 属性。

该规范的下一个迭代也在进行中,借助新的媒体特征例如  hover 或 pointer,可以在 User Agent(用户代理) 上对 Web 站点的输入方法进行定制。对 ECMAScript 的检测, 使用 script 媒体特征也已经被提出。

{{ SpecName("CSS3 Style", "", "") }} {{ Spec2("CSS3 Style") }} 自 2013 年 11 月 7 日
正式定义了 HTML style 全局属性内容的语法。
{{ SpecName("CSS3 Backgrounds", "", "") }} {{ Spec2("CSS3 Backgrounds") }}

增加:

  • 背景支持各种类型的 {{cssxref("<image>")}}, 并不局限于之前定义的 url()。
  • 支持 multiple background images(多背景图片)。
  • {{ cssxref("background-repeat") }} 属性的 space 和 round 值,还有支持两个值的语法。
  • {{ cssxref("background-attachment") }} local 值。
  • CSS {{ cssxref("background-origin") }},{{ cssxref("background-size") }} 和 {{ cssxref("background-clip") }} 属性。
  • 支持带弧度的 border corner(边框角) CSS 属性:{{ cssxref("border-radius") }},{{ cssxref("border-top-left-radius") }},{{ cssxref("border-top-right-radius") }},{{ cssxref("border-bottom-left-radius") }} 和 {{ cssxref("border-bottom-right-radius") }} 。
  • 支持边框使用 {{cssxref("<image>")}}: {{ cssxref("border-image") }},{{ cssxref("border-image-source") }},{{ cssxref("border-image-slice") }},{{ cssxref("border-image-width") }},{{ cssxref("border-image-outset") }} 和 {{ cssxref("border-image-repeat") }} 。
  • 支持元素的阴影:{{ cssxref("box-shadow") }} 。

背景和边框规范的 CSS4 迭代早已进行,即便它还没有达到 First Public Working Draft 阶段,它计划增加对边框的裁剪功能 (借助 CSS {{ cssxref("border-clip") }},{{ cssxref("border-clip-top") }},{{ cssxref("border-clip-right") }},{{ cssxref("border-clip-bottom") }} 和 {{ cssxref("border-clip-left") }} 属性) 或边框一角的形状 (使用 CSS {{ cssxref("border-corner-shape") }} 属性)。

{{ SpecName("CSS3 Multicol", "", "") }} {{ Spec2("CSS3 Multicol") }}
增加简单的多列布局, 使用 CSS {{ cssxref("columns") }}, {{ cssxref("column-count") }}, {{ cssxref("column-fill") }}, {{ cssxref("column-gap") }}, {{ cssxref("column-rule") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("column-rule-style") }}, {{ cssxref("column-rule-width") }}, {{ cssxref("column-span") }}, {{ cssxref("column-width") }}, {{ cssxref("break-after") }}, {{ cssxref("break-before") }}, 和{{ cssxref("break-inside") }}。
{{ SpecName("CSS3 Speech", "", "") }} {{ Spec2("CSS3 Speech") }}
定义 speech 媒体类型,一个 aural formatting model(听觉格式化模型) 和多个用于 speech-rendering(语音呈现) 用户代理的属性。
{{ SpecName("CSS3 Images", "", "") }} {{ Spec2("CSS3 Images") }}

定义 {{cssxref("<image>")}} 数据类型。

扩充 url() 语法使其支持使用 media fragments(媒体片段) 来切割图片。

增加:

  • {{cssxref("<resolution>")}} 数据类型的 dppx 单位。
  • image() 函数,作为 url() 的更具灵活性的替代版本, 使用 url 来定义图片。
    有风险:由于缺少足够的浏览器支持, image() 函数的标准化可能会被推迟到该模块的下一个迭代中。
  • 支持 linear-gradient(), repeating-linear-gradient()radial-gradient()repeating-radial-gradient()。
  • 使用 CSS {{ cssxref("object-fit") }} 属性来定义一个“替换元素”的“内容(Content)”如何适应包含这个“替换元素”的盒子。
    有风险: 由于缺少足够的浏览器支持, {{ cssxref("object-fit") }} 及其属性的标准化可能会被推迟到该模块的下一个迭代中。
  • 使用 CSS {{cssxref("image-resolution") }} 和 {{cssxref("image-orientation") }} 属性来覆盖一个外部图片的分辨率和方向。
    有风险:由于缺少足够的浏览器支持,{{cssxref("image-resolution") }} 和 {{ cssxref("image-orientation")}} 属性的标准化可能会被推迟到该模块的下一个迭代中。

用于取代 CSS Image Level 3 的 CSS Image Values and Replaced Content Level 4 正在发展中,目前为 {{Spec2("CSS4 Images")}}。

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

使 initial 和 inherit 关键字能够被用于任意 CSS 属性中。

正式定义了 CSS 2.1 中的 CSS 数据类型,之前是隐晦的由它们的语法记号和文本来定义。

增加:

  • 定义了新的相对字体长度单位:rem 和 ch。
  • 定义了相对视口长度单位:vw,vh,vmax 和 vmin 。
  • 精确了绝对长度单位的实际尺寸,此前它们并非是绝对值,而是使用了 reference pixel(参考像素) 来定义。
  • 定义 {{ cssxref("<angle>") }},{{cssxref("<time>")}}, {{cssxref("<frequency>")}},{{cssxref("<resolution>")}}。
  • 规范 {{cssxref("<color>")}},{{cssxref("<image>")}} 和 {{cssxref("<position>")}} 定义的值。
  • {{cssxref("calc", "calc()") }},{{cssxref("attr", "attr()")}}和 toggle() 函数符号的定义。

有风险: 由于缺少足够的浏览器支持,calc(), attr(), 和 toggle() 函数符号的标准化可能会被推迟到该模块的下一个迭代中。

<ident> 和 <custom-ident> 这样的类型定义在 CSS Values and Units Module Level 4 中被推迟。

{{ SpecName("CSS3 Flexbox", "", "") }} {{ Spec2("CSS3 Flexbox") }}
为 CSS {{ cssxref("display") }} 属性增加了 flexbox layout(伸缩盒布局) 及多个新 CSS 属性来控制它:{{ cssxref("flex") }},{{ cssxref("flex-align") }},{{ cssxref("flex-direction") }},{{ cssxref("flex-flow") }},{{ cssxref("flex-item-align") }},{{ cssxref("flex-line-pack") }},{{ cssxref("flex-order") }},{{ cssxref("flex-pack") }} 和 {{ cssxref("flex-wrap") }}。
{{ SpecName("CSS3 Conditional", "", "") }} {{ Spec2("CSS3 Conditional") }}
增加了对样式表部分内容进行条件处理的功能, 若浏览器或文档的能力符合条件,则该部分的样式生效。它主要是允许了在 {{ cssxref("@media") }} 中嵌套 @ 规则, 增加了一个新的 CSS @ 规则, {{ cssxref("@supports") }} 和一个新的 DOM 方法 {{domxref("CSS.supports()")}}。
{{ SpecName("CSS3 Text Decoration", "", "") }} {{ Spec2("CSS3 Text Decoration") }}

扩展:

  • CSS {{ cssxref("text-decoration") }} 属性作为 CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, 和 {{ cssxref("text-decoration-style") }} 属性的简写形式。并增加了 {{ cssxref("text-decoration-skip") }}, 和 {{ cssxref("text-underline-position") }} 属性。

增加:

  • 使用 CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, 和 {{ cssxref("text-emphasis-position") }} 属性来支持 East-Asian-script emphasis marks(东亚文本重点符号)。
  • 使用 CSS {{ cssxref("text-shadow") }} 属性来支持文本的阴影。

明确:

  • 装饰的绘制顺序。

有风险: 由于缺少足够的浏览器支持,text-decoration-skip 行定位规则和在相同的基础文本上放置重点符号和 ruby 的能力的标准化可能会被推迟到该模块的下一个迭代中。

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

修正 CSS2.1 字体匹配算法,以便接近于真实的实现。

增加:

  • 通过 CSS {{ cssxref("@font-face") }} @ 规则来支持可下载字体。
  • 借助 CSS {{ cssxref("font-kerning") }} 属性来控制 contextual inter-glyph spacing(上下文 inter-glyph 间距)。
  • 借助 CSS {{ cssxref("font-language-override") }} 属性来选择语言指定的字形。
  • 借助 CSS {{ cssxref("font-feature-settings") }} 属性来选择带有 OpenType 特性的字形。
  • 借助 CSS {{ cssxref("font-size-adjust") }} 属性来控制当使用 fallback fonts(备用字体) 时的宽高比。
  • 选择替代字体,使用 CSS {{ cssxref("font-stretch") }},{{ cssxref("font-variant-alternates") }},{{ cssxref("font-variant-caps") }},{{ cssxref("font-variant-east-asian") }},{{ cssxref("font-variant-ligatures") }},{{ cssxref("font-variant-numeric") }},和 {{ cssxref("font-variant-position") }} 属性。还扩展了相关的 CSS {{ cssxref("font-variant") }} 速记属性,并引入了 {{ cssxref("@font-features-values") }} @ 规则。
  • 当这些字体在 CSS {{ cssxref("font-synthesis") }} 属性中找不到时自动生成斜体或粗体的控制。
{{ SpecName("CSS3 Cascade", "", "") }} {{ Spec2("CSS3 Cascade") }}

增加:

  • 属性的初始值和未设定值。
  • CSS {{ cssxref("all") }} 属性。
  • 域机制。

明确:

  • 与媒体依赖的@import声明交互与样式表的加载要求。
{{ SpecName("CSS3 Writing Modes", "", "") }} {{ Spec2("CSS3 Writing Modes") }}
定义了水平和垂直脚本书写模式,概况了 CSS {{ cssxref("direction") }} 和 {{ cssxref("unicode-bidi") }} 属性是如何与新 CSS {{ cssxref("text-orientation") }} 属性相互之间产生影响的,并在需要它们的地方扩展它们。
{{ SpecName("CSS Shapes", "", "") }} {{ Spec2("CSS Shapes") }}

定义了可用于浮动(float)的几何图形。这些图形描述了行内元素可被包裹的区域,而非包裹其边界框( bounding box)。

{{ SpecName("CSS Masks", "", "") }} {{ Spec2("CSS Masks") }}

定义了部分或完整隐藏可视元素的一种方式。其描述了如何使用另一图形元素或图片作为亮度遮罩(luminance)或透明度遮罩(alpha)。

处于改善阶段的模块

处于改善阶段(refining phase)的规范已基本稳定。虽然还有可能被修改,但不会和当前的实现产生冲突;其主要定义在个别特殊情况的行为。

{{ SpecName("Web Animations", "", "") }} {{ Spec2("Web Animations") }}
 
{{ SpecName("CSS3 Counter Styles", "", "") }} {{ Spec2("CSS3 Counter Styles") }}
 
{{ SpecName("Compositing", "", "") }} {{ Spec2("Compositing") }}
 
{{ SpecName("CSS3 Syntax", "", "") }} {{ Spec2("CSS3 Syntax") }}
澄清如何确定字符集; 分析和标记化算法的最小变化。
{{ SpecName("CSS Will Change", "", "") }} {{ Spec2("CSS Will Change") }}
 
{{ SpecName("CSS3 Transitions", "", "") }} {{ Spec2("CSS3 Transitions") }}
通过增加 CSS {{ cssxref("transition") }},{{ cssxref("transition-delay") }},{{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }},和 {{ cssxref("transition-timing-function") }} 属性来支持定义两个属性值间的 transitions effects(过渡效果)。
{{ SpecName("CSS3 Animations", "", "") }} {{ Spec2("CSS3 Animations") }}
允许定义动画效果, 借助于新增的 CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay") }}, {{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, 和 {{ cssxref("animation-timing-function") }} 属性, 以及 {{ cssxref("@keyframes") }} @ 规则。
{{ SpecName("CSS3 Transforms", "", "") }} {{ Spec2("CSS3 Transforms") }}

增加:

  • 支持适用于任何元素的 bi-dimensional transforms(二维变形),使用 CSS {{ cssxref("transform") }} 和 {{ cssxref("transform-origin") }} 属性。支持的变形有: matrix()translate()translateX()translateY(, scale()scaleX()scaleY()rotate()skewX(),和 skewY()。
  • 支持适用于任何元素的 tri-dimensional transforms(三维变形),使用 CSS  {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }}, 和 {{ cssxref("backface-visibility") }} 属性和扩展的 {{ cssxref("transform") }} 属性,使用以下变形: matrix 3d(), translate3d()translateZ()scale3d()scaleZ()rotate3d()rotateX()rotateY()rotateZ(),和 perspective()。

注意: 该规范是 CSS 2D-Transforms, CSS 3D-Transforms 和 SVG transforms 合并的结果。

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

定义了网页的分割将如何实行,即分页、分栏,以及窗口和孤儿页面的处理。

增加:

  • 通过 CSS {{ cssxref("box-decoration-break") }} 属性定义一个盒(box)被在页、栏或行被分割时,诸如边框与背景颜色或图片等修饰行为的支持。
{{ SpecName("CSS3 Text", "", "") }} {{ Spec2("CSS3 Text") }}

扩展:

  • CSS {{ cssxref("text-transform") }} 属性的值 full-width。
  • CSS {{ cssxref("text-align") }} 属性的值 startendstart end,和 match-parent,为包含多个方向文本的文档提供良好支持。
  • CSS {{ cssxref("text-align") }} 属性的 {{cssxref("<string>")}} 值来根据该字符对齐。对于数字的小数点对齐特别有用。
  • CSS {{ cssxref("word-spacing") }} 和 {{ cssxref("letter-spacing") }} 属性拥有范围限制,来控制两端对齐时的灵活性。

增加:

  • 使用 CSS {{ cssxref("text-space-collapse") }} 和 {{ cssxref("tab-size") }} 属性来控制空白该如何显示。
  • 使用 CSS {{ cssxref("line-break") }},{{ cssxref("word-break") }},{{ cssxref("hyphens") }},{{ cssxref("text-wrap") }},{{ cssxref("overflow-wrap") }},和 {{ cssxref("text-align-last") }} 属性来控制折行和单词边界。
  • 使用 CSS {{ cssxref("text-justify") }} 属性来控制两端对齐的行为,这是为了对更多语言类型增加支持。
  • 使用 CSS {{ cssxref("text-indent") }} 和 {{ cssxref("hanging-punctuation") }} 属性来控制 edge effect(边缘影响)。

一部分出现在早期 CSS Text Level 3 草案中的特性被推迟到了该规范的下个迭代中

{{ SpecName("CSS3 Variables", "", "") }} {{ Spec2("CSS3 Variables") }}
定义了允许在 CSS 中定义变量的机制。
{{ SpecName("Compositing", "", "") }} {{ Spec2("Compositing") }}
 

处于修正阶段的模块

处于修正阶段的模块没处于改善阶段的模块稳定。它们的语法一般还需要详细审查,可能还会有些大变化,还有可能不兼容之前的规范。替代语法已通过测试并被广泛实践。

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

增加:

  • 使用 CSS {{ cssxref("box-sizing") }} 属性来转换盒模型的能力。
    处于风险中 由于缺少足够的浏览器支持 , padding-box 值的标准化可能会被推迟到该模块的下一个迭代中。
  • 根据表单内容来设置样式, 使用 CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }},和 {{ cssxref(":read-write") }} 伪类与 {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, 和 {{ cssxref("::repeat-index") }} 伪元素。
    处于风险中 由于缺少足够的浏览器支持 ,伪元素 {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, 和 {{ cssxref("::repeat-index") }} 标准化可能会被推迟到该模块的下一个迭代中。
  • 支持图标,通过 CSS {{ cssxref("icon") }} 属性定义, 同时在 CSS {{ cssxref("content") }} 属性中设置新图标的值。
    处于风险中 由于缺少足够的浏览器支持 ,{{ cssxref("icon") }} 属性和 icon 值标准化可能会被推迟到 CSS 4 中。
  • 支持 CSS {{ cssxref("outline-offset") }} 属性, 这样可以对 outline 的位置做更多的控制。
  • 支持 CSS {{ cssxref("resize") }} 属性, Web 开发者可以控制元素是否能够以及如何调整大小。
  • 支持 CSS {{ cssxref("text-overflow") }} 属性, 定义文本溢出的行为。
    处于风险中 由于缺少足够的浏览器支持 ,该属性的双值语法也和 {{cssxref("<string>")}} 值一样, 它们的标准化可能会被推迟到该模块的下一个迭代中。
  • 定义鼠标 hotspot(热点) 的功能, 扩展了 {{ cssxref("cursor") }} 属性, 增加了新值:  none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in, zoom-out。
  • 指定 sequential navigation order(连续导航顺序, 即 tabbing order(移动顺序)) 的功能, 使用 CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} 属性。
    处于风险中 由于缺少足够的浏览器支持,导航属性标准化可能会被推迟到该模块的下一个迭代中。
  • 控制 IME editor(输入法编辑器) 使用的功能, 使用 CSS {{ cssxref("ime-mode") }} 属性。
    处于风险中 由于缺少足够的浏览器支持,{{ cssxref("ime-mode") }}属性标准化可能会被推迟到该模块的下一个迭代中。

这里提供了会出现在下次  CSS Basic User Interface Module 迭代中的功能列表。

{{ SpecName("CSS3 Grid", "", "") }} {{ Spec2("CSS3 Grid") }}
添加了 grid 布局给 CSS display 属性,以及一些新的属性来控制它:{{cssxref("grid")}},{{cssxref("grid-area")}},{{cssxref("grid-auto-columns")}},{{cssxref("grid-auto-flow")}},{{cssxref("grid-auto-position")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-template")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template-rows")}}, and {{cssxref("grid-template-columns")}}.
{{ SpecName("CSS3 Box Alignment", "", "") }} {{ Spec2("CSS3 Box Alignment") }}
 
{{ SpecName("CSS3 Paged Media", "", "") }} {{ Spec2("CSS3 Paged Media") }}
 
{{ SpecName("CSSOM View", "", "") }} {{ Spec2("CSSOM View") }}
 
{{ SpecName("CSS4 Selectors", "", "") }} {{ Spec2("CSS4 Selectors") }}
 

处于探索阶段的模块

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

扩展:

  • image() 函数标记来描述图片 (rtl 或 ltr) 的方向性,允许 bidi-sensitive(双向敏感) 的图片。
  • 为 {{ cssxref("image-orientation") }} 属性增加关键字 from-image,允许使用存储在图片中的 EXIF 数据。

增加:

  • image-set() 函数标记,允许定义不同分辨率下的对应图片实现依据分辨率选择图片。
  • element() 函数标记, 允许将页面的部分当作图片来使用。
  • cross-fade() 函数标记, 允许在两张图片之间过渡时使用中间图片,并定义了两张图片间的 interpolation(插值)。
  • conic-gradient() 和 repeating-conic-gradient() 函数标记,描述了一种新的渐变类型。
  • {{cssxref("image-rendering")}} 属性允许定义如何处理改变图片大小的行为。
{{ SpecName("CSS3 Device", "", "") }} {{ Spec2("CSS3 Device") }}
增加一个新的 @ 规则, {{ cssxref("@viewport") }},允许为视口指定尺寸(size)、缩放因子(zoom factor)和方向(orientation),这些将作为 initial containing block(初始包含块) 的基础。
{{ SpecName("CSS3 GCPM", "", "") }} {{ Spec2("CSS3 GCPM") }}
增加调整打印版本的功能,允许控制页头,页脚,同时引用表索引或表内容。
{{ SpecName("CSS3 Exclusions", "", "") }} {{ Spec2("CSS3 Exclusions") }}
扩展浮动机制,在任何定位方案中生成一个 exclusion regions(排斥区域)。增加形状标记,其中的内容必须流动。
{{ SpecName("CSS3 Lists", "", "") }} {{ Spec2("CSS3 Lists") }}
扩展了列表计数机制, 这样可以为列表标记设置样式,并使 Web 开发者定义新的列表计数方案。
{{ SpecName("CSS3 Regions", "", "") }} {{ Spec2("CSS3 Regions") }}

定义了一种可使内容流动至数个非连续空间的机制,称为区域(Regions)。

{{ SpecName("Filters 1.0", "", "") }} {{ Spec2("Filters 1.0") }}
 
{{ SpecName("CSS3 Template", "", "") }} {{ Spec2("CSS3 Template") }}
 
{{ SpecName("CSS3 Sizing", "", "") }} {{ Spec2("CSS3 Sizing") }}
 
{{ SpecName("CSS Line Grid", "", "") }} {{ Spec2("CSS Line Grid") }}
{{ SpecName("CSS3 Positioning", "", "") }} {{ Spec2("CSS3 Positioning") }}
 
{{ SpecName("CSS3 Ruby", "", "") }} {{ Spec2("CSS3 Ruby") }}
 
{{ SpecName("CSSOM", "", "") }} {{ Spec2("CSSOM") }}
 
{{ SpecName("CSS3 Overflow", "", "") }} {{ Spec2("CSS3 Overflow") }}
 
{{ SpecName("CSS3 Font Loading", "", "") }} {{ Spec2("CSS3 Font Loading") }}
 
{{ SpecName("CSS3 Display", "", "") }} {{ Spec2("CSS3 Display") }}
 
{{ SpecName("CSS Scope", "", "") }} {{ Spec2("CSS Scope") }}
 
{{ SpecName("CSS4 Media Queries", "", "") }} {{ Spec2("CSS4 Media Queries") }}
 
{{ SpecName("CSS Non-element Selectors", "", "") }} {{ Spec2("CSS Non-element Selectors") }}
 
{{ SpecName("Geometry Interfaces", "", "") }} {{ Spec2("Geometry Interfaces") }}
 
{ SpecName("CSS3 Inline", "", "") }} {{ Spec2("CSS3 Inline") }}
 

在重写的模块

以下模块已经过时,需要重写。语法仍然在审查,可能会以不兼容的方式发展出很多。替代语法已通过测试并被广泛实践。

{{ SpecName("CSS3 Box", "", "") }} {{ Spec2("CSS3 Box") }}
 
{{ SpecName("CSS3 Content", "", "") }} {{ Spec2("CSS3 Content") }}
 
{{ SpecName("CSS3 Inline Layout", "", "") }} {{ Spec2("CSS3 Inline Layout") }}