HTML coding without hacks
When using semantic coding each developer will necessarily face the problem of compatibility in different browsers. In most cases it is necessary to use “hacks” to solve these problems. Usually this means a special way of writing selectors or rules which would work only in a concrete browser. However compatibility with CSS in the majority of browsers has already reached the level when it is necessary to limit “hacks” usage.
Most often, a browser which has the biggest number of difficulties is Internet Explorer (more often – IE6). The variety of errors in CSS realization at this browser t surprises even the most skilled web-designers, and, in particular, slicers. That is why there are situations when it is necessary to use alternative rules for Internet Explorer, in similar cases it is recommended to apply “hacks”. If you would need to use alternative rules for Firefox only it is recommended to reconsider your code and in 99 % of cases you will find more elegant decision of the problem.
To the most popular and often seen hack remains «star html hack» (and I think will remain for a long time):
#element { position:relative; /* the key rule for all browsers */ } * html #element { position:static; /* Redefinition of a rule for IE less than 7th version */ } *+html #element { position:absolute; /* Redefinition of a rule for IE7 only */ }
In the valid HTML and XHMTL documents HTML selector always plays a role of a root element, and BODY — the descendant of the first level, but not the second or higher level. Thus, theoretically the «* HTML» selector should not be applied to any element. But in practice IE5 and IE6 interpret the given selector as HTML and apply specified rules because of an error in its own engine. But because other browsers ignore the «* html» selector this reception can be used in the mercenary purposes. It is useful, but is this correct?
Despite the fact that this hack is correct from the point of a standard CSS there is a number of negative nuances:
Firstly, the word «hack» sounds strange, and it is unpleasant to the developer and especially to the customer.
Secondly, such Internet Explorer hacks litter the code, loaded in all other browsers.
Thirdly, Internet Explorer 7.0 where a lot of errors in CSS has been fixed is ignored in this hack.
How to tame Internet Explorer without using hacks?
There is a better decision in Microsoft Developer Network, it is called — conditional comments. This technology is supported in Internet Explorer, since the fifth version, thereby covering all interesting us browsers. The example of elegant conditional comments use:
<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" mce_href="ie.css" media="all" />< ![endif]-->
However only Internet Explorer browsers will see the second line and upload the css-file.
This happens due to the conditional comment — if IE. This condition means «if Internet Explorer» and Explorers of versions five and above (including 7th and 8th ) will read a code which is in the comment and interpret it.
Thus we can put all hacks into a separate file:
style.css:
#element { position:relative; /* Basic rule for all browsers */ }
ie.css:
#element { position:static; /* Redefined rule for all IE versions */ }
Now we are not using hacks in the basic sheet of styles; have achieved that the alternative rule has been applied to all Explorers, including the seventh; and also have relieved the users of alternative browsers from loading of extra code. Thus we have kept our (X) HTML and CSS valid because such conditional comment is not distinguished by anything except IE, even including validator from W3C.
Conditional comments are more flexible, than it may seem to be on one example. You can capture not only all Explorers but also its versions less or greater than defined or its concrete version; and also upload a code which will be interpreted by all browsers, except Internet Explorer.
Here a part of a code which only Internet Explorer 6 will understand:
<!--[if IE6]> <link rel="stylesheet" type="text/css" href="ie.css" mce_href="ie.css" media="all" />< ![endif]-->
Or the same comment but for the IE 7:
<!--[if IE7]> <link rel="stylesheet" type="text/css" href="ie.css" mce_href="ie.css" media="all" />< ![endif]-->
This comments works for all versions of IE less than 7:
<!--[if IE lt 7]> <link rel="stylesheet" type="text/css" href="ie.css" mce_href="ie.css" media="all" />< ![endif]-->
As you can see, there is nothing difficult.
And the last thing, I would like to recommend to code the page without using hacks and if it is necessary, use them minimally.