HTML and CSS Reference
In-Depth Information
Again, visually we may get the desired effect of two large red paragraphs, but it isn't
executed correctly and we will potentially pay a price later with JavaScript, which typically
does not allow the same latitude that presentational technologies do. Consider simply that
each layer of technology we add on with small mistakes makes the overall execution
shakier and shakier. Given this foundational approach, we should first validate markup and
then, once it is solid, validate the CSS that is layered on top.
Breaking the Rules Purposefully?
One aspect of CSS syntax that is a bit interesting is the purposeful introduction of errors into
a style sheet to effect a change. Such tricky applications of CSS are often called hacks or
filters and are simply misuses of the technology to address browser rendering concerns. To
explain clearly, let's illustrate the idea of these techniques using probably the most famous
hack—the “box model hack.”
1
What the box model hack addresses is the nasty fact that CSS implementations in older
browsers, particularly the Internet Explorer 5.X generation, is woefully broken. In the case
of such browsers, the measurements of the various large block elements that compose the
boxes of the page are fundamentally off. For example, given a rule like
#boxexample {border: 20px solid;
padding: 30px;
width: 300px;}
some browsers would correctly interpret the total width of the box defined as including the
border and padding values added to the width of the defined box, as follows:
20
px
30
px
30
px
20
px
300 px
400 px
1
The Box Model Hack was initially introduced by a well-known CSS expert, Tantek Çelik (http://tantek
.com/CSS/Examples/boxmodelhack.html), who certainly is quite aware of what to do and not to do with
CSS. The choice of this hack is only illustrative of the break the rules purposefully approach.
