广泛部署的技术

图形效果

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

动画

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

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

复杂排版

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

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

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

行间注(ruby)是标注在字词旁侧的小字号补充文本,常见于东亚文字的排版中,主要用于标音与释义。HTML 的 ruby 元素可以为文本添加行间注。CSS Ruby 中定义的 ruby-alignruby-position 和其他属性提供了一种控制 ruby 元素的渲染的方法。

可下载字体

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

2D矢量图形

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

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

图形 API

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

作为 Khronos Group 的一部分在 W3C 之外开发的 WebGL 为 Web 提供了底层3D图形API。该 API 与 OpenGL ES 兼容,适用于嵌入式系统,并可在移动设备上运行。基于 OpenGL ES 2.0 的 WebGL v1.0 有很好的跨设备支持,而基于 OpenGL ES 3.0 的 WebGL v2.0 的支持则较少。W3C 正在进行更新的 WebGPU API 的工作,请参阅下面的开发中的技术部分。

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

特性规范 / 小组成熟度现有实现
选择浏览器…
图形效果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标准中的requestAnimationFrame (requestAnimationFrame in HTML Standard)
Web 超文本应用技术工作小组 (WHATWG)
持续更新标准
复杂排版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)
候选推荐标准
HTML标准中的ruby 元素 (The ruby element in HTML Standard)
Web 超文本应用技术工作小组 (WHATWG)
持续更新标准
CSS Ruby 布局模块第一版中的ruby-align 属性 (The ruby-align property in CSS Ruby Layout Module Level 1)
CSS 工作组 (CSS Working Group)
工作草案
CSS Ruby 布局模块第一版中的ruby-position 属性 (The ruby-position property in CSS Ruby 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)
候选推荐标准
图形 APIHTML标准中的The 2D rendering context (The 2D rendering context in HTML Standard)
Web 超文本应用技术工作小组 (WHATWG)
持续更新标准
WebGL 规范 (WebGL Specification)
Khronos Group
正式推荐标准

开发中的技术

动画

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

图形 API

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

WebGPU API 以高性能、强大和安全的方式使用现代3D图形和计算功能,并与设备的系统平台(例如 Direct3D、Metal或Vulkan)无关。随附的 WebGPU 着色语言规范基于 SPIR-V 语义为 WebGPU 定义了基于文本的着色语言。

可下载字体

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

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

特性规范 / 小组成熟度现有实现
选择浏览器…
动画Web 动画 (Web Animations)
SVG 工作组 (SVG Working Group)
CSS 工作组 (CSS Working Group)
工作草案
图形 APICSS 绘图 API 第一版 (CSS Painting API Level 1)
CSS 工作组 (CSS Working Group)
候选推荐标准
WebGPU
GPU for the Web Working Group
编辑草案
WebGPU Shading Language
GPU for the Web 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)
CSS 工作组 (CSS Working Group)