Have you noticed that software feels cheap when UI elements move around on the screen without notice? Web applications are particularly vulnerable to this problem. Browsers give image elements a default size if they do not have explicit width and height attributes. Once these images have loaded, they expand or contract to their full size, causing all other elements on the page to reflow in response.
Unsized images reflow the page when they load
We try to avoid this in our applications, but it’s easy for an image tag to slip through the cracks. That single tag might be repeated many times in a loop, each instance causing the on-screen furniture to shift around in an unseemly way.
Here’s a tip for catching unsized images during development. Add this CSS rule somewhere in your stylesheet:
img:not([width]):not([height]) {
border: 2px solid red !important;
}Then any images without width and height attributes will be drawn with a red border so they’re easy to spot.
Rahul
on 25 Jul 11Doesn’t that only work if you write the width & height attributes on the HTML tag though? What about width and height defined in CSS or the style attribute?
Sam Soffes
on 25 Jul 11That’s a neat trick! Love it.
Steen Olsen
on 25 Jul 11Ha! Extremely simply yet very useful. Thanks :-)
SS
on 25 Jul 11Rahul, yes, this will report false positives if your images are sized in CSS.
Ben Bodien
on 25 Jul 11Is this really a problem? I don’t think web apps feel cheap during loading just because I catch a glimpse of the page being assembled.
I’d say the overhead of having to maintain width and height attributes for every image in markup, and losing the ability to use the max-width: 100% trick for responsive image sizing outweighs any “cheap”ness perceived during content reflow on page load.
SS
on 25 Jul 11Ben, in my experience it is a problem, especially when you link to a page with an anchor. You’ll be scrolled to the anchor point when the page loads, then any unsized images before that point will load and shift the scroll position—potentially causing the anchored element to disappear behind the fold.
Ben Bodien
on 25 Jul 11Fair point Sam, that is annoying when that happens!
@Sam
on 25 Jul 11You should seriously write a book about software development with Rails and the other stuff you use, like coffee script.
Matt
on 25 Jul 11I find borders in general really useful for css tinkering. It really helps me visualize the box model that css is built around. different colors around different items really differentiate the margin and padding attributes. It also gives me a much better idea of what changes will push elements where once i make a change.
Radex
on 25 Jul 11Oh, that’s a really nice tip. I always forget about this.
@Ben Bodien:
Hey, what “max-width: 100% trick” are you talking about? I have not heard about it.
JF
on 25 Jul 11@Matt me too. I also use background-color: to just color entire elements quickly. Make all of these sorts of things black or red or green, just to get a feel for where things are, where the borders live, etc. This is one of the advantages of designing in HTML/CSS over Photoshop – the design itself is programmable.
Chris
on 25 Jul 11@Radex: view this page and resize your browser window until it’s skinny like a mobile phone. Notice how the main image (and entire site layout) responds to the window changing shape. That’s the “max-width: 100%” trick.
ggwicz
on 25 Jul 11@JF
@Matt
me too, I prefer background-color:; andbecause borders add some pixels to the width, which can throw off a layout sometimes. i like light greys
Anonymous Coward
on 25 Jul 11@ggwicz I find using Eclipse is nice because when editing CSS colors, it has auto correct for the CSS defined colors. You don’t have to mess around with hex values or remember the exact colors available. just [CTRL + spacebar]. What do you guys do html / css mockups in at 37signals? Text editors are also nice and lightweight when I have a quick change to make.
Matt
on 25 Jul 11Above post is mine. Hate when i forget the name fields. sry for the duplicate post.
GP
on 25 Jul 11Thanks for sharing. We actually had a devteam-meeting today to adjust some of our coding standards. This will go into our little dev-book too :D
Andrew
on 25 Jul 11This jumping around is so friggin’ annoying on mobile devices (inc iPad), so well done for keeping on top of it.
Adam
on 25 Jul 11@Matt, JF:
I use borders and fills for visualizing my css structure too. I have dev.css file I link during development that defines classes .trace, .fill and a few others that allows me to add visualization quick and easy.
Matt
on 26 Jul 11@Adam, good idea having a different dev css file. Do you take the class definitions out of the html when you are done or leave them in for future debugging(and just change the head reference)? how do you deal with different versions as you iterate on a design?
Scott Meinzer
on 26 Jul 11You can always use outline: in place of border: if you want to add a line to visualize an item without adjusting its metrics. Outlines are drawn without taking up space… I use outline: 1px solid red; all the time quickly just pop a red line around an object to easily see where it is for positioning or other tweaks.
JF Fortier
on 26 Jul 11Great tip. Another useful technique I often use is to highlight empty links. Quick and easy.
a[href=”#”], a[href=”“] { background:#ff0; }
SS
on 26 Jul 11Scott, that’s fantastic. For some reason I was under the impression that the outline property could only be used with input elements. The more you know!
tobi
on 26 Jul 11This rule can be improved: img:not([width]), img:not([height])
This will spot even a single missing attribute.
@ggwicz
on 26 Jul 11@scott
Sir, you just blew my mind. Thank you.
Harry
on 27 Jul 11Another +1 for outline: Its fantastic, been using it heavily for years!
Danilo Celic
on 27 Jul 11Eric Meyer has done a bit of work on what he calls “diagnostic styling” to find issues with pages he’s working on. Not sure what if any updates have been made since the original post, but I’d think that the suggestions here could be useful. Read his post on diagnostic styling: http://meyerweb.com/eric/thoughts/2007/09/07/diagnostic-styling/
John
on 27 Jul 11@JF I do that when designers send me photoshop documents. I block everything out in code, and then slice the image. If I am designing it, its all HTML/CSS.
Eric Meyer
on 28 Jul 11Thanks, Danilo! I actually haven’t done much with diagnostic styling (aside from give a few talks on the subject) since that post. The latest versions are up on meyerweb, where by “versions” I mean “the regular one and the one that’s IE7-friendly, which was useful when I created them in 2007 but maybe not so much now”. I also wrote a 24ways article that explains the why and how of various diagnostic styles, if anyone’s interested.
Tobi’s use of chained negations in ‘img:not([width]), img:not([height])’ is an excellent, excellent tip, and one I didn’t know about back in 2007. The CSS I wrote then could probably be made quite a bit more efficient with that trick. Hmmm…
Chase Adams
on 29 Jul 11This is an awesome trick. Short, simple, to the point.
Daniel Genser
on 29 Jul 11The latest redesign of Google’s mobile toolbar drives me insane because of this. I don’t know how many times I’ve tapped a link on the screen only to end up tapping a toolbar icon, because the toolbar icon images load a couple seconds after the initial content and Google hadn’t reserved the space for the images.
Leon
on 01 Aug 11Not sure if you heard of it before, but there’s a nice diagnostic stylesheet called Holmes.css. I don’t think it checks for unsized images (but it could easily be added of course), but it checks for empty links, missing alt tags etc. A guy named Luke Williams made it and you can find it here: http://www.red-root.com/sandbox/holmes/
This discussion is closed.