In this week’s week roundup of browser news, a trick for loading images conditionally using the picture element, your chance to tell bowser vendors about the web you want, and the styles applied to inline SVG elements are, well, not scoped only to that SVG.
Let’s turn to the headlines…
Preventing image loads with the picture element
You can use the <picture></picture> element to prevent an image from loading if a specific media query matches the user’s environment (e.g., if the viewport width is larger or smaller than a certain length value). [Try out the demo:
See the Pen
voZENR by Šime Vidas (@simevidas)
on 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>(via Scott Jehl)
The Web We Want
The Web We Want (webwewant.fyi) is a new collaboration between browser vendors that aims to collect feedback from web developers about the current state of the web. You can submit a feature request on the website (“What do you want?””) and get a chance to present it at an event (An Event Apart, Smashing Conference, etc.).
(via Aaron Gustafson)
In other news
- Firefox supports a non-standard Boolean parameter for the
location.reloadmethod that can be used to hard-reload the page (bypassing the browser’s HTTP cache) [via Wilson Page] - If you use inline
<svg></svg>elements that itself have inline CSS code (in<style>elements), be aware that those styles are not scoped to the SVG element but global, so they affect other SVG elements as well [via Sara Soueidan] - XSS Auditor, a Chrome feature that detects cross-site scripting vulnerabilities, has been deemed ineffective and will be removed from Chrome in a future version. You may still want to set the HTTP
X-Xss-Protection: 1; mode=blockheader for legacy browsers [via Scott Helme]
Read more news in my new, weekly Sunday issue. Visit webplatform.news for more information.
I guess the
<picture>element is like aswitch statementin that thesource‘s check for conditions and only default to theimgif those conditions are not met. If my analogy is right, then I might just have finally understood the<picture>element.just so you know, if you use data:image you are still downloading the image to mem
The size of this particular data:image is 42 bytes (according to Chrome DevTools). It’s this small because its only purpose is to serve as an alternative image source to prevent the actual image from being loaded.
Not sure where you got the idea that the boolean parameter to force
location.reloadwas a non-standard Firefox thing, that’s been part of the JavaScript spec for at least a decade that I can recall.If browsers don’t support it, that’s just them not following the spec, not an indication that it’s not a standard parameter.
Which spec are you referring to? The
locationobject is not defined in the ECMAScript (JavaScript) spec. It is however defined in the HTML spec, which makes no mention of the optional parameter. Notice the link at the end of my news item; that will lead you to Twitter where we discuss the fact that the parameter is non-standard.nice article bro