Webkit stylesheet error in opera browser - webkit

Question

I am getting following error while trying to run an html5 file on opera 12 browser :
-webkit-transition is an unknown property
-webkit-transition: opacity 0.5s ease-in-out 0s;
-----------------------^ Linked-in stylesheet mycsspage.css:21
How to resolve this?
Thanks
Sneha

Answer 1

If a property starts with -webkit- it means you're using some experimental code that will normally only work in WebKit-based browsers (Safari, Chrome) and cause errors or warnings everywhere else.
In noticing this error and asking the question you've done the right thing though - now you can learn a few simple things about how CSS is developed and how to use experimental and upcoming features safely.
First: why is this code "experimental"? It's because the experienced web developers and computer specialists who sit down together to plan new features for CSS are still trying to figure out how it should work exactly. Over time they try different keywords and syntaxes (discussing details like 'should it say "ease-in-out" or "in-out"?'). While doing so they also want some testing in the real world and feedback from real developers, so they encourage web browsers like Chrome and Opera to support stuff that's unfinished - but with a prefix. The prefix -webkit- then means "this is a temporary implementation, we're not sure that any other browser will ever understand the "ease-in-out" instruction because we haven't finished deciding this, but you can test it as long as you understand it's temporary and you may have to go back and fix your code later, if we change our mind".
To do this correctly, you need to do a bit of research on whether this CSS feature is still experimental. You're trying to use CSS transitions, so you might for example take a look at this:
http://caniuse.com/#feat=css-transitions
Here you see a table of browsers and versions. You see which versions require a prefix like -webkit- , -ms- , -moz- or -o- (for Safari/Chrome, Internet Explorer, Firefox and Opera respectively).
In this case, the most recent versions of Internet Explorer, Firefox and Opera support this CSS instruction without a prefix, which basically means "we think we're done discussing this now, pretty sure it's going to be like this forever. If you write just 'transition' now you won't have to come back and fix your code because we changed our mind."
On the other hand, WebKit-based browsers still require a -webkit- prefix. So what you should do is to make sure you add this instruction twice - once with a -webkit- prefix, followed by one line without the prefix. Like this:
-webkit-transition: opacity 0.5s ease-in-out 0s;
transition: opacity 0.5s ease-in-out 0s;
If you feel very thorough and want to support older Firefox and Opera versions you could also add the -moz- and -o- lines.
If you make sure the code looks like that, you can now ignore the warnings. You've dealt with the problem it was warning you against.