This is more of a “Whats your proffered approach” thread rather than a help thread.
I’ve been a developer for years and to create rounded corners for my sites I usually use CSS. As most are aware, if you are creating scalable corners you need to include un-semantic markup in your pages.
I’ve just finished a site where the client wanted rounded corners. But this time I used a jQuery plugin to create them. I found it much easier and my markup isnt bloated with junk un-semantic elements.
What javascript plugin is the best for rounded corners as I want to move away from using CSS, it’s taking too much time building it custom for every style. Nifty Corners I’ve come accross before but any others?
Your best bet would be CSS, because with jQuery/javascript the rounded corners would not show if the visitor has javascript disabled
As someone who surfs with JS off, I don’t see why this would be a problem. So I see square corners. Big whoop. : )
I’ve been a developer for years and to create rounded corners for my sites I usually use CSS. As most are aware, if you are creating scalable corners you need to include un-semantic markup in your pages.
If it’s empty markup, then you don’t have to worry about semantics: they don’t mean anything in empty tags either way. But, yeah, you do still have the bloat of empty tags used as sandbags.
Lately, I’ve been using CSS3 with -moz, -webkit and plain old border-radius (for Opera 10.52+) because then it is just CSS. I’m not loading some JS script JUST for rounded corners (if you’re already running scripts for other stuff, though, then this wouldn’t necessarily be a consideration). I don’t care that users of older browsers or all IE users get square corners, because it’s just decoration anyway.
CSS3 would not be an option if I had a client or boss demand that all browsers showed the corners. If that was the case, I’d use something like Eric Watson’s technique with the empty elements and a single circle to use for all the corners (works if the corners can be at that angle). I still don’t think I’d bother with Javascript, but I’m not using any libraries anyway. If it’s a single line of Javascript code with a library that you’re already using, why not? Though as Ulyses points out, it is using JS for presentation instead of behaviour… that wouldn’t bother me too much in this case where old CSS can’t handle the presentation alone though.
all you’d have to remove is the webkit and moz references on your class. Not too much to remove. JS should have to remove the script reference/plugin and the css.
I’ve used both techniques but have been using the CSS3 to keep a step ahead. It still degrades gracefully in IE.
Depends on what the client wants and how much he pays. If the budget allows for it, progressive enhancement is always great. CSS3 is a quick solution that looks great in newer browsers and older ones will have to do without. Javascript has wider support but it also takes more performance and I don’t like to adjust presentation with JS.
I agree with the CSS3 rounded corners. But, at the moment I think more people would have Javascript than a browser that is aware of border-radius. Can’t wait for CSS3 to be fully adopted.
Totally understand what you are saying there, but that was the age old argument back when a large percentage of users had Javascript disabled.
In 2010 the majority of users on the Internet have Facebook accounts. As you are probably aware Facebook does not work without Javascript (apart from mobile users).
A lot of the Web 2.0 sites now use Ajax and other Javascript goodness to enhance sites. The site I developed looks fine without the rounded corners. It’s only an enhancement for those with Javascript. Those without are most likely on mobile devices or devices to aid browsing for the disabled, where square corners will look fine.
I personally think it’s time to move out of the “what about users without Javascript” phase. I am not saying everyone to stop caring about those users, of course Javascript should only be used to enhance the user experience.
I personally favor the Javascript approach for rounded corners simply because I do not want to clutter my markup with un-semantic markup. I’ve done it bother ways, and used the CSS approach for years.
I was referring to CSS3, CSS lt 3 was not even an option for round corners for me. I’ve tried different forms: closing doors, wrapping, but never was satisfied. To create a realistic effect, with irregular margins and shadows, and rounded corners, that also scales well, it’s too much trouble, and the work it’s not paid, but admired. And becomes obsolete real quick. Never really HAD to do it “the wrong way”, always find a way around it. Clean design is more elegant.
Round corners are not so much a trend, I guess they are going to be asked, more or less. A good solution is CSS3 with it’s multiple backgrounds, in case you’re not satisfied with it’s native solution. JS is the solution 'till CSS3 becomes wide spread. After that you need to clean up JS code, your’s or other’s, and get back to separating content, presentation and behaviour.
In the end it’s best to keep layers separate (as much as you can) and offer progressive enhancement (as much as your client let’s you).
True. In the long run you’ll have to pay though, for using JS. When “upgrading to new standard tech and cleaning up old mess” time comes. Sometimes, not even your own mess, to begin with.
That’s why progressive enhancement sounds good to me. But it can’t always be a choice you can make. We sometimes are forced by the immediate results needed.
