广泛部署的技术

CSS 3及更高版本定义了定义了简单而强大的特性来创建图形效果,例如圆角阴影效果旋转内容等。

动画可以通过CSS动画CSS过渡声明性地描述。

使用脚本控制的动画可能需要很多计算资源,特别是在受限制的移动设备上。动画帧提供了管理动画更新速率的可能性。

默认情况下,CSS的盒模型规定元素的任何内边距和边框都要在指定的宽度和高度之外设置和绘制。因此,一个方框的有效外部大小会随着填充和边框的使用而变化,这使得响应式布局的设计变得复杂,开发者希望根据屏幕的大小改变框(box)的大小。box-sizing属性的 border-box 值告诉用户代理在指定的宽度和高度内设置内边距和边框,简化了响应式布局的设计。

CSS 弹性盒式布局CSS 网格布局引入了两种新的布局模式,用于布局更复杂的应用程序。值得注意的是,通过允许在屏幕上重新排列元素的顺序,这两类新的布局模式可以保持内容本身(HTML 和 SVG)与其布局之间的清晰分离,而不必更改底层HTML。这对于需要调整用户界面和用户体验以适应屏幕和可用交互机制的移动设备尤为重要(另请参阅设备适配)。

弹性盒式布局专注于轴内排版,并采用更简单的自下而上的方式进行布局,而网格布局采用二维的排版方式,并使用自顶向下的方式进行布局。这两种布局方式互相补充,都将成为对 Web 开发者有用的工具。

字体在构建引人入胜的图形界面中扮演着重要的角色,但移动设备通常只包含有限的字体。WOFF(Web 开放字体格式)通过使字体能够通过样式表很方便地自动下载来解决该限制,同时将下载字体的大小限制为呈现用户界面实际所需的大小。WOFF对移动设备友好,这归功于字体数据预处理和优化步骤,可减少字体数据结构的冗余,以及专门的熵压缩编码方案,即使在使用低端移动设备时也不需要使用过多的CPU或内存资源来解码。

SVG(可扩展矢量图形)提供了一种基于 XML 的标记语言来描述二维矢量图形。由于这些图形被描述为一组几何形状,因此可以根据用户的请求进行缩放,这使得 SVG 非常适合在屏幕空间有限的移动设备上创建图形。SVG也很容易制作动画,以及复杂和平滑的用户界面。

SVG 在 HTML5 中的整合开辟了新的可能性,例如将高级图形过滤器(通过SVG过滤器)应用于多媒体内容(包括视频)。SVG 2 完善了上述整合和 SVG 的特性集合。

作为 SVG 提供的声明性方法的补充,HTML5中添加的<canvas>元素使2D编程API非常适合以较少内存占用的方式处理图形。

图形密集型应用(例如游戏)中的另一个重要的特性是使用整个屏幕来显示图形;在全屏API上的工作可以请求和检测全屏显示,现在在 Web 超文本应用技术工作小组中完成。

Khronos Group 在 W3C 之外开发了一个名为 WebGL 的用于 HTML5 画布的 3D 图形API;这个 API 与 OpenGL ES 兼容,可用于嵌入式系统和移动设备。GPU for the Web 社区组也开始设计一个新的 Web API,以高性能、强大和安全的方式展示现代 3D 图形和计算能力,目标是跨平台(例如 Direct3D 、Metal 或 Vulkan)。

特性规范 / 小组成熟度现有实现
选择浏览器…
边框和背景效果CSS 背景和边框模块第三版中的圆角 (Rounded corners in CSS Backgrounds and Borders Module Level 3)
CSS 工作组 (CSS Working Group)
候选推荐标准
CSS 背景和边框模块第三版中的盒子阴影效果 (Box shadow effects in CSS Backgrounds and Borders Module Level 3)
CSS 工作组 (CSS Working Group)
候选推荐标准
变换效果CSS 变换模块第一版中的2D 效果 (2D effects in CSS Transforms Module Level 1)
CSS 工作组 (CSS Working Group)
工作草案
动画CSS 动画第一版 (CSS Animations Level 1)
CSS 工作组 (CSS Working Group)
工作草案
CSS 过渡 (CSS Transitions)
CSS 工作组 (CSS Working Group)
工作草案
HTML 5.2中的requestAnimationFrame
Web 平台工作组 (Web Platform Working Group)
正式推荐标准

