The No-Pressure Introduction to CSS3

by in CSS on 14th Feb 2011 · Comments

It's difficult to escape the hype surrounding CSS3 at the moment, yet it has created a divide in the community. If you read any blog post on the subject and it is flooded with comments by developers who feel they still cannot use CSS3 in their work. Rather than being encouraging the responses from the experts in our community can appear as aggressive and superior. Although they are correct in saying CSS3 can be used now, the decision must still fall to the individual, even if their opinions are based on inaccurate assumptions.

The No-Pressure Introduction to CSS3


In this article I'll try to cover some of the more widely adopted CSS3 advancements, showing you not only how to use them but also the support you will likely expect from the major browsers.

Why We Can Use CSS3 Now

The arguments as to why we cannot use CSS3 include such things as the specification not being finalised or that some elements of CSS3 are either poorly supported or not supported at all. This is in fact all true but it's not an excuse to not use CSS3. If these were suitable arguments then we would still be waiting around for CSS2.1.

What marks the availability of such technologies is whether or not browsers are supporting them, in the case of CSS3 we have achieved enough browser support in a number of properties to allow us to start using them to enhance the websites we produce. The key word here is to enhance a design. Any CSS3 you do adopt should be done in such a way as to not break the experience in older browsers.

Whether you call it Progressive Enhancement, Graceful Degradation or Hardboiled it doesn't matter really, so long as you accept that a website doesn't need to look the same in all browsers. If you can accept this simple truth then you will see that CSS3 can be adopted today without negatively affecting the user experience of those using older browsers.

Vendor Prefixes

Much of what CSS3 browsers support is done so using vendor prefixes. Originally these were never meant for developer use but more as a means for browsers to test their implementations. But times change and if we want to use CSS3 now then vendor prefixes are a vital part of this.

Vendor prefixes that are in use today are :

  • -moz- : Firefox
  • -webkit- : Webkit browsers such as Safari and Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

When coding CSS3 with vendor prefixes it is good practice, where possible, to place a non prefixed version after any vendor prefixed version to ensure future standards compatibility of your website.

So Some Actual CSS3

Border Radius

Border radius, or as some might call it 'Rounded Corners' is possibly the most widely used of any CSS3 element as it has the smallest impact on users with older browsers. It is arguably the most beneficial as implementing rounded corners has always required a number of extra divs and images to allow it to be utilised in a flexible manner.

At its most basic border radius can be written in three ways:

border-radius: [<length> | <%>];
border-radius: [top-left] [top-right] [bottom-right] [bottom-left];
border-top-left-radius: [<length> | <%>];

As the code above shows border radius can be written so that all corners can be specified individually or in a shorthand way. However when using vendor prefixes there are a couple of issues:

Webkit
When using the short form declaration the browser will only understand up to two values, not four; to address this use the long form. Also there are some issues when using percentages over fixed pixel lengths.

Mozilla
Mozilla have proved exactly why we still need vendor prefixes by implementing the long form declaration differently. So when using the -moz- prefix the following needs to be used, though the short form works as expected:

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;

Examples

Border Radius

#1 {border-radius:10px;}
#2 {border-radius:50%;}
#3 {border-radius:25px 5px;}
#4 {border-radius:40px 30px 20px 10px;}

Support
IE9+, Safari 3.2+[-webkit- prefix], Safari 5+, Chrome 4+, Firefox 3.0+ [-moz- prefix], Opera 10.5+

Colors

With CSS3 comes support for rgba (Red, Green, Blue, Alpha) and hsla (Hue, Saturation, Lightness, Alpha). The alpha's of both signify the transparency of the color, allowing us to define the opacity of individual properties of a given element such as background, border and text. Before it would only be possible to apply opacity to the whole element or use images instead.

color: rgba([<0-255>],[<0-255>],[<0-255>],[<0-1.0>]);
color: hsla([<0-360>],[<%>],[<%>],[<0-1.0>]);

Both forms of specifying color can be used without the alpha channel by dropping the 'a' in 'rgba' or 'hsla' and by removing the last number of the property. In this form rgb is more widely supported by older browsers but hsl is still as new as hsla.

These color properties can also be used safely within any other CSS3 property that requires color such as box-shadow and gradients but when using these within older properties it's important to provide a fallback.

color:rgb(0,0,0); color: rgba(0,0,0,0.5);

The fallback color can be in any supported form such as rgb and hex.

Examples

Colours

#1 {background:rgba(255,255,255,0.3);}
#2 {background:rgba(45,35,200,0.5);}
#3 {background:hsla(225,90%,10%,0.2);}
#4 {background:hsla(125,100%,50%,0.5);}

Support
IE9+, Safari 3.2+, Chrome 5+, Firefox 3.0+, Opera 10.1+

Text-Shadow

This property allows the addition of a shadow to any text and allows us control over the position, blur and color of the shadow.

text-shadow: [color] [x-coordinate] [y-coordinate] [blur radius];
text-shadow: #000000 10px -5px 3px;

For text shadow you can define a color in whichever way you wish including rgba and hsla. The x-coordinate is the position of the shadow horizontally in relation to the text, the y-coordinate is the same but vertically. Both can have negative or positive values.

The blur radius is the size of the blur given to the shadow and has no upper limit. Its lower limit is zero (0) and this provides a pixel for pixel likeness of the text without any blurring.

Text Shadow was in fact originally proposed in CSS2 but has recently come to the fore with CSS3 and also as yet has not shown up as being supported in any of the IE9 previews, but this will hopefully change.

Examples

Text Shadow

#1 {text-shadow:rgba(0,0,0,0.5) 1px 1px 0;}
#2 {text-shadow:rgba(0,0,0,0.7) 5px 5px 3px;}
#3 {text-shadow:rgba(45,35,200,0.7) -10px -10px 3px;}

Support
Safari 3.2+, Chrome 4+, Firefox 3.0+, Opera 10.1+

Box-Shadow

Box shadow isn't that unlike text-shadow but applies to the whole element such as a div rather than just the text within it.

text-shadow: [x-coordinate] [y-coordinate] [blur radius] [color];
text-shadow: 10px -5px 3px #000000;
text-shadow: inset 10px -5px 3px #000000;

The code above shows a declaration similar to that of text shadow except for the addition of inset in the third line. The use of inset allows us to position the shadow within the border of the element rather than outside it.

With box-shadow it is also possible to combine multiple box shadows as shown in the code below:

text-shadow: inset 10px -5px 3px #000000, 10px -5px 3px #000000;

Examples

Box Shadow

#1 {box-shadow:10px 10px 0 #666666;}
#2 {box-shadow:-10px -10px 5px #666666;}
#3 {box-shadow:inset -5px -5px 0 rgba(255,255,255,0.5);}
#4 {box-shadow:5px 5px 5px #666666, inset 5px 5px 5px rgba(255,255,255,0.5);}

Support
IE9+, Safari 3.2+[-webkit- prefix], Safari 5+, Chrome 4+, Firefox 3.5+ [-moz- prefix], Opera 10.5+

Multiple Backgrounds

Multiple backgrounds similarly to border radius allows us to create more complex designs without the need for additional divs. Multiple backgrounds do exactly what they say and allow us to specify multiple backgrounds as well as their position and repeat within a single element.

background: url([image]) [position] [repeat], url([image]) [position] [repeat];

The code needed to implement this is exactly what you will be used to but with the use of a comma to separate the different declarations of images. It is also possible to specify this with long form but using the short form is more manageable. Also if you wish to layer your background images the order would be that the first in the list is the layer closet to the user, working back from this point.

Examples
Multiple Background

#1 {background:url(lollipop.png) 10px 10px no-repeat, url(stripes.png) left bottom repeat-x, url(diagonal-pattern.jpg), #FFFFFF;}

Support
IE9+, Safari 3.2+, Chrome 4+, Firefox 3.6+, Opera 10.5+

Multiple backgrounds are another bit of CSS3 that requires a fallback as older browsers will pass over the whole of the declaration rather than take the first image only. Therefore remember to specify a background in the normal way first if your design requires it.

Background Size

Following on from multiple backgrounds is the ability to specify a backgrounds size:

background-size: [<length> | <%> | <auto>] [<length> | <%> | <auto>];
background-size: 100% auto;
background-size: 100% auto, 10px 10px;

