CSS Hacks
Hacks are a sad fact of life with CSS development. They are most commonly needed for Internet Explorer. Most hacks will cause code validation to fail; this ordinarily does not cause a problem in browsers, but it’s not ideal. These are just a few of the many hacks that can be used to achieve the identical look from browser to browser.
IE HACKS
The best method for altering CSS for IE specifically (by version number) is to create a separate style sheet, e.g. ie6.css, ie7.css, and to call this style sheet from a conditional statement in the <head> tag.
The conditional statement should occur after the primary style sheet has been called. Example:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link href=”style.css” rel=”stylesheet” type=”text/css” media=”screen” />
<link href=”print.css” media=”print” rel=”stylesheet” />
<!–[if IE 6]><link href=”ie6.css” rel=”stylesheet” type=”text/css” /><![endif]–>
<!–[if IE 7]><link href=”ie7.css” rel=”stylesheet” type=”text/css” /><![endif]–>
</head>
You can also call the conditional statement to include other versions, e.g. <!–[if lte IE 7]><link href=”ie6and7.css” rel=”stylesheet” type=”text/css” /><![endif]–>
Summary of the syntax of conditions:
IE: Any version of IE
lt IE version: Versions less than version
lte IE version: Versions less than or equal to version
IE version: Only version version
gte IE version: Versions greater than or equal to version
gt IE version: Versions greater than version
SAFARI HACKS
Safari is very standards compliant; occasionally, however, it will treat some spacing slightly differently from Firefox and so needs a hack. CSS hacks for Safari occur inside the primary style sheet AFTER the primary code definition.
Older versions of Safari use this:
body:last-child:not(:root:root) #linkContainer {
padding: 1px 4px 0 0;
display: block;
float: left;
}
Place the pound sign ( # ) after a semi-colon ( ; ), all styles within those brackets and the remainder of the stylesheet will be ignored in Safari.
Newer versions of Safari use:
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#linkContainer {
padding: 1px 4px 0 0;
display: block;
float: left;}
}
OPERA HACKS
Opera typically displays text smaller than other browsers; if the text is sized at 67.5% in the body for most browsers, it’s recommended you resize this at 72% for Opera in order to achieve the same look.
html:first-child body {/* to size text in Opera properly */
font-size: 72%;
}
All photographs taken on location by A. E. Shroeder
TIP
Did you know that users will leave your page if content takes too long to download? Find out how fast your site loads
