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, 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") }}
 
- -

 

-- cgit v1.2.3-54-g00ecf