As seen in the code above you can supply both the width and height of the image, with width declared first. The third line also shows how to use background size in conjunction with multiple backgrounds.

Support
IE9+, Safari 3.2+, Chrome 4+, Firefox 3.6[-moz- prefix], Firefox 4+, Opera 10.5+

Background Clip & Background Origin

In simple terms these allow you more control over the background position.

background-origin: [<border-box> | <padding-box> | <content-box>];
background-clip: [<border-box> | <padding-box> | <content-box>];

Background origin allows you to control the starting point by which you measure the offset you apply using background position, while background clip allows you to position a background to appear only within a given area. The image below should show this in more detail:

Background Origin Clip

Border-box: This is the default where both include the background in any calculations so that an image would actually show behind a border.

Padding-box: This removes the border so any background image or color would not appear behind the border.

Content-box: This moves everything to just behind the content, so discounts both the border width and any padding applied when calculating the position of the border.

In truth this element is pushing the boundaries of what is possible today as no full release of Firefox supports these properties, Opera does have some issues and in webkit browsers some implementations require a vendor prefix whilst others do not.

Support
IE9+, Safari 3.2+[-webkit- prefix], Chrome 4+[-webkit- prefix], Firefox 4+, Opera 10.5+

*not all properties require the -webkit prefix, go to Quirksmode for a more comprehensive breakdown.

Border-images

In the CSS2 days the most complex borders we could produce would be grooved or dashed, all straight lines and no fun. With border images we can create the borders we want, as we want them.

border-image: [img] [slice] [<repeat> | <round> | <stretch>];
border-top-image: [img] [slice] [<repeat> | <round> | <stretch>];
border-corner-image: [img] [slice] [<repeat> | <round> | <stretch>];
border-top-left-image: [img] [slice] [<repeat> | <round> | <stretch>];

As the code shows above we have both short form and long form versions for border images as well as the ability to independently control the corners of the border too for much more complex borders.

When creating an image for border images you have to create an image a little like this:

Border

So your image is essentially showing your border. Slice is then used to define the area of the border and remove the centre fill. When defining the slice you specify between 1 and 4 values either as percentages or pixels(without px strangely) in the order of top, right, bottom, left. If you specify one single number it simply means you would be taking say the 5 pixel border of the image specified.

There are also options to change how the border image is repeated, either with repeat, stretch or round. Stretch is easy to explain as it stretches the image on the sides of the borders, repeat acts as you would expect and can lead to half images on the border. Round is the really useful one as it acts the same as repeat but will scale to ensure that no half images are visible.

Examples
But really the best way to communicate what border image is all about is to show a working example. Then try it out for yourself, it is one of those elements which is best learnt this way.

Border Image

#1	{border-image:url(border.jpg) 15 15 15 15 round;}
#2	{border-width:15px; border-image:url(border.jpg) 15 15 15 15 round;}
#3	{border-width:15px; border-image:url(border.jpg) 15 15 15 15 stretch;}
#4	{border-width:20px; border-image:url(border.jpg) 15 15 15 15 repeat;}

As you can see specifying the border width is also necessary.

Support
Safari 3.2+[-webkit- prefix], Chrome 5+[-webkit- prefix], Firefox 3.5+ [-moz- prefix], Opera 10.5+

Multiple Columns

The one thing print has always had over the web is the layout of text in multiple columns. Of course we could replicate the same look but it was never very flexible, and could never be considered for anything other than static content. But CSS3 brings with it control over our content allowing us to specify not only the number of column but the gutter and gap sizes.

column-width: [width];
column-gap: [width];
column-count: [number];
column-rule: [width] [style] [color];

The code should really explain itself, but one thing to note is that there would be a conflict if you were to use column width and count in such a way that the number of columns would not fit in a given space. And of course if your container is not large enough to accommodate any given width then the output might not be as intended. For these reasons it's a safer option to specify column count rather than width.
Column rule is then specified as you would a border but will appear only in the gaps between the columns.

Example

 #1	{column-count:3; column-gap:3%; column-rule:3px double #999999;}

Support
Safari 3.2+[-webkit- prefix], Chrome 4+[-webkit- prefix], Firefox 3.0+ [-moz- prefix], Opera 11+

Gradients

