CSS, HYBRID WEBSITES, AND CSS HACKS

CATEGORY: EXPERIENCED THEORY - MAY 2005

Those of you who have been reading my stuff for a little while, know that I think CSS based design is pretty much the way to go. That being said, CSS based layout is not perfect, and it does need some work in certain areas that I’m afraid won’t be addressed by the major browsers for a while.

CSS BIGGEST PROBLEM: CSS BASED PAGE LAYOUT

The major problem with CSS based layout is that sometimes there is a need for hacks to make things work cross-browser.

NEWS: CSS hacks should NEVER be used!

WHAT’S THE PROBLEM WITH THE HACKS?

Most of these hacks depend on IE (Internet Explorer) not being able to read certain standard CSS code that the other browsers can read. The basic strategy is to hide the code that would cause IE to break the pages inside these aforementioned CSS code snippets.

So in the CSS code that IE can read, you set things up to keep IE from barfing, while in the other CSS code (the stuff IE can’t read), you put the code/CSS rules that will make all the other browsers happy.

THE PROBLEM WITH THIS APPROACH

What happens when IE decides to play by some of the rules where IE begins to ‘see’ into these hacks but where IE still has the fundamental problems the hacks where trying to solve? Many a CSS zealot will be running to fix their hacked-up CSS pages!

Of course, the boys at Redmond (Microsoft) could fix the problems that made the hacks required … but history would suggest that you shouldn’t count on it!

AN EXAMPLE OF A COMMON CSS HACK:

I like to use the 'child of div' hack to get things to work in both FF/Mozilla and IE. First thing you do is put in the CSS rules so it works in IE and then use the hack to override it for Mozilla.

An example of the ‘child of div’ hack:

#leftMenu>#topVerticalMenu {margin-left:30px;} /* child of div hack */ 

  

This rule is saying: apply this style (margin-left:30px;) to any element that is inside the #topVerticalMenu ID if the #topVerticalMenu ID itself, is inside the #leftMenu ID.

This is a little confusing but don’t worry about it - all you need to know is that IE can’t understand this CSS rule so IE just ignores it. But since FireFox and Mozilla do understand it, the CSS is applied in those browsers.

In other words, the CSS rule: ‘margin-left:30px’ - will only have effect in FireFox and Mozilla, not in IE, because IE doesn’t understand it.

One last point about this CSS hack - CSS rules are applied (by the browser) from the top - down, so CSS rules that appear last on the page will be applied last, overriding previously stated rules. That’s why the ‘child of div’ hack has to be applied after the IE CSS.

I used this technique recently for a new site of mine:

http://www.websitetemplates.name

Yes, a shameless plug but the reason I mention it, is because it is an example of a hybrid website.

A HYBRID WEBSITE

The Website Templates website is an example of a hybrid site - some basic tables (say it isn't so!) with CSS. Why do that, you ask? The CSS to make this work (in pure CSS layout) was becoming riddled with hacks ... too much for my taste.

SOMETHING TO CONSIDER:

One of the reasons to get away from table-based design is to avoid things like spacer gifs, too many nested tables, and other ‘hacks’ to get the look you want. You want to avoid this because it’s a big mess that’s harder to build and maintain. That being said, CSS filled with hacks is getting a little too close to being the same thing.

This is why sometimes a hybrid website makes sense … for now.

CSS PAGE LAYOUT RULES - COMING, BUT NOT HERE!

The nerds who control what CSS is supposed to do, know about the problems with CSS based layouts. As such, a new proposal/specification has been created to handle page layout; things like two and three column CSS code for page layout et cetera.

These days, to create these page-structures, we use interesting combinations of CSS margins, absolute positioning, and padding. As I’m writing this, I’m wondering if it makes sense to create columns in our pages by slapping on super thick padding or margins to a div to push it to one side of the page or another? Ah, but that’s another story.

A FINAL COMMENT ABOUT THE CSS STANDARDS

I really like CSS and the principle of keeping within the standards - as long as the standards do not get in the way of real-world use!

Case in Point: Java EJB.

Let me explain. The Java ivory tower nerds came up with this specification a few years back called 'EJB', I'm not going to get into what it was supposed to do, but what I can tell you that it was, and is still a huge mess.

After a year or two of the specification-zealots pushing EJB's, people in the Java world started saying, "EJB sucks!" The zealots realized this was indeed the case, so they changed it radically - EJB2 came out.

Now a year or two later and we are in the same situation; people are again screaming out EJB sucks but this time they are saying "screw EJB, we are doing something better ... "

Guess what happened? The EJB people took a look at what these people were doing and decided that it was indeed a better approach and now EJB 3 is out and it is radically different from EJB 2.

CSS is not an EJB like mess; it's actually very good. My point is that specifications change and ultimately the point of CSS is to make one’s web pages easier to build and subsequently maintain. As soon as the specifications get in the way of this, it's time to go beyond them...

Top

© 1996 -
Fatal error: Uncaught Error: Undefined constant "Y" in /home/killersi/public_html/articles_2005/theory/css-hybrid-csshacks.php:180 Stack trace: #0 {main} thrown in /home/killersi/public_html/articles_2005/theory/css-hybrid-csshacks.php on line 180