media queries

Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First

A month ago I explored the importance of relying on Interaction Media Features to identify the user's ability to hover over elements or to detect the accuracy of their pointing device, meaning a fine pointer like a mouse or a coarse one like a finger.

But it goes beyond the input devices or the ability to hover; the screen refresh rate, the color of the screen, or the orientation. Making assumptions about these factors based on the width of the viewport is not reliable and can lead to a broken interface.

I'll take you on a journey through the land of Media Query Level 4 and explore the opportunities that the W3C CSS WG has drafted to help us deal with all the device fruit salad madness.

(more…)

SVG & Media Queries

Jake Archibald digs into how bizarrely media queries can behave when embedded into a <style> block inside the SVG itself and then used in a variety of different ways across different browsers. The results are spotty at best.

It would be nice to see this reined in, but I wouldn't worry too much about it in general. Inline SVG doesn't seem to have any trouble and I wouldn't trust an <img> do anything fancy like have internal media queries anyway.

Introducing iframify

Hugo Giraudel writes up why he created iframify, a script which grabs a DOM node and wraps it in an <iframe>. It’s a nifty tool for displaying components in a style guide at a certain width and effectively faking element queries.

An iframe being an inner document, media queries fire based on the width of the iframe rather than on the actual screen size. Which is what we want. Yay!

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag