CSS3

  • 200721 Aug

    CSS techniques I can’t wait to be rid of

    by

    Posted in CSS3 Previews, Declarations

    I was reading Veerle’s blog today; the excellent article A CSS styled table version 2, to be precise. All good, practical stuff, and well-presented as usual. But what stood out for me was the technique to stripe the table rows: either through classes, or Javascript.

    Of course, both of those are valid techniques; but really, neither should be. It’s pretty easy to forget, when we see how far CSS-based design has come in the last few years, just how reliant on workarounds and tricks we are in order to perform what should be basic functions.

    Presented below are some of those workarounds that I’d love to see consigned to the dustbin of history; not because they are bad – on the contrary, they are extremely inventive – but because CSS 3 should allow the effects to be replicated without the extra mark-up, script or code.

    Tiger-striping on table rows

    Whether done with background images, DOM scripting or just adding classes to the markup, none of the techniques are as easy as using the nth-child pseudo-class:

    tr:nth-child(odd) { color: blue; }

    ‘Sliding Doors’

    Requires no extra mark-up but a lot of CSS jiggery-pokery, most of which could be avoided with multiple background images:

    li {
background: url('image0.png') no-repeat left top,
 url('image1.png') no-repeat right top;
}

    Rounded corners

    Which do you prefer: multiple lines of Javascript? Or a single line of CSS?

    div { border-radius: 1.5em; }

    Drop shadows

    Even the simplest solutions seem to rely on an extra image and plenty of CSS tweaks. CSS 3 resolves it with one declaration:

    img { box-shadow: 10px 10px 5px; }

    Of course, the problem is that perennial one: lack of support. No modern browser currently supports all of the examples shown above, and it will be many years before we can stop using the workarounds altogether. But I do look forward to the time when they become a secondary consideration – and to what extensive use of the new declarations reveals in terms of creating new workarounds to future problems.

    You can skip to the end and leave a response.


  • Comments

Subscribe to our RSS

OUR SPONSORS

Advertise here?
CATEGORIES
FRIENDS
META2
TAG CLOUD

© 2009-2012 WEBFLUX. All Rights Reserved.