CSS3 vs. CSS: A Speed Benchmark

Advertisement

I believe in the power, speed and “update-ability” of CSS3. Not having to load background images as structural enhancements (such as PNGs for rounded corners and gradients) can save time in production (i.e. billable hours) and loading (i.e. page speed). At our company, we’ve happily been using CSS3 on client websites for over a year now, and I find that implementing many of these properties right now is the most sensible way to build websites.

Until today, all of that was based on an assumption: that I can produce a pixel-perfect Web page with CSS3 quicker than I can with older image-based CSS methods, and that the CSS3 page will load faster, with a smaller overall file size and fewer HTTP requests. As a single use case experiment, I decided to design and code a Web page and add visual enhancements twice: once with CSS3, and a second time using background images sliced directly from the PSD. I timed myself each round that I added the enhancements, and when finished, I used Pingdom1 to measure the loading times.

Here’s a fictitious Web page for Mercury Automobiles2 that might have been online had the Interweb existed back in the 1950s. The page was designed to showcase specific widely compliant CSS3 properties that in the past would have had to be achieved using background images.

Mercury Automobiles Diagram

Above is a diagram that breaks down where I applied visual enhancements first with CSS3, and then with CSS background images (i.e. the image-based approach):

  1. linear-gradient
  2. border-radius
  3. radial-gradient
  4. text-shadow
  5. box-shadow with RGBa

The Experiment Process

Day 1
I coded the HTML and CSS from a structural standpoint. That means no rounded corners, no shadows, no gradients and no images aside from logos and car photographs. I decided to include Web fonts at this phase because I wanted to focus on stuff that could also be done with the Web-safe font of your choice (Helvetica, Georgia, etc.). Furthermore, @font-face was around long before CSS3.

Mercury index3

This gave me a blank canvas to add visual enhancements. The index page4 shows the end of my day 1 work, as well as what unsupported browsers will display, the appearance of which is structurally intact and visually pleasing. More on this later, but the way I see it, older browsers aren’t penalized with a broken layout, and modern browsers are rewarded with a few visual bonuses. Part of implementing CSS3 is about planning ahead and designing websites that look fine as a fallback.

Day 2
Starting with the base index page, I created a CSS3 page5. It took 49 minutes to complete. Here is the CSS code (css3.css6):

