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).
Related
My colleague and I are having a tough time deciding on a best practices approach for ie6, ie7 support for a site we're building. The site is for an older crowd, so not supporting these browsers is out of the question.
At the same time, we're trying to start incorporating modern coding practices into our work so we can get practice and fully understand capabilities. A specific area I want to touch on with you guys is handling fall backs for CSS3 backgrounds.
We have 2 choices here, if we're to use CSS3 backgrounds and not add extraneous wrapping tags for backgrounds:
Use :after, :before etc. pseudo elements for adding multiple backgrounds to elements. (this is the choice we've made for now)
Use CSS3 multiple background specifications
This produces more elegant markup and is certainly a step in the right direction. But what about browsers that don't support these features?
Modernizr.js tells us to check for specific support and then write fallbacks:
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
However, we're not given much guidance on the actual fallbacks for specific features. So, in the case of something like CSS3 backgrounds, what would be an effective fallback strategy?
Would we (for example) use jQuery to wrap those extra tags we need (ie btn-container, nav-container, etc.) around nav items, buttons and containers in order to have extra elements to add style attributes to?
About the CSS3 multiple backgounds and/or background gradients I think there is an approach better than those you proposed: CSS3 Pie.
This way you will be able to use all those nice effects also in IE6, 7 and 8 (including also border-radious) without any JavaScript intervention.
1. Fail gracefully. Certain complex elements can be hidden with CSS and revealed upon page-load with JavaScript depending on the browser as one example.
2. Conditional style-sheets or JavaScript fixes. Spend a lot of time fixing each problem in each browser and write a style-sheet just for it. Also, you could try various JavaScripts that claim to bring older browsers into compliance. I've tried this JavaScript but it seemed to conflict with jQuery. CSS Pie is another option to bring rounded corners to older browsers.
3. Ignore older browsers. Do nothing special for older browsers. People on IE6/7 already see the world differently than everyone else. Alternatively, do nothing special for older browsers but actively avoid overly complex functions & features. Optionally, you can add a nifty "upgrade notification" message with little effort.
Would we (for example) use jQuery to wrap those extra tags we need (ie btn-container, nav-container, etc.) around nav items, buttons and containers in order to have extra elements to add style attributes to?
That is certainly one valid fallback approach. Depending on the design and the elements in question, though, you might find that simply supplying the primary background is enough to yield a decent-looking and perfectly functional, though not visually identical, component.
"Supporting" older browsers shouldn't always mean "taking great pains/writing tons of extra code to insure a near visual match." It is difficult but not impossible to ramp up a QA team so that they understand the concept of Progressive Enhancement as it can be applied to aspects of pure visual presentation.
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).
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.
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.