The power of CSS + javascript

Wednesday 15th October

Introducing a new ‘dynamic tutorial’ series

For some time now, I’ve been looking into ways in which javascript can enhance the CSS experience from a web designer’s point of view. Two things spring to mind:

Use as an interactive tutorial tool for displaying changes to CSS in real-time
Measuring CSS specification compatibility

They’ll be more on the second point in a later post; for now I’ll announce a very simple example demo of what I’m hoping to achieve in the ‘tutorial realm’: a demonstration of the table-formatting property. A few points:

This is, of course, nothing revolutionary. All I’m really doing here is expanding on the (often terrible) ‘font switcher’ tool that many sites use to ~~show off~~ allow the user to play with font styling. However, I’ve yet to see this technique really embraced, especially in this context, where it seems to fit best.
There will be a subtle difference between this series and the ‘one-page tutorial’ articles I’m slowly publishing. It’s so subtle, I’m not quite sure what it is yet. Intuition tells me that the dynamic tutorials are better suited to an ‘exploratory reference’ whilst the one-page articles should divulge explicit information in addition to the visual demonstration.
As evidenced by my ‘one-page tutorial’ series, I’m a firm believer in ‘education by demonstration’ and most, if not all, contemporary CSS information sites (including the spec itself) give examples as images. I want to provide real examples that can be inspected, modified, and reused as readers see fit.
The demo is also a great example of ‘bug-exposing’ and identifying differences between browsers (read the text for more).
There’s a basic javascript fallback, but it needs better in-page description; I’m working on it.

Comments

Sun 17 Apr 2011 18:25

Las Vegas Web Designers said:

This is a nice source of information. Thanks for sharing.