So I've recently been modifying ECC's theme, and I found that if I used border-radius instead of -moz-border-radius and -webkit-border-radius, I could achieve CSS rounding in Opera and IE9 as well as the other browsers.
Since I've been coming across a lot of themes that use that browser-specific method instead of just border-radius, I'm curious as to why this is occurring. Why do you have to use two lines of code to achieve what one line can do?
It's like you've got some conspiracy against Opera, though with IE I would understand
-border-radius:
-moz-border-radius:
-webkit-border-radius:
-khtml-border-radius:
Is what I use, works for every browser that supports rounded corners.
(2011-06-24, 10:15 AM)Jordan Lovelle Wrote: [ -> ]-border-radius:
-moz-border-radius:
-webkit-border-radius:
-khtml-border-radius:
Is what I use, works for every browser that supports rounded corners.
Yes, but I found I could do away with all of them and just use border-radius to achieve the same effect.
Some browsers like Firefox, Safari or variants prefix CSS attributes that aren't finalized yet by the W3C because the specifications of that attribute can change over time. Once a CSS attribute is accepted into the W3C official CSS specifications most browser implement the non-prefixed attribute as well. Some browsers feel confident enough to implement the non-prefixed attribute but if the official W3C specifications aren't final and can change over time, they will have to change the rendering engine accordingly and it will break websites using the old specifications.
Hm. That's handy, just tested and it works on Chrome and IE, so I assume it works on the rest. Thanks for the share
I always use the following (and the snippet should explain why):
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-radius: 5px 5px 3px 3px;
border-radius: 5px 5px 3px 3px;
As you can see, both the -webkit prefixed version and the plain version support multiple roundings in one. Mozilla still requires 4 separate rules though.
Firefox introduced the border-radius property into version 4.
Quote:-moz-border-radius is renamed to border-radius. -moz-border-radius is supported as an alias for a transitional period (at least until the next version of Gecko).
If they introduced it, it's pretty safe to rely solely on border-radius. Only write -moz, -o or -webkit if you plan to support legacy browsers I guess.
(2011-06-24, 10:22 AM)Aries-Belgium Wrote: [ -> ]Some browsers like Firefox, Safari or variants prefix CSS attributes that aren't finalized yet by the W3C because the specifications of that attribute can change over time. Once a CSS attribute is accepted into the W3C official CSS specifications most browser implement the non-prefixed attribute as well. Some browsers feel confident enough to implement the non-prefixed attribute but if the official W3C specifications aren't final and can change over time, they will have to change the rendering engine accordingly and it will break websites using the old specifications.
True, but it seems widespread enough that even Opera and IE support it, so I suspect it will stay when the specs are final
(2011-06-24, 10:22 AM)Jordan Lovelle Wrote: [ -> ]Hm. That's handy, just tested and it works on Chrome and IE, so I assume it works on the rest. Thanks for the share
You're welcome
I'm a bit happy I noticed this as it saves me some time while I edit the theme a bit.
(2011-06-24, 10:28 AM)euantor Wrote: [ -> ]I always use the following (and the snippet should explain why):
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-radius: 5px 5px 3px 3px;
border-radius: 5px 5px 3px 3px;
As you can see, both the -webkit prefixed version and the plain version support multiple roundings in one. Mozilla still requires 4 separate rules though.
Actually I've found that you can use that multiple roundings method in the moz one too. The theme I'm editing uses it a lot.
Really? Guess I should stop relying on the old methods xD
Border-Radius: is an HTML5 function is it not? Maybe it's HTML4...anyhow only a few browsers actually support it. Safari 5 is one of them, Not 100% if the new Google Chrome for Mac does but the Windows Chrome does support it. IE9 Supports it and FF5 does as well (I think) but if you want a more wider audience then you have to use the -webkit and -moz because of the older browsers (Safari 4, Chrome Betas, FF4, etc etc)
For me I usually have something like this:
-webkit-border-radius:
-moz-border-radius:
border-radius:
Someone else in this thread mentioned that there is khtml-border-radius: I don't remember which browser that is for but that's a good one to put in there. Also -o-border-radius is a good one because that handles older versions of Opera.