广泛部署的技术
Web上的内容可以使用CSS(层叠样式表)进行样式化。特别是CSS3(CSS规范的第三版)是作为规范的集合而建立的,这些规范定义了简单而强大的特性来创建图形效果,例如圆角、复杂背景图像、阴影效果、旋转内容(CSS变换, 包括3D效果)。
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) | 已有稳定实现 | |
CSS 背景和边框模块第三版中的复杂背景 (Complex backgrounds in CSS Backgrounds and Borders Module Level 3) | |||
CSS 背景和边框模块第三版中的盒子阴影效果 (Box shadow effects in CSS Backgrounds and Borders Module Level 3) | 已有稳定实现 | ||
变换效果 | CSS 变换模块第一版中的2D 效果 (2D effects in CSS Transforms Module Level 1) | 已有稳定实现 | |
CSS 变换模块第一版中的3D 效果 (3D effects in CSS Transforms Module Level 1) | 已有稳定实现 | ||
动画 | CSS 动画第一版 (CSS Animations Level 1) | 已有稳定实现 | |
CSS 过渡 (CSS Transitions) | 已有稳定实现 | ||
HTML 5.1中的requestAnimationFrame | 已有稳定实现 | ||
复杂排版 | CSS弹性盒式布局模块第一版 (CSS Flexible Box Layout Module Level 1) | 已有稳定实现 | |
可下载字体 | Web 字体文件格式 1.0 (WOFF File Format 1.0) | 已有稳定实现 | |
Web 字体文件格式 2.0 (WOFF File Format 2.0) | 已有稳定实现 | ||
2D矢量图形 | 可扩展矢量图形 (SVG) 1.1 规范 (Scalable Vector Graphics (SVG) 1.1 Specification) | 已有稳定实现 | |
可扩展矢量图形 (SVG) 第二版 (Scalable Vector Graphics (SVG) 2) | 无 | ||
2D 可编程 API | HTML画布2D上下文 (HTML Canvas 2D Context) | 已有稳定实现 |
开发中的技术
动画也可以通过脚本通过Web动画中的API进行管理。
为了应用的动画部分确保最佳的性能,Web 开发者可以使用CSS will-change
属性让浏览器在动画发生之前计算动画。
考虑到通过移动网络下载字体所需的时间,Web 开发者需要调整其内容以适应字体的渐进可用性;CSS 字体加载为开发者提供必要的事件来实现这种适应性。
锁定屏幕的方向是一个有用的特性;屏幕方向API不仅可以检测方向变化,还可以锁定方向为特定状态。
特性 | 规范 | 成熟度 | 现有实现 |
---|---|---|---|
动画 | Web 动画 (Web Animations) | 考虑实现 已有稳定实现 | |
CSS Will Change Module Level 1 | 考虑实现 已有稳定实现 | ||
可下载字体 | CSS 字体加载第三版 (CSS Font Loading Module Level 3) | 已有稳定实现 | |
方向锁定 | 屏幕方向API (The Screen Orientation API) | 已有稳定实现 |