媒体片段 URI – 空间维度

以下是 Fabrice Weinberg 的客座文章，Fabrice 是一位喜欢探索 CSS 和 Web 技术前沿的开发者。 这篇文章也不例外！

我想看一下媒体片段 URI 规范。 特别是 空间维度 部分。 时间维度部分已于去年在 Chrome 和 Firefox 中实现，但截至撰写本文时，空间维度在任何当前浏览器中都不受支持。

明确地说： 此主题处于高度实验阶段。 今天唯一可以使用它的方法是使用我编写的 polyfill，它仅在 Chrome 和 Firefox 中有效。 基本上：不要在生产环境中使用它！

为了让您了解它是什么，您可以将时间维度视为音频/视频标签开始播放其内容的偏移量。 您可以在 此处 找到一个工作示例。

空间维度是相同的概念，但用于图像。 我们可以描述我们想要显示的图像的精确部分。

它是如何工作的？

媒体片段 URI 是一种语法，可以使用它仅选择图像的特定部分。 它看起来像这样

#xywh=160,120,320,240        # => results in a 320x240 box at x=160 and y=120
#xywh=pixel:160,120,320,240  # => results in a 320x240 box at x=160 and y=120
#xywh=percent:25,25,50,50    # => results in a 50%x50% box at x=25% and y=25%

本质上，它是附加到媒体 URL 的哈希。

示例

如果将这些“片段”附加到这样的图像 URL

http://placekitten.com/500#xywh=160,120,320,240

结果将如下所示

如规范所述，我们得到一个大小为 320×240 的图像，其左上角偏移量为 160×120。

它有什么用？

CSS 精灵的改进

我不会说使用媒体片段来替换 CSS 精灵“更好”。 相反，它通过克服一个常见问题来扩展了可能性。 使用常规图像精灵不可能创建在多个轴上重复的重复背景。 即使是一个轴也很复杂。

使用媒体片段，我们将能够从精灵中的图像创建重复的 background-image。

演示

对于 演示中的图像，我将 此图案 与一些 Twitter Bootstrap 图标组合在一起。 传统 CSS 精灵技术用于图标，而媒体片段用于重复背景。

图像动画

另一个用例是构建图像动画的可能性，如 Jon Skinner 为 Sublime Text 2 产品页面撰写的文章 以硬核方式制作动画 GIF 中所讨论的那样。 但我认为它在生产环境中不可用，因为我同意 JavaScript 更适合此类动画。 我只是喜欢将 CSS 推到极限。

创建 Polyfill

在寻找一种在当前浏览器中测试媒体片段 URI 的解决方案时，我寻找了一种模拟其行为的方法。 您可以在 示例 Pen 上查看完整的 polyfill。

Firefox

Firefox 的解决方案非常简单。 一个名为 -moz-image-rect 的 CSS 函数完全满足我们的需求，并且自 2011 年 3 月起在 Firefox（当时版本 4）中实现。

WebKit

对于 WebKit，有一个很棒的东西叫做 CSSCanvas（-webkit-canvas 绘制）。 您可以将其视为一个 background-image，它是一个 canvas，并且可以通过 JavaScript 访问。 但不好的地方是此功能没有发布的规范，因此在一段时间内它将仅限于 WebKit（尽管 Firefox 有类似的功能：-moz-element）。 当前 Google Chrome 版本 (23) 中也存在一个错误 错误 16199，该错误已在 Google Chrome Canary 中修复。 此错误不会影响 polyfill，因为仅在动画内容上正确刷新画布时才会出现问题。

代码示例

div {
    background: -webkit-canvas(name_of_canvas);
}

然后在 JavaScript 中将此画布用作绘图上下文。

var ctx = document.getCSSCanvasContext("2d", "name_of_canvas", 100, 100);

我们在这里所做的是检索 CSS 中定义的画布的绘图上下文（其名称为“name_of_canvas”），并将其宽度和高度分别定义为 100px。

这是一个工作示例（出于显而易见的原因，仅限 WebKit）

结论

最后，我只是将这两种核心技术结合起来创建了 polyfill。 如果有人知道扩展浏览器支持的方法，我很乐意听到。

为什么这么费劲？

我喜欢尝试新事物。 新到它们甚至还没有出现在浏览器中！ 我希望你也一样。 就此为止。 如果您有任何疑问，我将很乐意在评论中回答。

感谢 Tim Pietrusky 对本教程早期版本的评论和更正。