And in strict mode, even closer. Quirks mode will, be definition of
quirks mode, never be terribly close.
That is exactly what that means.
Sticky notes beside your monitor?
There are some really nice development tools for the various browsers.
"Firebug" for Firefox is excellent ... just click 'inspect element'
then click on the element you'd like to know about and it shows
everything that affects the styling of that element ... down to the
CSS and line number.
If the documents are laid out clearly, trying to keep things as
simple as possible, then one usually doesn't have too many classnames
to keep track of, and those should have logical names.
For instance, this is a horrrrid use of CSS.
p.tinyredletters {
font-size: 50%;
color: red;
}
The name says nothing about what 'tinyredletters' are supposed to
mean.
Whereas, something like this:
p.extraInfo {
font-size: 50%;
color: red;
}
<p>This is everything you need to know about dirt.</p>
<p classname="extraInfo">You don't need to know this, but its a fun
fact. Dirt is all around us.</p>
The class name carries meaning, and is therefore, easier to remember.
Or, an example from a genealogy site I was helping with.
/* Typed freehand.. not tested */
h1 {color: "white";
background: "black";
}
h1 span.femaleName {
color: "magenta";
}
h1 span.maleName {
color: "blue";
}
/* This lets me say things like: */
<h1>The life and times of <span class="maleName">Jeremy J Starcher</
span></h1>
/* Now, lets suppose that later on I have a div with a light grey
background that lists children. My shades of blue and grey look
rather bad against that background. */
div.kidlist li.femaleName {
color: "red";
}
div.kidlist li.maleName {
color: "cyan";
}
/* Now I can keep the same class names and reuse them in the new
context */
<div class="kidlist">
<p>He had the following children:</p>
<ul>
<li class="maleName">Ryo - his favorite computer</li>
<li class="femaleName">R2D2 - his shop vac</li>
</ul>
</div>
With a well chosen set of class names, I can minimize how much I need
to remember and I can look at my document and know exactly what I was
doing. Lets compare that to the HTML 3.2 version:
<h1>The life and times of <font bgcolor="black" color="blue">Jeremy J
Starcher</font></h1.
<div class="kidlist">
<p>He had the following children:</p>
<ul>
<li><font color="cyan">Ryo - his favorite computer</font></li>
<li><font color="red">R2D2 - his shop vac</font></li>
</ul>
</div>
If I decide that I don't like how something looks, with CSS I only
have to go to ONE place to change with. With Firebug, all I have to
do is click on the element and it tells me where that one place is.
With HTML 3.2 style pages, you would have to change colors *each* and
*every* place they are used. Can't use search and replace on those
color names, you might be using them elsewhere for different purposes.
