Tom Gilder's recent article on CSS3's ::outside pseudo-element makes us anxious for the day CSS3 features will be usable. We'd love to use ::outside to produce our site's border effect, currently only possible using an extraneous, purely presentational div.
Let's first look at the basic structure of this site:
<div id="wrapper">
<div id="main">
<h1>dionidium.com</h1>>
<div id="content"><p>Entries here...</p></div>
<div id="menu"></div>
</div>
</div>
The #wrapper div is structurally unnecessary, there only to create the presentational border in effect on this site. The following CSS creates the border effect:
#wrapper {
position: relative;
margin: 0 8%;
padding: 10px;
color: #000;
background-color: #eee;
border: 1px solid #ccc;
}
The #wrapper div could be entirely eliminated, its style rules transferred to an ::outside element on the #main div.
#main {
position: relative;
margin: 0 8%;
padding: 0 20px 0 0;
color: #000;
background-color: #fcfaed;
border: 1px solid #ccc;
}
#main::outside {
display: block;
border: 10px solid #eee;
}
#main::outside(2) {
display: block;
border: 1px solid #ccc;
}
Why is this better?
#wrapper div does not structurally enhance the document in any way. We should avoid using HTML elements for purely presentational purposes.divs. This is not a practical approach to what should be a simple problem. The ::outside pseudo-element can be used to create as many levels of borders desired, without affecting markup.Remember, this feature is not yet implemented in browsers. Do not attempt using it.