Search

We’re Ready for CSS3, but are we Ready for CSS3?

Posted: February 08, 2010 Comments(63)

We’re all smitten with CSS3. It’s reinvigorated that sense of newness that CSS and Web Standards brought our way just a few years ago. We’re able to more easily replicate the set of design standards that has become nearly universal much faster than before with just a few CSS declarations. There are a number of CSS3 rules I’d be writing for every project, but I’m just not sure it’s as ready for prime time as many designers are making it out to be.

I’m having an honest-to-goodness back and forth with myself on this issue because I sympathize with two opposing sides to the same issue. I’ve thought about it so much that I’m not sure it’s as much of an issue I’m making it out to be, but would definitely love to have a targeted conversation about it.

I’d like to review the four rules I’d more than love to use without a second thought on every project I work on for the rest of my life, and explain the issues I’ve come up with (so far) regarding each.

Before (and after) I get to the list, however, I’d like to make my stance on CSS3 clear. I love the fact that it directly helps us as designers make a project go that much more smoothly. It helps us reduce the time we take to engineer the front end, allowing us to spend more time designing. I understand that if people are not able to, or choose not to upgrade their browser, it’s something they’ll have to deal with as the Web continues to mature and grow. It makes perfect sense that the faster we all adopt these “bleeding edge” technologies, it puts that much more pressure on the browser makers to implement things properly.

There’s an element of realism, however, that I feel sometimes takes a back seat to the wonderful things CSS3 (and HTML5) are currently offering us.

Border radius

By far the most popular design treatment you’ll find on the Web is rounded corners. I’d be willing to bet that there are more (completely different) ways to achieve rounded corners on the Web than any other design treatment, if such a statistic existed. The creativeness that has gone into the dozens of ways to best round the corners of a div blows my mind. The point here, though, is that it shouldn’t be such a pain to accomplish. With such a popular and generally accepted design treatment, there should be an easier way. Many designers have taken comfort (and a sigh of relief) through border-radius.

As a quick review, border-radius will automatically provide rounded corners on the referenced element. You have independent control over each corner, giving you a wide range of possibilities when adjusting your borders.

Being able to round the corners of a design element using a quick CSS3 rule is inspirational as it stands on it’s own. Combine that with my arguably favorite ability for border-radius to easily round the corners of images as well as elements with background-images and I’m head over heels.

Taking a step back and examining it, I don’t see a tremendously huge problem with using border-radius today on a production website. I’m not able to take advantage of it on client work, however, because no matter how hard I try to convince a client that visitors with less capable browsers won’t know any different, they’re still going to see a less elegant design. And that’s something I completely agree with.

I am not yet comfortable with putting a client site out there that degrades to the point, although completely accessible and usable, it looks unfinished and utilitarian.

Text shadow

The rise of OS X Leopard brought us the wildly popular text inlay effect achieved through a clever drop-shadow treatment to text. Tons of tutorials cropped up rather quickly with instructions to replicate the effect, and it’s something we see fairly consistently in new designs from both big names and small. We can all understand why, it’s a nice looking, elegant treatment that can improve things both aesthetically as well as improve readability when used properly.

Moreover, text-shadow can help on many levels when it comes to readability, and that’s one of the major reasons I’d like to start using it consistently today. It’s something that can be implemented on a very subtle level, and at the same time return some really excellent results without many people noticing.

Truth be told, unless the absence of text-shadow will morph type into something more difficult to read, I think using it is just fine on a client production site.

Multiple background images

If there are any two opportunities CSS3 brings that I would most like to use, it’s border-radius and multiple background images. I can’t begin to fathom the number of divs I could have saved over the past year alone.

CSS3 gives us the ability to layer multiple background images on a single element which can build upon any existing background properties. It’s useful on so many levels, I can’t begin to explain how excited I’ll be when it becomes standard practice to use.

