Rounded corners in menu

[Edwin]

Cutting down on HTTP requests is more beneficial for a faster front end load performance from a user's perspective, it's better to go for one single HTTP request versus 4.

And even if you can use only one image, most of the time you are already using other .js files and those you can combine all together so in overall you don't have any HTTP requests at all to achieve rounded corners. :)

It's not the original video I once saw, but I think Steve Souders <-- Expert handles the same subject in this video as well.

[Otto]

Just out of curiosity, is a 188kb (zipped) JavaScript solution better than a single graphic image (or perhaps four tiny graphic images)?

I can't speak emperically, but I would think that the http requests for the image(s) would require far less resources (and, thus, would be far faster) than an almost 200kb JavaScript.

(But if I'm wrong, plenty of far-more-expert folks here will correct me! )

Most of that is demos and docs and such. The compressed CurvyCorners javascript is only 28KB. That goes down to 8 KB if you gzip it.

Still, it's gotten to the point where I'd just use border-radius and be done with it. You don't have to add specific support for every single web browser out there. And IE is so niche that I wouldn't even worry about minor things like rounded corners on it.

Code to standards, not to browsers. Only add specific browser hacks when it's absolutely necessary, I say.

[Ryan]

I'd still use prefixes at the moment as there's bound to be a lot of people who haven't upgraded yet.

IE is far from a dead browser, and they're just not supporting border-radius because it still isn't a standard yet.

If you are creating a site for your own purposes then by all means cut out 50% of your users from having pleasant looking rounded corners, but if you want to present a professional looking site to the majority of your site visitors or for a client then definitely go with images.

You also have very little control with border-radius and will need to use graphical images most of the time anyway.

Arguments about http requests are usually irrelevant since the chances are that you'll have another image on the page you can make use of anyway.

[Otto]

You also have very little control with border-radius and will need to use graphical images most of the time anyway.

Huh? Border radius gives quite a lot of control, I thought.

Use of the vendor specific prefix is not recommended, because of some slightly unpredictable results in more recent browsers.

Table of compliance: http://muddledramblings.com/table-of...ius-compliance

[Edwin]

If you are creating a site for your own purposes then by all means cut out 50% of your users from having pleasant looking rounded corners, but if you want to present a professional looking site to the majority of your site visitors or for a client then definitely go with images.

How so? — Curvy Corners works with every browser.

Yes! CurvyCorners only does its magic on browsers that don't have CSS3 border-radius support, namely IE and Opera.

Unless there are certain graphic effects going on, there is no reason to not use it right? :)

For plain color rounded corners I feel this is the ideal solution to get the job done.

[Ryan]

How so? — Curvy Corners works with every browser.

I was referring to border-radius.

Curvy Corners is worse IMO as it requires JavaScript for styling.

Use of the vendor specific prefix is not recommended, because of some slightly unpredictable results in more recent browsers.

I've never heard of that before. Are you sure you aren't confused with how newer browsers aren't implementing new border-radius features for the prefix'd CSS?

[Brad]

http://www.dillerdesign.com/experiment/DD_roundies/

DD_roundies
Uncompressed ~17Kb
Compressed ~9Kb

[Otto]

I've never heard of that before. Are you sure you aren't confused with how newer browsers aren't implementing new border-radius features for the prefix'd CSS?

No, the difference is one of syntax, I believe. Some of the more unusual notations like how percentages are handled and use of slash marks is different on some browsers than others, when you use the prefixed rules.

[Ryan]

Hmm, thanks for heads up on that.

I rarely use CSS3 rounded corners, but that's likely to change in the future so good to know about that.

[thewpguy]

Rounded corners without images helps you cut down on the HTTP requests making your site load faster, I use curvy corners for rounded corners.

It's cross browser compatible and easy to use.

Thanks for the tip Edwin 'curvy corners' sounds like a great new tools to have in my 'WordPress toolbox' for these situations.

Much appreciation all of the other input also so far on the subject.