dionidium.com

Wayne Burkett's Weblog | Home

The ::outside pseudo-element

04:41PM CST July 22, 2003

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?

1. The #wrapper div does not structurally enhance the document in any way. We should avoid using HTML elements for purely presentational purposes.
2. We now have more precise control over the effect we're attempting to accomplish. If we wanted to add, say, two more levels of borders to this design we'd have to add two more surrounding 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.