CSS and Browser Compatibility: Designing Web Pages for IE6, IE7, IE8, Firefox, Chrome and Safari

CSS and Browser Compatibility: Designing Web Pages for IE6, IE7, IE8, Firefox, Chrome and Safari
Page content

Hacking Consistency

Anyone that condemns the use of CSS hacks probably doesn’t realize how useful they are to web design! Whether you call them CSS hacks, CSS filters or selectors, they are a necessary part of web design. Even without trying to achieve pixel-perfect snapshots that are identical from one browser to the next, it is still necessary to use CSS hacks so that your web pages look consistent across different browsers. This article will show you a system of CSS hacks designed to make your websites cross-browser compatible.

I still design for Firefox first and then change the values of measurements in my CSS for browser compatibility. With the order of the hacks however, it may end up being best to design for IE8 first and then add changes for other browsers. The reason for this is that once you add changes for IE8, you end up having to explicitly define values for Firefox just to override the IE8 definitions. The following four steps will ensure that your pages look consistent across various popular browsers.

  1. Firstly, design for Firefox with the help of Firebug and/or the Web Developer toolbar.

  2. Test in IE6, 7 and 8 using IE Tester and create styles for 8, then 7, then 6 as necessary. The asterisk hack targets IE7 and IE6. The underscore hack targets IE6 only. So a margin declaration that targets both IE7 and IE6 would look like

    *margin:8px 0;

    And a margin declaration that targets IE6 would look like

    _margin:10px 0;

  3. If there were styles created specifically for IE8 in step 2, they would override the Firefox styles, so create Firefox styles next and put them in the :root selector which is ignored by IE8.

  4. Test in a WebKit browser such as Chrome or Safari and put any WebKit-specific styles inside:

    @media screen and (-webkit-min-device-pixel-ratio:0) { /* chrome styles go here */ }

    It may be necessary to repeat the Firefox filter inside the filter for WebKit in order to give the styles the same specificity. Not doing so may prevent the styles you create inside the Webkit filter from overriding the earlier Firefox styles. So the Webkit filter should strictly look like:

    @media screen and (-webkit-min-device-pixel-ratio:0) { :root #etc {/* chrome styles go here */ }}

    where #etc refers to any relevant IDs, classes and tagnames used in the earlier Firefox style to be overridden.

The final CSS will look like this:

#FirstWrap #MainContentArea #homeBlurb p {

/* IE8; IE7; IE6 */

margin:9px 0 ; *margin:8px 0; _margin:10px 0;

line-height:1.25em; *line-height:1.3em;

}

/* Firefox */

:root #FirstWrap #MainContentArea #homeBlurb p {

margin:12px 0 10px; line-height:1.3em;

}

/* Chrome-Safari */

@media screen and (-webkit-min-device-pixel-ratio:0) {

:root #FirstWrap #MainContentArea #homeBlurb p {

margin:12px 0 11px; line-height:1.5em;

}

}

The results can be seen at https://www.colonialfirststate.com.au/firstwrap/. Not identical, but acceptably consistent across the five browsers. Note that unlike all the other browsers, Chrome doesn’t support letter-spacing with ems less than 0.1, so the text looks more cramped than in the other browsers.

Image Credit

CSS Graphic: https://commons.wikimedia.org/wiki/File:CSS.svg