One of the cool things about <svg> is that it’s literally its own document, so @media queries in CSS inside the SVG are based on its viewport rather than the HTML document that likely contains it. This unique feature has let people play around for years. Tim Kadlec experimented with SVG formats and which on...
If you thought responsive design was reserved for CSS layouts only, you’ll be pleased to hear media queries can also be used in JavaScript. Continue reading %How to use Media Queries in JavaScript% ...
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; ...
Front-end developers and web designers live in an insane multi-device reality. A few months ago, the Red Hat UXD team discussed how to design enterprise applications for mobile environments. Sarah and Jenn, my talented colleagues, pointed out that touch devices should not be judged by their size alone.Assumptions ar...
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 g...
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 i...
Every once in a while I run into a tool or plugin so useful I can’t not add it to my arsenal. I usually shout out tweets and try to spread the word that way, but this time I believe I’ve got such a neat (and somewhat random) collection of productivity boosting entries, they deserve a collective article.Here are 9...
An SVG can be embedded on a web page in many ways; one of which is embedding it inline in an HTML5 page using the <svg> tag. The other commonly used techniques include embedding it as an image using the <img> tag, embedding it using the <object> tag, using an iframe, and as a CSS background image. Co...
Recent Comments