Focal Curve

A Logo Positio

A partial screenshot of Molly's truncated CSSMolly’s site is busted (as of this writing) and has been for much of the day. Through a bit of viewsourcery I tracked the problem down to an apparent corruption of her “screen.css” file, which suddenly truncates at a#logo {positio and stops, so whatever style rules are meant to come after… don’t. The broken rule occurs fairly early in the sheet, after a few general rules for fonts, headings, and the blue webgoddess header we all know and love. After that it’s all pretty much left to browser defaults.

I know not what back-end server-side cockup resulted in this. And alas, Molly is traveling, as she is oft known to do (presently in London preparing for her upcoming Carson workshops with Malarkey, wish I was there) so who knows if she’s even aware of the problem yet. And even if she were, she may not have handy access to the complete stylesheet in order to correct the situation in 7 seconds with an FTP client. Her very popular site could remain visually mangled for hours, days even.

A screenshot of as it appears with a partially-missing style sheet

But there’s a lesson in this (apart from carrying backups of your blog on your laptop when traveling abroad). As borked as Molly’s layout is, the site remains fully functional. The content is all right there, all in logical order, clean and readable and accessible. This is the power of separating content from presentation: when the presentation is removed, the content lives on. Molly’s busted site still works beautifully because she has structured her document in a clear, semantically meaningful way. Headings are ordered, paragraphs are paragraphs, lists are lists. Beautiful.

Of course, had the style sheet truncated at a different point the results could have been worse, which raises an interesting test case I’d never considered. I regularly disable author stylesheets in my browser in order to see how the document degrades with default stylings. But never have I tested a site with an incomplete style sheet. Try cutting off your style sheet at a random point and see what happens. If you’re splitting things up into separate style sheets, remove one and see if your partially-styled content still works. A partial style sheet is probably a rare scenario, but it makes for an interesting excercise. And as the state of today so clearly illustrates, it can even happen to the best.

One Comment on 'A Logo Positio'

  1. Edward J. S. Atkinson said:

    Funny you should mention that. As soon as I realized what was calling’s problems, I went and tested my most recent client’s work. And I’m proud to say my fastidious CSS organizational skills held up quite well :-D