Question

HTML5中的<PICTURE>是否正式？我无法在w3schools.com找到它。

假设它是官方的，则是后备<img>元素src或srcset的源属性。我看到一些使用srcset的网站，他们不能在任何版本的IE中工作，但src可以在IE中使用。

Answer 1

是的，<picture>标记是该标准的官方部分，但HTML5是一种生活标准，此标记被视为“实验性”。

<picture>标记目前已被WHATWG HTML5 Living Standard接受。这并不意味着它是一成不变的，它仍然被认为是一种“实验技术”。您不应该依赖浏览器来支持这项技术。您可以查看浏览器支持here的（非官方）概述。

正如Mozilla开发者网络上所述：

这是一项实验技术。由于此技术的规范尚未稳定，请检查兼容性表以获取在各种浏览器中使用的正确前缀。另请注意，随着规范的更改，实验技术的语法和行为可能会在未来版本的浏览器中发生变化。

标准化HTML的“living standard”模型意味着元素被更容易接受，但可能不会保留在标准中，或者如果针对当前使用提出了好的参数，则可能会更改。

必须包含<img>元素，这会产生提供后备选项的副作用。

必要时，图片元素必须包含<img>标记，以及<source>元素。这具有提供后备选项的副作用，但也需要提供基本图像和元数据（尤其是提供所需的alt属性）。 <source>元素仅覆盖src标记的<img>属性（在特定情况下）。

这是一个正确使用的图片元素的例子。此示例来自Mozilla Developer's Network。

<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="MDN"> </picture>

src属性应该始终，即使您另外使用srcset属性。

srcset属性（根据我的理解）是一种定义不同分辨率源的“旧”技术。它不使用标准语法媒体查询或使用<picture>和<source>元素（although Chris Coyier of CSS-tricks disagrees with me here）提供的其他灵活性，但某些不支持的浏览器可能会支持较新的标准。在srcset标记中包含<img>属性可能是可取的，但在这些情况下，您仍需要包含src属性（当没有srcset时，它会提供默认值{1}}文件是合适的，并为不支持srcset的浏览器提供后备。所有图片代码始终需要src和alt属性 - 这些是<img>代码的必需属性。

<picture>标记的有效示例，包括srcset属性作为后退，src属性作为最坏情况下降的情况，如下所示

<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" srcset="mdn-logo.png 2x" alt="MDN"> </picture>

此Smashing Magazine article对不同的响应式图像技术以及何时使用每种技术进行了更深入的分析。

旁白：请不要相信W3Schools是官方来源。 W3Schools选择了一个类似于W3C（万维网联盟）的名称，但实际上它们并不与官方标准组织相关。从他们的about页面：“该网站的名称来自万维网（W3），但不隶属于W3C。”

Answer 2

是<picture>标记是html5的一部分，根据文档，其后备版本为<img src=... >，即使在非常旧的浏览器中也可以使用。

<picture>
   <source media="(min-width: 64em)" src="high-res.jpg">
   <source media="(min-width: 37.5em)" src="med-res.jpg">
   <source src="low-res.jpg">
   <img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
   <p>Accessible text.</p>
</picture>

值得注意的是，其他解决方案，例如srcset属性，也正在讨论中，并开始看到支持。 srcset属性是在Webkit中实现的。但是，srcset属性不用于后备，但允许您为具有高分辨率显示的用户指定更高质量的图像，而不会对不使用的用户进行惩罚。

<picture>的后备图片

2 个答案: