yin_yang

Cascading Style Sheets

I follow the school of thought that CSS should dictate the design of a Web site, while HTML should hold its structure. Separating design from structure allows for semantically written Web pages that pull higher in search results and load correctly in as many browsers and devices as possible.

Separating design from structure

This site employs CSS in all aspects. Transitioning from table-based HTML to tableless divs allowed me to eliminated more than 100,000 lines of code on more than 500 pages. I used regular expressions to dramatically lessen the growing pains of finding and replacing hundreds of tables with <div> tags. Additionally, I used specificity to drastically reduce the amount of classes:

<style>
.portfolio #portContent code {
display: block;
margin-bottom: 2em;
border: 3px dashed #999999;
padding: 1em;
background-color: #555555;
font: .8em/2em "Courier New", Courier, monospace;
color: black;
}
</style>

Following is the CSS that controls the design for the travel photography section and this section of my Web site:

CSS Toolkit

CSS & multiple browser compatibility

To even out the playing field in the browser wars, I use a reset.css script that forces all HTML elements to look and behave the same way in all browsers. Now when I style my HTML, I am one step closer to multiple browser compatibility perfection.

On occasion, you have to trick browsers to behave. This code only affects Internet Explorer:

margin-top: expression(“-20px”);

border: 1px solid green; /* works in all */
  *border: 1px solid red; /* targets IE6 and 7 */
  _border: 1px solid blue; /* targets IE6 */

back to top