Currently, when I code I use:
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
But based on my tests, it didn't make any difference with any modern browser ( Chrome 33+, opera 25+, safari 8+). Internet Explorer 8 doesn't supports this property, but the vendor prefixes won't make any difference.
Is there any reason to keep them?
Use http://caniuse.com/#search=border-radius for checking such
Conclusion: No need for adding vendor prefixes for border-radius, as its supported in all major browsers (and IE9+). If you really need border-radius in IE8 check out: How to apply border radius in IE8 and below IE8 browsers?
But in 99% of cases border-radius is not crucial to a design. Employ the technique of graceful degradation and leave IE8 with square corners
You can also add PrefixFree to your page to cover you in a few more cases than just border-radius, as it will add these prefixes for you to be safer.
And for backwards compatibility using CSS3 with older versions of IE there is PIE (again not just for border-radius but others) and you can just add this where you need it:
behavior:url('pie.htc');
Related
This just came to my mind while adding a border radius to my <div>. Since the border-radius CSS property works fine in Mozilla, why do we need -moz-border-radius?
For older versions of Firefox, namely Firefox 3.6 and earlier.
There's a (brief) history of using vendor-specific prefixes like this that enable the code to be read more easily by earlier browsers. In the beginning of HTML5/CSS3 support, each browser handled elements differently, so border-radius would be like:
.rectangle {
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}
Nowadays, many modern browsers accept styling like 'border-radius' (for example, the latest Chrome, Safari, Firefox and IE9), so as minitech referred to earlier, these stylings are now used to support older versions of modern browsers.
I am trying to add CSS3 based rounded corner support in IE7 and IE8 on following page
Test URL: http://jaspreetkaur.com/postjoint
I have included modernizr library, but it's not working. Is there any code that i need add to make it working in IE?
As others have said, Modernizr won't make legacy browsers able to support CSS3. It only checks for support, plus other neat features, such as HTML5shiv, so that you can use HTML5 markup.
To enable CSS3 features in older browsers, you might try CSS3 Pie, but I find it some times creates more problems than it solves. I usually just don't let older browsers see all the fancy stuff, such as rounded corners. It's just a minor design feature, not critical to the overall functionality or layout.
http://css3pie.com/
Modernizr only check if the browser is ABLE to support certain features, it will not actually implement the features
1. IE8, IE7 do not support CSS3 rounder corners.
2. Mordernizr, is only a script, that enable HTML5 features across different browsers
CSS3 tag for rounder corner is
-webkit-border-radius: 5px; /* for safari */
-moz-border-raidus: 5px; /* for firefox < 4 */
border-radius: 5px; /* for all other that support it */
modernizr isn't made to do that really...
if you can, try this http://fetchak.com/ie-css3/
I've wondered this for a while. Why do different browsers only support the CSS border-radius property if it is prefixed with their own special prefix. I don't understand why I have to write this:
/* For Firefox and other Gecko browsers */
-moz-border-radius: 5px;
/* For Chrome/Safari and other Webkit browsers */
-webkit-border-radius: 5px;
/* For others */
border-radius: 5px;
When I could just write this:
border-radius: 5px;
Is there a reason that I'm required to write the prefixes? Why don't the browsers all just support the border-radius property? It just doesn't make sense to me, why browser developers decided to all have different properties that just make my life harder. Is there a technical or legal reason behind it?
The answer to this question is essentially the same given here:
Why there is -moz-XXX and -webkit-XXX in the CSS3?
That "namespacing" allows vendors to test new cool features, and if
they're great, they can be incorporated into the standards. This is
what is happening [here]: Mozilla and the Webkit team tried cool
things, and now they're going to become standard. It's just not done
yet.
Basically, life isn't perfect. Ideally yes, it should be standardized. It's an old issue dealing with the various large companies/groups that develop browsers. W3C tries to make standards, but in the end you can't force anyone.
Try reading more at this very relevant SO.programmers page - https://softwareengineering.stackexchange.com/questions/103048/why-is-it-unrealistic-to-expect-all-browsers-to-support-the-same-standards . And more regarding browsers/compatibility here,
Eventually they will all support the standard border-radius. I'm given to understand they do that when things are up in the air standards-wise, or for similar reasons.
(also, no need for -moz-border-radius, the normal cross-browser is now supported by Gecko. I believe it's the same for WebKit too, but I'm too lazy to check.)
Does IE have anything similar to what -moz-border-radius does in firefox/chrome?
Also is the -moz-border-radius supported by safari?
IE doesn't support the border radius CSS3 or custom implementations. Your best bet is to use something like jQuery and a rounded corners plug in (see below) to accomplish it.
http://plugins.jquery.com/project/corners
Here's a 2nd plug in that I use more often than the above:
http://www.methvin.com/jquery/jq-corner-demo.html
EDIT:
As for safari, yes it has a custom implementation like mozilla.
-moz-border-radius: 5px; /* mozilla */
-webkit-border-radius: 5px; /* safari */
I tried corners last week, and it was broken in a number of browsers, most notably IE8. I'd avoid if possible.
You should design your design so that it looks and works ok in IE, and if opened in one of the newer browsers little things like rounded corners would just make your site look that much better. Things like that will eventually cause users to move to newer browsers, when the experience is better in one and not the other.
I was looking at how some site implemented rounded corners, and the CSS had these odd tags that I've never really seen before.
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
I googled it, and they seem to be Firefox specific tags?
Update
The site I was looking at was twitter, it's wierd how a site like that would alienate their IE users.
The -moz-* properties are Gecko-only (Firefox, Mozilla, Camino), the -webkit-* properties are WebKit-only (Chrome, Safari, Epiphany). Vendor-specific prefixes are common for implementing CSS capabilities that have not yet been standardized by the W3C.
Twitter's not "alienating" their IE users. There's simply adding style for browsers that support it.
The -moz ones are firefox specific, the -webkit ones are for safari, chrome and a few other browsers that use that rendering engine.
These are early implementations of attributes that are defined in CSS3 so they will be coming in the future without the prefixes.
I suggest browsing the site from IE or some other browser. I bet you get different markup.
Those are for Firefox (the ones labeled -moz-border) and for Safari (-webkit-border).
Yes, anything with a -moz in front of it will only work in Firefox.
The -webkit ones will only work in webkit-based browsers like Safari, Chrome or Webkit.
See here for many ways to make rounded corners with just normal css tags.
Edit: I don't think that not having rounded corners is exactly alienating, just a slightly different look for IE.
Complete lists of all -moz and -webkit css styles if anyone wants to know