已有稳定实现:
在 Chrome(桌面, 移动)中已有稳定实现。 来源:Chrome Platform Status在 Microsoft Edge(桌面, 移动)中已有稳定实现。 来源:Microsoft Edge Platform Status在 Firefox(桌面, 移动)中已有稳定实现。 来源:Can I use在 Safari(桌面, 移动)中已有稳定实现。 来源:Can I use在 百度浏览器(移动)中已有稳定实现。 来源:Can I use在 Opera(桌面)中已有稳定实现。 来源:Can I use在 QQ浏览器(移动)中已有稳定实现。 来源:Can I use在 三星浏览器(移动)中已有稳定实现。 来源:Can I use在 UC浏览器(移动)中已有稳定实现。 来源:Can I use

已有实验性实现:
在 Opera(移动)中已有实验性实现。 来源:MDN Browser Compatibility Data

复杂排版CSS 基本用户界面模块第三版中的box-sizing 属性 (box-sizing property in CSS Basic User Interface Module Level 3 (CSS3 UI))
CSS 工作组 (CSS Working Group)
正式推荐标准
CSS 弹性盒式布局模块第一版 (CSS Flexible Box Layout Module Level 1)
CSS 工作组 (CSS Working Group)
候选推荐标准
CSS 网格布局模块第一版 (CSS Grid Layout Module Level 1)
CSS 工作组 (CSS Working Group)
候选推荐标准
可下载字体Web 字体文件格式 2.0 (WOFF File Format 2.0)
Web 字体工作组 (Web Fonts Working Group)
正式推荐标准
2D矢量图形可扩展矢量图形 (SVG) 1.1 (Scalable Vector Graphics (SVG) 1.1 (Second Edition))
SVG 工作组 (SVG Working Group)
正式推荐标准
可扩展矢量图形 (SVG) 2 (Scalable Vector Graphics (SVG) 2)
SVG 工作组 (SVG Working Group)
候选推荐标准
2D 可编程 APIHTML画布2D上下文 (HTML Canvas 2D Context)
HTML 媒体扩展工作组 (HTML Media Extensions Working Group)
正式推荐标准

开发中的技术

动画也可以通过脚本通过Web动画中的API进行管理。

CSS 绘图 API 允许 Web 开发者为 CSS 生成可以响应样式和大小更改的 2D 图像,而且无需创建 DOM 元素,也不必在重绘期间阻塞主线程,从而能够减少内存和 CPU 的使用,提高性能。

考虑到通过移动网络下载字体所需的时间,Web 开发者需要调整其内容以适应字体的渐进可用性。CSS 字体加载为开发者提供必要的事件和接口来实现这种适应性。@font-face@font-feature-valuesfont-display 描述符(descriptor)也可用于控制可下载字体在完全加载之前的呈现方式。

沿着不同轴(width, weight, optical size)的字体变化可以被编码在单个字体文件中。CSS中的可变字体属性允许更好地控制可变字体的使用,并且帮助开发人员避免不必要的网络请求来获取字体的其他变体。

特性规范 / 小组成熟度现有实现
选择浏览器…
动画Web 动画 (Web Animations)
CSS 工作组 (CSS Working Group)
SVG 工作组 (SVG Working Group)
工作草案
2D 可编程 APICSS 绘图 API 第一版 (CSS Painting API Level 1)
CSS 工作组 (CSS Working Group)
候选推荐标准
可下载字体CSS 字体加载第三版 (CSS Font Loading Module Level 3)
CSS 工作组 (CSS Working Group)
工作草案
CSS 字体模块第四版中的font-display (font-display in CSS Fonts Module Level 4)
CSS 工作组 (CSS Working Group)
工作草案
CSS 字体模块第四版中的可变字体 (Variable fonts in CSS Fonts Module Level 4)
CSS 工作组 (CSS Working Group)
工作草案

探索性工作

网页内容很少能够完整显示在移动设备的首屏,所以需要用户向下滚动。Web应用可能希望根据当前滚动位置调整其用户界面,比如在用户滚动时缩小顶部导航菜单或显示进度条。这项功能需要现在编写脚本,而滚动关联动画规范提出了一种基于CSS属性的声明性机制。

特性规范 / 小组实现意向
选择浏览器…
动画Scroll-linked Animations
Web 平台孵化社区组 (Web Platform Incubator Community Group)