So what is CSS3 first … CSS stands for Cascading Style Sheets is a language to style your web pages. CSS was introduced way back in December of 1996. CSS separates your content from the styling the page. With CSS you can move the sidebar of your site from the left hand-side of the page to the right-hand side of the page for example. This is how we are able to allow our clients to choose their web layout from within WordPress.

Before CSS 3 rounding the corners of elements, adding gradients to elements was difficult. It involved moving away from clean semantic markup and bloating the site with images. This is bad for your SEO, it makes your HTML non semantic, it increases page load time.

With the gradual introduction of HTML 5 more and more browsers are supporting CSS 3 which provides stuff like rounded corners, multiple background, direct web fonts, wrapping to the text, stroke and shadow to the text, 2D transformation to the object, animations, gradients, opacity, HSL and HSLA colour, background clipping, outline, box-resizing, box-shadow, top-right-bottom-left navigation, attribute selector, etc.

So what about browsers which don’t support CSS 3, well there is a trend in the industry to reward the users with up to date browsers through Graceful Degradation.

This blog post isn’t an exhaustive list of all the CSS 3 features and how to implement them. Instead I’m going to show how Compass can help you with CSS 3.

Border radius

Border Radius is a CSS 3 feature which allows you to round the corners of an element.

If every browser was mad the same this would be easy! So for example if you wanted an element with 15px curve to each side you would write the following:

Unfortunately every browser wasn’t made equal and each browser maker decided to support border radius differently for example Firefox needs the -moz prefix so you need to add this as well

Brief dive into Sass

Sass makes CSS fun. Sass stands for Syntactically Awesome Stylesheets and is an extension of CSS 3 adding making writing CSS easier. There is lots to Sass, Gemini Wave use it for all our clients sites because it makes your site easy and quick to change leading to fast layout and styling changes.

So why does Compass make CSS 3 easier? Well Compass uses Sass and adds the ability to just write one line of Sass to allow you to round corners of elements and Compass will automatically write all the CSS 3 required for each browser. All this is accomplished with the following code:

Compass makes development easier and fun again. It centralises the styling of your site and means you are set for the future.