Internet Explorer 7 CSS Hacks

Two months ago, I, in a video quick tip, demonstrated how to use the underscore and star hacks to target Internet Explorer 6 and 7 in your stylesheets. In today's quick tip, we'll take things one step further, as we introduce a new hack that targets IE8 and below as well. It should be noted that this is not a best practice, and conditional comments should be used instead 98% of the time. With that said, it's always important to know what you can do - plus it's fun, right?

It's worth noting that I'm not advocating the use of hacks in your stylesheets in any way. On the contrary, you should almost always use conditional comments. However, that doesn't mean that it isn't helpful to know what you can technically get away with, whether it be for debugging, or showing off to your friends!

The biggest concern is that hacks aren't future proof, at least not really. For example, what if, with the release of Firefox 4, they, too, recognized properties prepended with the * hack. They probably never would for compatibility reasons, however, if they did, that could potentially ruin a portion of your layout. Ultimately, just be wise when using hacks. If you only need to change one or two properties to make IE6 happy, then I don't see any harm in using the underscore hack directly in your stylesheet. The world won't end. However, if there are a handful of changes, be sure to use conditional comments!

Dealing with browser inconsistencies often makes up a majority of the work for a web designer. Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines. Hacks necessarily lead to potential complications and should be avoided whenever possible, but when the circumstances require hacks to be used, it's best to know what your options are and weigh the consequences appropriately. The purpose of this article is to describe some of the CSS hacks, also called CSS filters, with the least significant potential consequences.

The most beneficial aspect of conditional comments is that you are not relying on browser bugs when using them. When you use CSS hacks that rely on browser bugs, you run into the possibility of those bugs being fixed at an unwanted time or other browsers showing the same bugs. Conditional comments only work in browsers that specifically support them and claim to be based on Internet Explorer, which in this case all known browsers are honest about.

One of the drawbacks of conditional comments is that they require changes to the HTML source. Unfortunately, there is no equivalent to conditional comments in CSS. Instead, if you must use in-CSS hacks, you must use some other much less reliable techniques, often involving the exploitation of browser bugs.

Most in-CSS hacks deal with selector bugs. The following is a list of browser version ranges and the beginnings of selectors that are known to select elements in them. Note that because these hacks rely on browser bugs or missing features, results may vary in some lesser-known or future browsers. All of these selectors use valid CSS.

These hacks are based on differences in handling of attributes in minimized form. If a tag is written , input[disabled="disabled"] {} should select it. However, most browsers get this wrong and in different ways.

If you are going to use hacks, the above techniques are the recommended choices. However, it's interesting to point out the following unrecommended hacks. Some of them rely on invalid CSS or are more clumsy than the above alternatives.

Warning: Due to the nature of the Opera-specific selector and Internet Explorer 7's incorrect handling of :first-child, it is very possible that the html:first-child selector may also select in a future version of Internet Explorer, so be careful when using it. This selector also relies on a bug, so it may be fixed in a future version of Opera. This page also describes an alternative method that is more of an issue to implement but may be somewhat more dependable considering the likely priorities of bug fixing. Minimized attribute selectors These hacks are based on differences in handling of attributes in minimized form. If a tag is written , input[disabled="disabled"] {} should select it. However, most browsers get this wrong and in different ways.

