Why, Blog, Why?

Here's a little CSS tip: Don't apply positioning rules (including alignment, margins, floats, etc) to a base element, for there will surely come a day when you say, "But I don't want <label> elements to float left on this page!" Instead, use a rule based on a class or id. You may find that every single instance of said element now has the same class attribute, but it will make life much easier in the long run.

The Bad

label {

    position: absolute;

}

The Good:

.label_abs {

	position: absolute;

}

In a recent post, Bruce Lawson, a member of the Accessibility Task Force and notable funny-guy, gives the following pointers on accessibility:

• Accessibility is not text-only or a separate “cripples-only” site
• Disability is more than blindness
• Accessibility is not an exercise in political correctness; there are demonstrable, measurable advantages in usability for all
• Accessibility isn’t a purely technical matter; it’s to do with content as well (and is thus also the reponsibility of the non-techy people in the organisation who produce content).

He also points out Legal & General as an example of a corporate web site that is both fashionable and accessible.

In a wonderful display of irony, Bruce’s contribution to the CSS Zen Garden project (a project revolving around beautiful, usable and accessible web site design) had me laughing out loud with a call back to Geocities personal home pages circa 1996. In this case, ugly is only skin deep :)

In todays Web, tables-based designs are taboo. Because of growing support for CSS in the modern browsers and stronger push from local governments for web sites to comply with accessibility guidelines, it’s become much easier to write semantic HTML pages and let style sheets handle the design (see CSS Zen Garden for some inspirational examples), while leaving the tables for tabular data. There are other reasons for abandoning table-based designs - lighter code, faster page loading, more flexible designs, easier to move content to new designs, etc., but most importantly because the alternatives tend to be much more accessible.

Unfortunately, there is a really steep learning curve when making the switch and I think many old-hat developers are put off by this. After all, it’s not that table-based designs don’t work and most web surfers wouldn’t even be able to tell the difference between a site build using tables and one without them.

Fortunately, Mark Pilgrim at Dive Into Accessibility has a really simple trick for making sure that your table-based designs remain accessible. He gives a really great overview of the problem as well.

For a more detailed look at the practice of writing semantic HTML and how it can actually improve efficiency in your web development, see my previous post titled How well formed XHTML and CSS can save your sanity.

Call to action: Please check your pages

Here is a list of common CSS hacks to look out for (please also consider their variations):

• html > body - http://css-discuss.incutio.com/?page=ChildHack
• * html - http://css-discuss.incutio.com/?page=StarHtmlHack
• head:first-child + body - http://centricle.com/ref/css/filters/tests/owen/
• head + body - http://www.dithered.com/…/head_adjacent_sibling_body.html
• body > element - http://css-discuss.incutio.com/?page=ChildHack

We ask that you please update your pages to not use these CSS hacks. If you want to target IE or bypass IE, you can use conditional comments.

IEBlog : Call to action: The demise of CSS hacks and broken pages

For many years I’ve suffered with a gap in the current CSS implimentation: no support for variables or constants. These would come in handy if you have several classes, rules or id selectors that would all use the same style. Without this ability you have to update every instance if the style should change. Being able to use variables would mean that you could change these variables once for the whole site. This could of course be accomplished on the server-side, as has been proposed before, but this negates the benifit of being able to cache the page and speed up processing of the page. It also looks pretty messy as you have to jump in and out of your server side language and you have to force the page to be rendered as text/css by the browser.

This ability wouldn’t do much for smaller sites with only a few rules, but for large application-scale websites it could come in handy, expecially during the mock-up and development phases. Now a Baltimore based developer has come up with an easy way that works with Apache and PHP and still allows the page to be cached!

CSS Server-side Constants // ShaunInman.com