CSS3 Examples

Great CSS Techniques and the Simple Truth Behind Them

There is a simple recipe to judge CSS techniques: Does the method in question require HTML additions and modifications beyond introducing certain IDs or classes?

If yes, the technique is likely to be not very elegant, in fact, it might be inadvisable, depending on the strictness you’re applying. Personally, I tend not only to assess these techniques as “inferior” but even to avoid and discourage to use them, and both theory as well as practice show that you’re in fact better off looking for alternative solutions since formatting induced HTML changes do not only mean less good code but also certain problems concerning maintainability.

However, it is nice to talk about about problems in a quick, concise manner, but two examples will probably strengthen the argument:

Questionable: Nifty Corners.

The initial proposal for rounded corners asked for the following (or similar) markup to be used together with corresponding CSS styling:

I will not comment the use of b elements and stuff (in my book, I already discuss the HTML for this technique) but rather repeat what I noted before: Great CSS (here: HTML?) techniques do not require HTML modifications (that are so far-reaching).

Commendable: CSS Sprites.

CSS Sprites are a nice way to create delay-free hover effects (most of the time) that also improve performance by avoiding 1+ HTTP requests. Let’s see if the theory that lovely techniques live without HTML changes holds true:

Yes, it does!

No Comment | Posted in » Advance CSS3