Maarten Van Hoof avatar Maarten Van Hoof

Responsive SVGs - container vs media queries

Screenshot of “Responsive SVGs - container vs media queries”

https://codepen.io/vanhoofmaarten/full/dyvmJWN

Maarten shows here (only in Chrome Canary for now) how Container Queries will allow us to have responsive SVG images inline in the HTML.

Responsive SVG images where already possible as I shown 8 years ago, but only external, loaded with an <img /> tag or as CSS background.

  3. TIL @​media not (min-width: 60rem) { … } doesn't work in Safari, while it works in Chromium and Firefox.

    Safari requires a media type, like all.

    So here's the "right" syntax:
    @​media not all and (min-width: 60rem) { … }