CSS Styling for the Future

It is safe to say that within the web design industry, we see innovative developments of tools and software on a regular basis. Some of these improvements streamline processes and reduce build time thus creating new and exciting functionality, such as the latest CSS standards – however they are not always supported by all browsers.

Take the first induction of CSS1 in 1996 for example. As a website developer CSS style sheets have become an extremely powerful tool as browsers further develop and support its ever-evolving functions. CSS can be used to manipulate basic markup languages, defining fonts, colors, layouts and other more complex methods to create consistency throughout websites.

The evolution of CSS has progressed dramatically and is currently into it’s 3rd incarnation, however it remains persistently hindered by non-web compliant and outdated browsers. For example Microsoft Internet Explorer’s older versions, such as IE version 6.0 up to the newest BETA IE version 8.0, these have all implemented the properties CSS 2.0, but misinterpreted a significant number of important properties, such as width, height and floating.

Different browsers will render CSS layout differently as a result of browser bugs or lack of support for CSS features.  Numerous so-called CSS “hacks” must be implemented to achieve consistent layout among the most popular or commonly used browsers. (e.g. PNG fixes are used widely as IE6 does not support transparent images currently). Where typography has been part of design, graphic designers need to consider web compatible fonts.

CSS can be used to ensure that the integrity is not lost e.g. the use of @font-face. Pixel precise layouts can sometimes be impossible to achieve across browsers. When designing the websites it is important that communication between the designer and the front end developer is consistent and integrated throughout the web design and build process.

On the surface this may seem a negative analysis, however we must remember that in all areas of web design, constraints do exist for all types of media but on the upside it has motivated development companies to produce more in-depth design processes whereby the process involves not only the graphic designer but the front end developers too.

CSS3 is currently in its draft stage but offers some unique functions for the more advanced  browsers such as Mozilla Firefox, Safari and Opera. Internet Explorer 8 will also extend its compatibility to a few of the CSS3 functions but not all.

Some of the more exciting examples of these functions are:

  • Border Shadow
  • Border Radius
  • Drop Shadows
  • Alpha Transparency

As developers, we are looking forward to using CSS3 in the mainstream, however it will continue to be limited by browser inconsistencies. For this reason CSS3 will have to be used as an aesthetic enhancer rather than a means to form the structure of a web page.