CSS Will Change 模型级别 1

文摘

本文档定义CSS的属性----will-change ,这个属性允许一个开发者(CSS作者)提前告知用户代理一个元素可能会做出的改变. 允许用户代理提前优化需要改变的元素, 在动画真正开始之前,为动画提前完成一些的重度开销. 在屏幕,在纸,在演讲等等中,CSS是一门语言用来描述结构化的渲染文档 (例如HTML和XML)

本文档的状态

内容目录

1 介绍

现代CSS渲染经过大量复杂的逻辑优化以保证页面渲染的快速和有效. 遗憾地, 使用这样的逻辑优化通常是需要花费非常重度的启用开销, 这样的开销能够对一个页面的响应是有负面的影响的.

在此规范中的will-change 属性定义允许开发者(CSS作者)去提前声明一些可能在未来会发生改变的属性, 在这些属性需要(改变)之前,便于用户代理在一段时间内可以设置一些适当的逻辑优化. 这种方式, 当改变真的发生时, 页面的更新就非常爽快了.

2 说明在未来的行为: will-change属性

<animateable-feature> = scroll-position | contents | <custom-ident>

will-change 属性 为用户代理提供了一个渲染的线索, 开始于开发者(CSS作者)在这个元素期望去做的多种改变. 这个属性允许用户代理去提前完成一些必要的逻辑优化使得渲染这些改变时更加流畅, 避免了当开发者(CSS作者) 改变属性或者动画开始时的“jank”特性.

属性值拥有以下的值:

auto

表示没有明确的意图; 无论是启发式和最优化，用户代理应该应用都和正常情况相同.

scroll-position

表示开发者(CSS作者)期望去在接下来去改变或者有动画应用元素的滚动位置.

举个例子来说, 在一个可滚动的元素上浏览器通常仅仅会渲染"scroll window"的内容, 并且有一些内容会超过这个窗口, 在使得滚动看上去更加的好之前，通过跳过渲染去平衡内存和节约时间 . 一个浏览器可能会取这个值作为一个信号去扩大内容在滚动窗口中的范围当滚动窗口被渲染, 以至于长(快速)滚动能够被执行的更流畅.

contents

表示开发者(CSS作者)期望去在接下来去改变或者有动画应用元素的内容

举个例子来说, 浏览器通常会 “cache(缓存)” 一段时间内渲染的元素, 因为通常大多数这些元素不会频繁改变, 或者也仅仅只是改变它们的位置. 当然, 如果一个元素 *会* 频繁改变它的内容, 产生和维持这样的缓存是非常浪费时间的. 一个浏览器可能会取这个值作为一个信号去主动减少在这个元素上的缓存 或者避免缓存所有和紧紧去重复渲染这个元素经常被改变的内容.

<custom-ident>

表示开发者(CSS作者)期望去在接下来去改变或者有动画应用指定的元素的属性.

<custom-ident> 产生是用来排除这里的关键字 will-change, none, all, auto, scroll-position, and contents, 从<custom-ident>之外增加一些通用的关键字 .

注释: 注意所有的属性都没有受到影响在规定时, 针对所有属性的改变, 用户代理不能够完成任何已经明确规定的逻辑优化的改变. 这仍然是 安全的去规定它们, 尽管; 这将仅仅只是简单的没有影响.

如果一个属性无最初的值,在这个元素上这个属性将创建一个堆栈的内容, 明确规定在will-change的属性必须在这个元素上创建一个堆栈的内容.

如果一个属性无最初的值, 这个属性将造成这个元素产生一个包含区块的固定定位的元素, 明确规定在 will-change的属性必须造成这个元素产生一个包含区块的固定定位的元素

如果一个属性无最初的值, 这个属性将造成在这个元素上渲染行为的不同 (就像对文本使用了一个与众不同反混淆的策略), 用户代理应该使用轮流渲染当这个属性在 will-change被明确规定时, 去避免渲染行为的突然不同当这个属性终于被改变时.

举个例子来说, 浏览器通常会操作元素的transform去设置一个来自于正常元素中没有初始值,非常独特的元素, 或者可能渲染它们通过它们本身的“GPU layer(GPU层)” 或者引用其他的途径使得转换种类变得能够更加简单的去变快使得transform能够产生. 一个浏览器可能会取transform的值作为一个信号 这个信号应该立刻继续和立刻提高这个元素本身的层, 在这个元素进行转化之前, 在旧和新的层渲染时候去避免任何延迟调用.

