CSS frameworks have been around for a while, and include popular frameworks such as Blueprint, 960GS, and YUI.  CSS Frameworks are a great way to ensure cross-browser compatibility while working within a clearly defined standard – both of which are extremely valuable in modern web development.

Cross-Browser Compatibility

Most of the popular CSS frameworks are cross-browser compatible, meaning that if the developer follows the style guides defined in the framework, the resulting website should look the same in every browser.

Some CSS frameworks utilize a reset style sheet to accomplish this, while others simply code toward each given browser to ensure proper compatibility.  Every browser has pre-defined values for given HTML elements.  For example, Internet Explorer may set the body’s default line height to 1.0em, whereas Firefox may set it to 1.1em.  A reset style sheet sets all the default values for every element to the same, thus creating a blank slate for the framework to work from.

Well-defined Standards & Constructs

A good CSS framework provides well-defined standards and constructs.  Blueprint, for example, provides a nice grid system that one can utilize simply by setting the proper classes.  So, setting the classes “column span-36 last” will ensure that the element you’re styling will span 36 columns and then will clear so preceding elements fall underneath it.

Constructs such as these provide for faster development and also help the developer to design more maintainable interfaces.

Tableless Web Design

Every modern CSS framework provides the proper constructs so that the every day developer no longer needs to utilize tables to create complex & beautiful web designs.

Tables are VERY slow for the browser to render and should really only be used to render tabular data.  Divs are much faster for the browser to render, more flexible, and just as easy to use as a table with a CSS framework.

Conclusion

When developing software, it’s always a good idea to not re-invent the wheel.  Frameworks provide a good, well-tested set of rules and functionality that a developer can code against, thus resulting in better software developed in a shorter amount of time.

CSS frameworks are no different.  They provide a developer with a solid base, a rich set of tools, and allow you to lay out your design with confidence that it will be cross-browser compliant, fast, and maintainable.

A collective groan fills our room of developers at NAPC. Another Internet Explorer 6 (IE6) incompatibility with one our products has been uncovered. The preferred solution is to quit IE6, take a deep breath, and launch a different browser. Unfortunately, for a number of our customers this is not yet an option and we are faced with the challenge of trying to make an old dog (circa 2001) ignore a new trick.

In the late 90s, developing interactive websites required you to choose sides between Netscape Navigator and Internet Explorer. Each offered its own subset of exciting new features that were guaranteed to not work on the other. If you strayed from anything but the most standard HTML tags one of the browsers would fail miserably. Many stale and boring (but functional !!!) websites were born. This was also the era where all colors were picked from the limited "Web-Safe" palette to avoid dithering.   

Thanks to the adoption of standards for HTML and JavaScript, common rendering engines, and Cascading Style Sheets (CSS) most of these show-stopper browser incompatibility issues have gone away, leaving fewer magical incantations that the Web 2.0 developer needs to keep in their toolbox. The majority of these workarounds, unfortunately, have to do with IE6. A quick look at the style sheet for NAPC's Elegant for Xinet Portal reveals a number of hacks to fool IE6 into doing the right thing:

# Ignores the html>body line
hr.mainhr {  top: 120px;  }
html>body hr.mainhr { top: 115px; }

# Ignores the pseudo-commented line
input.btn{ width: 150px; }
/* commented backslash hack v2 \*/
input.btn{ width: 156px; }
/*end hack */


These examples are minor tweaks that take into account differences in the box model used by IE6. More serious issues arise from bugs with CSS v2, ignoring transparency in PNG files, and differences in traversing the HTML Document Object Model. The latter usually results in a breakdown of the friendlier Web 2.0 AJAX features.

And the developers groan.

We are aware that Internet Explorer 6 still commands a significant market share on corporate PCs, and wherever possible we do try and maintain some level of functionality on IE6. However, our products use a great deal of Web 2.0 technology to provide sophisticated interfaces and cutting edge design and IE6 is incapable of keeping up. To be fair, it isn't as bad as IE5 on the Mac was !

With the exciting HTML 5 spec around the corner a number of big players on the web (ex: Facebook, YouTube, Digg) are actively encouraging their users to upgrade or switch browsers. So are we.