There is a huge use of rounded corners in web design, and as far as i'm aware this issue has been addressed in CSS3 so as to avoid having to hack around with images for curved corners etc.
However, by using built in rounded corner capabilities of CSS3 - will this affect the display of the site cross browser?
As with any other feature you need to weigh the following factors:
The chances that the specification will change (given that it has not reached Recommendation status)
The level of support for the feature in the browsers your visitors are using
The severity of the consequences of that feature not being available for some users
A feature that makes pages look a little bit prettier is a smaller loss than a feature which lets users submit payment information (for example).
CSS3 is not a standard. It is not universally adopted. I strongly recommend not using it, at least not yet.
Even more important... do you absolutely need rounded corners? Will consumers not buy your products because the corners are not round? Rounded corners cost significantly more than any value they could possibly be worth.
The browsers that don't support CSS3 will show sharp corners.
In general, it may not be a good idea to use those CSS options that are not supported by the vast majority of the browsers currently in use.
Alternatively you can use vendor-specific extensions along with the CSS3 styles. This will cover a good portion of browsers out there.
border-radius: 2em;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
It will depend on the browsers that support it. I'd advice not using it until the major browsers can handle it correctly. An overview of which browser can handle which CSS3 properties can be found on http://www.quirksmode.com/
An easy way to have easy, almost-cross-browser rounded corners, is to use a jQuery plugin called (yes you guessed it) rounded corners. You can find it at
http://plugins.jquery.com/project/corners
Last time I checked it said it supported IE6, but it didn't.
Related
There is, what I think is one of the best uses of CSS over images (the calendar icon) located at: http://chat.meta.stackoverflow.com/chats/transcripts/139?offset=120
But it doesn't work in IE8. Is it possible to convert this to work with IE?
I suppose we could use this jQuery code at: http://www.methvin.com/jquery/jq-corner-demo.html
I guess to summarize, there's no equivalent in IE of the -moz-border-radius property, eh?
You could look into PIE, it claims to bring CSS3 to the IEs:
CSS Level 3 brings with it some
incredibly powerful styling features.
Rounded corners, soft drop shadows,
gradient fills, and so on. These are
the kinds of elements our designer
friends love to use because they make
for attractive sites, but are
difficult and time-consuming to
implement, involving complex sprite
images, extra non-semantic markup,
large JavaScript libraries, and other
lovely hacks.
CSS3 promises to do away with all
that! But as we all know, due to
Internet Explorer’s lack of support
for any of these features, we must
be patient and refrain from using
them, and make do with the same old
tedious techniques for the foreseeable
future.
Or must we?
I'm looking at using it when it's time for my impending IE bugfix marathon.
Microsoft provides a list of links for Rounded Corners Solutions. The links includes great solutions for ie (not so great as border-radius of css3). I am sure you will find something for your needs.
There are some eye-candy experimental CSS like border-radius (rounded corners) and gradients that I wish to use on my page. Unfortunately Internet Explorer does not support any of that yet. At least border-radius is coming on IE9, no word on gradients yet.
So would you recommend just leaving IE alone (most of my users will be on FF or Chrome anyways) or use images to "fix" the presentation for IE? Is it even worth it? Because I know that not only is a pain in the behind but might also break styling on other browsers.
So, to hack or not to hack?
Although this question is a bit subjective, my answer would be not to hack. CSS3 was made to be backwards compatible, and that means it will degrade gracefully if a browser doesn't support it. That for me is the way it should be. I mean, why use CSS3 if you're still planning to hack it anyway? In that case just use the plain old CSS2 tricks like javascript rounded corners or images so you do't have to hack per se.
Terminology quibble: using images to imitate CSS3 features in IE isn’t really hacking. Any visual effect that isn’t directly supported in CSS will need to be implemented in images.
But to answer your question, it depends:
If few enough of your audience use IE, then you can ignore it. Figuring out how few is few enough is up to you/the site owners.
If not:
If the border-radius effects aren’t a key part of the site’s branding, then I’d suggest you just let IE ignore them and use square corners. No-one browses the web with two browsers simultaneously, and no-one cares if your site looks a little bit different in IE 6, as long as the buttons are in the same place and everything works.
If they are a key part of the site’s branding, or your client insists on the site looking the same in IE 6, then you’ve got to achieve the look in IE 6. So, either:
use border-radius, and use conditional comments to include a stylesheet for IE 8 and below with code to imitate the features
don’t bother with border-radius — use the code that works in IE for all browsers. This will avoid you having to maintain two sets of code, but it will mean that all browsers have to download the images you’re using for IE, thus making them perform slightly less well.
I don't think its ever a choice between 'hacking' and not implementing it at all across all browsers, and I'm surprised nobody has mentioned one of the real life-saving 'feature' (I won't consider it a hack, since it is a brilliant method for backward compatibility): Conditional Comments
Not only does it help with annoying IE bugs, it also allows you to define less desirable, but still 100% valid methods for getting certain effects to work, like image gradients with repeat-y instead of CSS3 gradients, or tiled semi-transparent pngs for IE7 and 8. Really, if you want to, IE shouldn't be the one single factor that will limit your ability to experiment with CSS3.
if you do not want images, IE hacks or a seperate stylesheet you could always check out CSS3Pie: http://css3pie.com/. It's not perfect, especially not when you want some gradients & shadows but it can deal with rounded corners pretty easily. There are similar IE behaviors out there but I think this one has the most active development at the moment.
There are hacks and then there are hacks. I interpret a "hack" as being something that exploits a flaw in the browser, such as the descendant selector hack in IE (using >). Those types of things break when the browser is updated.
I don't consider using images to create nice drop shadows or gradients to be a hack. It may not satisfy the requirements that you are doing everything semantically, and you may feel queasy about resorting to using an image for something that an image should not be required for, but the reality is that there's simply no choice - no way to do everything the clean, no-images way - if you want pretty gradients and shadows on the majority of people's browsers (Internet Explorer being that majority).
If you consider the rounded borders or gradients to be just optional eye-candy then by all means don't worry about IE. But if you consider that it actually does make your design look good and you don't want the majority of your users* to miss out, then go for it.
*Depending on your audience, IE may or may not make up a majority of your audience I guess.
That really depends on how important those features are to the look and feel of the site, or rather how important the client and design team feel they are. Additionally its a quation of how much is this going to bloat your markup and CSS - ie. depending on how the effects need to be built in the context of the design how much of a hassle is it going to be?
Normally in this case im in favor of progressive enhancment, ie. come up with something suitable but it doesnt need to be a 1-to-1 to the composite art. Again though, this is a decision you as a developer will ever really be in a position to make on your own (well, unless youre also the designer).
I am in the process of dicing and slicing a psd layout from a designer. The design is based on the 960 grid system and consists of multiple boxes (a 960px box for the top menu, 2 460px boxes for the 2 content areas, a 220pixel and a 720 pixel for another content setup option etc). All these boxes are based on a solid background color (body) but they all have rounded corners and a aprox border of 10pixel all the way around which are gradient.
I am contemplating on what would be the best route to take here, html wise, while keeping in mind that it should ofcourse validate, nice semantics etc.
Any ideas/input?
I am contemplating on what would be the best route to take here, html wise, while keeping in mind that it should ofcourse validate, nice semantics etc.
The best route to take here would be using pure CSS3 to add the rounded corners and gradients.
Benefits:
No additional, semantically meaningless, crappy markup required
No images required
Easy to implement and maintain
Ability to degrade gracefully for older browsers that don’t support CSS3
Downsides:
Doesn’t work in every browser yet
It’s really up to you.
If you want your site to look exactly the same in every browser, CSS3 is not an option — you’ll have to rely on hard-to-maintain images and bloated markup.
However, if you don’t mind giving users of older browsers a slightly different but still nice design, CSS3 definitely is the way to go.
‘CSS3’ gradients:
http://webkit.org/blog/175/introducing-css-gradients/
https://developer.mozilla.org/en/CSS/-moz-linear-gradient
https://developer.mozilla.org/en/CSS/-moz-radial-gradient
CSS3 rounded corners:
http://www.css3.info/preview/rounded-border/
This ain't going to work flawlessly in all webbrowsers from IE6 and up with only CSS. You'll need to grab JavaScript to get it to work in all browsers. There are jQuery plugins which can round corners on the fly, working on all webbrowsers, without any additional images or CSS. I've had good experiences with this jQuery Corner plugin.
I recommend trying javascript library DD_roundies (http://www.dillerdesign.com/experiment/DD_roundies/). Most browsers already support rounded corners as specified in CSS3, and DD_roundies adds the support also for browsers that don't (like IE).
With lots of talk and bickering among developers about how IE breaks standards, is it worth supporting mozilla and webkit CSS?
Examples
-moz-border-radius
-webkit-border-radius
Of course there are many more, but I just want to know everyone's thoughts.
Thanks
For IE, we were (are?) using proprietary features in order to eliminate rendering bugs. At least, in the case of FF and WebKit, we're using them to improve the design. It's progressive enhancement in this case. No one suffers if they have no border-radius feature, but we as developers get more satisfaction for using some CSS3 features. Our designs are more pleasing and W3C gets the feedback it needs in order to improve and then approve the CSS3 draft.
Rounded corners are proposed in the W3C CSS3 working draft. The proprietary extensions in Gecko and WebKit are already likely to conform to the working draft.
Given that rounded corners are purely aesthetic, there's no disadvantage to users with browsers who do not support rounded corners.
When the standard becomes final, it's a simple matter of replacing these proprietary rules with the standardised ones.
If you define -moz-border-radius and -webkit-border-radius, make sure and define -khtml-border-radius (Konqueror), -opera-border-radius, and plain old border-radius as well (for future-proofing purposes).
We tend to use the proprietary methods followed by the CSS3 spec version for when the method becomes more widley supported.
http://www.w3.org/TR/css3-background/#the-border-radius
If necessary (which isn't often) we use JQuery + IE conditional tags to render the same for IE.
http://malsup.com/jquery/corner/
http://www.quirksmode.org/css/condcom.html
It really all depends on your target audience, we wouldn't generally use unsupported CSS on a public facing site as 89% of our users are still using IE 6/7 so it would be useless to most of them.
We currently use it on a few admin systems and some internal systems; mostly to give the design team exposure to the new techniques.
Consider your target audience, browser specs based on analytic's and how necessary it really is first.
I'd support both, IE still has a big chunk of the user space, with Firefox and others (opera, safari etc..) occupying a smaller percentage of the browser market.
using mozilla only stuff might be ok if you can control what your clients are using, by recommending it in some way (if you're writing a web app. with a fixed user base) and even then someone will still insist on using IE.
I know its a pain in the backside supporting both, but I don't think web developers have much choice in the matter :(
In the case of border-radius, I'd say use the Mozilla/Webkit syntax if you don't mind IE/Opera users having squared corners.
If you need everyone to see the same thing, it's best to stick with the old techniques for now. Similarly, any non-universal CSS (say, using #font-face to download a custom symbol font) which is going to break the site for some people should stay out.
There's no harm in implementing CSS3 features so long as they degrade gracefully. So long as rounded corners, or what have you, aren't critical to your layout there's no harm having them there for the people who are running bleeding edge web browsers.
I know from personal experience that having those properties(specifically the corner radius ones) are very much a time-saver. Now of course it would be nice if css would just implement it into itself but right now I think that those properties are very helpful. I see no reason why we shouldn't support them. Mozilla's and Safari/Chrome's engines are just trying to make life a little easier.
I don't think this is a good practice. However you'd like that the site you're working on appears the same on every browser. That's why that's not a solution. It's not professional to have different layouts on different browser.
But if you don't care about that, or your application is based on only that browser - so it's completely fine!
I just noticed that Stack Overflow employs Firefox only CSS to round the corners of the user badges on the front page. It's an interesting idea but what would be the pitfalls and advantages of using Firefox only CSS (aside from the blatantly obvious ones)?
-moz-border-radius:6px;
-webkit-border-radius:6px;
Above: The CSS used to round corners on the Stack Overflow front page.
The main problem would be, as I see it, that your css wouldn't validate. Other than that I see no reason why not to use this type of platform specific features as they don't cause any harm to users whose browsers don't support the features.
The advantages are that it's much easier than using corner images or other tricks. The obvious disadvantage is that your page doesn't render as intended on IE, which is still used by more than half the world's web users.
Overall it's situational; I imagine SO gets a higher than usual proportion of people using Firefox, so the IE issue is not as relevant. And rounded corners are a minor visual improvement, so if some people see it and some don't, it's not that big a deal.
I agree with BeefTurkey.
I might even go further and call it a case of Progressive Enhancement with CSS. To borrow liberally from Understanding Progressive Enhancement, I'd consider rounded corners to be part of the colorful candy coating around the chocolate-covered peanut.
And eventually CSS3 will be ratified and border-radius will be standardized. -moz, -webkit and -ms prefixed styles can be removed and replaced with their standard equivalents. Your CSS will validate and people using browsers that don't support CSS3 will still have a completely acceptable experience with people using browsers that do support CSS3 will get an enhanced experience.
Alternatively you could continue to use the proprietary CSS in addition to any standards to give an enhanced experience to an even larger audience. It would really depend on how much effort maintaining all that CSS requires and how important you feel the enhanced experience is to your audience.
It works in Firefox and the Webkit-based browsers (notably Safari and Chrome). There are no alternatives for IE or Opera.
The main reason to use it is when you want to give rounded corners to elements that display on top of patterned or unpredictable backgrounds, which is not possible otherwise. Normal CSS and images can take care of other situations.
It's also ridiculously easy to implement and surely works for more than half the people on this site.
Pitfalls are of course that it's not supported in other browsers and its not in the W3C specification.
The current implementation is bad (both in firefox and webkit) since they do not share the syntax.