CSS3 is a big mess! 4+ rules for making a corner round or adding a drop shadow! Preposterous! Where are the standards?!
I’ve been hearing a ton of that. There is something of a point here. We all like standards, no question they are a good thing for the industry. Seeing a bunch of messy/repeated code like CSS3 can produce doesn’t feel like the clean happy code that standards is supposed to be all about.
But here is the deal.
The specs for these things aren’t done yet. Standards move frigging slowly. Browser vendors know we want this stuff, so they don’t wait for the spec, the use vendor-specific CSS attributes so we can start using/testing them now. This is good. It means they aren’t sitting on their asses waiting for a slow train that answers to no one. When the spec does get finished, they can roll out support for it in the standard way much quicker.
In my opinion, it would be worse for browsers to implement the new attributes without the vendor-specific prefixes, as that would actually be abandoning standards.
Agree^^
Agreed, it dosen’t look pretty but it’s not hard to use the prefixes.
Especially with sites like http://css3please.com/
Thank you so much for revealing that site unto me.
Agreed to the fullest. The creators that site must not understand the point of -moz, -webkit, filter and -ms-filter.
While it’s a pain in the arse to write these lines time after time again, it’s much better in the long run to put up with it and help the standards committees come to definitive conclusions–THEN have them pushed to the browsers to support them the same across the board.
Agree
You’re absolutely right about the speed at which standards move forwards, Chris.
I’d much rather have a bit of repeated vendor-specific CSS and use the cool features of CSS3 than wait a lot longer before I see it in all its glory.
I will concur up to a point.
Look at that link you supplied us in IE8. That is considered a “modern” browser is it not? Garbage I tell you!
I work for a web firm that deals only with medical field related, and dental websites. I can tell you, dealing with a lot of our custom website clients, that “graceful” degradation means nothing to them. They want it to look exactly the same, regardless of what browser they are on.
“I went on my machine at home and looked at my site. Why does it look so much better/worse?”
That kind of thing is typical. I’m not saying don’t use it, cause I throw stuff in all the time…drop shadows usually. But when a client just dropped $6k on a custom designed site, and they are looking at something in their office on IE6 (yes, we have an average of people visiting dental sites of about 25-30% using that browser), then go home and look at it in FF3.X or Safari, they are like wtF? It becomes an issue.
I think it depends on the client. If you are dealing with 1 person at a time, working on one site every couple of weeks, and knowing they are on a modern browser…you will probably be fine. I build custom sites at about 1 every 2 days. I get a psd file, hand code it, and when I am done, THEN I am supposed to talk to the client. Who knows what I am going to deal with. And IE6 comes up quite often.
CSS3 is awesome. But trying to work around it with crazy fixes for older browsers, with a limited time frame….not so awesome.
I work for a company that builds software for the medical field and I maintain the intranet site that the managers use.
I totally agree with what you’re saying. Most of the users that view our site use Internet Explorer (usually IE 6). When I design, I design for Internet Explorer, but make sure it works the same across all browsers.
It’s interesting to consider that a client might spend $6k on a custom designed site but not be willing to switch to an up-to-date browser that doesn’t cost a penny.
Out of curiosity, as a web designer, do you suggest that your clients should be using current browers, not only to view their own site but for seeking info of whatever nature on the web?
All,
One cannot assume because their customer is using IE6 that they are just lazy block heads. I am sure you have heard of issues where companies are forced into staying with a browser version because they are probably running dozens of vendor specific application versions that are old and only supported on IE6. These huge investments also cost a ton of money and infrastructure to upgrade. So when it comes time for Jane the accountant to gripe about not have a good Facebook experience the EUS teams tell her to “Drop Dead” unless she can come up with a half million dollars to upgrade an enterprise applciation.
Here is the thing about “clients”.
You have a client (one person) who in turn has multiple clients (possibly 10,000 clients).
If I have a business where I make money from people visiting my website, and 10% of my userbase is IE6…I wouldn’t want to hear some nerd talk to me about how I should be using a modern browser. I’d want him spending more time in Photoshop chopping up background images to make my site look beautiful cross browser.
CSS3 is awesome, and it’s a great step forward. And in 5 years when it’s the true (useable standard) we will really reap the benefit.
In the meantime, it’s on a per application/per client basis. If you are charging a premium price for a site, then true browser compatibility should be implemented…not “graceful degregation”
Well said Chris,
Very much agree. And I never thought of it from the browser vendor viewpoint before, about how they are actually helping out the designer by giving them access to cool stuff that is taking forever. So yeah, props to them as well.
Thanks!
If I had to choose between not-yet-standard and vendor-specific CSS, I’d choose vendor-specific CSS. But I’d prefer an implementation of both and a scenario in which vendor-specific CSS would override the standard. I think …
What happens to vendor specific syntax once the standards become real standards and the vendor upgrades the browser? And if we have all included the fallbacks in what we assume will be the standard, and that changes, then what?
I can envision a mess that will be worse than IE5.5 and IE6. Not to mention the hours spent updating all the coding that we’ve stuck out there on the web.
When vendors update their browsers to support the official standard, they’ll drop support for the prefixed one. So just put both in your stylesheet. Properties that aren’t recognized are ignored, so leaving in a -webkit-border-radius or something won’t do any harm (other than technically making your stylesheet invalid).
What are the chances the specs for HTML5 and/or CSS3 will be done this year? There’s just something so neat and tidy about having those — and WordPress 3! (April?) — released in the year 2010.
I think the W3C are looking at 2022…
2022 is when there will be two 100% implementations in the wild, something that doesnt exist for CSS2 (or I think HTML4)… so its kind of a big distraction.
http://wiki.whatwg.org/wiki/FAQ#When_will_HTML5_be_finished.3F
Jeremy Carlson does make an interesting point.
And here is how you fix this problem.
You explain graceful degradation. You tell them that the functionality is exactly the same. It just looks better / has more features on newer browsers. And if they want it to look ‘exactly the same’ on outdated, unstable, and unsecure browsers then they have to pay more because it takes so much more time and effort to do this.
Once you start talking about how the ridiculous notion of ‘looking the same’ affects the bottom line, most managers and clients do the right thing and upgrade. At work my managers have agreed to this and in my freelance work I do charge extra fees for IE6 support. So explain this to them. You’ll be glad you did.
And while I do agree with Chris, I think this practice of not having standards in place can also be fairly dangerous. Vendors may never update to standards (MS), and then we have the issue of supporting backdated versions of half a dozen different browsers. Everyone now a days cries about IE6, but I’m sure a few of you remember the bad old days of supporting IE versions 4-6, MAC IE 5 and 5.5, Netscape anything, all while trying to implement best practices and web standards for modern browsers like Safari and Firefox.
Double edged sword anybody?
The final specs for standards needs to keep up with technology to be useful. Specs are not beneficial if they are obsolete by the time the are completed.
This argument is applied to specs of all types. When developing a web application you need to create your specs quickly and efficiently. If you take too long, your spec is dated and applies to old technology.
In this day and age it is shocking at how few resources are being aimed at creating a standard set of specs quickly and efficiently. Billions of dollars are on the line for companies competing in the online arena. When you look at it from this perspective our current process is a joke.
asd
word! Until the w3 remove it from a working draft to closed – done deal. It really is up in the air. I wonder how many of your reader base or if even you have read the spec?
http://www.css3.info/ is an excellent resource for learning the syntax for new CSS3 additions.
Obviously the browsers all have the support for these features, why not all recognise the single CSS declaration?
From thats demos I prefer the “four” cuz they don’t scroll my windows when i change tabs like the others, and I think it may be consider when u’r puting grades on them.
Usabilit over semantics and clean markup… maybe… only if needed.
Usability* error mine.
Could someone explain what is meant by vendor specific CSS? Does this mean that, let’s say Firefox, has their own CSS3 protocol for the time being until a definite CSS3 standard is established?
I hadn’t really thought of it like that. It does make sense though. I had always thought that it would be better for everyone if mozilla, webkit, etc. just used the proposed standard: ie) box-shadow, instead of their browser extensions.
The thing that really bothers me though is not box-shadow in particular, but the different ways of applying a bottom-left border-radius for example.
I believe webkit does it the same as the proposed standard with the -webkit browser-extension indicator out-front, but mozilla really does something weird.
Correct me if I’m wrong. I could have this flipped of course.
I just wanted to say thanks to Chris for such an awesome resource. I’ve been googlin’ all night trying to find some advanced CSS forms. This is my new W3C school :) Even your comment fields are sick!
This is a great article. There really are 2 massive sides to this as people are talking about. I personally get fed up of using vendor-specific CSS attributes for making everything look the same on different browsers.
In my job I have to make sure as a standard that sites designed look the same in every browser from IE6 upwards and firefox and mozilla. This is a big issue when trying out some fancy CSS, so I tend to set background images for dropshadows etc and only use dropshadows on text that is ok being an image for SEO purposes.
When you are required to build sites that are SEO perfect and making sure you get the green box for W3C it can sometimes be more effort than needed to use unsupported CSS3 techniques.
As soon as there is a standard for certain CSS3 i will begin using it, but until then I will carry on as I am. Which is a shame as drop shadows on H1 tags etc can look great.
I’d like to point out that Opera(|| Presto) has began to remove their prefix(-o-).
It now works without the prefix for at least border-radius.
I have not yet checked on all properties. Nor I plan too since I don’t plan on ever using all the new CSS3 properties.(I get cross eyed by looking at any website using text-shadow)
Now that I’m thinking about it… webkit is dropping their prefix too. At least in Google Chrome I can check wat properties are used without testing.
So for borders you now will only need -moz- and the default assuming all except IE users are regular updaters.
And thank god-as expression, I’m not a religious person- for this because try setting the border radius for 3 different corners with 4 different browser specifics :-p
Why can’t the browser makers just incrementally update their browsers without all the .x.x numbers. What I mean is why can’t Fire Fox for instance just continuously update in the background so everyone using it is always on the same version, same for IE? If MS kept updating IE6 instead of coming out with a new version wouldn’t that clear up a whole lot of issues? The end user wouldn’t even know they were on a different version because the new one would still be the same name, just added features. Even if the entire code was replaced during an automatic update, the user wouldn’t know about it. I guess what I’m getting at is, why leave it upon the users of browsers to update their software?
A browser is not like a website, the user would still have to download the new .exe file, and versions make it more evident and attractive to upgrade.
But if were to work like system updates it would all happen in the background. A simple alert box with “there is an update for your browser would you like to install” would be easy.
Better than having a billion divs for rounded corners and shadow, so when the actual spec is finished you’d just have to update your stylesheets (and if you use standards, you don’t have any inline styles to change).