Figure 1. Browser usage share
The last major browser release in the first browser war was IE6 launched in 2001.
IE6 was a decent browser, but it had its own share of CSS problems. Yet those
problems would remain unfixed as Microsoft stopped serious development of its
browser shortly afterward.
With the economy reeling from the dot-com bust and no real competition to fuel
another major browser release that would fix the problems in IE6, web designers
found themselves trapped in an overextended Browser Hell.
Flaws in IE6
The most popular browser on the planet, IE6, has some serious and some not-so-
serious rendering flaws that make cross-browser development both time-
consuming and expensive.
IE6 Selectors
A CSS selector identifies which portion of your web page gets styled. In CSS there
are several selectors, and in IE6 only the basic selectors work.
Releasing CSS 3
Those basic selectors that IE6 supports include: type selectors, universal selectors,
class selectors, ID selectors, descendant selectors, as well as some pseudo-classes
and pseudo-elements.
Type Selectors
Type selectors are selectors that name the element or HTML tag to style. The
following rules would apply font and color styles to the
h1 and p elements within
a web page, as shown in Figure 2:
h1 {
font-size: 120%;
}
p {
color: blue;
}
Figure 2. The elements selected from the CSS rules
Universal Selectors
Universal selectors are represented with an asterisk (*) and apply to all elements.
In the following code, every element containing HTML text would be styled with
Verdana, Arial, or some other sans-serif font as shown in Figure 3:
* {
font-family: Verdana, Arial, sans-serif;
}
Releasing CSS 4
Figure 3. Every element gets styled with the universal selector
Class Selectors
When you want to apply the same CSS rule many times to different elements, you
can use the class selector.
For example, class selectors could be used to identify warnings that have red color
in a paragraph as well as a list item.
First, create a warning class selector preceded with a period (.):
<html>
<head>
<title>CSS Cookbook</title>
<style type="text/css">
<!--
* {
font-family: verdana, arial, sans-serif;
}
h1 {
font-size: 120%;
}
#navigation {
border: 1px solid black;
padding: 40px;
}
li a {
text-decoration: none;
}
p {
font-size: 90%;
}
.warning {
font-weight: bold;
Releasing CSS 5
}
-->
</style>
</head>
<body>
<h1>Title of Page</h1>
<p>This is a sample paragraph with a
<a href="http://csscookbook.com">link</a>. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna <em class="warning">aliquam erat volutpat</em>.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.<p>
<ul id="navigation">
<li><a href="http://csscookbook.com">Apples</a></li>
<li><a href="http://csscookbook.com">Bananas</a></li>
<li><a href="http://csscookbook.com">Cherries</a></li>
</ul>
</body>
</html>
Then add the class attribute to a link and a list item to style those elements as
shown in Figure 4:
<html>
<head>
<title>CSS Cookbook</title>
<style type="text/css">
<!--
* {
font-family: verdana, arial, sans-serif;
}
h1 {
font-size: 120%;
}
#navigation {
border: 1px solid black;
padding: 40px;
}
li a {
text-decoration: none;
}
p {
font-size: 90%;
}
.warning {
font-weight: bold;
}
-->
</style>
</head>
<body>
<h1>Title of Page</h1>
<p>This is a sample paragraph with a
<a href="http://csscookbook.com"
class="warning">link</a>. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna <em class="warning">aliquam erat volutpat</em>. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.<p>
<ul id="navigation">
<li
class="warning"><a href="http://csscookbook.com">Apples</a></li>
Releasing CSS 6
<li><a href="http://csscookbook.com">Bananas</a></li>
<li><a href="http://csscookbook.com">Cherries</a></li>
</ul>
</body>
</html>
Figure 4. The modified CSS rules on the web page
Look at these selectors in the structure of the web page, as shown in Figure 5.
Releasing CSS 7
Get Releasing CSS now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
