{Carrer web log} ←

CSS vendor prefixes – Can we all get along

Wednesday, May 05, 2010 { 16 Comments }

Last week I published CSS3 Action Library here is one part of the CSS code:

.h-scale:hover {
 -webkit-transform: scale(1.5); //For Safari and Chrome
 -moz-transform: scale(1.5);  // For Firefox
 -o-transform: scale(1.5); // For Opera
 transform: scale(1.5); // For some unknown future
}

You can notice that is the same code but only optimized for different browsers.
Thank god we have only few mainstream browsers. Otherwise this example should be much more longer.

I think that we didn’t learn the lesson from the past . We fight for years with Microsoft to respect the web standards. With IE8/9 great progress was made and Microsoft is finally going in right direction.

But today we have bigger problem than IE. We don’t have finished CSS3 spec.

In the absence of standards all browsers are guessing what should they implement. Every browser wants to be first to implement some new cool CSS feature. The risk is that we will end up writing specific CSS code for every browser. Trust me we don’t want that!

So what can we do?

We can help the CSS3 working group by donating, joining the CSS3 discussion, suggesting new features, writing examples, writing and discussing about CSS3 ...

I think that if more people are involved directly or indirectly in the Decision Making better the result (product) will be.

In the meantime while waiting for the definitive CSS3 spec browsers can join forces and decide for one universal prefix.

What about –css3- prefix for all new CSS3 experimental stuff?

The example from above will look like this (less code) :

.h-scale:hover {
 -css3-transform: scale(1.5); // In experimental phase 
 transform: scale(1.5); // When becomes accepted standard
}

-css3 is much more prettier, semantic and logical then –moz, -webkit, -o, -i-Hope-there-will-be-no-new-browsers ..

PPK suggested –beta prefix but I think –beta can be confusing( –beta of what CSS2,CSS3 or CSS4).

Actually I don’t care if it is –css3 or –beta or –something-else I just don’t want to write the same CSS code million times.

This is open call to all the browsers: Can you all decide for one prefix ? Pretty Please.

What do you think? Please, comment!

16 Responses to “CSS vendor prefixes – Can we all get along”

1. //  Hannes@ // 5/05/2010

   so true - I never stop to wonder why the did that in the first place...  

2. //  Phil // 5/05/2010

   Thing is that different vendors may implement a new feature differently.
   Take the difference between Firefox and Safari border-radius where they've ordered things a bit differently for instance:
   
   http://www.css3.info/border-radius-apple-vs-mozilla/  

3. //  Vladimir // 5/05/2010

   @Phil: It's true there are some things that are different. But I think that the solution is two e-mails away. If all browsers can talk to each other the things will be better. Before we had one code for IE6/7 and other code for everything else. But if we don't find a solution for this CSS3 problem we will have different code for every browser.  

4. //  Anonymous // 5/05/2010

   You thinking that solution is two emails away does not make it so.  

5. //  Vladimir // 5/05/2010

   @Anonymous: Yes history taught us that the browser had hart times communicating. But I don't plan to sit and do nothing. If my small voice can help even 1% I will try to make a difference.  

6. //  Unknown // 5/05/2010

   You'll have accomplished a lot more if you somehow manage to convince large competing companies to talk to each other..  

7. //  Vladimir // 5/05/2010

   @Ben: The real question is how?
   I can't do much by myself by WE can make a difference.  

8. //  Anonymous // 5/05/2010

   I blogged about my concerns with this back in 2007: http://thelucid.com/2007/10/30/proprietary-css-rules-are-we-returning-to-1995/.
   
   The -css3 prefix seems a better choice than vendor specific tags.  

9. //  Anonymous // 5/05/2010

   Use Sass (or scss if you really love css syntax). Then create mixins that do this for you. When browser support is better, change your mixins. Computers were designed to handle this shit for you!  

10. //  Infernal Quack // 5/05/2010

    CSS3 is not yet ready and validated so it is a bad idea to use -css3-* prefix.
    
    CSS vendor prefix is IMO, the best way to deal with not yet validated CSS properties or vendor specific ones.  

11. //  Vladimir // 5/05/2010

    @Jamie Hill: Back in 2007 we were all fighting with IE6, there are few people (like you) that noticed the real danger is not only IE6 but the respecting the standards in general.
    
    @Anonymous: Sass is great tool but the generated CSS code will be always be same. There are many people who are not programmers or don't use PHP or Ruby. We should keep CSS code clean for everyone.
    
    @Shift : I'm not against new cool CSS stuff, I'm just saying the browsers should be coordinated to provide more standard results. In the bottom line we like web designers & developers we should have one unified syntax.  

12. //  Infernal Quack // 5/05/2010

    @vladimir
    
    CSS3 is a draft. You normally won't use it on a "production" website. If you do it, then it is like using vendor specific properties and for that there is a standard : the vendor specific prefixes :)
    
    Ok, it is not really cool to have to repeat each line for each vendor but as these properties are not yet validated, it is the price to pay.
    
    Moreover some of the CSS3 properties descriptions are not yet fixed. For example : gradients. The syntax is different between webkit and gecko. If a CSS3 property is fixed, then it means that it has been validated so it means that CSS3 has been entirely validated and so vendor prefixes are no more usefull :)
    
    The situation is really different than during the Netscape/IE war where specifics and standard properties couldn't be distinguished and could conflict each other.  

13. //  Vladimir // 5/05/2010

    @Infernal Quack: I agree with you, this is different than Netscape/IE war. But the people are starting to use CSS3 because is very good solution in many cases. Example: it happen to me to use JQuery + jQuery plugin just for rounded corners or to use some insane CSS2 hack stuff for drop shadow. And now is possible with few lines of CSS3 code, trust me I want to use that as soon as possible. Probably there are many other people who want to implement the new CSS.
    
    But I'm also aware that the things can very easy get out of control, it is better to prevent than cure.  

14. //  Infernal Quack // 5/05/2010

    @Vladimir
    
    I agree with you, CSS3 rocks and I also want to use it but then main problem is in the time it takes for the W3C to validate a new version. I hope CSS3 and HTML5 will be ready in few months!  

15. //  Sam // 7/14/2010

    If the rules were changed for how vendor prefixes are handled, they could be the perfect posthack. I think that the W3C should change the rules in order to create a sort of property name specificity for prefixed property names. http://samshull.blogspot.com/2010/07/prefix-or-posthack-or-both.html  

16. //  W3c Validation // 8/12/2010

    Thanks for the good information...very good blog site.  

Post a Comment

<< Home