Do you think it is bad to use a lot of CSS3 stuff on a page?

Question

I believe the below css is considered css3 if not then, it's not but my question still applies to the code below.

DO you think the code below would hurt a users performance/rendering time or anything if it was used for an example on 50 different images on a page?

add curves and shadows

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;

and stuff like this

uses RGB colors

 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);

Answer 1

To be on the safe side, don't rely on things that aren't widely supported.

Answer 2

I'd test it out to be sure - on as many systems as have available. Obviously IE will ignore all the border stuff, and Firefox (as of now) will not understand the shadows. (I think that's webkit only).

Also, if you're providing a 'Valid CSS' link you'll have to add a GET param to tell the validator to validate it as CSS3.

I can't remember if the vendor prefixes validate or not though.

UPDATE

I actually think the shadow stuff works as of Firefox 3.5

Answer 3

It depends on if you're relying on those features or not. The idea is that, where possible, the site should degrade gracefully on older browsers. Drop shadows under menu items are fine because if that isn't supported, there are no drop shadows. That's fine.

A good alternative for things like curved corners is to use a jQuery plug-in that'll simpply use the CSS3, Firefox or Webkit attributes if they're supported and if not it'll use Javascript. That way you get consistent appearance across browsers without having to go to the lowest common denominator or using Javascript for everything.

Answer 4

With regards to Jonathan Sampson's comment:

I would not say it is ever bad to use something that isn't widely supported, because we'd never progress into new technologies (as a society of developers) if everyone did that. However, its certainly risky and you have to expect that it will take you longer.

With that said, jasondavis is not complaining about his choice.

I personally don't think that's going to hurt performance on 50 images or so. Be sure that you aren't using it on n (unbounded) images on a page, though, and make sure you aren't using any costly Javascript operations that are going to cause those renderings to have to re-render many times in a row (such as certain animation or movement effects). And, of course, be sure to test in all the browsers you're targeting.

Answer 5

I use the curved corner things a lot but not so much that the page relies on them. It makes the site look a lot nicer for those people who use a modern browser.