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.
- 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”.
- 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”.
- 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]—>
- 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 */
- 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!
