广泛部署的技术
CSS 3及更高版本定义了定义了简单而强大的特性来创建图形效果,例如圆角、阴影效果和旋转内容等。
默认情况下,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)。
开发中的技术
动画也可以通过脚本通过Web动画中的API进行管理。
CSS 绘图 API 允许 Web 开发者为 CSS 生成可以响应样式和大小更改的 2D 图像,而且无需创建 DOM 元素,也不必在重绘期间阻塞主线程,从而能够减少内存和 CPU 的使用,提高性能。
考虑到通过移动网络下载字体所需的时间,Web 开发者需要调整其内容以适应字体的渐进可用性。CSS 字体加载为开发者提供必要的事件和接口来实现这种适应性。@font-face
和 @font-feature-values
的 font-display
描述符(descriptor)也可用于控制可下载字体在完全加载之前的呈现方式。
沿着不同轴(width, weight, optical size)的字体变化可以被编码在单个字体文件中。CSS中的可变字体属性允许更好地控制可变字体的使用,并且帮助开发人员避免不必要的网络请求来获取字体的其他变体。
探索性工作
网页内容很少能够完整显示在移动设备的首屏,所以需要用户向下滚动。Web应用可能希望根据当前滚动位置调整其用户界面,比如在用户滚动时缩小顶部导航菜单或显示进度条。这项功能需要现在编写脚本,而滚动关联动画规范提出了一种基于CSS属性的声明性机制。
特性 | 规范 / 小组 | 实现意向选择浏览器… |
---|---|---|
动画 | Scroll-linked Animations Web 平台孵化社区组 (Web Platform Incubator Community Group) |