CSS improvements

joeclark's picture
  • Main CSS has two validation errors.
  • I think the off-grey text colour (#333) is too light, especially on the grey background. I would just make the text flat black in that case.
  • Hyperlinks are too difficult to distinguish from body copy. This isn’t just bad usability; it also violates WCAG 2, but a lot of things here do. The colour is too pale. You additionally need some kind of underline (border-bottom solves the problem of amputating descenders found with text-decoration: underline).
  • You need to be much more specific in styling links. Styling plain a catches every anchor, including invisible, non-link anchors. You want a:link then a:visited then the pair of a:hover,a:active (defined together to get around IE6 bugs). Other combinations are possible, of course. (Eric Meyer’s standard advice is to specify them in order of “LoVe’s Hurts Fade Away,” but some experts disagree.)
  • Unless you have a serious design intent in a well-planned layout, I don’t think it’s a good idea to mess with visitors’ default font size. Hence font-size: 1em (or 100%) is advisable for body copy. You’ve got variously .9em and .85em, which explains why the type is too damned small. (And those numbers can multiply together, as you know.) I see a computed 11px type size in Safari 4. This is pretty small.
  • We don’t have a print CSS, which is rather shocking. It’s quite easy to put together, and can be included in the main CSS without recourse to a separate file (put it all inside @media print { }).
  • We don’t have a mobile CSS, or, as it has devolved at present, a CSS for iPhones/iTouches and other Mobile WebKit browsers. These are more troublesome to set up (ask PB at MetaFilter for help); if you’re too specific in your selectors, you’ll leave out mobile devices that could actually use the stylesheet; and, significantly, the whole enterprise makes a mockery of the handheld media type, which was supposed to solve all our problems but obviously won’t.
Florian Hardwig's picture

I agree with most points and would give top priority to a more distinct link style and a print style sheet.

In addition, I think it’s odd that unordered lists within posts are rendered at a smaller font-size than the rest.

joeclark's picture

Multiplication of font-size declarations.

Syndicate content Syndicate content