Stop using -webkit-border-radius

We web-designers are a weird bunch sometimes. Especially regarding the support of browsers we tend to be a bit unbalanced. While we often have a hard time to even keep the latest version of IE in mind we love to still use some archaic vendor-prefixes. How many times have I come across a website that even nowadys uses the -khtml prefix. But I think the most common one is -webkit-border-radius. You clearly target Safari with this specification, although version 5 is already in circulation for almost a whole year. So with -webkit-border-radius you support a browser, namely Safari 4, that virtually nobody uses anymore. But at the same time some “web-designers” refuse to fully support older versions of Internet Explorer, which are still used by a double digits percentage.

Dont’t get me wrong, I dislike them as much as you do, but sometimes we have to stop our wishful thinking and look at the facts. I don’t want to promote that a website IE6 should look that same as in Chrome, but it should remain basically usable. Sure, CSS3 is the way to go, I love it, but there are many people out that have no other chance than to live in the past. Let’s not forget about them. And stop to use -webkit-border-radius.

http://www.twitter.com/LeonardPeris Leonard Peris

But iOS requires -webkit prefix as do android browsers.

http://www.css3files.com Christian Krammer

That’s a fair point, but the latest Mobile Safari versions also support border-radius without the vendor prefix.

I just tried it out, border-radius (without prefix) works both on my Android 2.1 phone and my iPad 2. So in my eyes there is no reason to still use the prefixed version.

http://www.delosgaia.nl arachnid

You are right. Once there was a day that webdesigners didn’t like IE specific vendor-prefixes. Today 50% of webbased-coding is vendor prefixes which is always a burden by downloading the pages. Stop with this noncense and go back to the W3C standard

http://www.abeautifulsite.net/ Cory LaViska

Designers didn’t like IE-specific prefixes because they were limited to nonstandard, proprietary features. The use of vendor prefixes nowadays is mostly intended for forthcoming standards and are almost always accompanied by the W3C version as well (i.e. border-radius in addition to -webkit-border-radius). This makes your site “future ready” by giving you the option to use cutting edge features with the comfort of knowing that they will still work once the standard is finalized and implemented universally. As support grows for each feature, the prefixed version is simply ignored but the appearance remains the same.

What you’re seeing now is the result of this “future proofing”. Over the last few years, using just ‘border-radius’ without a prefix was unheard of. Now that support has improved, designers will being using less and less of them.

The fact that you still notice them out there is actually a good thing. It means that vendor-specific features were actually adhering to the standards, otherwise designers would have had to update their sites as support for each feature improved.

Don’t get me wrong, I can’t stand coding the same style five times for a rounded corner or a box shadow, but there are some CSS3 properties that still need to gain better support before they can be omitted entirely.

http://www.css3files.com Christian Krammer

You are so right. Writing all the prefixes is a real pain – but unfortunately a required pain. At least to a specific point. I think we exxagerate in some cases. Webkit’s old gradient syntax is also such an thing we can omit without a doubt.
Bryan

One problem is it’s hard to remember what versions of which browser supported which parts of CSS. So it’s easier to throw in a -webkit or -moz to be “safe”. For example, Firefox didn’t support it until the recently-released version 4 I believe. Thankfully all the new versions of the major browsers seem to support just “border-radius”, so maybe now I can leave out those vendor prefixes.

By the way, did you mean “stop using”? “Stop to use” to me has a meaning more like “stop, in order to use…”.
http://www.css3files.com Christian Krammer

Yeah, “stop using” might be the right term. I really struggled to decide which wording to use.

About border-radius: Of course I was really bold to suggest to abandon -webkit-border-radius and, at least at the moment, it might be the better choice to keep it. But I wanted show that we always have to question our habits, think if they are still up-to-date. And especially in comparison with the “IE problem” this one is really a minor one.
http://blog.oxiane.com alain

Yeah, very right, but it’s sometimes not easy to keep in touch with the actual diffusion of the browsers fragmentation
Actually, I consider most of the times that browsers like webkit and firefox are ‘up-to-date”, that the old versions of them are quite irrelevant … but that’s a choice !
My own concern it to keep the CC files as short as possible, so, if I can avoid the multiple rules declaration, that’s my job to keep updated

