views:

1527

answers:

6

I just noticed that Stack Overflow employs Firefox only CSS to round the corners of the user badges on the front page. It's an interesting idea but what would be the pitfalls and advantages of using Firefox only CSS (aside from the blatantly obvious ones)?

-moz-border-radius:6px;
-webkit-border-radius:6px;

Above: The CSS used to round corners on the Stack Overflow front page.

A: 

Pitfalls are of course that it's not supported in other browsers and its not in the W3C specification.

The current implementation is bad (both in firefox and webkit) since they do not share the syntax.

Ólafur Waage
Border-radius is a W3C spec:http://www.w3.org/TR/css3-background/#the-border-radiuswhich came directly from these vendor-specific implementations.
Scott Reynen
+3  A: 

The advantages are that it's much easier than using corner images or other tricks. The obvious disadvantage is that your page doesn't render as intended on IE, which is still used by more than half the world's web users.

Overall it's situational; I imagine SO gets a higher than usual proportion of people using Firefox, so the IE issue is not as relevant. And rounded corners are a minor visual improvement, so if some people see it and some don't, it's not that big a deal.

DNS
The IE issue is always relevant, did you (firefox users) complain when people were using IE only functionality?
PintSizedCat
There's a significant difference between "can't even use the page" and "the corners on some boxes have an extra 3 pixels".
DNS
@PintSizedCat: IE's colored scrollbars?
Sam152
It always starts with something small. Plus, it's the principal of the thing.
PintSizedCat
I don't really see how "support a obsolete browser" is a principle thing. Sounds like hanging on to something that should have been buried a long time ago. IE6, that is.
Jukka Dahlbom
In any case, as I said, using non-standard CSS *is* a disadvantage, and it is relevant. It's just (probably) *less* relevant for SO than it would be for, say, msn.com.
DNS
This is kind of grey. IE8 and Opera are not "obsolete browsers" - border-radius is not an official recommendation yet. And text-decoration:blink is a standard, but you shouldn't use it, or IE's colored scrollbars, because they suck. Rounded corners, on the other hand, rock.
Jerph
+1  A: 

It works in Firefox and the Webkit-based browsers (notably Safari and Chrome). There are no alternatives for IE or Opera.

The main reason to use it is when you want to give rounded corners to elements that display on top of patterned or unpredictable backgrounds, which is not possible otherwise. Normal CSS and images can take care of other situations.

It's also ridiculously easy to implement and surely works for more than half the people on this site.

Jerph
+1  A: 
PintSizedCat
Feel free to download firefox source code, get the specifics tag out of there and release it as 'purefox'. Try that with Internet explorer ;-)
Roalt
+5  A: 

The main problem would be, as I see it, that your css wouldn't validate. Other than that I see no reason why not to use this type of platform specific features as they don't cause any harm to users whose browsers don't support the features.

BeefTurkey
+1 : stating what I wanted to more eloquently (with the validatity statement)
PintSizedCat
+2  A: 

I agree with BeefTurkey.

I might even go further and call it a case of Progressive Enhancement with CSS. To borrow liberally from Understanding Progressive Enhancement, I'd consider rounded corners to be part of the colorful candy coating around the chocolate-covered peanut.

And eventually CSS3 will be ratified and border-radius will be standardized. -moz, -webkit and -ms prefixed styles can be removed and replaced with their standard equivalents. Your CSS will validate and people using browsers that don't support CSS3 will still have a completely acceptable experience with people using browsers that do support CSS3 will get an enhanced experience.

Alternatively you could continue to use the proprietary CSS in addition to any standards to give an enhanced experience to an even larger audience. It would really depend on how much effort maintaining all that CSS requires and how important you feel the enhanced experience is to your audience.

Grant Wagner