CSS3 and HTML5 are Awesomazing - Part One

For quite a while now CSS3 and HTML5 have been the popular buzz words of web design. The promise of new features and functionality is enticing to developers and end users alike. Unfortunately, the big holdup has been lack of consistent browser support. A new dawn is emerging, however, as modern browsers have rapidly been adopting these future web standards.

Over the past several months, RocketTheme has been introducing CSS3 elements into our template releases to take advantage of the cleaner code and new functionalities that it provides. I wanted to take some time in this post to go into more detail about what CSS3 elements we have been using, what browsers support them, and how we plan to take advantage of these web specs in future projects.

Browser Support and Vendor Specific Markup

Most 'modern' browsers now support at least the more popular elements of CSS3, the obvious exception being all of the Internet Explorer browser versions (the upcoming IE9 release should include support for CSS3, it's currently available for testing as a beta release). In order to better organize everything and prevent issues with browsers that lack support, most of the CSS3 markup we have been using has been separated into browser and engine specific css files in recent template releases through the use of the Gantry Framework's browser and engine detection.

The latest versions of Firefox, Safari, Chrome, and Opera support most of the main CSS3 properties without the need for vendor specific prefixes, however some properties still require these prefixes so in most cases we provide both versions in order to allow for forward and backward support. In Internet Explorer, these properties are not parsed by the browser, much of it is not even present in the css files loaded by IE as they are contained in the browser specific files. As IE9 begins to make its way out into the wild, we will be introducing more and more of the final CSS3 syntax into the main template css files to provide consistency as well as cut down on unnecessary additional markup.

At this point in time, most of the CSS3 elements we have been making use are primarily cosmetic and provide subtle effects as they degrade better in unsupported browsers. The approach is similar to how graphic settings work in computer gaming. Using more powerful hardware and improved software, you are given additional advanced options and better quality graphics. In modern browsers you can take advantage of additional special effects and improved visual elements provided by the latest code, while in older browsers the site will function just fine, it just will not have all of the bells and whistles and visual flair. CSS3 also contains all sorts of very powerful features for layout and control that once there is more widespread support for them (we're looking at you Internet Explorer!) we can start taking full advantage of them. This writeup is meant to only be a brief overview of how we have been using CSS3 properties, there is a plethora of resources available that go into extreme detail of all the ins and outs of CSS3 properties. I will list some of these resources at the end of each section.

In the sections below I will go into more detail about each of the properties we have been making use of as well as how they work and appear in the CSS.

Border Radius

One of the most popular design elements in web design would have to be the use of rounded corners on buttons, layout elements, menus, and much more. This effect generally requires the use of multiple images depending on the complexity of the graphics. In RocketTheme templates particularly, many images and divs must be used to provide our well known features such as full transparency and multiple module variations and styles.

Using the 'border-radius' property, you can easily create rounded corners using only CSS and a single element without the need for any images at all. This also helps provide us even more design possibilities with our fully ColorChooser controlled templates. Below are a couple of examples of how this property is used.

This is an example of the property providing 4 evenly rounded corners:

	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;

The latest versions of Safari and Chrome (webkit prefix) support border radius without the prefixes, but you can provide these prefixes for better backward compatibility with older versions of the browsers if necessary. The latest versions of Firefox (moz prefix) still require the prefix, however the upcoming Firefox4 (currently in beta) provides support without the prefix. Opera has supported border radius without prefix for a while now and even the upcoming IE9 has shown support for border radius without using any prefix.

Another example makes use of targeting specific corners, in this case we will make only the bottom right corner rounded:

	border-bottom-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;

You'll notice in this example that the Firefox version uses a different syntax than the others. Firefox makes use of a different syntax for all specific corners, however in Firefox4 and beyond they have adopted the regular W3C specification so this formatting will only be needed to provide support for older versions of Firefox. Shorthand can also be used for targeting specific corners using border-radius however the implementation varies pretty dramatically between browsers in regards to irregular corners and shaping so its probably safer at this point to use the specific corner syntaxes.

We have been making use of rounded corners via CSS more and more to provide faster and lighter weight template designs, and with the growing support across all browsers it's now become feasible. In IE6-IE8 the corners simply do not appear rounded, and in IE9 the current syntax in the templates will automatically be picked up and applied.

Further Reading

• http://www.css3.info/preview/rounded-border
• https://developer.mozilla.org/en/CSS/-moz-border-radius
• http://www.zenelements.com/blog/css3-border-radius-rounded-corners

Box Shadow

Another extremely handy property is box-shadow. Drop shadows on elements is another common feature of design and just like rounded corners, it generally requires the use of several images and divs depending on the complexity of the design. The box-shadow property allows you to render a shadow using only CSS and provides multiple options to control its appearance.

This is an example of the property providing a simple drop shadow on all sides of an element:

	box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	-moz-box-shadow: 0 0 5px #000;

There are three numerical values and a color value for usage with the box shadow. The first attribute is the horizontal offset, the second attribute is the vertical offset, and the third attribute is the spread size. In the above example there is no offset on either horizontal or vertical, which means that the shadow will spread out evenly on all sides. The color value is a simple black giving you a traditional dark shadow. You can also use rgba values for a more transparent and evenly blended shadow, a method we have used frequently in our latest template releases.

Again, the latest versions of Safari, Chrome, Firefox, and Opera have support for the box-shadow property. In IE6-IE8 the shadow will simply not appear, IE9 should have support for box shadow. It should be noted that you can use proprietary IE filters to provide a similar effect in IE6-IE8, but these filters dramatically slow down the performance of the site the more they are used and can be very hit or miss with how they work.

Further Reading

• http://www.css3.info/preview/box-shadow
• https://developer.mozilla.org/en/CSS/-moz-box-shadow
• http://www.w3.org/TR/css3-background/#the-box-shadow

Text Shadow

One of the more commonly used CSS3 properties is the text-shadow. Text shadow provides a simple way to add drop shadows to text as well as create an inner bevel type effect. We have made use of this property in many of our previous templates.

This is an example of a simple drop shadow for a line of text

	text-shadow: 1px 1px 1px #000;

As with box shadow, there are three numerical values and a color value. In this example we are using a 1px offset for both horizontal and vertical axis so that the dropshadow will be shown slightly to the bottom left of the text. Also, as with box shadow, you can use a rgba value for the color for better blending.

Text shadow has been supported for quite a while in the major browsers (only IE8+ support text shadow of the IE's). It was one of the first implemented as it was actually introduced in CSS2 but didn't really gain support until the CSS3 values began to be implemented.

Transitions

One of the more exciting features of CSS3 is the ability to create animations and transitions. Using the transition property we can create simple animations that previously would have required javascript which lead to slower performance the more times it was used. Recently in our template releases we have been including subtle transitions to provide additional interactivity and feedback with UI elements without a cost to performance

This is an example of a simple transition for color on an element

	transition: color 0.3s ease-out;
	-webkit-transition: color 0.3s ease-out;
	-moz-transition: color 0.3s ease-out;
	-o-transition: color 0.3s ease-out;

The first attribute refers to the property that will be transitioned. You can use many of the regular css properties such as color, height, width, etc. The second attribute declares the duration of the transition and the third attribute declares the type of transition. This example, when placed on a link hover for instance, would create a "fade in" type of transition for the color of the text. The parameter Currently the latest versions of the major browsers still require the prefixes for operation (once again, there is no support in IE6-IE8).

In recent template releases we have been taking advantage of the transition property to provide animations for elements like link colors, background fading effects on inputs and highlights, tab resizing in RokTabs, and much more. As browser support continues to grow, we plan to make more use of this property in lieu of relying on javascript, saving the javascript for the more advanced animation effects.

Further Reading

• http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions
• http://www.w3.org/TR/css3-transitions

Part Two Coming Soon...