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.