明确规定will-change属性对元素没有直接的影响, 超出堆栈的内容创建和内容区块和以上规定一样. 这个属性仅仅是一个用户代理的渲染线索, 在改变真正发生之前,允许用户代理对确定的改变的类型设置潜在开销巨大的优化操作

一致性

文档规定

一致性的需求表达结合了 描述性声明和RFC 2119术语. 关键词 "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", 和 "OPTIONAL" 在这篇文档的规范性部分将会被解释为就像RFC 2119描述中的一样. 当然, 为了可读性, 在这篇规范中,这些关键词都不会呈现为大写字母.

本规范的所有文本都是标准的除了一些非常明显的区域被标记为 非标准的, 举例, 和 注释. [RFC2119]

本规范的例子都是用关键字"for example"作为引导 或者标准的文本使用class="example"建立出来的部分, like this:

信息的注释使用"Note"关键字作为起始标志并且准标的文本使用class="note"建立出来的部分, 就像这样:

注释, 这是一个提供信息的注释.

一致性类

这篇规范的一致性的定义是通过三种一致性类来定义的:

样式表

A CSS样式表.

渲染

一个 用户代理 用来解释样式表的语法并且渲染文档时使用.

编辑工具

一个用户代理 用来编写样式表.

样式表规划于本规范 如果样式表所有的语句使用的语法在这个模块中去定义 按照通用CSS语法都是有效的并且每一个特点的单独的语法在这个模型中被定义.

渲染规划于本规范 如果, 为了增加解释样式表所以通过适合的规范被定义了, 它支持所有通过本规范所被定义的特点,通过正确语法解析 并且按照语法渲染这篇文档. 当然, 无能的用户代理能够正确渲染出文档由于设备的局限不能使用户代理按照规划去做. (举个例子来说, 用户代理在黑白显示器中不需要去渲染颜色.)

编辑工具规划于本规范 如果用编辑工具编写样式表在语句构成上都能够正确的匹配通用CSS语法和每一个在这个模型里独特的语法, 其他所有遇见的一致性的需求的样式表都在这个模型中被描述出来

部分实现的方法

由于开发者(CSS作者)能够利用向前兼容的解析规则去指定回调的值, CSS的渲染必须 被视为都是有效的(同时适当的忽略)在任意向前规则, 属性, 属性值, 关键字, 和其它一些语法构建对于它们有可能还不够等级去支持的. 尤其是, 用户代理一定不能选择 无视掉不支持的组成部分的值并且名义上支持的值是一个属性的 多个值中的一个值的声明: 如果任何一个值被视为作废 (被视为一个不支持的值), 整个声明都需要被CSS无视掉.

实验性的方法

为了避免和未来的CSS特点发生冲突, CSS2.1规范 预定保留前缀语法 对于属性和实验性扩展在CSS中.

较早的规范的获取在W3C process中的候选推荐时期区域, 所有实现的CSS方法都被认为是实验性的. CSS工作组推荐实现的方法 使用产商前缀语法对于CSS特征, 包括在 W3C工作草案中. 这是为了未来在草案中变更时避免不兼容性.

非实验性的方法

一旦一个规范能够在候选推荐时期区域获取到, 非实验性的方法就是可能, 并且方法应该 发布非前缀的方法,在任何CR-level特点 ,根据本规范它们能够正确被演示出来的方法.

为了发布和维护互操作性CSS的方法, CSS工作组要求非实验性的 CSS渲染提交一个方法报告(并且, 如果有必要, 针对这篇报告附上测试用例)到W3C在 发布一个在任何CSS特点的非前缀方法之前. 测试案例提交给W3C并且通过CSS工作组作为主题去检查和修正.

更多关于提交测试案例的信息和方法报告 可以通过CSS工作组的网站被找到, 地址是 http://www.w3.org/Style/CSS/Test/. 如果有任何疑问请发邮件到 public-css-testsuite@w3.org .

参考

参考的标准

参考的信息

索引

属性的索引