Robust Web Design - part 3

Third posting

CSS – Domino effect

A home made avalanche vs. a child’s play kit? Is something I used to wonder when I first understood the purpose of CSS. I would never teach CSS to someone who is starting web-design, who cares about consistent styling or the fact that the way content is uniformly laid, ok I was kidding. These things are better learnt by feeling the flare, the flare of inconsistent design, the wrath of the end-user, the harm to ones own pride, the legend of Zelda, the story of war craft…(ok I exaggerated a bit).

CSS even its simplest form (inline style definition) shows its’ merits. Forget about layouts, forget about cross browser compatibility. The amount of code that is reduced (read more coffee breaks) is itself rewarding. “The lesser the code, the fewer bugs” - a well known adage. I used to correlate CSS with Dominos. Remember those videos on youtube. Anyone who designs a large project faces the same challenges. Things rarely go so well when put to practice. So there are certain firewalls, redundancies put in place. CSS is essentially huge collection of domino chips, with provisions for firewalls and redundancies (read CSS selectors). These provisions allow certain chips (rules) to take precedence over others. Each chip (rule) causes an effect (sets style properties). The game is to place the chips and firewalls appropriately. The challenge is the game floor. Not every stadium/court is the same! There are certain tricks and tips to raise our bar, when playing in not so friendly arenas (hacks). These tricks work well for that given court alone and don’t go well with the big picture.

A check list for the techies:

• Learn your selectors


• Negotiate for the most recent browsers and restrict their number (I know I sound like a weasel)


• Overwrite browser defaults


• Negotiate for the minimum window size, especially height of the scrollable content in px. May be critical for java script disabled scenarios. Fluid layouts need specs in ems


• Avoid mixing margin & width attributes. Inconsistencies across browsers rise from the misinterpretation of box-model


• Alternatively; use padding, and/or border styles with width and color matching the background; to achieve the same effect


• Avoid tables for layout. Most accessibility problems rise from this fact


• Seek dispensation for complex UI features. Almost, all known browsers till date fail the Acid tests. It is difficult to achieve standard compliance using non-standard compliant user agents


• Avoid CSS expressions


• Try to build your styles based on the least common selectors


• Test your styles across browsers

a. Test for well formed content in absence of CSS
b. Test for accessibility
c. Test for text enlarge, compact scenarios
d. Avoid classitis and divitis. Use grouped declaration of selectors and pseudo declarations. Divitis may not be avoided always
e. Document the use of extraneous divs (if any being used for layout)
f. Separate styles based on usage pattern i.e. layout, color, font-styles
g. Use a namespace to avoid style-conflict

Horror of hacks

Ever heard of 3 pixel jog? Knowing your browser is of paramount importance. There is a difference in addressing symptoms and addressing the cause. Which one would you prefer? There are a huge number of resources that speak about these. I personally like ‘CSS Mastery’ by Andy Budd and ‘Pro CSS Techniques’ from Apress. I haven’t read others, but I feel one or two books help you realise the game.