每周平台新闻：使用 Picture 元素阻止图像加载、我们想要的网络、SVG 样式不具有作用域

在本周的浏览器新闻周报中，我们介绍了一个使用 picture 元素根据条件加载图像的技巧，您有机会告诉浏览器供应商您想要的网络，以及应用于内联 SVG 元素的样式，嗯，并不仅限于该 SVG。

让我们来看一下头条新闻…

使用 Picture 元素阻止图像加载

您可以使用 <picture></picture> 元素，如果特定媒体查询与用户的环境匹配（例如，如果视口宽度大于或小于某个长度值），则阻止图像加载。[尝试演示

查看 Šime Vidas 的 CodePen 作品
voZENR (@simevidas)
在 CodePen 上。

<picture>
  <!-- show 1⨯1 transparent image if viewport width ≤ 40em -->
  <source media="(max-width: 40em)" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

  <!-- load only image if viewport width > 40em -->
  <img src="product-large-screen.png">
</picture>

(来自 Scott Jehl)

我们想要的网络

我们想要的网络 (webwewant.fyi) 是浏览器供应商之间的一项新的合作，旨在收集 Web 开发人员对当前 Web 状态的反馈。您可以在网站上提交功能请求（“您想要什么？”）并有机会在活动中展示它（An Event Apart、Smashing Conference 等）。

(来自 Aaron Gustafson)

其他新闻

• Firefox 支持 location.reload 方法的一个非标准布尔参数，该参数可用于强制重新加载页面（绕过浏览器的 HTTP 缓存）[来自 Wilson Page]
• 如果您使用内联 <svg></svg> 元素，该元素本身具有内联 CSS 代码（在 <style> 元素中），请注意，这些样式不具有作用域，而是全局的，因此它们也会影响其他 SVG 元素[来自 Sara Soueidan]
• XSS 审计程序，Chrome 中用于检测跨站点脚本漏洞的功能，已被认定为无效，将在 Chrome 的未来版本中删除。您可能仍希望为旧版浏览器设置 HTTP X-Xss-Protection: 1; mode=block 标头[来自 Scott Helme]

---

**阅读我新的每周星期日版中的更多新闻。** 访问 webplatform.news 以获取更多信息。