Saturday, December 26, 2009

CSS – It’s been a while old friend…




I remember back in 2003 reading Zeldman’s book called Designing with Web Standards and it is one book that truly changed the way I was marking up my pages. Since then, Zeldman’s on his 3rd edition and I haven’t developed a site using table-based layout.

Since the baseline of standards came into play, I have developed many sites with css-based layout and thought I was doing good. Well my wife had this little project for me and I thought I’d look and see if anything has changed or if there are any new standards I could really start using since I last started using back in 2003. I think I’ve researched one other time around 2005 for CSS sprites, so it appears I look into CSS every couple years or so. I guess it doesn’t change too often, which is a good thing!

Basically, what I found was that there are some new things out there. You have the CSS Pseudo-classes (kinda new), the reset stylesheet, the 960 grid, the YUI library, etc. I’ve been developing and dealing with a lot of these headaches just by figuring out “hacks” myself, but obviously there has been progress and I’ve just missed out the last couple years.

So based-off the recent research, these are the things I’ve started to use.

  1. reset.css – I ended up using Eric Meyer’s Reset CSS
    • I did consider using Yahoo’s since it’s hosted and probably already cached on a lot of different end-user machines, but ultimately went with the “Master of CSS”.
  2. Taking advantage of a type of if statement for IE, which looks like this:
    <!--[if gte IE 7]><!-->
    <link rel="stylesheet" type="text/css" media="screen, projection" href="~/_c/screen.css" />
    <!-- <![endif]-->
    <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen, projection" href="~/_c/ie.css" /><![endif]—>
  3. Taking advantage of having one reference to a stylesheet called “screen.css”. My screen.css looks like this:
    /* import css and hide on IE/Mac \*/
    @import url("reset.css");
    @import url("lo.css"); /*lo = Layout*/
    /* end import/hide */
  4. There are a couple of Pseudo-classes I’m using in my CSS and they are :first-letter and :after…of course I’ve always used :visited, :hover, :active, and :link
    • I’ve noticed the pseudo-classes seem to be the least dependable other than those relating to anchors.

As of right now, that’s all I’m using to help my layout. I will probably end up using some of the tools on the YUI site and possibly the 960 grid system. I  haven’t yet though.

Whenever I go learn about CSS, there are a couple main places I go. They are:

I usually look at their source first to see if I see commonalities and if anything looks different than I’m used to seeing. Occasionally I’ll buy a book on the topic, but it’s been a while…probably 2 years.

So there’s the what’s new with CSS to me…I’m sure most of you are thinking…shouldn’t this post have been made 2 or 3 years ago?

Ah well, it’s done now! Have a good one and thanks for reading!

kick it on DotNetKicks.com

blog comments powered by Disqus
Related Posts Plugin for WordPress, Blogger...