mobile/graphics.zh.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <title>图形和布局</title>
  </head>
  <body>
    <header>
      <h1>图形和布局</h1>
      <p>Web上的内容可以使用 <a href="https://www.w3.org/Style/CSS/">CSS</a>（层叠样式表）进行样式设置。CSS 第三版（及更高版本）以<a href="https://www.w3.org/TR/CSS/#css">一系列规范</a>的形式存在，逐步覆盖和扩展核心的 CSS 2.1 规范。 除了 CSS 之外，Web 还能够嵌入位图或矢量图，以及绘制或操纵 2D 或 3D 图形。</p>
      <p><b>注意：</b>专门用于优化渲染性能的技术会在<a data-page="performance"></a>中描述。</p>
    </header>
    <main>
      <section class="featureset well-deployed">
        <h2>广泛部署的技术</h2>

        <p>CSS 3及更高版本定义了定义了简单而强大的特性来创建图形效果，例如<span data-feature="边框和背景效果"><a data-featureid="css-border-radius">圆角</a>、<a data-featureid="css-box-shadow">阴影效果</a></span>和<span data-feature="变换效果"><a data-featureid="css-2d">旋转内容</a></span>等。</p>
        <div data-feature="动画">
          <p>动画可以通过<a data-featureid="css-animations">CSS动画</a>和<a data-featureid="css-transitions">CSS过渡</a>声明性地描述。</p>
          <p>使用脚本控制的动画可能需要很多计算资源，特别是在受限制的移动设备上。<a data-featureid="animation-frames">动画帧</a>提供了管理动画更新速率的可能性。</p>
        </div>
        <div data-feature="复杂排版">
          <p>默认情况下，CSS的盒模型规定元素的任何内边距和边框都要在指定的宽度和高度之外设置和绘制。因此，一个方框的有效外部大小会随着填充和边框的使用而变化，这使得响应式布局的设计变得复杂，开发者希望根据屏幕的大小改变框（box）的大小。<a data-featureid="css-ui-box-sizing"><code>box-sizing</code></a>属性的 <code>border-box</code> 值告诉用户代理在指定的宽度和高度内设置内边距和边框，简化了响应式布局的设计。</p>
          <p><a data-featureid="css-flexbox">CSS 弹性盒式布局</a>和<a data-featureid="css-grid-1">CSS 网格布局</a>引入了两种新的布局模式，用于布局更复杂的应用程序。值得注意的是，通过允许在屏幕上重新排列元素的顺序，这两类新的布局模式可以保持内容本身（HTML 和 SVG）与其布局之间的清晰分离，而不必更改底层HTML。这对于需要调整用户界面和用户体验以适应屏幕和可用交互机制的移动设备尤为重要（另请参阅<a href="adaptation.zh.html">设备适配</a>）。</p>
          <p>弹性盒式布局专注于轴内排版，并采用更简单的自下而上的方式进行布局，而网格布局采用二维的排版方式，并使用自顶向下的方式进行布局。这两种布局方式互相补充，都将成为对 Web 开发者有用的工具。</p>
        </div>
        <div data-feature="可下载字体">
          <p>字体在构建引人入胜的图形界面中扮演着重要的角色，但移动设备通常只包含有限的字体。<a data-featureid="woff2">WOFF</a>（Web 开放字体格式）通过使字体能够通过样式表很方便地自动下载来解决该限制，同时将下载字体的大小限制为呈现用户界面实际所需的大小。WOFF对移动设备友好，这归功于字体数据预处理和优化步骤，可减少字体数据结构的冗余，以及专门的熵压缩编码方案，即使在使用低端移动设备时也不需要使用过多的CPU或内存资源来解码。</p>
        </div>
        <div data-feature="2D矢量图形">
          <p><a data-featureid="svg11">SVG</a>（可扩展矢量图形）提供了一种基于 XML 的标记语言来描述二维矢量图形。由于这些图形被描述为一组几何形状，因此可以根据用户的请求进行缩放，这使得 SVG 非常适合在屏幕空间有限的移动设备上创建图形。SVG也很容易制作动画，以及复杂和平滑的用户界面。</p>
          <p>SVG 在 HTML5 中的整合开辟了新的可能性，例如将高级图形过滤器（通过SVG过滤器）应用于多媒体内容（包括视频）。<a data-featureid="svg2">SVG 2</a> 完善了上述整合和 SVG 的特性集合。</p>
        </div>
        <p data-feature="2D 可编程 API">作为 SVG 提供的声明性方法的补充，HTML5中添加的<strong><code>&lt;canvas&gt;</code></strong>元素使<a data-featureid="canvas">2D编程API</a>非常适合以较少内存占用的方式处理图形。</p>
        <p>图形密集型应用（例如游戏）中的另一个重要的特性是使用整个屏幕来显示图形；在<a data-featureid="fullscreen">全屏API</a>上的工作可以请求和检测全屏显示，现在在 <a href="https://whatwg.org/">Web 超文本应用技术工作小组</a>中完成。</p>
        <p><a href="https://www.khronos.org/">Khronos Group</a> 在 W3C 之外开发了一个名为 <a href="https://www.khronos.org/webgl/">WebGL</a> 的用于 HTML5 画布的 3D 图形API；这个 API 与 <a href="https://www.khronos.org/opengles/">OpenGL ES</a> 兼容，可用于嵌入式系统和移动设备。<a href="https://www.w3.org/community/gpu/">GPU for the Web 社区组</a>也开始设计一个新的 Web API，以高性能、强大和安全的方式展示现代 3D 图形和计算能力，目标是跨平台（例如 Direct3D 、Metal 或 Vulkan）。</p>
      </section>
      <section class="featureset in-progress">
        <h2>开发中的技术</h2>
        <div data-feature="动画">
          <p>动画也可以通过脚本通过<a data-featureid="web-animations">Web动画</a>中的API进行管理。</p>
        </div>

        <div data-feature="2D 可编程 API">
          <p><a data-featureid="css-paint-api">CSS 绘图 API</a> 允许 Web 开发者为 CSS 生成可以响应样式和大小更改的 2D 图像，而且无需创建 DOM 元素，也不必在重绘期间阻塞主线程，从而能够减少内存和 CPU 的使用，提高性能。</p>
        </div>

        <div data-feature="可下载字体">
          <p>考虑到通过移动网络下载字体所需的时间，Web 开发者需要调整其内容以适应字体的渐进可用性。<a data-featureid="css-font-loading">CSS 字体加载</a>为开发者提供必要的事件和接口来实现这种适应性。<code>@font-face</code> 和 <code>@font-feature-values</code> 的 <a data-featureid="css-font-display"><code>font-display</code></a> 描述符（descriptor）也可用于控制可下载字体在完全加载之前的呈现方式。</p>
          <p>沿着不同轴（width, weight, optical size）的字体变化可以被编码在单个字体文件中。CSS中的<a data-featureid="css-fonts-4/variable">可变字体属性</a>允许更好地控制可变字体的使用，并且帮助开发人员避免不必要的网络请求来获取字体的其他变体。</p>
        </div>
      </section>

      <section class="featureset exploratory-work">
        <h2>探索性工作</h2>
        <div data-feature="动画">
          <p>网页内容很少能够完整显示在移动设备的首屏，所以需要用户向下滚动。Web应用可能希望根据当前滚动位置调整其用户界面，比如在用户滚动时缩小顶部导航菜单或显示进度条。这项功能需要现在编写脚本，而<a data-featureid="scroll-animations">滚动关联动画</a>规范提出了一种基于CSS属性的声明性机制。</p>
        </div>
      </section>
    </main>
    <script src="../js/generate.js"></script>
  </body>
</html>