The History & Future of CSS

Nicole Lucas | 11 April 2008 |

CSS, Cascading Style Sheets, have reinvented the way website designers not only create the look and feel of a website, but also how they keep that look consistent throughout the entire website.

Whether it’s a one page or 100 page website, CSS makes updating each page much simpler. With Cascading Style Sheets, a designer has one area or file he/she uses to add pictures, change the font or color of the text, change the background color or image and update the entire look of a website.

CSS is a syntax used in the markup languages HTML and XHTML and has limited use in XML documents. HTML and XHTML are the programming languages most widely used and they are supported by most search engines. CSS is used in almost every aspect of today’s website designs.

CSS hasn’t always been the web designer’s outlet for a ‘simple fix’ method to revamp or give a website a ‘face lift’. After years of trial and error testing, CSS is still a work on progress. With ever changing browser support and new browsers being continually created, finding the correct syntax for CSS is a constant and everlasting project.

Since the beginning of style sheet usage in the 1970’s, it has evolved through wide-spread study and testing. It wasn’t until the mid 1990’s that CSS was introduced to the World Wide Web Consortium (W3C). At that time, W3C members became involved in its development, as well. In the late 1990’s, CSS was ready to go LIVE and in December 1996, the syntax became official.

Even with the tremendous support from the W3C, Internet Explorer 3 was released in 1996 with very little support for the highly useful style sheet syntax.

Three years later, Internet Explorer 5 was released and had a nearly 100% compatibility and support for CSS. As with any new internet language, however, bugs and inconsistencies were major obstacles.

Introducing different variations of CSS, such as CSS1, CSS2 and CSS3, aided in weeding out the properties that browsers simply wouldn’t support. Creating a standard for CSS and browser compatibility was mandatory for a successful syntax and style tool. By using variations from all forms of CSS, CSS2.1 was created in late July 2007. By 2008, the latest and greatest version of Internet Explorer, IE8, allowed for full support of the CSS2.1 syntax in its highest quality ‘web standards’ mode.

Today there are still several quirks and tweaks in CSS and some website designers use CSS filters and hacks to “workaround” inconsistencies. Keeping a consistent appearance in ALL internet browsers is the main goal and reason for constant research and testing as newer versions of CSS are established.

CSS3 is currently in the works. This newest version of the elder syntax will involve several of the same elements included in prior versions. W3C keeps an ongoing record of its work and studies on CSS3. You may access them at www.w3.org

Bugs and Limitations:

The most well known Internet Explorer browser bug associated with CSS is the ‘Internet Explorer box model bug’. This bug affects many CSS attributes in Windows-based browsers up to and including IE6. The bug mainly affects the size and interpretation of certain ‘blocks’ included with most website designs. Below is an example of the box model bug as explained in wikipedia.org.

As specified by most CSS syntaxes, the width and height of block-level elements should be included for all information and content within the box, not including the surrounding padding, margins, borders, etc…this is to be added afterwards. However, some web browsers, IE5 and earlier, were programmed to include the padding and margins within the block elements, therefore expanding the size of the block seen by the browsers and misconstruing the layout of web pages using the CSS syntax.

Several ‘workarounds’ have been invented to force IE5 and earlier versions to display the layout of web pages as the CSS programmer intended. Along with the famous box model bug, arose a workaround called the ‘box model hack’. It was developed by Tantek Celik, a computer scientist in San Francisco who was also the Chief Technologist for Technorati, a social media marketing forum. Though the ‘box model hack’ was developed to improve compatibility of CSS in web browsers, most designers currently find the ‘hacks’ to be unreliable and have opted to use CSS filters to insure proper viewing of web pages in earlier versions of IE.

With a history of limitations and disadvantages in using standard CSS to style websites, the current and future advantages of style sheets to create a consistent and flowing feel to one’s website are well worth the minor hindrances of certain elements contained in CSS attributes.

With the W3C involved in the continuous testing and revamping of CSS syntax, it will play a major part in creating a ‘style’ and continuing flow in websites well into the future. Stay tuned, next month I’m going to take look at CSS from a WHOLE NEW ANGLE and explain how it works to my mom - a decidedly non-techie person.