body[class|="page-body"] {} selects the body element with the class page-body in IE 7 and all modern browsers except Opera 9 and below. It may or may not work in future versions. Conditional Comments In-CSS hacks Unrecommended hacks Unrecommended hacks JavaScript KitFree JavaScriptsJavaScript tutorialsJavaScript ReferenceDOM ReferenceDeveloper & CSSWeb DesignFree Java AppletsCSS Quick ReferenceDeveloper Coursesvar sectionmatch=["cutpastejava", "javatutors", "jsref", "dhtmltutors", "howto", "java", "cssref"]var docurl=window.location.toString()var menulinksobj=document.getElementById("mainmenulinks")if (menulinksobj && menulinksobj.getElementsByTagName("a")){for (i=0; i= this.contentcolumnheight)){ // if offsettop of banner container is 0, it means it's hidden, or if right column is longer than content columnreturn}var docscrolly = window.pageYOffset || standardbody.scrollTopif ( docscrolly > offsettop){if (!/sticky/i.test(target.className)){target.className = target.className + 'sticky'}}else{if (/sticky/i.test(target.className)){target.className = target.className.replace(/\s*sticky\s*/i, '')}}},init:function(target){this.target = targetthis.refreshCoords()window.addEventListener('scroll', function(){requestAnimationFrame(function(){jkmakesticky.stickit()})}, false)}}if (rightcolumnad){jkmakesticky.init( rightcolumnad )jkmakesticky.stickit()window.addEventListener('load', function(e){rightcolumnad.className = rightcolumnad.className.replace(/\s*sticky\s*/i, '')jkmakesticky.refreshCoords()jkmakesticky.stickit()}, false)window.addEventListener('resize', function(e){clearTimeout(jkmakesticky.resizeTimer)jkmakesticky.resizeTimer = setTimeout(function(){rightcolumnad.className = rightcolumnad.className.replace(/\s*sticky\s*/i, '')jkmakesticky.refreshCoords()jkmakesticky.stickit()}, 100)}, false)}})(); (adsbygoogle = window.adsbygoogle || []).push({});Copyright (c) 2016 JavaScript Kit. NO PART may be reproduced without author's permission.

Due to its relatively poor level of standards support, Internet Explorer tends to be the subject of most CSS hacks. Luckily, as of version 5, it deliberately supports a rather safe-to-use hack called "conditional comments". Conditional comments are specially constructed HTML comments that Internet Explorer on Windows may treat differently from other browsers, optionally based on IE's version number. They can cause Internet Explorer to ignore the markup between comments or to include part of a comment as if it was regular markup. Conditional comments apply specifically to browsers using Internet Explorer's Trident layout engine, meaning IE-based browsers like Maxthon and Avant handle them like Internet Explorer does while browsers using other layout engines see them simply as regular comments. Internet Explorer on the Mac uses a different layout engine and doesn't support conditional comments.

In the above example, all_browsers.css applies to all browsers, ie_only.css only applies to all versions of Internet Explorer, ie_6_and_below.css applies to all versions of Internet Explorer below IE 7, recent.css applies to all browsers except IE versions below 7, and not_ie.css applies to all non-IE browsers. See also: Conditional Comments of IE Conditional Comments In-CSS hacks Unrecommended hacks In-CSS hacks JavaScript KitFree JavaScriptsJavaScript tutorialsJavaScript ReferenceDOM ReferenceDeveloper & CSSWeb DesignFree Java AppletsCSS Quick ReferenceDeveloper Coursesvar sectionmatch=["cutpastejava", "javatutors", "jsref", "dhtmltutors", "howto", "java", "cssref"]var docurl=window.location.toString()var menulinksobj=document.getElementById("mainmenulinks")if (menulinksobj && menulinksobj.getElementsByTagName("a")){for (i=0; i= this.contentcolumnheight)){ // if offsettop of banner container is 0, it means it's hidden, or if right column is longer than content columnreturn}var docscrolly = window.pageYOffset || standardbody.scrollTopif ( docscrolly > offsettop){if (!/sticky/i.test(target.className)){target.className = target.className + 'sticky'}}else{if (/sticky/i.test(target.className)){target.className = target.className.replace(/\s*sticky\s*/i, '')}}},init:function(target){this.target = targetthis.refreshCoords()window.addEventListener('scroll', function(){requestAnimationFrame(function(){jkmakesticky.stickit()})}, false)}}if (rightcolumnad){jkmakesticky.init( rightcolumnad )jkmakesticky.stickit()window.addEventListener('load', function(e){rightcolumnad.className = rightcolumnad.className.replace(/\s*sticky\s*/i, '')jkmakesticky.refreshCoords()jkmakesticky.stickit()}, false)window.addEventListener('resize', function(e){clearTimeout(jkmakesticky.resizeTimer)jkmakesticky.resizeTimer = setTimeout(function(){rightcolumnad.className = rightcolumnad.className.replace(/\s*sticky\s*/i, '')jkmakesticky.refreshCoords()jkmakesticky.stickit()}, 100)}, false)}})(); (adsbygoogle = window.adsbygoogle || []).push({});Copyright (c) 2016 JavaScript Kit. NO PART may be reproduced without author's permission. 2b1af7f3a8