广泛部署的技术

Web上的内容可以使用CSS(层叠样式表)进行样式化。特别是CSS3(CSS规范的第三版)是作为规范的集合而建立的,这些规范定义了简单而强大的特性来创建图形效果,例如圆角复杂背景图像阴影效果旋转内容CSS变换, 包括3D效果

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

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

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

字体在构建引人入胜的图形界面中扮演着重要的角色,但移动设备通常只包含有限的字体。WOFF 1.0(Web 开放字体格式)通过使得易于使用通过样式表自动下载的字体来解决该限制,同时将下载字体的大小限制为呈现用户界面实际所需的大小。即将到来的 WOFF 2.0 将下载量减少了25%;在移动设备上,下载和显示这些字体所需的时间减少了35%。

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)CR

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

CSS 背景和边框模块第三版中的复杂背景 (Complex backgrounds in CSS Backgrounds and Borders Module Level 3)CR
CSS 背景和边框模块第三版中的盒子阴影效果 (Box shadow effects in CSS Backgrounds and Borders Module Level 3)CR

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

变换效果CSS 变换模块第一版中的2D 效果 (2D effects in CSS Transforms Module Level 1)WD

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

CSS 变换模块第一版中的3D 效果 (3D effects in CSS Transforms Module Level 1)WD

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

动画CSS 动画第一版 (CSS Animations Level 1)WD

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

CSS 过渡 (CSS Transitions)WD

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

HTML 5.1中的requestAnimationFrameREC

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

复杂排版CSS弹性盒式布局模块第一版 (CSS Flexible Box Layout Module Level 1)CR

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

可下载字体Web 字体文件格式 1.0 (WOFF File Format 1.0)REC

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

Web 字体文件格式 2.0 (WOFF File Format 2.0)CR

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

2D矢量图形可扩展矢量图形 (SVG) 1.1 规范 (Scalable Vector Graphics (SVG) 1.1 Specification)REC

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

可扩展矢量图形 (SVG) 第二版 (Scalable Vector Graphics (SVG) 2)CR

2D 可编程 APIHTML画布2D上下文 (HTML Canvas 2D Context)REC

已有稳定实现
shipped in firefoxshipped in chromeshipped in edgeshipped in safari

开发中的技术

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

为了应用的动画部分确保最佳的性能,Web 开发者可以使用CSS will-change属性让浏览器在动画发生之前计算动画。

考虑到通过移动网络下载字体所需的时间,Web 开发者需要调整其内容以适应字体的渐进可用性;CSS 字体加载为开发者提供必要的事件来实现这种适应性。

锁定屏幕的方向是一个有用的特性;屏幕方向API不仅可以检测方向变化,还可以锁定方向为特定状态。

特性规范成熟度现有实现
动画Web 动画 (Web Animations)WD

考虑实现
consideration in safari

已有稳定实现
shipped in firefoxshipped in chrome

CSS Will Change Module Level 1CR

考虑实现
consideration in edge

已有稳定实现
shipped in firefoxshipped in chromeshipped in safari

可下载字体CSS 字体加载第三版 (CSS Font Loading Module Level 3)LastCall

已有稳定实现
shipped in firefoxshipped in chromeshipped in safari

方向锁定屏幕方向API (The Screen Orientation API)WD

已有稳定实现
shipped in firefoxshipped in chromeshipped in edge