CSS unsized images

July 26th, 2011

Nicked from 37signals:

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.

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.

Neat.

Comments Off

The Solar System according to Microsoft

July 2nd, 2010

The solar system as seen in Internet Explorer.

[Via kottke.org]

Comments Off

Selected text

February 27th, 2010

Zeldman pointed out a nice CSS3 feature. To set the colour of selected text, try adding this to your style sheet:

::-moz-selection { color: #004080; background: #fffdd7; }
::selection { color: #004080; background: #fffdd7; }

To my knowledge, this feature works in Mozilla-based browsers, Safari and Opera.1 It doesn't work in Internet Explorer, but it doesn't break anything either.

  1. I wouldn't know about Chrome. Google – like quite a few suppliers of Mac OS X software nowadays – don't bother producing a version of their browser for PowerPC-based Macs. However, I'd be very surprised if this feature isn't supported in Chrome, given that it uses the same Webkit rendering engine as Safari.

Comments Off