HTML and CSS Reference
In-Depth Information
The most obvious example of this evolution from initial implementation to standard is with CSS3 vendor
prefixes. (As noted earlier, technically CSS3 is not part of HTML5.) When new CSS3 features leap onto the
scene, you generally must write a number of lines that may differ only slightly by vendor prefix. For example,
in 2010, to add a drop shadow onto a container, you would have had to write the following:
-moz-box-shadow:5px 5px 10px #000;;
-webkit-box-shadow:5px 5px 10px #000;;
-ms-box-shadow:5px 5px 10px #000;;
-o-box-shadow:5px 5px 10px #000;;
box-shadow:5px 5px 10px #000;;
That includes four vendor-specific versions and then a forward-looking standards-based version. Fast for-
ward to 2011, and it becomes possible to simply write this:
box-shadow:5px 5px 10px #000;
Although keeping track of the rate of change is daunting, as a developer you get the best of both worlds:
shiny tools you can use immediately (albeit carefully, especially when standards aren't yet finalized) combined
with standardization coming over months instead of years.
Sniffing Browsers
In the bad old days of web development, you might see the following littered throughout the
<head>
of an
HTML document:
WARNING
The following code is an example of what
not
to do, so please don't use either of these ex-
amples.
<!--[if IE 6]>
<link rel='stylesheet' href='ie6.css' type='text/css'/>
<![endif]-->
<!--[if IE 7]>
<link rel='stylesheet' href='ie7.css' type='text/css'/>
<![endif]-->
Alternatively, you might also at some point have written this:
function isIE() {
if(navigator.userAgent.match(/MSIE (\d+\.\d+);/i)) {
isVersion = new Number(RegExp.$1);
return true;
} else {
return false;
}
}
if (isIE()) {
if(ieVersion == 6) { /* IE6 only Code */ }
else if(ieVersion == 7) { /* IE7 only Code */ }
}
