CSSKarma

Main Nav:

• home
• articles
• lab
• research
• portfolio
• contact

Social Nav:

• facebook
• twitter
• dopplr
• plurk
• pandora

Extra Nav:

• RSS
• Twitter
• FatFold

CSS2.1 Integration & Dean Edwards IE7 script

Well, it's about time we started integrating more CSS2.1 properties into our development, if no one makes a heavy push for it now, it'll probably be 5 years before CSS3 gets commonly used. I know many are fed up with old browsers and already have made the switch pretty much saying 'to hell with IE6'; but that's not really helping anything since the end user will just notice that the website they have open looks like crap, but never care to find out why.

Pushing an upgrade

Being well aware of the fact that IE6 is still the dominant brower (5/1/07) there are certain things I've started integrating into sites I develop that I hope, will convince some people to at least upgrade to IE7, or make them aware that there is an upgrade available.

First off I use a conditional comment to display a banner at the top of each page, letting IE6 users know that IE7 is out there and give them a link to download [example of IE6 message (view it in IE6)].

And this is how I did it:

XHTML

<!--[if lte IE 6]> 	
<div id="IE6message">You are currently running an 
old version of Internet Explorer 

<a href="http://www.microsoft.com/windows/ie/default.mspx" target="_blank">
click here to update your browser</a></div> 
<![endif]-->

CSS

#IE6message{
display:block;
background:#AA030D;
color:#FFF;
font-weight:700;
text-align:center;
font-size:.8em;
line-height:2;
}

That's all it is, very subtle and lightweight thing to add into a site. I couldn't gather any analytics on this but I have notice an increase of IE7 traffic since I started using this (so, I'm going to tell myself it's the reason).

I've also started leaving out some features to make IE6 renders look a little bland

iPod

I just finished reading Andy Clarke's Transcending CSS a couple weeks ago, so I've had some time to test out theories he presented, modify techniques, and find out what works for my development style. One of his theories that jumped out at me (which for some reason I didn't bookmark and now can't find) was his iPod theory. The basic idea was that if you bought an iPod 3 years ago you don't expect it to have to same bells and whistles as the latest version, and you accept that; if you want for features, you can upgrade. We don't treat browsers this way, and I agree with Andy, we should. There's no reason older browsers should hold back advanced CSS coding, as long as you still adhere to standards for basic site elements that will display fine, without all the hoopla.

Dean Edwards IE7 script

With that being said, after you have developed a site (free of hacks) in a standards-compliant browser you can see how messed up it looks in IE6, cry a little, and then use Dean Edwards IE7 script to force IE6 to deal with things like PNG transparency, standard positioning, CSS2 & CSS3 selectors, layout, overflow, fixed positioning, etc. This won't solve all your problems, but it does help out a great deal and save a lot of time in development. The best part is that you can make many of the CSS2.1 properties work. This script is great and I highly recommend at least testing it out on your site; you'll notice a difference right away

Selectors

These are examples of the CSS2.1 selectors that I use frequently

Child selectors

div > p {line-height:1.3;}

This child selector gives all 'p' elements that are located inside of a div tag a line-height of 1.3em

Adjacent sibling selectors

h1 + h2 {margin-top:-5px;}

The adjacent sibling selector is very useful when trying to insert that stupid vertical divider line between links in a horizontal navigation bar [li + li{border-left:1px solid black;}] . So this rule applies to the element after the '+' and only when it's preceded my the first element

<h1>Title one</h1>

<h2>sub title</h2>

In that case, the <h2> would have a top margin of -5px because there is an <h1> right before it.

Attribute selectors

This is a very useful selector. I mostly use it to produce an icon after a certain file type. Try it out, it's very coo.l

a[href $=".pdf"]{
background: url(../images/icon_pdf.png) center right no-repeat; 
padding-right:32px;}

a[href ^="mailto:"] {
background: url(../images/icon_mail.png) center right no-repeat;
padding-right:32px;}

a[href $=".doc"], a[href $=".docx"] {
background: url(../images/icon_doc.png) center right no-repeat;
padding-right:32px;}

a[href $=".mp3"], a[href $=".wav"], a[href $=".wma"]{	
background: url(../images/icon_sound.png) center right no-repeat;
padding-right:32px;}

a[href $=".avi"], a[href $=".mpeg"], a[href $=".mpg"]{
background: url(../images/icon_video.png) center right no-repeat;
padding-right:32px;}

I haven't started heavily using :first-child, :first-line, :first-letter, :lang or generated content yet. Mainly because it rarely comes up, but they do exist and developers should be aware of them. So for anyone that's curious, w3.org has a good write up on all of these selectors.

Anyway, I hope this helped some folks out there...thanks for reading

with_ease,
Tim