Lastly comes gradients, which are the most complicated element of CSS3 at the moment. Why? Because no non-vendor prefix exists and the implementation between the mozilla and webkit versions are widely different:

background-image:-moz-linear-gradient(#CC0000, #1A82F7); 
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #CC0000), color-stop(1, #1A82F7));

Both of these are workable solutions for the same effect, the mozilla implementation above becomes more complex with different angles and colors within the gradient. But the most obvious difference is in how they define the shape of the gradient. Mozilla places the shape of the gradient, linear in this case, within the property name and webkit within its attributes. To explain all the possibilities here would take a full article, so if starting to use gradients I'd recommend an online tool to get you started.

Support
Safari 4+[-webkit- prefix], Chrome 4+[-webkit- prefix], Firefox 3.6+ [-moz- prefix]

And More...

There's much more to CSS3 on the horizon including transforms, transitions and animations, and if you want you can use these too. In the most part what has not been covered in this article is less widely supported, in the case of CSS animations only webkit is up to speed. It's for these less supported advancements that you need to decide if the time and effort is worth it in any given project. Should you spend hours using animations if a site has only 10 webkit users a month? I'd say not but you might think differently.

What you can do is read up on them so that when you do come across that website where enough users will truly benefit from the experience you can start implementing them straight away.

Selectors

Below is a selection of the new selectors available thanks to CSS3 and small explanation of each:

Usage Description
X[att^=”val”] Any X element with an attribute value beginning with 'val'
X [att$=”val”] Any X element with an attribute value ending with 'val'
X [att*=”val”] Any X element with an attribute value with 'val' contained somewhere within the attribute value
X:checked Any X form control that is checked
X:disabled Any X form control that is disabled
X:enabled Any X form control that is enabled
X:empty Any X element that is empty or has no children
X:first-of-type The X element that is the first sibling of its type
X:last-child The last child X element of its parent element
X:last-of-type The X element this is the last sibling of its type
X:nth-child(n) Any element of X that is the specified n-th child of its parent
X:nth-last-child(n) Any element of X that is the speified n-th child of its parent, but counting from the last child
X:nth-of-type(n) Any element of X that is the n-th sibling of its type
X:nth-last-of-type(n) Any element of X that is the n-th sibling of its type, but counting from the last sibling
X:not(s) Any X element that does not match the selector s
X:only-child The X element that is the only child of its parent
X:only-of-type The X element that is the only child of its parent and of a given type
X:selection Any portion of X that is selected or highlighted by the user
X:target Any X element that is the target of the referring URL
X ~ Y Any Y element that is preceded by a sibling X

Media Queries

Media Queries allow us the ability to provide responsive designs based on the device the user is consuming the website with. To fully do Media Queries justice it would require a full article but here's a quick overview to get you started:

Media queries can come in two forms, first there is using them within your CSS. The following example shows how this might look in order to target a browser which is on a screen and with a maximum width of 800px.

@media screen and (max-width: 800px) {
    body {background: #000000;}
}

You can also define media queries within your html to allow you to link to a separate stylesheet solely for your given query. The following example specifically targets the iPhone 4.

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

There are more than just the above options you can use, with orientation, color and resolution just a selection of a greater list. What media queries are designed to do is allow you a better way of building websites to suit a range of devices and screen sizes. You could in the extreme provide a unique layout for each device and screen resolution but currently they are used to primarily target mobile devices such as the iPhone and iPad.

Support
IE9+, Safari 3.2+, Chrome 5+, Firefox 3.5+, Opera 10.1+

@font-face

This isn't strictly CSS3 at all it just so happens that all the right pieces have fallen into place at the same time as CSS3 was gaining momentum. What font-face allows us to do is add non-standard fonts to our website for all users to see without the use of workarounds like Cufon and sIFR.

Font-face still has a way to go, five font declarations is a little over the top but necessary to ensure full support.

@font-face {font-family:'ComfortaaBold'; 
src:url('/fonts/Comfortaa_Bold-webfont.eot'); 
src:local('☺'),  
url('/fonts/Comfortaa_Bold-webfont.woff') format('woff'), 
url('/fonts/Comfortaa_Bold-webfont.ttf') format('truetype'),
url('/fonts/Comfortaa_Bold-webfont.svg#webfontPdgofT1X') format('svg'); 
font-weight:normal; 
font-style:normal;}

With the exception of using paid for services such as Typekit and Fontdeck the above code is recognised as the best way to specify your @font-face declarations. The 5 font declarations cover pretty much every browser as well as svg fonts for the iPhone and iPad.

For more in-depth coverage of @font-face, free fonts, an awesome @font-face generator and a way to avoid the Firefox Flash of Unstyled Content visit Font Squirrel.

Support
IE6+, Safari 3.2+, Chrome 5+, Firefox 3.5+, Opera 10.1+

The Best of CSS3

Below is a quick list of some sites that have fully embraced CSS3 to great effect. Although this list is short it is only the tip of the iceberg in regards to the number of sites now using CSS3.

Neography
Neography

Colly
Colly

24ways
24ways

Hardboiled
Hardboiled

Ryanmerrill
Ryanmerrill

Eyestylesllc
Eyestylellc

The Benefits of CSS3

Rich Interfaces - By having such control over our websites it will allow us to create more rich interfaces for users. Although in the past we could get the same effect using an image it did not necessarily mean that we would use them, CSS3 gives us more freedom to implement such things.

Implementation - It's fairly obvious that implementing border radius takes a lot less time to implement than creating four corner images and divs to position them. A lot of what has been created in CSS3 is designed to allow us to move much of what we did using images into the code, or shorten the code we were using to implement more complex interfaces. In doing so it allows us to build sites quicker and easier.

Speed - By reducing the number of images in use and reducing the amount of code necessary to implement a design will make it more lightweight and so make it quicker to load. This also has knock on effects on SEO where site speed is now a contributing factor to Google rankings.

Maintainability - Making changes to your website will now be much simpler. Imagine you have created a button with gradients and shadows as an image. If you need to change either of these things or make the button wider you would have to make changes to the image and export it for the web. In CSS3 you could make the same change in a fraction of the time.

CSS3: What to Watch Out For

The correct use of CSS3 shouldn't ever provide too many issues but do watch out for the following:

Fallbacks - Always remember to write your code in such a way that if a specific CSS3 property needs a fallback for an older browser that one is specified. The fallback should of course be non-CSS3 and precede any CSS3 code. This way an older browser will see and implement what it understands and simply pass over what it does not.

Invalid CSS - Although the W3C does have a CSS3 validator it isn't great and many currently acceptable implementations will return errors. Validation isn't the holy grail many once professed it to be but is something to keep an eye on. So when validating your site use your experience to judge what is a true error and what isn't.

Ugly Sites - Hopefully most reading OXP should be good at what they do so would never be tempted to overuse CSS3. But some will inevitably start over using CSS3 resulting in some darn ugly websites. When learning CSS3 it's best to start small with a few things rather than throw it all into the mix at once.

Vendor Prefixes - The examples above will have shown many CSS3 properties need the vendor prefixes to work in some browsers. This does mean doubling or even tripling the amount of code required for a single effect. Although this can lead to messy code and be a pain to write and manage it is a necessity in using CSS3 right now.

No Pressure

So there it is a fast paced introduction to what is possible with CSS3. Most of the information above is written as an introduction to the different properties, there are many more articles dedicated to each solely. Search them out for an even more in-depth look at each property.

But hopefully in reading this article you will be convinced that you can use CSS3 if you haven't been already. If not then of course that's your choice but now really is the time to start learning, otherwise you could find yourself having to catch up.

Resources

  • Can I Use - A quick overview of new web technologies, what browsers support them and when or if they will be supported by the forthcoming browsers.
  • Quirksmode - A more in-depth browser support chart specifying each property and element within all CSS for all the major browsers, where vendors prefixes are needed and where issues might occur.
  • CSS3 Info - A blog dedicated to CSS3 with articles on everything to do with CSS3.
  • Hardboiled Web Design - From the ever passionate Andy Clarke this book takes you on a ride through CSS3 and shows you the future of how we will be building websites.

Kean Richmond has been working as a Web Designer and Developer since 2006 after graduating with a BSc in Web Development. He strives to design and build creative and visually appealing websites that are of standards compliant and search engine friendly.