How we implemented CSS3 into the new Strawberry.co.uk

Posted on Tags: Web, CSS3, HTML5, Compatibility, Browsers

When James said we were going to be designing the strawberry website, I was rather excited when he said we were going to be doing it in HTML5 and CSS3. It really made sense as myself and fellow colleague Stu had already been experimenting left, right and centre with the new CSS transition and transforms which come wrapped up in the big present to web designers that is CSS3!

Dabbling with new techniques

We had been dabbling (my own personal site being a rather big dabble of note) adding CSS3 on client websites as a simple, progressive enhancement (for example: KC Stadium and Edwin Snowden), so carrying this forward-thinking ethos into our new site really was a no-brainer.

As CSS3 is yet to be finalised as a specification, and support for the new features aren’t fully supported, we have to use “vender prefixes” with the new selectors so that they can work in the browser. What is a vender prefix I hear you ask? It’s a word that you place before an element of CSS specific to a certain browser’s rendering engine. For example, Apple Safari and Google Chrome both use the Webkit rendering engine therefore if you want your new CSS3 selector to work in those browsers you need to use the prefix “-webkit-“. For Mozilla’s firefox it is simply “-moz-”.This means that for the meantime (before the CSS3 specification is finalised) we have to write multiple lines of CSS to target each browser and in turn ensure that everyone sees the same effect.

Covering all bases

With all these different prefixes being used, as well as some of the browsers not fully supporting all the new selectors yet, it can get very confusing. Something that we all felt was essential, was even if the browser you use to view our site doesn’t support the new CSS3 selectors, then you can still use the site without ever feeling like you’re getting a substandard experience.

An example of this is that if you are using Internet Explorer (which doesn’t support CSS3 yet) then you will not see the transition effect between the colour white to black on the navigation links when you hover over them, instead seeing the colour change instantly. Another issue is, what happens when the specification is finalised and the prefixes become irrelevant? Well, we have ensured that for every line of browser specific CSS3, there is the equivalent without the prefix, so that when the browsers support CSS3 without the vender specific prefixes, we already have the no prefixed code ready and waiting.

The same approach has been taken for pieces of CSS3 that aren’t currently supported by certain browsers.

The example here is that Firefox does not currently support CSS3 transitions (but will be in the very near future), so when applying this CSS3 technique we’ve placed the same code with the “-moz-" prefix too, so that when the new version is released, our site doesn’t need to be altered to utilise the new features.

In action

I guess you’re now really wondering what it all looks like? Below is a code snippet of some of the CSS3 used for the navigation links on our website:

a {
   -moz-transition:color .2s ease;
    -ms-transition:color .2s ease;
     -o-transition:color .2s ease;
-webkit-transition:color .2s ease;
        transition:color .2s ease;
}

If this doesn’t make any sense then here is an explanation: it is a CSS3 “transition” that will change the link elements “color” over a time span of 0.2 seconds using the “ease” effect.

As you can see, we target Firefox with -moz-, Internet Explorer (9) with -ms-, Opera with -o-, Google Chrome and Apple Safari with -webkit- and then have the final selector without a prefix (placed last to ensure that when it comes into use that it can override the previous statements).

Further Reading

If this article has merely whet your appetite and you want to learn more then check out these articles and resources that I think would be helpful in gaining a greater understanding: