Alright.
You’ve read the article title.
Which is it?
Before reading any further, what’s your guess?
With all those cool and handy features, you would think it would bulkier and slower than CSS, right?
That’s the beauty of it all. CSS3 not only gives you more options, but using CSS3 in your web designs will give you a net (no pun intended) gain!
Smashing Magazine did a great speed benchmark test. Here were they results:
How do you like them apples?
As you can see from Smashing’s results, CSS3 beats out CSS because it can render effects that are normally reserved for PNGs — rounded corners, etc …
Here’s a closer look:
I don’t know if there’s a significant difference between the actual code speed or not, but it’s the net gain that really matters — and it’s a lot!
There are other speed issues with CSS3 vs. CSS. We’re not just talking page load times, either. Smashing figures developing in CSS3 vs. CSS is a whole 33% faster, which means building on the web will cost clients less or give them some padding to add some of those extra bells and whistles. Unfortunately for clients, many times when an industry becomes more efficient, the gain is left for the industry to enjoy; or that time saving will be eaten up by new features and options. No matter how you slice it, I think everyone ends. Even the user.
Bottom line: Learn CSS3 and start using it, now.
If you don’t agree, go read Smashing Magazine’s in-depth look at CSS3 vs. CSS.
Oh! I almost forgot, did you guess right?
[via Smashing Magazine | Image via Vicente Sandoval]
Walter Wimberly says
The CSS version looks fairly un-optimized. I read the article, and they did try CSS Sprites, for a different version, however they barely applied them. Given the similar sizes, it appears that the main time issue is the latency due to the number of requests. (File sizes wouldn’t be that big of a deal.) Better use of CSS Sprites would help.
The thing that was not mentioned however, it how many IE users he is expecting. You can’t control the user or their browser choice (as much as you wish you could). I have some sites I work on which have 90+% of the users using IE in one form or another, mostly 7 and 8. Kiss your design good bye if you use CSS3. If it was only 50%, and half of those would not take the CSS3 site, and choose to leave – how many dollars would that equate to? Could they lose 25% of their sales? Is a second faster load time, with that revenue.
This is the question that all designers should look at. Not just what cool things we can do, because we have new computers with faster/more up-to-date browsers.
Eric Dye says
I agree, you have to keep your browser user base in mind. As for older browsers, you can steer those to browser specific stylesheets. Will a second faster make a difference? Try milliseconds: https://churchm.ag/website-speed-matters/