Monthly Archive for September, 2005

Preparing for IE7 - Hacks and Conditional Comments

CSS filters and Hacks are so 2005

I think the future of CSS is not in hacks but looking seriously into using conditional comments. I’m saying this as someone that is trying to figure out the best approach for retrofitting older conversions.

Conditional comments are IE statements that say if ie6 or any other version, use this additional CSS file. Non IE Win browsers will ignore the comment.

<!–[if IE 6]> <link href="/ie6.css" type="text/css" rel="stylesheet" media="all"/> <![endif]–>

Or is the version less than or equal to IE6

<!–[if lte IE 6]> <link href="/ie6.css" type="text/css" rel="stylesheet" media="all"/> <![endif]–>

The Curveball

IE7 is going to throw a curveball worthy of a World Series ring. While it is easy and more convenient to throw a “ * html ” statement into a CSS, we need to start seriously looking at separating our hacks into different style sheets and intelligently using filters and conditional comments to refer to them.

Microsoft has announced that the IE7 browser will ignore past “ * html “ filters that were used to send styles only to Internet Explorer and will respond to child selectors: “ html>body “ which were used to hide styles from IE. Therefore, IE7 will see the style sheets just as every other modern browser.

Will this be an issue?

If IE7 fixes its display problems, we may not have to make any changes to our legacy CSS. However, if IE7 brings new bugs to the table, we can no longer use filters to whisper in its ear. Conditional comments will be the answer.

I’m dreading the idea of inserting conditional comments into the head sections of html pages. I’d like to insert it into the main.css file that imports more sophisticated styles. I have been overwhelmed lately and haven’t been able to test any answers to this. Does anyone have a suggestion?

Imagine teasing someone that their CSS is “So 2005!” Did I just coin a term? Has Joe Clark already coined this one?

Resources

Firefox search plugin for www.alistapart.com

Everyone has their bible. For some, it is the Holy Bible, for others, something not quite so reverent. As a child, our family life would come to a screeching halt when our bible arrived in the mail. Being the youngest, I usually got the National Enquirer after it had been scanned, read, and laughed about by the rest of the klan.

I’m all grown up now and my bible and gods are no longer the gossip rag and celebrity stalkers. Instead, I look up to my Rock Gods, such as NoMeansNo, Drive Like Jehu, and Ethel Merman. The omniscient National Enquirer has been replaced with web sites such as AListApart.com.

The AListApart path to enlightenment

Hardly a week goes by without doing a search on alistapart for the path to this or that standards-based method. A couple months ago, I created a search box plug-in for Firefox to make it much easier.

With the blessing of Jeffrey Zeldman, I present to you the www.alistapart.com search plugin for firefox.

Sorry to any IE users out there. I must have uploaded a bad copy of my permalink page last week and the formatting is botched. I’ll fix this tonight. Being that this is about Firefox, hopefully only a few people noticed it.

First-person account of New Orleans

This riveting description of life in New Orleans explains what it was like to be stranded in the city after the hurricane. It also explains Geraldo Rivera’s tear-filled plead to let people just leave the city and why reporters could go in and out of the city with ease, but not the residents.

Hurricane Katrina-Our Experiences
by Larry Bradshaw and Lorrie Beth Slonsky

Coming to grips with divitis

I think you go through stages of CSS/XHTML maturity as you learn how to move away from tables to table-less design.

Our first instinct is to use divs the same way we used tables. It feels safe to load up the page with structural divs. That’s ok, especially if it is what helps you get from x to y.

However, you will get to the point where you realize the first CSS based sites you built had too many divs and you start looking for ways to place the styles on the unordered list or paragraph instead of wrapping those elements in a div.

I still see a valid reason to have divitis. If I am building a site that has to be flexible, modified by a large group of people AND uses server-side includes, I would rather make those include files self-contained units.

Sure, I could remove the container div on many of the includes, but I prefer to know that if an include is added to a page, the elements within it are not going to inherit the styles of the page’s container. Does that make sense?

Now, the goal of a medium to advanced CSS-based programmer is to find the elegant balance of essential divs, spans, ids and classes. Consider it a challenge.

I sometimes cringe when I see divitis. I sometimes chuckle. I even at times yell, “hey Brian check out this site’s chronic divitosis!” But let’s face it, this is an evolutionary process and those of us that have been doing it for a while need to remember what it was like on the first pass.

Disclaimer: don’t forget the horrible, horrible, horrible, horrible divitis and absolute-positionitis generated by some of the Office software and CMS systems. I once looked at a form that had hundreds of inputs and labels in individually positioned divs. That wasn’t the programmer’s fault. We just didn’t have time yet to build a new generator from scratch.