Everyone seems to be talking about the advantages of CSS3 and what it can do, and to be honest I don’t blame them. Along with HTML5 it’s really going to improve the way that we design for the web, making the implementation of seemingly simple design elements, actually simple! But as always with emerging Web technologies, there are problems with uptake. If you’ve been playing around with CSS3 then you’ll probably know which browsers recognise it and which don’t, but in case you aren’t sure… The newest versions of Chrome, Safari, Opera, and Firefox render most of the basics at the moment, but IE6 - 8 doesn’t. Thankfully IE9 will.
So, we can start working it into our designs, right?
Well, yes. But some people would probably argue that (for the time being) JQuery would be a better option. So what are the benefits of CSS3 vs JQuery?
Learning the Language
CSS3 is a much easier language to learn, especially for all those front end developers out there that have been coding CSS2 for years and simply want to add a few extra aesthetics to their sites. If you know CSS2 then you’ll simply be building on a language that you already know. You won’t have to re-learn anything or change your coding style particularly (like we did when ActionScript3 was developed), we simply have to remember the extra bits.
For those budding developers out there that don’t yet know either, then CSS3 will also be easier to learn because, in my opinion at least, it’s much more logical. CSS is very literal, it does exactly what it says on the tin, and due to lots of Javascript functions and various libraries it’s a lot smaller, too.
Size
As I just mentioned, CSS3 is much smaller. The code is tiny in comparison and you can work it straight into your standard stylesheets. You don’t have to include extra JS documents to perform various tasks, which means you’ll be making fewer HTTP requests and your page loading times will be quicker.
Speed is now factoring in to your Google search ranking, too. As of April this year Google has been using site speed in it’s ranking algorithm in order to try and encourage designers and developers to provide a better user experience across the Web.
Implementation
I almost covered this one in the point above, but I’ll reiterate… CSS3 can be written straight into your standard stylesheet and there is no need for extra files. This means you can avoid linking to various libraries and files full of complicated code in the <head> of your html documents. This also makes management of your website much easier as there are fewer places and code snippets to check for bugs etc.
Accessibility
Accessibility is really important on the Web, especially if you are designing sites that are potentially going to be visited by disabled users. As CSS3 will be part of the W3C Web Standards then it will be completely accessible, no matter what technology you are using to browse the Internet.
Now, accessibility isn’t just a problem for disabled users. Fully-able users can quite easily turn JavaScript off in their browser or be forced to have it disabled by their employer or organisation’s IT department, thus disabling any JQuery page elements they come across. Javascript is also not fully supported by all mobile browsers (although it is very close). But even those devices that do fully support it like the iPad suffer from lagging due to slower processing speeds, which is less than ideal.
Validation
As it stands, CSS3 doesn’t validate, but that’s just because it’s not finished yet. CSS validation doesn’t really matter anyway (except to those people who still insist on including those little badges in their website footers), I mean, the W3C site doesn’t even pass! Anyway, CSS3 will validate eventually, and then everyone can be happy… However, including JQuery in your code often means that even your HTML pages don’t validate, which they definitely should, and there’s nothing that you can do about it other than take the JS out.
Bad times.
Browser Compatibility
Due to the fact that CSS3 isn’t finished yet, JQuery is actually much more cross-compatible, especially with older browsers. Javascript has been around for a while now and because of this you can code reasonably easily for all browsers from IE6 to Safari 5. CSS3 has very limited compatibility as we have to wait for Apple, or Firefox, or Google etc. to decide to adapt their browsers in order to recognise the new semantics.
However, just to put a little spanner in this argument, as of yesterday a nice little release called PIE came about. PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.
These include:
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient as background image
We’ll definitely be using this in future projects and we’ll be monitoring it’s progress closely as they add more features. Even though it doesn’t solve all the compatibility issues (there are still variances between versions of Firefox / Chrome / Safari / Opera), it will definitely encourage more people to use CSS3.
Documentation
Seeing as though JQuery has been really popular for about 18 months now, there is a lot more documentation covering it’s functionality. Of course there is the JQuery website, as well as hundreds, if not thousands of tutorials on blogs all over the Internet. It’s great because a quick Google search can come up with all kinds of ways to implement your ideas written in various levels of detail.
CSS3 is not widely documented yet. There are a lot of people talking about it and covering the basics on their blogs, but as it is still being developed the information is very limited, and sometimes slightly ‘bitty’.
Versatility
I suppose the main argument of this entire post comes down to this: JQuery is much more versatile. It can do almost everything that CSS3 can do, plus loads more… If you want to do crazy page animations, or drag and drop divs, or really interesting cross-fades, or things that no one has even thought of yet…then JQuery is your man. Enough said.
CSS3 has a specific purpose, and when it’s finished it will serve that purpose far better than JQuery ever could. If I was you I’d start researching and using it now, because as creatives we are supposed to push the boundaries of what’s possible and not be held back by discrepancies. If a technology is there to be used, then use it.
In my opinion JQuery will be used for a long time to come for no-holds-barred innovation. With different libraries available such as MooTools and Prototype the possibilities are endless, and we will more than likely see ideas that are formed in Javascript embraced and adapted into Web standards.
By Chris Skelton