Simon Willison’s Weblog

Responsive Components: a Solution to the Container Queries Problem (via) Philip Walton uses Chrome’s new ResizeObserver API (best described as document.onresize for elements, currently a W3C Editor’s Draft, not yet supported by other browsers) to implement a media-query style mechanism for applying CSS based on the size of the parent container. This is really clever. In the absence of ResizeObserver (which can be polyfilled) it can fall back to showing the narrowest design, which is probably best for mobile anyway. Desktop browsers are better equipped to run the polyfill.

# 27th February 2018, 1:21 pm / css, mediaqueries, progressive-enhancement, polyfill

CSS3 and the death of Handheld Stylesheets. I hadn’t looked at CSS 3 media queries before (which let you apply different styles based on media features such as screen width, height and colour availability)—they seem like a much smarter solution that handheld stylesheets and also appear to be preferred by device vendors.

# 16th November 2007, 9:53 am / browsers, css3, mediaqueries, mobile, russell-beattie