Skip to main content

Jeremy Cherfas

CSS Naked Day 2020

2 min read

I'm not actually a designer, and never will be, but I do enjoy trying to make my website pleasing on the eye, even if it is only my eye. So I was happy enough to go along with CSS Naked Day yesterday, not by removing all the stylesheets but by using `View>Page Style>No Style` in Firefox. And there was only one glaringly obvious problem: a hamburger icon that would choke the entire world.  Eric Meyer explained:

But take away the CSS, and the SVG will become 1200 x 1000 again.  That might tell you to resize it for production, sure, and you probably should.  But it also points out that browsers will not constrain that image, not even to the viewport.  If your window is only 900 pixels wide, the SVG could well spill outside, forcing a horizontal scrollbar.  Is that good?  Maybe!  Maybe not!  We might wish browsers would bake something like img {max-width: 100%; height: auto;} into their user-agent stylesheet(s), but maybe that would have unforeseen downsides.  The point is, this is a thing about browsers that CSS Naked Day reveals, and it’s worth knowing.

At some point, then, I ought at least think about defining the size of that monster. The rest of it, I'm OK with.