广泛部署的技术
图形效果
动画
复杂排版
默认情况下,CSS的盒模型规定元素的任何内边距和边框都要在指定的宽度和高度之外设置和绘制。因此,一个方框的有效外部大小会随着填充和边框的使用而变化,这使得响应式布局的设计变得复杂,开发者希望根据屏幕的大小改变框(box)的大小。box-sizing
属性的 border-box
值告诉用户代理在指定的宽度和高度内设置内边距和边框,简化了响应式布局的设计。
CSS 弹性盒式布局和CSS 网格布局引入了两种新的布局模式,用于布局更复杂的应用程序。值得注意的是,通过允许在屏幕上重新排列元素的顺序,这两类新的布局模式可以保持内容本身(HTML 和 SVG)与其布局之间的清晰分离,而不必更改底层HTML。这对于需要调整用户界面和用户体验以适应屏幕和可用交互机制的移动设备尤为重要(另请参阅设备适配)。
弹性盒式布局专注于轴内排版,并采用更简单的自下而上的方式进行布局,而网格布局采用二维的排版方式,并使用自顶向下的方式进行布局。这两种布局方式互相补充,都将成为对 Web 开发者有用的工具。
行间注(ruby)是标注在字词旁侧的小字号补充文本,常见于东亚文字的排版中,主要用于标音与释义。HTML 的 ruby 元素可以为文本添加行间注。CSS Ruby 中定义的 ruby-align、ruby-position 和其他属性提供了一种控制 ruby 元素的渲染的方法。
可下载字体
字体在构建引人入胜的图形界面中扮演着重要的角色,但移动设备通常只包含有限的字体。WOFF(Web 开放字体格式)通过使字体能够通过样式表很方便地自动下载来解决该限制,同时将下载字体的大小限制为呈现用户界面实际所需的大小。WOFF对移动设备友好,这归功于字体数据预处理和优化步骤,可减少字体数据结构的冗余,以及专门的熵压缩编码方案,即使在使用低端移动设备时也不需要使用过多的CPU或内存资源来解码。
2D矢量图形
图形 API
图形密集型应用(例如游戏)中的另一个重要的特性是使用整个屏幕来显示图形;在全屏API上的工作可以请求和检测全屏显示,现在在 Web 超文本应用技术工作小组中完成。
开发中的技术
动画
动画也可以通过脚本通过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-values
的 font-display
描述符(descriptor)也可用于控制可下载字体在完全加载之前的呈现方式。
沿着不同轴(width, weight, optical size)的字体变化可以被编码在单个字体文件中。CSS中的可变字体属性允许更好地控制可变字体的使用,并且帮助开发人员避免不必要的网络请求来获取字体的其他变体。
探索性工作
动画
网页内容很少能够完整显示在移动设备的首屏,所以需要用户向下滚动。Web应用可能希望根据当前滚动位置调整其用户界面,比如在用户滚动时缩小顶部导航菜单或显示进度条。这项功能需要现在编写脚本,而滚动关联动画规范提出了一种基于CSS属性的声明性机制。