CSS - To Hack or Not to Hack

That is the question thhat I hope to answer here.

In order to determine whether we should or shouldn't apply hacks to our CSS we first need to determine just exactly what a CSS hack is. Let's start by clearing up the misconception on what a computer hack in general is. Contrary to the way the media uses the term, a hack is not necessarily an attempt to break into a computer system, people within the industry generally refer to that as a crack and the media have simply confused the two terms.

A hack is simply a clever way of doing something, usually by taking advantage of something within the computer that either isn't working quite the way it should or by making use of some side effect of the way that some particular piece of processing has been coded. All such code can be referred to as hacks and only when the intended result is malicious is it also a crack (or what the media refer to as a hack).

In terms of CSS the various different browsers and browser versions have different levels of support for the various CSS commands. In at least some instances the browsers also have some buugss in the code that processes the CSS code that results in some unusual codebeing handled differently by that browser to the way that the same code is handled by other browsers. It is the making use of thes peculiarities to target CSS to the specific browsers that have that peculiarity that we refer to as CSS hacks.

The biggest problem with CSS hacks is that they rely on a peculiarity in the way that a given browser version handles specific code. What this means is that the following version of the browser may change that part of the processing so that the hack no longer works but may not have corrected the processing that made the hack necessary in the first place.You thus end up with a stylesheet that no longer works correctly with a new version of that browser.

As an example I am going to refer to a hack that can hide stylesheet commands from Netscape 4. This particular example has the advantage for this discussion that almost no one is using that browser any more and there will never be a newer version of the browser to break the hack (since newer versions of Netscape use a different rendering engine and are therefore in effect a completely different browser). This particuular hhack takes advantage of a bug in the way that Netscape 4 recognises the end of comments in CSS.

CSS statements here are hidden from Netscape 4
/* */

While all other browsers break the top line of that code into /* (start of comment), / (content of comment), */ (end of comment), Netscape 4 is confused by the second occurrence of /* and therefore does not recognise that there is an end to the comment on this line. The browser therefore treats everything following until it finds another */ as being within the comment. All other CSS hacks work similarly in taking advantage of a bug in the way that some particular piece of code is mishandled by thhat browser (in this instance /*/) in order to either hide some code from that browser or alternatively to make it visible only to that browser.

The next question is "what would have happened if there was a new version of Netscape 4 that fixed that bug but did not do away with the need to hide hose stylesheet commands from the browser?". Well that would have resulted in breaking our stylesheet. We would be relying on the browser writers recognising the hacks use and catering for it in the new version of the browser in an appropriate way. In the case of Netscape 4 the more common way of hiding code from the browser (that doesn't rely on a bug in the code and which therefore is not a hack) is to make use of the fact that Netscape 4 did not implement the @import statement and you can therefore use that call to import all the code you want to hide from Netscape 4.

These days, the vast majority of people using a modern browser tend to keep theiir browser up to date since the browsers themselves advise whenever a new update to the browser is available sand recommend that you download and install the update (particularly since so many updates are introduced in order to fix bugs in the code that can be exploited by cracks). This simplifies things for us somewhat in that we do not generally need to worry about the older versions of these browsers as almost everyone will upgrade within a short time after the release of the new version. Also in so far as CSS goes the majority of the changes in the newer versions are to implement further parts of the CSS3 standards that the earlier versions of the browser didn't support. Provided that we don't start using these new commands until all the modern browsers have implemented them we will not have any issues with the CSS in the modern browsers and no need to distinguish specific browsers whether by hacks or otherwise.

That leaves us with only the one antique browser that is still in common use for us to worry about - Internet Explorer. At the time of writing this, with the exception of those people who have made use of a time machine to obtain a copy of Internet Explorer 9, all IE users have a problem in that their browser does not recognise all of the CSS2.1 commands properly and in some cases where it does recognise the command it interprets the command incorrectly. Also IE users tend to not upgrade their browser as they don't realise that there are newer or alternative browsers around that work much better than their existing browser. They don't recognise anything beyond the fact that the big blue "e" on their screen gives them access to the internet.

This means that the vast majority of CSS hacks are used to get Internet Explorer to display the web page correctly. Things are not as bad as they once were since setting up your web page with a valid doctype command as the first statement will put IE6+ into standards mode where the vast majority of the CSS that the browser does understand will be interpreted correctly (although in some cases we need to add a height to some of our block tags to trigger an IE quirk called hasLayout in order to get the code interpreted the way it should be). If we ignore IE5.5 (which is so antiquated it needs major hacks to get it to display properly and which fortunately almost no one still uses) then we need only worry about those commmands that IE6, IE7, and IE8 do not support which are supported in modern web browsers but not in those antiquated versions of IE. In most cases IE provides an alternative way of providing the same effect but using non-standard proprietary CSS commands that Microsoft invented for themselves.

Internet Explorer 6 provides one simple hack that can be used to target CSS that you want to only be processed by that browser. That is to include * html on the front of the command. The * is the universal selector and represents any tag in the page. html of course refers to the html tag itself so with that on the front of the command you are saying that you want to only apply the command where the tag it is to apply to is inside the html tag inside of some other tag. Now for all browsers except IE6 the html tag is the top of the structure and so it can never be considered to be inside another tag. IE6 on the other hand doesn't care that you have said that it needs to be inside some unnamed tag and will process the statement that all other browsers (including IE7+) will ignore.

Microsoft fixed the bug that allowed that hack to be used in IE7 and so there is no way of targetting all IE versions with that hack. In any case it is not necessary to use hacks to target your CSS to specific versions of IE as there is a really simple way of identifying if the browser is IE, which version of IE it is, and being able to add code specific to that particular version of IE. Microsoft makke extensive use of their own proprietary versions of HTML for transferring data between various Microsoft programs. To make thhis transfer process easier where different programs require different information they came up with the idea of conditional comments which identify the particular Microsoft program that particular HTML code is intended for so that other Microsoft programs can ignore it.

<!--[if MSO]> <![endif]-->

This particular conditional comment means that any HTML code contained within this comment will be processed only by Microsoft Office programs and will be ignored by everything else. If we replace MSO with IE then we are targetting Internet Explorer rather than Microsoft Office. Microsoft also allow the specific version of the given program (or a range of versions) to be targetted by their conditional comments. By using these conditional comments to add the alternative stylesheets that we need for IE6, 7, and 8 we can completely avoid the need for CSS hacks. By placing these stylesheets after the main stylesheet in our source code we can take advantage of the cascade part of CSS to only include those commands that we need to override from the main stylesheet in order to get these antique browsers to display our page the same way that the more modern browsers do.

Of course including conditional comments where your overriding stylesheet only needs to contain one or two very simple commands may be a bit much and so you might consider falling bback to using hacks to achieve the desired effect where only one or two commands are concerned.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow