CSS sledgehammer… #1

…an approach to web carpentry…


The CSS sledgehammer approach is one way to overcome limitations in web design. Basically it includes all available methods without exceptions. That's a pretty broad base, don't you think?

As the name implies; it is based on CSS – or rather that CSS can handle most of the presentation in most browsers. Now I have freedom to focus on content, and to write powerful code to drive the message home.

Note: the best browsers can handle some 75% of CSS made available in the W3C-standards today. Still a long way to go, and I don't expect any of them to ever reach 100%. 21.may.2006

Note: the best browsers have improved standards support a lot over the years. Still not anywhere near 100% though. 12.feb.2009

Pixel-perfection in web design is lost on me. I achieve it to the degree I want it, whenever I want it. Most often pixel-perfection doesn't matter, in which cases I don't even try to achieve it.


A sledgehammer is heavy, and indicates that I don't tip-toe around with light-weight and size-optimized CSS. I'm not particularly interested in making an impression on other web designers/coders with my designs, only on browsers.

I want results in the browsers I have chosen to support, and I'm studying browsers rendering-engines and CSS capabilities so I know where to hit them with exactly the right force – or rather CSS properties.

I support any standard-compliant browser, and make use of the full CSS-range in order to make the most out of the most capable browsers at any one time. The less capable are given a bit of help when needed so they don't hamper progress and choice of solutions for the most capable ones.

I use as heavy source-code structure and complex styling as I need to, in order to make it work in a mostly cross-browser stable way. That's not to everyone's liking – some think there's too much garbage in there, but most browsers are in line with me.

It's not always heavy, and it's not always complex, but it is quite often a bit excessive and performance-centered. Not much whitespace in there, and it is written solely for software-interpretation.

I don't expect any browser to understand anything – unless I tell it, so I start with the basics and define everything I want to see, for every element I plan to use, from scratch. This adds some predictability across browser-land. Recommended.

A few style-only elements provide hooks. Some call them unnecessary elements. I don't, although I would be happy if some future version of CSS would make them obsolete … in all browsers.


Optimized code is fast, but mine is optimized for rendering – not speed. However, the result is often the best of both worlds.

Images for foreground and background take time to load, and neither are needed for this page to work. If connection-speed and time matters, then pages created with the CSS sledgehammer approach can become extremely fast.

Repetitive objects and browser caching may add speed. I make full use of that combination, and leave the rest to my visitors preferred settings.

Fast browsers may help a lot, but that's for you, the visitor, to decide on. These pages can deliver … they only need a proper receiver. Looks like you've got one…


Ordered source-code is the only somewhat safe way to make truly accessible web pages. The CSS sledgehammer approach makes it easy to write well sequenced and ordered source-code that will carry the content in an orderly way.

Some apply source ordering to get a slight edge in search engines, which I think is the wrong reason. I simply like the order in which an unstyled web document like this one presents its content, and don't mind if others see it this way too.

The best source order will let the main content come out on top when CSS is off, and the non-styled order isn't being cluttered by having navigation and other “less important stuff” mixed in with the main content just to get it positioned in the right places on graphical screens.

Pages on this site are built on html-elements' basic functionality, and CSS is adding presentation to them. No problem to create a 1, 2 or 3 column page here, with no change at all to the source-code layout. It's built in as part of the sequence.

The “module” or “section” based layout I use makes the introduction of media dependent adjustments with CSS only really easy, which to me is important in web design. One never knows what media and/or device a document ends up on, and it is easier to create one layout with the intent to fit all, than to create one layout for each media and/or device.

sincerely  georg; sign

Hageland 01.nov.2004
last rev: 12.feb.2009

CSS sledgehammer…

The amount of force is not important.
It's the balance that counts.


  • introduction
  • Table of Content


  • this is PTL web-design
  • CSS sledgehammer
  • more about CSS
  • Lynx enhanced page
  • Print enhanced page
  • Projection enhanced
  • Small Screen enhanced page
  • validity of xhtml and CSS
  • html tidy
  • Opera and me
  • Firefox vs. IE
the usual
  • the author
  • Copyright
the unusual
  • Molly speaks up
the additional
  • Examples
  • Demo pages
Dear web design experts:

If you don't like my approach – don't…
This is all about performance.

I would like to write perfectly meaningful code all the way…
…but I can't sit here and wait while the browsers catch up.

Some say they write hack-free CSS.
Looking at it makes me wonder what they mean by that…

It isn't by accident this page appears reasonably well in old IE6 – I am serving it a whole boat-load of corrections.
Would be nice if all users of that old bugger switched to a real browser right away though, or at least upgraded to a slightly better IE version.

…2005 - 2009