What’s in your CSS armoury?

Tool

I was going through my bookmarks clearing out some dead links and taking a look at some of my CSS bookmarks and it got me thinking about other CSS tricks I might be missing out on. So I thought I would share some of my bookmarks here to hopefully get some of you to post your tips and tricks links.

I still refer to these links throughout web builds as no one can profess to keeping *every* CSS trick in their head as well as be super woman/man at writing valid well structured mark up, remembering project deaulines and feeding the cat, yourself and taking a shower! You get my point.

So here’s what’s in my CSS arsenal…

Layout

Layout demos and more: pmob.co.uk/

CSS support has been well supported for years and with the release of IE7.0 it’s good to see we are progressing. But what about CSS3? Why not start implementing CSS3 techniques? That’s what I would like to ask. I have decided to start exploring opportunities where I can enhance my web layouts with CSS3 in a degradable fashion. Let’s start taking advantage of it now and start pushing more UA to support CSS3.

The most widely supported selectors from CSS3 are the attribute selectors, so let’s start playing with them. Hook an isolated css3.css file to your site and start tinkering. As long as the site works perfectly well without it, what’s stopping us from doing that? Pop over to Dante Evans site and check out the very nicely put together compatibility chart for more details on CSS3 support.

If anyone has seen some examples of CSS3 in use and not just for demos please let me know.

On a final note for links, don’t be without this helpful links page: Web developers handbook.:)

Posted in Coding on March 1st, 2007 - 6 comments

Tags for this article: CSS, Interfaces

RSS feed for comments on this post. TrackBack URL

6 comments

Comment by Simon Clayson
March 5, 2007 @ 6:02 pm

I didn’t get where I am today without Jon Hicks – particularly this nugget: http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css

Is this layout a redesign or a realign?
Comment by Laura Zucchetti
March 5, 2007 @ 6:26 pm

Oh the power of body ID’s! Great one, such a simple idea yet I had to be pointed towards this too! So many uses for applying different layout templates.

hmm.. well I have to admit this was a bit of a realign and redesign. I wanted to jump out of the common WordPress look but also reposition myself as a web pro. I am looking to change a few things in my life over the coming months, (which I won’t divulge publicly on here) and this was the main motivation for the change. To hopefully aid these changes and expose my skills in interface design and usability. I wasn’t happy with some of the navigational elements on the old version.
You see, you got me waffling!
Comment by Mike Stenhouse
March 5, 2007 @ 6:35 pm

Randomly dropping by…

The problem with doing it Jon’s way is that the meaning is hidden in the CSS instead of being exposed in the markup. I’d always recommend wrapping the current item in an em or a strong to distinguish it semantically and use that as the hook for restyling too.

Like the design though!
Comment by Laura Zucchetti
March 5, 2007 @ 6:53 pm

Oh nice idea, not thought of that one. Makes perfect sense.
Comment by Simon Clayson
March 5, 2007 @ 7:05 pm

What is a web pro? This is apocalyptic stuff.
Comment by Laura Zucchetti
March 5, 2007 @ 7:20 pm

Hmm, good question, I tried to google it and nothing was there! You’re right, it’s a myth…