Excellent website by the way !

http://www.css3files.com Christian Krammer

Yeah, that’s also my sight on things. At Firefox it’s just like at IE: There are people that always use the latest version. And there are others, that don’t care about that. So why should we care about the ones that are too lazy (and in the case of Firefox it surely is laziness by a big part) to update? Whereby things are a little bit different (and difficult) at IE. There many people that have the chance to update.

SourceReader

Well… maybe people should stop using -webkit-border-radius, but you should start doing what you say other people should do. (I just had a look at css3files.com’s stylesheet and guess what I found ?)

http://www.css3files.com Christian Krammer

Busted! And guilty. Besides that, I only wanted to give food for thought, not more, not less. So please be indulgent with me.
SourceReader

Well, your objective is met I guess: after having read this post I reviewed the CSS of my own site and decided to clean it by removing all hacks and browser specific attributes related to firefox < 4, safari < 5 (other hacks for ie, opera were removed long ago… )

http://www.css3files.com Christian Krammer

Great! I will also remove all of this at the redesign of CSS3files.com which won’t take too long to be launched.
http://www.webdesign-ieftin.com designarti

I love this design, Christian! Its just great. Please save it some other place, for us to see it at all times

http://www.css3files.com Christian Krammer

I am really glad that you like it. But unfortunately I can’t get rid of the feeling that it’s too complicated for a “teaching” website like CSS3files.com.

Fredrik Liden

Hi Christian, I’m trying to read up a little on the new css3 tags and I really like this design as well, nice job! Looking at the css I noticed that the orange button has the 5 prefixes for gradients. What’s the status of this effect? Are all of these necessary? or can we leave out any of these along with -webkit-border-radius?
Fredrik Liden

Oops, scratch that, I just noticed the Gradients section in the menu above . Awesome!
Herb

I think your assessment that “virtually no-one uses Safari 4″ anymore, a good 8 months after publishing this, is just patently wrong. My logs show 7% of Safari visitors are still running 4. If you want to alienate 7% of your readers, that’s a personal decision. But in the real world you have to consider that not everyone updates their computer every time it’s available. When the number falls under 2% perhaps you can shake it off.

There’s a difference between avoiding Divs because a couple of people may be running IE4, and “assuming” that everyone is the same as you.

http://www.css3files.com Christian Krammer

So you also support IE6? The logs of the website of my employer show that about 1 % of our users still rely on this archaic browser, which conforms to about 14.000 pageviews a day. But nevertheless we decided recently to not support IE6 anymore and abandon these potential views.
One day or other it’s time to let go. You can’t please everybody and Safari 4 is – just like IE6 and IE7 – an outdated browser.
Brian

“My logs show 7% of Safari visitors are still running 4. If you want to alienate 7% of your readers, that’s a personal decision.”

And what percent of your users use Safari? 7% of Safari Visitors != 7% of all Visitors.

If your percent of overall users that use Safari is under 28%, then you’ve already crossed the “2% of users” line for Safari 4. Nearly every site I’ve managed or maintained has less than 15% of users on Safari – the exception being a software company whose primary market is graphic designers. They get 35% Safari.

http://www.turshija.com Turshija

Chrome 0.16 on Android 4.0+ doesn’t support -webkit prefix anymore, you need to have to border-radius
David Quinn Carder

The latest version of Safari still does not render border-radius correctly in some situations, so being able to target Safari specifically to remove border-radius on certain elements/corners for Safari is one example of how vendor prefixes can be utilized.

Eeek… please delete the above, moderator. I forgot that webkit targets Chrome too. Grrr…
random googler

Sorry, but going to effort to get people to drop harmless backwards-compatibility is a waste of time.
http://profiles.google.com/joshuajmark Joshua Mark

It looks like mobile safari doesn’t support any border radius for images. Instead you have to make it a background image and apply the style to the div. I’m all for getting rid of browser specific crap but does anyone have a fix for this?
Juan Manuel Villegas

You started saying we should stop supporting old browsers, then you added this line “but there are many people out that have no other chance than to live in the past” and finally, suggested to stop using webkit. Thats contradictory at least heh