/*-----CSS3 Started on 2/26/11 at 7:28 AM CST-----*/
h1 {
	text-shadow: -3px 2px 0px #514d46; }

#nav {
	-moz-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);
	-webkit-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);
	box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);
	background-image: -moz-linear-gradient(top, #5c5850, #48473e);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5c5850),color-stop(1, #48473e));
	background-image: -webkit-linear-gradient(#5c5850, #48473e); 
	background-image: linear-gradient(top, #5c5850, #48473e); }

nav a {
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px; }

nav a:hover {
	background-color: #3a3e38;
	background-color: rgba(47, 54, 48, .7); }
	
nav a.active {
	background-color: #070807;
	background-color: rgba(7, 8, 7, .7); }

body {
	background-image: -webkit-gradient(radial, 50% 10%, 0, 50% 10%, 500, from(#FBF8E3), to(#E6E3D0));
	background-image: -moz-radial-gradient(50% 10%, farthest-side, #FBF8E3, #E6E3D0); }

#learn_more, #details img {
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: inset 0px 0px 8px rgba(88, 83, 74, .2);
	-moz-box-shadow: inset 1px 0px 1px rgba(88, 83, 74, .2);
	box-shadow: inset 0px 0px 1px rgba(88, 83, 74, .2); }

#learn_more a {
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	background-color: #cc3b23;
	background-image: -moz-linear-gradient(top, #cc3b23, #c00b00);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #cc3b23),color-stop(1, #c00b00));
	background-image: -webkit-linear-gradient(#cc3b23, #c00b00);
	background-image: linear-gradient(top, #cc3b23, #c00b00); }

a {
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	-webkit-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in; }
	
/*-----CSS3 Finished on 2/26/11 at 8:17 AM CST (49 minutes) -----*/

Day 3
I added visual enhancements by slicing and CSS’ing background images directly from the PSD. Even though there is less code, all of the extra app-switching and image-slicing added up to a total of 73 minutes to complete. Check out the page for the CSS image-based approach7. Here’s the code (css.css8):

/*-----CSS (the image-based approach) Started on 2/27/11 at 12:42 PM CST-----*/

#header {
	background: url(../img/navbg.png) left top repeat-x; }

body {
	background: #e6e3d0 url(../img/radial_gradient.jpg) no-repeat center top; }

#nav {
	background-color: transparent; }

h1 {
	background: url(../img/mercuryautomobiles.png) no-repeat center center;text-indent: -9999px; }

#learn_more {
	background-image: url(../img/learn_morebg.jpg);}

#details img {
	background-image: url(../img/detailsbg.jpg);}

#learn_more a {
	background: url(../img/learn_more_abg.jpg) no-repeat;}

.css3 {
	background: url(../img/css3_hover.png) no-repeat center top; }

.smashing {
	background: url(../img/smashing_hover.png) no-repeat center top; }

.trent {
	background: url(../img/trentwalton_hover.png) no-repeat center top;}

.css3:hover {
	background: url(../img/css3_hover.png) no-repeat center -20px;}

.css:hover {
	background: url(../img/css_hover.png) no-repeat center -20px;}

.smashing:hover {
	background: url(../img/smashing_hover.png) no-repeat center -20px;}

.trent:hover {
	background: url(../img/trentwalton_hover.png) no-repeat center -20px; }

.css {
	background: url(../img/css_hover.png) no-repeat center -50px; }

/*-----CSS (the image-based approach) Finished on 2/27/11 at 1:55 AM CST (1 hour and 13 minutes)-----*/

Production Time Results

So, we’re looking at a 24-minute difference: 49 minutes to add visual enhancements with CSS3, and 73 minutes to do it with images. For me, CSS3 was not only quicker but far more enjoyable, because I was focused on only one window (my CSS editor), unless I opted to pull some of the code from CSS3 Please9. On the other hand, slicing images and switching from Photoshop to FTP to the CSS editor and back again was a hassle, and it did take longer.

It’s also worth noting that I did my best to stack the deck against CSS3. I coded it first so that any initial hashing out would be done before heading into day 3. Also, the images I did slice are as optimized as I could reasonably make them: one-pixel repeating slivers, and medium-resolution image exports. Overall, 24 minutes may not seem like a lot of time, but this is a fairly simple page. Imagine how much time (and money) could be saved over the course of a year.

What? Still not convinced?…

File Size And Loading Time Results

I took both of my pages over to Pingdom Tools10 to compare file size and loading times.

Pingdom comparison

Both pages are pretty fast, but CSS3 prevailed, with 10 fewer requests and a file size that was lighter by 81.3 KB. While loading times were close, the larger PNG files used on both pages accounted for most of the heft, which amounted to a .75 second difference on average. And when we’re talking 3 to 6 second loading times, those differences sure can add up.

CSS3 CSS Difference
Size 767.9 KB 849.2 KB 81.3 KB
Requests 12 22 10

For argument’s sake, I created yet another version of the image-based CSS version, with a sprite containing all four images used in the original version, and then I measured loading times. This CSS Sprited version11 did improve things, taking HTTP requests from 22 to 19 and the overall size from 849.2 KB down to 846.7 KB. The way I see it, these differences are minimal and would have added to the development time, so it’s all relative.

Without getting too sidetracked, I think the difference in loading times is significant. If a website gets 100 hits a day, the difference may not matter much, but on a higher traffic website the effect compounds. Shaving seconds or even milliseconds off the loading time of a website is no small improvement in user experience. The image-based approach could lead to upwards of a 15 to 27% drop in page traffic (based on a 5 to 9% per 400 ms rate)12. That’s a lot of dinero to lose. I wonder how much time and money could be saved by serving a CSS3 border-radius sign-up button on a website with as much traffic as Twitter’s.

Twitter

Another striking example is all the CSS3 that can be found in Gmail’s interface. The CSS3 gradients and rounded corners are there to increase page speed. Speaking of Gmail’s continued use of HTML5 (and CSS3)13, Adam de Boor had this to say about speeding up page rendering:

Google’s current goal is to get Gmail to load in under a second. Speed is a feature.”

And this:

The company has found that using CSS3 can speed the rendering time by 12 percent.

Convinced yet? No? Okay, I’ll keep going…

Thinking About The Future

Website Updates: The Easy Way and the Hard Way

CSS3 really pays off when it comes to making updates and future-proofing Web pages from a maintenance perspective. Looking at the Mercury Automobiles website14, think about what would have to go into changing the height of the three-column car images or the width of the bubble hover states for the navigation. For the sake of a quick production, I sliced these images to match precisely. One option would be to open Photoshop, rebuild and resize the images, update the appropriate CSS properties, and upload. Another would be to plan ahead and slice “telescoping” images, making one end a short rounded corner cap and another longer image on the opposite end that slides to fill the interior space. You’ve probably seen and done this before:

<div class="border_box_top"></div>
<div class="border_box_bottom">
	<img src="your_content_here.jpg" />
</div>

This isn’t ideal. While the technique comes in handy in a variety of instances, adding extra HTML just to achieve a rounded corner doesn’t seem efficient or sensible.

What If You Want to Go Responsive?

Serving different-sized images and changing the font size to suit a particular screen resolution simply couldn’t happen without CSS3. It’s wonderful how all of these new properties work together and complement each other. Imagine how time-consuming it would be to res-lice background images to accommodate varying image and font sizes that display at different screen resolutions. Yuk.

The Take-Away

For me, this simply proves what I’ve known all along: CSS3 pays off when it comes to production, maintenance and load times. Let’s revisit the numbers once more…

CSS CSS3 Results
Production time 73 minutes 49 minutes CSS3 33% faster
Size 849.2 KB 767.9 KB CSS3 9.5% smaller
Requests 22 12 CSS3 45% fewer

Yes, this is just one experiment, and the outcome was influenced by my own abilities. This isn’t meant to finally prove that implementing CSS3 no matter what will always be the right way to go. It’s just food for thought. I encourage you to track development and loading times on the websites you work on and make the best decision for you and, of course, your client.

We’re all concerned about browser compatibility, and opinions will differ. For me and most of my clients, this would be a perfectly acceptable fallback15. Perhaps with more experiments like this that yield similar results, these statistics could be cited to both employers and clients. If a website could be produced 49% faster (or even half of that) with CSS3, imagine the benefits: money saved, earlier launch times, more time spent on adding “extras” that push the product over the top, not to mention a better browsing experience for everyone.

Further Reading and Resources

  • Why We Should Start Using CSS3 and HTML5 Today16,” Smashing Magazine
    This editorial takes a realistic and encouraging look at the state of browser support and calls for the industry to move toward innovation rather than wait for a gate to be installed.
  • CSS3 + Progressive Enhancement = Smart Design17,” Perishable Press
    A comprehensive look at CSS3 that first examines the benefits of CSS3 over image-based methods, including less bandwidth, quicker implementation, increased flexibility, reduced HTTP requests and fewer server resources.
  • Google Gmail to Harness HTML518,” Macworld
    Google is all about speed, and this interview with Adam de Boor reinforces its view that, along with HTML5, CSS3 renders pages faster.
  • CSS Three — Connecting The Dots19,” Smashing Magazine
    Coming up with creative and sensible ways to get the most out of CSS3 will require experimentation. Right now, there are tons of property combinations and uses out there waiting to be discovered. All we have to do is connect the dots. It’s time to get your hands dirty and innovate!
  • Download the Mercury Automobiles .zip file20
    Feel free to pick things apart and learn more.

(al) (vf)

Footnotes

  1. 1 http://tools.pingdom.com/fpt/
  2. 2 http://trentwalton.com/examples/CSS3_Speed_Test/css3.html
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2011/04/Mercury_index.jpg
  4. 4 http://trentwalton.com/examples/CSS3_Speed_Test/
  5. 5 http://trentwalton.com/examples/CSS3_Speed_Test/css3.html
  6. 6 http://trentwalton.com/examples/CSS3_Speed_Test/css/css3.css
  7. 7 http://trentwalton.com/examples/CSS3_Speed_Test/css.html
  8. 8 http://trentwalton.com/examples/CSS3_Speed_Test/css/css.css
  9. 9 http://css3please.com/
  10. 10 http://tools.pingdom.com/
  11. 11 http://trentwalton.com/examples/CSS3_Speed_Test/css_sprited.html
  12. 12 http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/
  13. 13 http://www.macworld.com/article/152344/2010/06/html5_gmail.html
  14. 14 http://trentwalton.com/examples/CSS3_Speed_Test/css3.html
  15. 15 http://trentwalton.com/examples/CSS3_Speed_Test/
  16. 16 http://www.smashingmagazine.com/2010/12/10/why-we-should-start-using-css3-and-html5-today/
  17. 17 http://perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/
  18. 18 http://www.macworld.com/article/152344/2010/06/html5_gmail.html
  19. 19 http://www.smashingmagazine.com/2010/05/27/css-three-connecting-the-dots/
  20. 20 http://trentwalton.com/examples/CSS3_Speed_Test/CSS3_Speed_Test.zip

↑ Back to top Tweet itShare on Facebook

Trent Walton is founder and 1/3 of Paravel Inc., a custom web design and development shop based out of the Texas Hill Country. When he’s not working on client projects, he’s probably writing & designing articles for his blog, or contributing ideas for the next edition of TheManyFacesOf.com.

Advertising
  1. 1

    Great article.

    But have you tried this test with javascript in action ?

    Because for my new website, I tried to use css 3 like box-shadow and border-radius, and with javascript code on the same page, firefox is so slow !
    When I remove box-shadow and border-radius properties of my css, firefox is running the page perfectly.

    Do you have any idea ?

    0
    • 52

      I’ve yet to come across an issue like this, but I bet there are an infinite number of possibilities / combinations relating to the specific js and/or css you’re using.

      0
  2. 103

    Hey there Trent,

    I really enjoyed this article, I had no idea css3 was that strong until your “benchmark” article here pointed it out… I mean that load time is not to be ignored in my opinion!

    Also, Sorry to the moderators here at smashingmag for using Keywords and trying to advertise my company with “Keywords” yesterday, didn’t eve see the rules above, I apologize!

    Regards! And great article again Trent, thanks for saving all of us other web designs the time and heartache of doing this test ourselves ;-)

    Jeremiah R.
    Chairman & CEO
    thenerdblurb.com

    0
  3. 154

    Really like this article. Very good thanks

    0
  4. 205

    so really ineterest CSS3 feature, it’s can make possible now….hohohoho

    0
  5. 256

    Jeremiah Reagan

    April 23, 2011 9:28 pm

    Hey there Trent, I just got done mentioning this EXACT article and post to a couple friends and employees of mine. This is EXTREMELY resourceful. I’m so happy that you saved all of us “web developers” the heart-ache and time of doing something like this ourselves.. Thanks again! Your results were great too, I could not believe the load time difference in your 2nd or 3rd graphic Trent, between CSS3 and CSS, WOW, eye-opening to say the least. Sorry about last time too, I posted a comment saying “great job trent” but I think I violated the rules by putting up keywords and phrases pointing to my domain, stupid me, I didn’t see the rules above the darn comment. Sorry Administrators! :-(

    Anyway great job again and thanks for these “benchmarks” – they come in handy bud!
    Cheers,
    Jeremiah R.

    0
  6. 307

    Awesome recommendation on CSS3 pie

    Thanks for the heads up!

    0
  7. 358

    Great article!

    Personally i think that as long as we, Designers/Developers, try to make i.e behave like a modern browser with all resources available now, css3, in I.E world, will be just a hacked css.

    The most important thing is to take full advantage of modern Technologies/Browsers and move forward. If before css3 you would use a sliced image for border, why would you do that now, if you can totally do it with css3? And believe me once I.E users see that on chrome they will sure ask why in their I.E browser looks different!

    CSS3 wins always!

    Thanks,
    Kelvin

    0
  8. 409

    I have used the following code for IE gradients in my new project and it has worked fine for me –

    FILTER: progid:DXImageTransform.Microsoft.gradient

    0
  9. 460

    Great article there :)

    0
  10. 511

    Peter Cranstone

    April 25, 2011 7:34 am

    Hi Trent,

    Just ran a couple of tests for you using our Mobile Performance solution (Android). The performance difference is “quite dramatic”… a 41% performance improvement.

    Regular CSS – 877.6kb – 30.32 seconds
    CSS3 – 796.6kb – 17.89 second

    links to regular css waterfall performance chart: http://www.5o9mm.com/har/viewer/v.pl?path=accounts/5o9/android-04-25-2011-15-27-06-GMT-trentwalton-com-examples-CSS3_Speed_Test-css-html.har

    link to CSS3 waterfall performance chart:
    http://www.5o9mm.com/har/viewer/v.pl?path=accounts/5o9/android-04-25-2011-15-27-52-GMT-trentwalton-com-examples-CSS3_Speed_Test-css3-html.har

    Cheers,

    Peter
    5o9 Inc.

    0
  11. 613

    Jeremiah Selengia

    April 25, 2011 8:13 am

    Excellent article CSS3 is definitely going to be utilised in every project, I just wish I.E will give it the support.

    0
  12. 664

    Fantastic stuff, I’ve been holding back on writing css3 for client projects, but this article has showed me that it’s time to start doing so.

    0
  13. 715

    Big problem with this example is that it does not work in any version of IE. I know all the CSS freaks out there hate IE, but since roughly 70 – 75% of web users surf with it, coding something that does not look right in IE or have the intended impact can and will get you in trouble with paying clients. The old school css technique works in all browswers I tested. For this example to truly be a fair benchmark test you would need to include the time it would take to have this work in IE as well.

    0
  14. 766

    Gilberto J Perera

    April 25, 2011 11:59 am

    Had no idea the Pingdom page speed tool existed. What do you recommend to use as a benchmark? Google Page Speed, Pingdom, or other page speed tools? Thanks.

    0
  15. 868

    Using PROPER tools like pngquant, you could have reduced the image size of all PNG files by at least 60%! Test run with the main image redcar.png:


    $ identify redcar.png
    redcar.png PNG 1000x312 1000x312+0+0 DirectClass 8-bit 456.039kb
    $ pngquant 128 redcar.png
    $ identify redcar-fs.8.png
    redcar-fs8.png PNG 1000x312 1000x312+0+0 DirectClass 8-bit 117.688kb

    cu, w0lf.

    0
  16. 919

    MarketAgent 007

    April 25, 2011 7:18 pm

    Thanks for taking the time to experiment! This is a very informative article. I Photoshop the hec out of my buttons with drop shadows, inner glows, inner shadows, gradient strokes, gradient overlays and adjustment layers. So for now, I have to stick with old-school CSS sprites because it will take longer for me type all of the CSS than it would to slice a sprite. On the contrary, a pure CSS (no image) button will always look crisp and sharp no matter how near/far the browser zooms in. Guess it’s time for me to take some typing lessons!

    0
  17. 970

    A nice comparison article, but like most others, one thing it didn’t cover is the rendering performance. Obviously it’s much more difficult to test, but it’s equally as important as load time, especially on mobile devices. I’ve always found CSS gradients to be somewhat slow to render in the past, so I’d be really interested in the differences with images there.

    Also, 1px-wide image slices? Using them for things like page background can cause rendering issues as the blitting in most browsers isn’t hugely efficient. The PNG format on the other hand, is, so a 50px-wide version will be negligibly larger in filesize (especially after running it through something like ImageOptim) and quicker to render.

    0
  18. 1021

    Nice to see it all worked through like that; I had my suspicions but had not taken the time to measure like you have. Well done.

    However, taking up some comments from other above, bringing IE into the picture can quickly reverse any production time savings, because only the simplest cases work well with nice tools like CSS3PIE without requiring gymnastics of some form. I recently hit a case where IE near drove us around the bend, so of course I blogged about it :)

    http://snippets.webaware.com.au/snippets/css3-linear-gradients-and-internet-explorer/

    Of course, I could have taken the line that IE6 just isn’t worth the bother, but some clients don’t understand that. This is especially so for business websites whose clientele include people working in the finance industry, many of whom are stuck with IE6 on the desktop at work — but who are high-value customers that will buy, say, a case of wine or an expensive gift over the Internet when at work. Those customers are worth treating properly, not chastising with an orange gradient bar telling them to upgrade their browser (which they can’t!)

    I look forward to the shiny new CSS3 future and all of our recent websites make good use of CSS3, but I doubt it saves us much time once we factor in IE workarounds. Until IE6 fades into the distance, or CSS3PIE manages to overcome some of its current limitations, I can’t see that changing.

    0
    • 1072

      Nothing, absolutely nothing can justify the fact that they are using an eleven year old browser. If any, their hatred should be towards their IT managers, not web designers.

      0
      • 1123

        Douglas Bonneville

        May 2, 2011 7:05 am

        Not true. Massive companies have huge slow moving infrastructures. Getting a new browser is like trying to turn a cruise ship around in a mall parking lot.

        For instance, updating a browser has implications that involve the Securities and Exchange Commission and legal requirements revolving around auditing. It’s 1000% more complex than most people realize. IE6 and 8 will have to be catered to for years to come.

        0
        • 1174

          Douglas Bonneville

          May 2, 2011 7:06 am

          Woops, I meant to add that my example applies to companies that deal in finances and investing or insurance.

          0
    • 1225

      Douglas Bonneville

      May 2, 2011 7:02 am

      @ Ross: Agreed 100%.

      0
  19. 1276

    Good article. But when I think about IE & customers, I am really worried. If someone could stop the progress of IE development, it would be a better deal

    0
  20. 1327

    Love the article man, you guys continue to amaze!

    0
  21. 1378

    Hey Trent,
    how important is increasing the page load speed when we are all running on high speed internet?

    Come on, let’s be realistic. I think is much more important the time you spend on a project than the page load speed, or at least this is what is happen in real world where money are coming from our clients :)

    Cheers,
    Vic

    0
    • 1429

      load times are very important as is using CSS3 instead of images. The importance is because of… mobiles and tablets.

      I’ve been reviewing mobile/tablet visitors for the last couple of years and all the sites I review have one thing in common; increasing hits and increasing sales.

      Our newest problem is we don’t know if the user has a 2,500 resolution (iMac) or a 320px resolution (iPhone as an example). With images you are constantly running the risk of the design breaking. With CSS3 instead of images you negate a whole pile of issues.

      I’m surprised that few have commented on this. I strongly believe we are heading into a greater “portable” era and the age-old issue of speed and size is just as important now as it was when I was surfing on a 2,400 modem.

      0
    • 1480

      I think page speed is very important. More about why I feel this way: http://twa.lt/9hWHOD

      0
  22. 1531

    Great article and a nice subtle design.

    You might watch out for using too much text-transform: uppercase; All uppercase text is harder to read. It can be good to draw attention to short, important pieces of information but too much makes the site harder to use. In my opinion this mock design has far to much uppercase text. Just imagine if every website had that much uppercase text!

    0
  23. 1582

    While i do think CSS3 is a great improvement, when developing web apps for the mainstream user, we need to think twice about what to use.

    From experience, most of the users, don’t know or don’t care about upgrading browsers ( i’m not talking about tech savvy or enthusiasts ).

    What i see around web app development nowadays, are designers, front-end developers creating GUI’s that are 95% based on Apple styling and for Apple gadgets…

    When developing an app that will not be targeted to any user in particular we need to go through what to use in order to minimize the browser problems.

    So yes, i do love CSS3 but i’m not using it intensively on the projects that our company is working on because we know that to create a user experience that can be as similar as possible when using different browsers, will be a pain and unfortunately the end user will not see it as a “plus”. The user wants a app that works, period… with or without box-shadow… with or without border-radius or gradient.

    So, we keep going the CSS 2.1 way and trying to minimize the usage of images and when needed, just try to make the loading quicker or at least, create sprites so it only has to load it once.

    My 2 cents :)

    0
    • 1633

      Why not make CSS3-capable browsers even faster, then? You can cut down on http-requests for CSS3-capable browsers by providing CSS3 versions of your image-based stuff. When you do that, the browsers will ignore the image and just render the CSS3.

      The point here is that while CSS2.1 + images works, CSS3 can (and, arguably, does) work *better*.

      I do agree with the Apple-esque fad of styling, but if you’re already doing something that could be done in CSS3, that could improve performance for the browsers that can use it, why not?

      0
      • 1684

        Because it costs more development time and the boss (for in house folks) or client won’t go for it.
        I would pose the inverse question to you:
        Since the “old” way works in all browsers and there’s little to any noticeable improvement, why pay extra to make an css2 version, css3 version, create and integrate a sniffer with your existing framework that determines which version to serve?

        0
  24. 1735

    I am using this last 1 year and me and my clients are happy to use it. they like it.
    I just want to kill IE6. i am agree that css3 is quicker.

    0
  25. 1786

    I still think that CSS3 is a great “tool” vs 2.1 …
    But i still think that, if you are just developing for a niche of users, that like to see clean and crystal “crisp” design it’s ok to use CSS3 …

    If you are, imagine, developing a web app for you municipality … where all citizens will interact with it on a daily basis, and a great percentage of those citizens aren’t tech savvy, nor interested in being tech savvy, they just use the computer to surf and pay bills for example … there’s a high probability that those users won’t upgrade their browsers that often.

    Of course, again, if you are developing a web app or a website, whatever, to be viewed by niche users ( example, smashing magazine! ) … well, that’s a different story :)

    My 2 cents … i don’t really mean i’m right, it’s just part of my opinion … but yes, we should implement CSS3 in all the projects we can … but not ALL projects can be developed with CSS3… it’s a matter of knowing your market target, user profiling/personas … i mean… lot’s involved :)

    0
  26. 1837

    CSS3 its good to use, but css3 not working all browser like

    1. Chrome: working perfect rounded corner and shadow.
    2. Mozila: working perfect rounded corner and shadow.
    3. Safari: only working rounded corner, not working shadow.
    4. IE8: no shadow no shadow.

    Then what is use full?

    0
  27. 1888

    As fwolf mentioned, with image optimization you can reduce the images sizes.
    I’ve deleted the unused pictures from the downloaded package (salesman copy.png and mauto.jpg).

    The total size of original images was 820,1 KB. With only png optimization the size is 774KB (94.38%), but if you use the proper image formats (for example 8 bit transparent PNG) and optimization, the total image size is only 205 KB (24,99%) !

    Only one image suffered minor, but acceptable quality degradation (redcar.png).
    Image sizes in a table: http://i51.tinypic.com/2vwin7t.png
    The optimized images: http://playground.42ndlevel.com/recompressed_images.zip

    0
  28. 1939

    Piotrek Okoński

    May 6, 2011 4:51 am

    Why do we even have to convince people to use CSS3?
    We should should stop supporting old crippled browser to speed up the transition.

    0
  29. 1990

    Hi…
    Have you checked “http://trentwalton.com/examples/CSS3_Speed_Test/css3.html” in IE as IE does not rendering the rounded corner and in most of the cases client need site compatible to all browsers specially in IE…

    Thanks
    Sachin

    0
  30. 2041

    I think all the main problem lies in the fact that the user is aware of his handicap just by using IE as a tool for surfing. If each user know that a car he drives has its shortcomings and handicaps compared to other cars would not be complaining at the very comfort at least until they are aware of this fact.

    So, my bigger concern is how to explain to customers that issue than to spend extra time and money that they can meet and satisfy.

    0
  31. 2092

    This is the best code architecture ever. And this is very easy and comfortable coding. But everyone must know the basic of it. It has more complexity to all browser. Need to get fix it. Nice post.

    0
  32. 2143

    CSS3 is obviously better. I just look around some developers. And all are agreed with me that leaving CSS they are now using css3 for better prospect. Thanks for the post.

    0
  33. 2194

    css3 is not friendly with IE………………….
    whereas the major population use IE
    so it is a drawbeck of IE

    ddeveloperz.com

    but thanx for dis article

    0
  34. 2245

    Really intresting, but too bad untill IE will support it its useless..
    Unfortunatly i have some clients that use ie7-8 and its kind of a problem, but the future seems really great :)

    0
  35. 2296

    Just a note: you seem to have several missing images in this article and may wish to inspect your media archive to see where they went.

    Otherwise, quite interesting. We’ve been using more and more CSS3 in our designs, replacing the older image-slicing way of doing things, with fallbacks to solid/square for unsupporting browsers, and I cannot tell you how much more enjoyable the whole process is.

    0
  36. 2347

    You forgot something that many developer and designers forget to factor in when considering page load times. The processing ability of the computer itself. Tools like pingdom and etc aren’t actually running the instructions included in javascript, css, etc files. they are just looking at the size of the file and (hopefully) scanning for links to new files. Actually implementing these instruction can slow a website down considerably and MUST be considered. I’ve seen css3 and JS animation that crashes older computers but looks fine on on the developers machine.

    Best practice (IMO) is to load the website or webpage in question on a slow older laptop with little processing power, like a great deal of your potential customer will be using, and then see how long it takes and if it causes performance problems. Remember, Mr. Joe OldPerson probably has other things running, more than one window open and there’s a good chance he has malware on his computer sucking up resources. If the web browser crashes on your website. He’s not going to contact you and complain. He just going to curse you under his breath and restart his ancient copy of IE and go somewhere else.
    You can say “it’s not my fault” till your blue in the face but that’s not going to make millions of Mr. OldPerson’s come back to your website.

    0
  37. 2398

    Did someone just say they are abandoning css for css3 with no thought for the people still using IE which doesn’t support CSS3? More power to them and more visits for my clients websites! You go dudes!

    0
  38. 2449

    I’m surprised you referenced that 2010 interview with Adam de Boor. Almost 2 years later, and Gmail still can’t even render to CSS1 standards :-/

    0
  39. 2500

    Good stuff, but I would only agree with this for desktop environments.
    Looking at the render/paint/load time for your CSS+images it’s 900ms and CSS3 only is 2.28 seconds. What does this tell you? computational burden is greater when it’s left to the device/browser to render this stuff – which in the end means battery drain. Take it from netflix (http://cdn-0.nflximg.com/us/presentations/htmltvui/html5devconf-2011-09-27/WebKit%20in%20Your%20Living%20Room.pdf)… a presentation which explains their philosophy “don’t do in software what can be handled by hardware” iow, Hardware can just paint images. CSS requires software to calculate, render and paint.

    0
  40. 2551

    Everyone here seems to be like “hurray CSS3″, I’m surprised.

    CSS3 makes rendering slow. I do prefer CSS3 when I don’t need it in a lot of places and the effects are simple, but using it for complex gradient backgrounds and shapes is nuts!

    I recommend always using images when possible, atleast with backgrounds. There’s background-size rule if you need adaptive design.

    The number of requests argument is bad. You should base64 encode images – no extra requests at all. While the initial load will be slower, it doesn’t matter much as the user won’t be redownloading everything with every new request (unless the webserver is badly configured). All in all, what I mean is that you need to be very careful and not overuse CSS3 features. Unless the design is minimalistic, the users will have a laggy experience.

    0

↑ Back to top