From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- files/zh-cn/archive/css3/index.html | 1047 ----------------------------------- 1 file changed, 1047 deletions(-) delete mode 100644 files/zh-cn/archive/css3/index.html (limited to 'files/zh-cn/archive/css3') diff --git a/files/zh-cn/archive/css3/index.html b/files/zh-cn/archive/css3/index.html deleted file mode 100644 index fe08545c87..0000000000 --- a/files/zh-cn/archive/css3/index.html +++ /dev/null @@ -1,1047 +0,0 @@ ---- -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, 2015 或 2017。

- -

目前为止，还没有 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") }} 属性的值 start，end，start 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") }}
 
- -

 

-- cgit v1.2.3-54-g00ecf