Unfortunately, this is a property I only use on a select few personal projects simply because the degraded result produced is far too different to deem acceptable in my opinion. That is of course unless you’re simply adding just another layer of very subtle refinement. While some intentional results can be put in place with a clever combination of cascading background properties, in my opinion (at this stage) your time is better spent accomplishing your goal the “old fashioned” way.

Pseudo selectors

Pseudo selectors rock. It’s great that they’re so old, many have been implemented in modern browsers, but you can’t become too comfortable with them quite yet. Of anything CSS3 has to offer, pseudo selectors are something I use on nearly every project.

When it comes to pseudo-selectors, I still think of them as a method of progressive enhancement. The way I use them, the selectors provide that extra level of detail to a design that brings it to the next level. Using that approach, I think using pseudo-selectors is absolutely acceptable, and I’d even go so far as to fully recommend that they be used to tighten up the front end on any project. The changes they provide will definitely not be missed by viewers with non-supporting browsers unless you’re so aggressive with implementation, the render is drastically altered by their absence.

While I do tend to use pseudo-selectors, I find myself only relying on a few for the fine details I’m looking to apply.

When it comes to clients

Again, just to reiterate my stance here; these observations should be taken with a grain of salt. I’m only looking at the big picture, not taking into account the nearly endless variables and circumstances that come with every project that graces our monitors.

The biggest hill to climb by far, in my opinion, is getting the blessing of your client to go ahead with this more aggressive approach. After all, we were hired to produce a certain caliber of work. Unless your client is extremely Web savvy, and is somehow opinionated on the topic of how limited we are when it comes to CSS, their main concern will be that the investment they’re making with you will reach the widest audience possible.

The latest argument to skirt this issue is to simply present your comps after you’ve already began front end development. That is to say, some designers feel that presentation of a static comp is no longer applicable directly as a result of wanting to use progressive features such as CSS3. The idea behind it is this: if your client is using a substandard browser, the production site will look exactly like the approved comps simply because they’re using the same underpowered browser the whole time. Meanwhile, visitors with modern browsers will be graced with the much more pleasant version. As the client upgrades their browser, they’ll be elated that this new browser made their website look that much better! Although I’ve never tried that approach, I can’t quite stand behind it.

In my experience, clients are extremely detail oriented. They’re going to ask for more should they see the design in IE6, even if you took the time to beautifully degrade. At that point you have two choices; you can revert to the old school, or you can trek down the path of explaining CSS3 and why they need to trust you on this one. All the while eating those hours.

As I mentioned, this is something I’ve been going back and forth with for some time now, and I think having a conversation on the subject using realistic circumstances and case studies would be superb. What’s your stance on the issue, specifically when dealing with clients and not your personal projects? Do you think CSS3 is simply ready for prime time given the many repercussions involved? At what point will it be acceptable to implement CSS3 and not have to focus on fallbacks and graceful degradation?

Related Content

  1. Current Events: Twenty Twenty Two and You
  2. At What Point Do Semantics Not Apply?
  3. We’re Ready for CSS3, but are we Ready for CSS3?

Categories

Categories Business, Design, Development, Opinion

Tags

Tags , , ,

Get my newsletter

Receive periodic updates right in the mail!

  • This field is for validation purposes and should be left unchanged.

