What's Exciting About CSS3?

by Sean H. Cairns

Anatomy of a Webpage

Your general webpage will almost always contain an HTML document and a CSS document. If you've ever typed in a web address that ended with something.html, then you're already at least aware that it exists.

The HTML document, or Hyper Text Markup Language document, contains all of the content for the page. It specifies what images, movies, and other media appear where, what text is on the page, and where tables and links are. It tells the web browser exactly what to display on the screen, and also provides identification (Ids) and classes to elements within the page.

The CSS document, instead of providing content, describes how the HTML document's content should be displayed. It is comprised of lists of rules for each id and class in order to control how the browser displays background images, font colors, sizes, decorations, borders, margins, and just about every other important design feature you can think of. It tells the web browser exactly how to display the content on the screen.

Together, the HTML and CSS files attempt to ensure that a website has the same look on any computer around the world. Unfortunately, despite having its specifications maintained by the World Wide Web Consortium (W3C), no browser developer is required to follow the CSS standards. Luckily for consumers, almost all browser developers have seen fit to use CSS as recommended by the W3C.

Across all modern browsers, there is some minor discrepancies between the exact formatting of certain rules, but what truly separates browsers from one another is how regularly their updates include support for new CSS features.

History of CSS

From the beginning of its design, CSS was meant to be a living standard, being updated as new requirements were realized. Not only did the original programmers create CSS to accommodate new developments in media content, they also made designed it so that they could remove features if they were under-supported or under-utilized.

The first version of CSS, CSS1, had its official recommendations published in December, 1996, and included such specifications for such capabilities as: font properties such as emphasis and color, background colors, text spacing, margins, borders and patterns. It was the building blocks upon which all future CSS was to be borne, and was the engine behind the infamous, blocky websites of the 90's.

CSS2 was recommended by the W3C in May 1998. It included important features for media types, bi-directional text, and helped to better standardize design elements across all browsers. July 2007 saw the release of CSS2.1 which removed several outdated features and officially added in the already-implemented browser extensions.

CSS3 has been under development since at least December 15, 2005. There is no official release date yet planned for the new standards, but all currently-adopted rules have been made available, and smart browser developers have begun incorporating them already in updates. Mozilla Firefox, in particular, has an excellent history of keeping up-to-date with new CSS standards, while dinosaurs such as Internet Explorer, seem have waited until their next full release to implement new CSS features. Right now, it's not possible to say which browser is “in the lead" of adopting the new CSS standards, though, due to the fact that each of them is leading in different aspects.

CSS is by no means perfect, and all websites should be tested across all available browsers for any compatibility issues. To help designers with debugging, CSS uses a special tag called a CSS filter or browser-extension, to provide special rules to individual browsers to ensure that the design is consistent. Smart web developers, too, are implementing these new CSS3 features into sites, while still maintaining formatting for visitors on non-updated browsers.

CSS3

There are quite a few new features in CSS3 that developers are particularly excited about. In particular, the following five are of special consideration, due to the fact that they will significantly cut down on load time, and on programming time.

5. Border Radius

Example Box
Lets say you wanted the above to appear on your website, but with rounded corners. With current CSS specifications, you would have to either create an image of a rounded rectangle with the text over it (which would make updating the text within more time consuming), use a rounded rectangle as a background image (you'll still have to make a bigger image if the client adds more text to the box), or use 2-4 images of just the corners and utilize a table (which makes for a lot more coding).

Right now, designers just sort of grimace and pick one of the above and build the website anyway, but with CSS3's Border Radius property, almost anything within the HTML document can be given that rounded corner. Just as easily, you can round just one or a couple of the corners, leaving the rest at a sharp 90-degrees, or created strange warped boxes.

Below are actual implementations of the new Border Radius feature (best viewed in Google Chrome, Apple Safari, or Mozilla Firefox), along with images showing what it should look like for readers using older browsers.

Actual Code
 Image Example of Border Radius

4. Opacity

Opacity is simply the opposite of transparency: a measure of how non-transparent an object is. For developers, this would mean no longer requiring a semi-transparent .PNG image to create see-through backgrounds on web pages. There are also many creative opportunities for when users hover the mouse over images, text, and hyperlinks. While something as simple as transparency might not seem particularly exciting to the average web surfer, its inclusion in CSS3 will save a lot of programming time, and, due to the site using fewer image files, will save a lot of time while loading as well.

Below are actual implementations of the new Opacity feature (best viewed in Google Chrome, Apple Safari, or Mozilla Firefox), along with images showing what it should look like for readers using older browsers.

 Image Example of Opacity

3. Box Shadow

Example Box
Similar to the example for Border Radius, imagine that you would like the above example to appear on your website, but with a nice shadow to help it pop off of the page. Currently, a developer would have to create image files to simulate a shadow, and then position them correctly so that there is no space between the box and the image. As you can probably guess, this is a tedious task, and uses a lot of time.

The new Box Shadow feature automatically adds a shadow to almost any non-text element included in an HTML file. Not only that, but the shadow can be any color, and there are settings for left/right offset, up/down offset, and blur of the shadow!

Below are actual implementations of the new Box Shadow feature (best viewed in Google Chrome, Apple Safari, or Mozilla Firefox), along with images showing what it should look like for readers using older browsers.

Actual Code
 Image Example of Box Shadow

2. Text Shadow

Example Box
Very similar to the Box Shadow feature, the Text Shadow is a special CSS rule that applies only to the text upon a page. Currently, the only way to display a shadow on text is to have an image file display where the shadowed text would normally be, which leads to many complications with spacing.

Like the Box Shadow feature, Text Shadows can be in any color, and have a left/right offset, up/down offset, and blur settings. As you will see below, there are also some creative ways to use this new style beyond just a simple shadow.

Below are actual implementations of the new Text Shadow feature (best viewed in Google Chrome, Apple Safari, or Mozilla Firefox), along with images showing what it should look like for readers using older browsers.
Actual Code
Actual Code
 Image Example of Text Shadows

1. Web Fonts

Technically, Web Fonts were first proposed for CSS2 way back in 1997, and has been implemented to a very limited degree in Internet Explorer since version 5. With this new feature, any TrueType or OpenType font can be displayed on a website.

Until the inclusion of this feature, any text that was to be displayed in any of the non-standard web-safe fonts would have to be rendered as an image file. This leads to longer load time for websites, and limitations as to how page text is allowed to look.

Right now, this feature is not well supported (Safari 3.1 is probably the only browser with reliable conformance), but is planned for future releases of Firefox, Opera, and possibly even Internet Explorer 9.

Below are actual implementations of the new Web Fonts feature (best viewed in Google Chrome, Apple Safari, or Mozilla Firefox), along with images showing what it should look like for readers using older browsers.
Actual Code
 Image Example of Web Fonts


If you find that What's Exciting About CSS3? is something that your company would like to know more about, feel free to contact Central States Media at info@centralstatesmedia.com or on the phone at (309) 693-2345.