About Us | Sitemap | RSS Feeds
Home/CSS/CSS Hacks

CSS Hacks

Table of Contents

There are numbers of techniques for using CSS Hacks smartly, following are some of the most popular techniques:

An Introduction

CSS hacks is the most apt way to tackle browser inconsistencies. They take advantage of browser bugs to perform magic such as "hiding" CSS Rules from specific Web Browsers, or kicking browsers that don't follow the specs into line.

There are multiple CSS browser hacks you can use. But it is important to know about how the CSS hacks & browser detection works. The browser detection is done by sending one CSS rule to the browser(s) you're trying to trick, and then by sending a second CSS rule to the other browsers, overriding this first command.

If you have two CSS rules with identical selectors then the second CSS rule will always take precedence. The first command is intended for IE, the second for all other browsers. By inserting a CSS hack we can perform our browser detection by hiding the second CSS rule from IE. This means that IE won't even know it exists and will therefore use the first CSS rule.

Conditional Comments

Among all browsers, Internet Explorer (IE) maintains the worst level of standards support. That is why, there are a number of CSS hacks available for different versions of IE. Fortunately, till version 5, it supports a rather safe-to-use hack called "conditional comments".

Conditional comments use a special syntax. This syntax includes HTML markup wrapped in a conditional statement. It is further placed within an HTML comment. There are two forms of conditional comments: positive and negative. If the statement evaluates to true, the enclosed HTML is revealed within the HTML document. If the statement evaluates to false, the enclosed HTML remains hidden. Because conditional comments are placed with HTML comments, the enclosed HTML also remains hidden from all browsers that donít support conditional comments.

The following snippet will clarify the point even more:

For all IE Versions:
  1. <!--[if IE]>
  2.   <link href="ie.css" type="text/css" rel="stylesheet" />
  3. <![endif]-->

For IE 6 Version Only:
  1. <!--[if IE 6]>
  2.   <link href="ie6.css" type="text/css" rel="stylesheet" />
  3. <![endif]-->

For less than IE 6 Version:
  1. <!--[if lt IE 6]>
  2.   <link href="ie6-less.css" type="text/css" rel="stylesheet" />
  3. <![endif]-->

For less than or equal to IE 6 Version:
  1. <!--[if lte IE 6]>
  2.   <link href="ie6-less-equal.css" type="text/css" rel="stylesheet" />
  3. <![endif]-->

For greater than IE 6 Version:
  1. <!--[if gt IE 6]>
  2.   <link href="ie6-greater.css" type="text/css" rel="stylesheet" />
  3. <![endif]-->

For greater than or equal to IE 6 Version:
  1. <!--[if gte IE 6]>
  2.   <link href="ie6-greater-equal.css" type="text/css" rel="stylesheet" />
  3. <![endif]-->

Conditional comments have certain parameters that it follows for different versions of IE, they are:

lt: less than
lte: less than or equal to
gt: greater than
gte: greater than or equal to

You can define conditional comments for particular version as well which includes IE 5, 6, 7 or 8.

!important

This means that the styles are applied in order as they are read by the browser. CSS rules marked !important take precedence over later rules. Normally in CSS the rules work from top to bottom, so if you assigned a new style to an element further down the style sheet or in a secondary style sheet then the later rule would take precedence. !important ensures that this rule has precedence.

The following snippet will clarify the point better:

View Plain - Print Usage:
  1. .abc
  2. {
  3.     font-size:15px !important;
  4. }

CSS Hacks for IE

There have always been the problem with Internet Explorer implementing CSS commands differently compared to other more standards compliant browsers. However, where there is a problem, there is a solution as well. CSS hacks for different IE versions are the perfect remedy for this. However, different browsers have different bugs and different fixes.

IE 6

Internet Explorer 6 isnít perfect, but unfortunately the user base for the outdated browser is still high. IE6 actually does keep the html CSS object as the child of something else, contrary to the standard and there the problem lies. However, to solve this problem you can use CSS underscore hack (" _ ") that IE6 tends to read and process as a valid CSS property.

View Plain - Print Usage:
  1. .IE6-Font
  2. {
  3.     font-size:15px; _font-size:18px;
  4. }
IE 7

Internet Explorer 7 is better than IE6, but there are still many CSS related inconsistencies such as IE7 Div problem, IE7 width problem etc. The CSS underscore hack doesnít work here as it is W3C compliant. However, you can use CSS hash hack (#) to fix all CSS related inconsistencies in IE7.

The following snippet will clarify the point better:

View Plain - Print Usage:
  1. .IE7-Font
  2. {
  3.     font-size:15px; #font-size:18px;
  4. }
IE 8

Internet Explorer 8 is no doubt a superior browser compared to IE7, but there are still CSS compatibility issues like rendering problems and table width/height display problems etc. To solve that you can use font-size/*\**/:15px\9; and fix most of the CSS inconsistencies prevailing in IE8.

Apart from that, it also works in all versions less than IE 8, you only need to define it first before applying IE7 and IE6 hacks like font-size/*\**/:15px\9; #font-size:13px; _font-size:14px;.

The following snippet will clarify the point better:

View Plain - Print Usage:
  1. .ieHacks
  2. {
  3.     font-size/*\**/:15px\9; #font-size:13px; _font-size:14px;
  4. }

PNG Hack

When you place a PNG with variable transparency on to the page and check that out in a IE6 browser, you'will surely get shocked. IE6 renders any pixel that requires transparency as a grey mess. Earlier, we would have suggested you to add a wrapper around the image with the exact dimensions of the image or to add a class of "ie-hide". However, now we would suggest you to use CSS PNG hacks (but it creates problem for link).

This amazing CSS hack adds near-native PNG support with alpha opacity to IE 5.5 and 6. Now you can have full transparency and no more ugly grey borders. It also supports full CSS background positioning and repeat including CSS sprites. It requires only one line in your CSS file, and no changes to your website HTML.

The following snippet will clarify the point better:

View Plain - Print Usage:
  1. .pngHacks-4-ie6
  2. {
  3.     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='
  4.     /images/menu-tp-bg.png', sizingMethod='crop');
  5. }

So far, you have learnt about the different CSS hacks for the different browsers. This tutorial is surely going to help you a lot. Our next chapter will cover another such important CSS tutorial. So, donít miss to check that out.


Continue >> << Back
Disclaimer: This site is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License
Contact Us: info@tutorialswire.comCopyright © TutorialsWire.com, All Rights Reserved.