The problem: designing pages for multiple devices means using media queries in CSS to hide and show parts of the page based on device sizes, capabilities, or preferences. These hidden sections of markup still participate in the DOM, which can cause problems like duplicate IDs breaking form accessibility, or slowing down parsing when querying the DOM or changing styles.
Proposed solution: Similar to the
Example: The following image and CSS assets would not be requested on devices with a viewport less than 1200px wide.
<when media="(min-width: 1200px)"> <img src="big_pic.png"> <link href="large.css" rel="stylesheet"> </when>
A similar problem space is changing element attributes based on media queries. With the
<picture> element, we can change an
src attribute, but it would be helpful to extend this to other elements and other attributes.
- Change a video to play inline (instead of fullscreen) when on a small screen in portrait mode. Enable
autoplaywhen user preferences indicate it’s ok.
<when> <source media="(max-width: 400px) and (orientation: portrait)" attr="playsinline"> <source media="(prefers-reduced-motion: no-preference)" attr="autoplay"> <video src="vid.mp4></video> </when>
- Change the input method for an image file upload based on device orientation.
<when> <source media="(orientation: portrait)" attr="capture" value="user" > <source media="(orientation: landscape)" attr="capture" value="environment" > <input type="file" accept="image/*" /> </when>