1. 首页
  2. css

CSS媒体片段URI–空间维度

以下是法布里斯的客座帖子,他喜欢探索CSS和web技术的前沿。这个帖子也不例外!我想看看媒体片段URI规范。特别是空间维度部分。时间维度部分去年在Chrome和Firefox中实现,但截至本文撰写之时,任何当前浏览器都不支持空间维度。
说得清楚:这个主题是高度实验性的。今天使用它的唯一方法就是使用我写的polyfill,它只适用于Chrome和Firefox。基本上:不要在生产中使用它!
为了让您了解它的意义,您可以将时间维度看作音频/视频标签开始播放其内容的偏移量。你可以在这里找到一个可行的例子。
空间维度是相同的概念,但对于图像来说。我们可以描述我们想要显示的图像的确切部分。它是如何工作的?
媒体片段URI是一种语法,使用这种语法可以只选择图像的某一部分。它看起来像是在y处生成一个320×240的框==>在y处生成一个320×240的框==>在>
处生成一个50%x50%的框本质上是一个附加到媒体URL的哈希值。示例
如果您将这些\”片段\”附加到一个像>
这样的图像URL,结果会是这样的:
正如规范所述,我们得到图像大小为320×240,左上角的偏移量为160×120。它有什么用?CSS Sprites的一个改进
我不认为使用媒体片段替换CSS Sprites\”更好\”。相反,它通过克服一个共同的问题来扩展可能性。不可能用常规的图像精灵创建在多个轴上重复的重复背景。即使是一个轴也很复杂。
对于媒体片段,我们可以从sprite中的图像重复background-image。
演示:
对于演示中的图像,我将此模式与一些Twitter引导图标相结合。CSS Sprites的传统技术用于图标和用于重复背景的媒体片段。
。但我不认为JavaScript在制作中有用,因为我同意JavaScript更适合这种动画。我只想把CSS推到极限。
div>div>h3>svg>。您可以在示例笔上看到完整的polyfill。Firefox
Firefox的解决方案非常简单。一个名为-moz image rect的CSS函数正是我们想要的,它从2011年3月开始在Firefox(当时的版本4)中实现了。
WebKit有一个很棒的东西叫做CSSCanvas(-WebKit canvas drawing)。你可以把它想象成一个background-image,它是一个canvas,可以用JavaScript访问。但不好的是,这个特性还没有公开的规范,所以WebKit只能使用一段时间(尽管Firefox也有类似的东西:-moz元素)。在当前的googlechrome发布版本(23)中也有一个bug 16199,它在googlechrome金丝雀中被修复。此错误不会影响polyfill,因为只有在动画内容上正确刷新画布时才有问题。
p>代码示例:
div {background: -webkit-canvas(name_of_canvas);}
命名为\”nameu of u canvas\”,并将其宽度和高度分别定义为100px。
这里是一个工作示例(WebKit只是出于明显的原因):结论
最后,我将这两种核心技术结合起来创建了polyfill。如果有人知道扩展浏览器支持的方法,我会很高兴听到的。为什么要做这么多工作?我喜欢玩新东西。太新了,他们甚至还没有进入浏览器!我希望你也这样做。现在就这些。如果您有什么问题,我很乐意在评论中回答。
感谢Tim Pietrusky对本教程早期版本的评论和更正

CSS媒体片段URI–空间维度 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%aa%92%e4%bd%93%e7%89%87%e6%ae%b5uri-%e7%a9%ba%e9%97%b4%e7%bb%b4%e5%ba%a6/