Comments

  1. Good article. I myself am a strong proponent of progressive enhancement, and believe that we should use CSS3 where we can to better our designs, so long as the design degrades gracefully on older, less capable browsers.

    I’d rather have clean mark up and only half the audience see rounded corners than have everyone see rounded corners but have messy extra divs, css, and browser specifc hacks. It’s time the web moved forward. Those with older browsers will just have to catch up at their own pace.

  2. I find myself using CSS3 more and more. It makes life much easier than trying to “fake” certain effects. When it comes to clients though, I think it can potentially cause some time-related issues.

    An example: I’m working on a very large-scale web app for a client and to save time (and energy) I’ve used a lot of CSS3 features, including pseudo-selectors, border-radius, and rgba. Site looks great in Firefox and Safari. Reasonably works well in IE8 and sort of works in IE7. The app just explodes in IE6. There’s no convincing the client that we shouldn’t support IE6 cause they’re convinced it will be one of the most used browsers on their web app (time will tell).

    I have to add so much backwards-compatible features (extra styles, images, classes and markup) that to me, I wish I never bothered wasting time with the CSS3 features if I was going to have to make it work with IE6.

    I’m not necessarily dumping on CSS3 features – I love and use them whole-heartily on personal projects, and sneak it into smaller client projects. But I think this situation is one that many other designers/developers will face (if they haven’t already).

  3. These are important discussions to have. To look at your four items seems like a good idea:

    Border radius

    I’ve used this one on some work projects. Sometimes, I’ll admit that I’ve added JavaScript to give it support in IE, and a couple of times I’ve even made IE stylesheets that applied the background image in ways that matched, or were close to matching, the border-radius style.

    I think it really depends on how important the corner is, but regardless, I think it’s great to use JavaScript when it will work to fallback on older browsers. There are some great scripts out there for this, though sometimes they’ll conflict with other scripts that might be running.

    Text shadow

    I’d agree – we can use this.

    Multiple background images

    I’ve done this by serving a jQuery plugin for multiple backgrounds to IE (and Opera, though I assume they’ll support it soon).

    Pseudo selectors

    This is another one that JavaScript can give us for the sake of old browsers. An example from Andy Clarke: http://forabeautifulweb.com/blog/about/enable_css_pseudo-element_selectors_in_internet_explorer_with_ie-css3.js/

    I know it’s a bit sad to send extra JavaScripts to IE users, but for me it often is the best of both worlds, as many of these kind of scripts are really small, and it’s possible that IE 9, or IE 10, or whatever will start supporting these things and our version-targeted conditional comments will be code relics.

  5. My view on CSS3 is pretty inline with yours. With the specific modules you mentioned, I feel the same way.

    For personal projects, I would likely use Andy Clarke’s IE stylesheet, but on client projects I think you use as much CSS3 you can until the design hinders the entire message. What I mean is border radius is an enhancement, however some designs call for this to be mandatory. That is when the borders should be made the “labor intensive” way. Just like your standpoint on pseudo selectors.

    I like the idea of getting comps approved of how the design will look in IE and add some enhancements afterward. I think that would be very successful, but don’t have any actual evidence to back it up.

    Nice write-up Jon!

  6. I think, to some extent, usage of CSS3 techniques on client projects depends on the properties’ importance to the project. For instance, I’ve seen many sites (such as the WordPress backend) where rounded corners on things like buttons add a nice touch that certainly classes an element up, but isn’t crucial to the design. However, I’ve also seen sites where rounded corners really make the design, and their absence leaves a big hole in the overall look and feel. In those cases I can’t justify graceful degradation to squared corners when it breaks the site’s overall design.

    In addition to the four you’ve listed, I’ve also found myself using box-shadow more and more. But, like I said above, only in instances when it adds a nice flourish, but isn’t crucial to the overall design.

    I agree that CSS3 certainly saves time and energy when developing, but if those elements are a crucial aspect of your design, it would seem difficult for me to spend the time (and charge a client for) implementing CSS3 features only to then implement full workarounds conditionally to serve them only to less-than-supportive browsers. On client work where that text shadow or rounded corner is crucial, I’d just assume do things the old fashioned way until the browser support is there for the new properties.

    But, when it comes to personal projects, or client projects where adding that extra ‘something’ that makes the site that much more beautiful than it already is, I’m all for CSS3. Your site should look great, even in IE, but if CSS3 makes it look that much better in Safari or Firefox, that’s all the more reason for your visitors to switch browsers.

  7. I’m having the exact same thoughts as you and agree with everything you posted. I’ve been having fun using CSS3 on personal sites, and using custom fonts via @font-face. I was just thinking today how the clients I’m about to start sites for probably would not be very good candidates for a lot of CSS3 features. Especially since I’m a “get approval through photoshop mockup first” kind of guy. 🙁

    The idea of not telling clients about the enhancements could work, but it needs to be tested out a little more.

  8. Until ie6 has disappeared entirely, I’m not implementing css3 on any sites. That’s just how it is.

  9. I think it depends on the clients website browser statistics if you can use CSS 3 extensively and convince your client that this is the best way. If the statistics say that more than 20% are still using IE6 it is hard to convince your client to drop support for it…

    But time goes by and with every day the number of IE users declines 🙂

  10. Interesting post and it’s something that I’ve been toying with and will continue to deliberate over for a few years I suspect.

    I’ve also come across the JavaScript method of supporting CSS3 which Jonathan Stegall has mentioned above and think that’s the best way to go at the moment in order to support the largest amount of users.

    There’s also a JavaScript solution to HTML5 support in IE which I wrote about a little while ago:
    http://www.dave-woods.co.uk/index.php/html5-tutorial-getting-started/

    I do think that even with JavaScript support for HTML5 and CSS3 there’s still a nagging feeling that some users won’t be shown the website in all its glory and that’s something that a lot of corporate clients won’t accept.

    So for personal sites and projects I’m using HTML5 and CSS3 but for client websites I’m still supporting IE6 without JavaScript which sadly means the newer technologies will have to wait a few years yet.

  11. Good write!

    At times I want to implement that IE6 CSS/JS crash script just to annoy some users.

    Too bad im relying on CSS for a living 🙁

  12. Maybe it’s just that I’m new to the scene, but I think that designers need to grow a pair when it comes to convincing clients to trust them – because it should be about trust. You should be able to back up your request to use CSS3 with research (and since it’s still in it’s infancy, I can understand where solid research could be hard to find).

    I stand firmly behind telling the client that they can have a site that is forward thinking, will last longer, and require less maintenance down the road, or they can choose to have a bulky old-school machine that is much less pleasant, but looks exactly the same in every browser – but that this approach will require more time now, and down the road when updating the design/content.

  13. Word, agree on most of your points. Working for an e-retailer As a full timer really restricts my choices but I get to slip in sone text shadow and border radius fancyness so long as it degrades well and adds to the general usability , and slimming the HTML is something they are really keen in at
    my place too.

  14. Nice article! It’s an important topic to discuss and explore right now. I completely agree with your stance on the individual rules. I think in each case, the developer needs to determine whether the element is critical to the message/composition of the design, or whether it is simply an enhancement. If it’s an enhancement, go for it! But if it’s critical, better to do it the tried and true way.

    However, I like Micah’s thinking as well. If you can convince your client of the benefits of using CSS3 now, then have at it. If not, fine, just do it the old fashioned way.

  15. Based on studies I have read, most of your ie6 users are either:

    A. Commercial users and employees, that are restricted in web access,
    B. Non computer literate (elderly, less-than-occasional users), or
    C. Afraid of their computer and the internet,
    D. Us.

    IE6 users expect less than stellar visual candy.

    *As long as performance and content deliverable remains the same, design is irrelevant.*

    Microsoft pushes upgrades fairly often, the users that don’t upgrade won’t really wonder why the site looks sub-par, and probably won’t care either. Apathy is constant.

  16. I kinda agree with Michael Wilson. There’s a certain point at which you’re wasting your client’s money by trying to tailor your site to IE6, with its roughly 15% market share. I don’t think it’s a big deal to make choices with CSS that make the site less thrilling but still perfectly usable for that remaining 15%. Making choices that hamper functionality for IE6 users, though — that’s a fair bit more dodgy.

  17. Firstly thanks for the post.

    I have started to use CSS3 and make use of it within client sites. As a rule of thumb if it isn’t an essential component of the design and accessibility won’t be effected by something not being used then I’ll let it degrade.
    If it is essential, well then it’s back to all the old methods.

    As for using CSS3 without graceful degradation? I guess the key milestones are support for the generic term without the browser prefix and as much as it pains me – when IE finally offers support for it. Then we can all use it as much as we like!

  18. Definitely on the mark Micah! I’d have to agree with you 100%. Working in the design/marketing area of a software company, I can tell you from our point of view we look at browsers the same as operating systems, and this makes perfect sense. Yes, 15% might use Windows 2000, but with the majority on Windows XP or Vista we won’t support 2000 anymore. We get many customers and prospects with operating systems and configurations we don’t support, but the cost in supporting them far outweighs what the customer is worth to us.
    Like every other business decision, the figures need to be aligned to the financial effect on the client. Are those 10% of your client’s customers who use IE6 pumping enough revenue into their company to justify the investment in browser work-arounds? If so, spend it and bill them, because it’s a good business decision. If not, give IE6 the treatment it deserves: shut the door on it.
    This is not a temporary situation that will be resolved once IE6 is shown the door. As new technologies and standards are developed, the older browsers will continue to fall behind. So what is needed is a set process for your client. Define a bracket of browser versions they are willing to pay to have you support, and as new versions and browsers are added to the bracket, phase out old ones at the other end. This engenders trust, shows you’re thinking of the client’s business needs foremost — as opposed to just “being lazy and not wanting to do the work”, and puts in place plans for a long-term future with your client.

  19. Are those 10% of your client’s customers who use IE6 pumping enough revenue into their company to justify the investment in browser

    I agree with Ryan’s comment and this is exactly the point that needs to be emphasised and considered. It’s no good recommending we start using CSS3 to clients if the site goes live and they find that they lose sales because their huge number of IE6 users stop using the site.

    It’s important to remember that each site is diffirent and has a different target audience, statistic need to be analysed and decisions shouldn’t be made purely because there’s only 10% of users that visit using out of date technology. It might only take a handful of customers that spend a lot of money to walk away and suddenly a business could go from profit to loss overnight despite the site providing a better experience for Firefox and Safari users.

  20. Hey Jonathan.

    On border-radius, I would say you’re actually doing old-browser-users a favor by not making them download extra images, mark-up, and CSS to make image-based rounded corners, but I hear you. Why not make your standard CSS use border-radius, then add the required CSS (even JS-assisted, if necessary) via IE6-only conditional comments? Gives your modern browsers the lightest experience possible, but still satisfies your older browsers.

    Totally agree with you on the other three, and share the same viewpoint from text-shadow with box-shadow: very useful, when you can, but hardly a page-breaker if it doesn’t show.

    Cheers,
    Atg

  21. Biggest problem I see is that hardly any of these properties are in a final stage and require vendor-specifc prefixes to work across all browsers. It litters the css and it creates a legacy I don’t actually appreciate when the final spec will be released.

    I like those properties as much as the next guy, but we’re slowly declining to a situation where we’re doing lots of development for specific browsers. This is setting us 10 years back.

  22. I agree, my only concern lies with making some adjustments via CSS3 that, when degraded, cause an overall disturbance with the design, whether it be either aesthetic or inaccessible. As long as we keep that in mind, and truly accept that a certain percentage of viewers will always see the degraded version, have at it!

  23. CSS3 is definitely a super time saver! I’ve gone through your exact situation, which was much of the inspiration to this piece. I love CSS3, I want to use CSS3, but having to backtrack and redo things anyway is very discouraging to both the designer and the client. We share the same approach, use it on personal projects, and sneak it into client work as much as possible.

  24. I know for a fact that you’re not alone in your approach. To be honest, using JavaScript to give IE its crutch allowing you to play with CSS3, to me, is acceptable. It’s literally the only thing you can do, and if it doesn’t work out, you’re no worse off.

  25. We definitely see things in a similar light on this issue, Jake. I’ve never actually used Andy Clarke’s IE stylesheet on personal projects, but I imagine lots of people do. My approach on personal projects is usually to spend as little time as possible making sure at least the structure of the site is solid in IE and that’s about it. As long as you can physically read the content, I’m okay with that at this point. My approach is to explain the deficiency of IE to the client nearly from our original meeting. As designs are presented, IE’s lack of goodness is again reiterated, as well as when the staging site is shown. To me, if a client is consistently shown that IE is degrading their browsing experience, they’re that much more likely to upgrade (and convince others to do so as well)

  26. In my opinion, the biggest problem with CSS3 is not browser support – it’s getting the client to buy into what it means for their website.

    For me, the best way to kick-start CSS3 support is to lead by example. As developers/designers we should be tapping into the new features CSS3 offers us and using them on our own websites / portfolios – creating a void between traditional web design and what’s possible now.

    I’m always being asked by clients about implementing “cool-feature x” from “website y” – if that feature is CSS3 then they’ll have to let go of the “it must look the same in older browsers” mentality and start buying into web has to offer us now or they won’t be able to have that feature.

    When clients start understanding that they are holding their website back we can all start moving forward.

    I say use CSS3, use it everywhere you can.

  29. You’re absolutely right. If you’re just adding that bit of flare then by all means have at it with CSS3. One thing I fear though, is the client reaction. Perhaps you’ve gone through the comp approval process using those rounded corners and subtle details that really pull the design together. On launch day though, you get a call from the client wondering why everything is so… blocky. You’re then in a bit of a sticky situation with a live site that doesn’t meet the client expectation, and no matter how you solve it, you’re spending time not originally budgeted to either explain the difference (more than likely for the second or third time) or you have to retract all that time saving CSS3 in favor of the old style.

    Box shadow rocks as well. I really can’t wait to reliably use just about everything CSS3 has to offer!

    I completely agree that it doesn’t seem fair to spend time implementing CSS3 and again implementing the same element features using old techniques simply for the sake of degradation. When it comes to billable hours, it sometimes makes more sense to forego the new hotness and just make it work the best way it can.

    Very well said.

  30. It’s definitely an uphill battle. Not only with clients as clients, but with clients as users. People who aren’t Web designers don’t care if they’re running the latest browser. They’ve seen rounded corners on other sites, so why does their site not ‘support’ them? I’m really thrilled that CSS3 is taking strong hold with the community, it means that implementation should continue as fast as possible. The problem lies with the bill paying work being able to take advantage of the greatness at our fingertips.

  33. You’re right — it’s going to take time to truly adopt CSS3 with confidence. Falling back to a JavaScript solution is becoming more of a reality every day. If someone is running a completely degraded browser and on top of that has disabled JavaScript (or it was disabled for them) we’re already looking at a super limited environment. It’s all about progressive enhancement and graceful degradation.

  34. It is about trust, I agree, but I’m a bit wavered when it comes to saying that designers need to grow a pair in convincing clients that CSS3 is the way to go. It’s just recently (as of a few days) become a recommendation, we’re still using vendor specific properties. CSS3 at this stage is primed for designers to play with and learn.

    I like that you mention a site using CSS3 is forward thinking, but I can only imagine that most clients want something that works for them today. If your clients aren’t pushing for the best website in their field, they need to rethink the project from the ground up.

  36. I’m really glad so many designers have totally embraced CSS3, I just fear that in some cases we’re getting a bit overzealous and ahead of ourselves. I’m glad you agree that it’s something important to discuss with one another before we get too far.

  37. It’s true. Most IE6 users have no idea what they’re missing. I think the line comes in to play when it’s a client coming to you for a fresh new site design, and what they see turns out to be extremely rigid and utilitarian due to sharp corners or otherwise. With the biggest companies in the world dropping support for IE6 this year, I think we’ll finally begin to see a noticeable decline in our metrics surrounding the browser.

  38. Money definitely talks. It’s important for the designer to ensure that a happy medium is reached. While CSS3 can offer us rounded corners in just a few seconds, it only takes a few more to build the same element the old way using images, and give the IE6 render the exact same treatment. Usability is definitely retained, but after all is said and done, you might have spent just as much time explaining what CSS3 is and why it works here but not there, when that time could have been used to produce the site the ‘old’ way. What do you think?

  40. I’m a bit surprised to hear that 15% is a low enough threshold to deem support unworthy, but you’re at least the third person to use that figure in this thread alone. You’re right though, when it comes down to the business side of things (and the business only) it’s much easier to make a clean cut decision on how far to go with CSS3. It’s the design aspect of the decision I’m most concerned with. With personal projects it’s not that big of a deal if the site completely degrades to an entirely new level, but client sites have always been a bit different.

    I think your decision to establish a bracket of browsers with your client is a good one. We do something very similar to that at my company, and it tends to work out very well for us. We do, however, include IE in that bracket, but attach an addendum explaining our approach.

  41. The biggest trouble I’ve found when having that discussion with a client is the fact that many clients have no idea. More often than not the site has no metrics to help make the decision. The target audience, though, should indeed have a large impact on your decision to use (or not use) CSS3 throughout your project. Absolutely.

  42. Definitely — popping in a small JavaScript library to help ease your pain is an appropriate step in my opinion. As others have mentioned, if someone is running an old browser and has also disabled JavaScript, the experience will be shoddy at best. Given the extreme minority of such circumstances, I do think it’s applicable to view JavaScript as a plausible solution.

    As far as spoon feeding IE6 its own assets via conditional comments, I find myself doing that on nearly every client project, yes. The issue to keep in mind there though, is as you mentioned, I’m doing the work already anyway. Saving the good browsers a few bytes along the way is always good, but you’re also segmenting your assets quite a bit and implementing the same treatment in two completely different ways when it’s technically possible with one.

    I’m simply playing Devil’s Advocate here and definitely appreciate your thoughts!

  43. I agree completely. It’s great to see that quite a bit has reached recommendation as of a few days ago, but until I don’t need to write the same property three times due to vendor specifics, it won’t feel right.

  44. Leading by example is great, but I do think CSS3 is simply at a stage where experienced designers can do just that; play with it on their own personal projects. Start showing everyone what great things can be done with it so by the time the browser makers have implemented a recommended specification, we’ve all hit the ground running. I’m not completely convinced it’s ready for prime time with clients simply because of the target audience.

    It’s not that clients are purposefully holding their site back per se, they want their customers to see all of the fine details they’ve paid you for instead of a completely degraded experience.

  45. I don’t agree with Keith.
    The biggest problem IS browser support. IE8 not being fully compliant with CSS3 really limits our option when trying to reach a wide browser audience.

    By now I think we’ve reached the point where support for IE6 is no longer acceptable.

    The solution is to design very well a website so that with the same CSS 3 elements, it may look accpetable on a oldest non CSS3 browser.

  46. A great point to bring up. CSS3 already has that ‘clique’ status, and IE (even the latest versions) aren’t making that situation any better.

    Would you mind elaborating on your point stating that supporting IE6 is no longer acceptable? What did you mean by that?

  47. I will speak from a bussinesman perspective as i know only little about HTML and CSS so i can add few buttons to my site ect but not play with it on a full scale or i would mess the whole design 😛

    For me as a businessman usage of CSS3 on my site looks like this:
    1. If it means less work for developer it also means less cost for me.
    2. If it means i can update content easily and even some looks without fear of pushing some elements aside and making whole site look dislocated as it would be with more bulky codes written to support IE6, guess what… its also less cost for me as i dont need to hire designer again and spend more money.
    3. If it means that site will last longer and its already based for future CSS3 upgrades adding some lines here and there, guess what… i dont need to upgrade website for longer period and thats also less cost for me.
    4. Site gets done once and it gets upgraded easier and even looks better without any changes when clients update to newer browsers… thats another plus.

    Against one minus of trying to please 20% customers, possible customers and by my experience its rarely the exactly those 20% customers that will drive u more than 20% of revenue.

    So summing it up: a businessman that is concerned about today wont last long on the market as he is not focused on long term future goals. If he thinks only about today he just puts out the fires and dont think strategically. Dont mind about that backward guys.

    And last but not least. Go read Malcolm Gladwell’s book “The tipping point” and u will understant what i mean by this: You as a designers have real force of pushing CSS3 into reality and everyday usage. If u forgo that and dont push it, CSS3 will never go into standard! Dont give up! Push that to standard!

  48. Hi Jonathan, which pseudo selectors do you find yourself coming back to? I really, really (really) want to adopt pseudo selectors into my approach but have seen a number of them unsupported in older versions of IE.

  51. I’m a little late to the article, but glad I came. Good post. I think most designers have this discussion with themselves all the time.

    I love CSS3, and I use it all the time on my personal and freelance one off sites. Unfortunately, at work, what I can get away with is extremely limited. I build custom websites for my employer, but I also create website templates that are used by hundreds of clients. And when you build a site, that has to be shared by that many people, that use god knows what for a browser, we have to make sure it works on IE6. No questions. Therefore if I have to build stuff the hard way, and make sure it DOES look 100% the same across the board.

    Not only that, but once I’m done with the template, we have 6 other people in the production department that do changes for our clients if they can’t do it using the editor. Most of our production people are coming right out of college or have about 1 year of experience, and are not as far along with CSS2 as I would have thought, much less 3.

    What bothers me most about CSS3, is not that it isn’t supported by the old browsers, is that I have to sometimes write 3 styles to get one effect working on the modern ones! Now in all honesty, that isn’t really a big deal, but it really bothers the hell out of me. I want box-shadow done in one line, not 3.

  52. […] Jeffrey Barke is Senior Web Developer, and the original organizer of NYC Standardistas, the meetup of new yorkers who like adhering standards to a well designed coding.  Jeffrey is devoted to the web, quietly passionate but practical-minded, intellectual speaker.  Bellow is Jeffrey’s CSS3 presentation that he did last week, 4/28/10, at the Watercooler gathering of folks who contribute to the King on line. More to come (Oh Mike Taylor) CSS3 and a brief introduction to Google Maps API v3 So, is it ready for prime time? Jonathan Christopher. the author of Monday by Noon that I like reading says, too: “There’s an element of <realism>, however, that I feel sometimes takes a back seat to the won…“ […]

  53. I’m also thinking of using Javascript for IE in absence of CSS3 support. However, which conditional comment would you use? [if IE] or [if lte IE 8] (IE8 and below)? Are we sure that IE9 will support all this CSS3?

  54. Personally I target each version of IE specifically using conditional comments on a per-case basis. Once IE9 final comes out we’ll have a final say on what is and what is not supported CSS3-wise.

  61. I’ve gradually discovered that IE has already supported many CSS3-like capabilities, usually for a lot longer than other browsers (often back to IE6 or even 5.5), only using MS-specific “filter” syntax. (But if we’re already using -moz and -webkit specific variants, why not add IE-specific versions as well? It seems better than compromising the markup or flexibility of the design, reverting to background images, or leaving IE looking so different that everyone notices, and thinks you’re sloppy or incompetent, right?)

    You can do all of these with MS filters or other capabilities:
    – @font-face downloads
    – gradient (at least linear at 90 deg)
    -opacity/ alpha transparency
    – transparent background colors
    – shadow (both box and text, though it doesn’t distinguish between them)
    – rotations (transformations)
    – multiple background images (though limited and inflexible)
    – there’s also an htc file (really just containing javascript, but calling some ms-specific browser capabilities like vml) to do rounded corners

    http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ has a great discussion about various methods of doing so. (I should note that text shadows are perfectly possible in IE using the same filter as box shadow, but you need to be careful to distinguish the text from other elements or it may apply a shadow to things you don’t expect.)

    So the idea is, more and more, you can code for CSS3 effects, and, using the same markup and conceptually similar CSS rules, extend nearly all of them to IE as well. (Sadly, it’s the pseudo selectors that won’t work without adding Javascript, but I’ve found that avoiding them, as well as child selectors etc., combined with a good reset like Eric Meyer’s, makes it MUCH easier to make pages backward compatible to IE6 with minimal extra effort.)

Leave a Reply

Your email address will not be published. Required fields are marked *