Opera浏览器中的Webkit样式表错误

Question

尝试在Opera 12浏览器上运行html5文件时出现以下错误:

-webkit-transition是一个未知属性
-webkit-transition:opacity 0.5s ease-in-out 0s;
----------------------- ^ Linked-in stylesheet mycsspage.css:21

怎么解决这个？

谢谢
Sneha

Answer 1

如果属性以-webkit开头,则表示您正在使用一些实验性代码,这些代码通常只能在基于WebKit的浏览器(Safari,Chrome)中使用,并导致其他地方出现错误或警告.

在注意到这个错误并提出问题时你已经做了正确的事情 - 现在你可以学习一些关于如何开发CSS以及如何安全地使用实验和即将推出的功能的简单方法.

第一:为什么这段代码是"实验性的"？这是因为经验丰富的Web开发人员和计算机专家坐在一起为CSS计划新功能仍在试图弄清楚它应该如何正常工作.随着时间的推移,他们尝试不同的关键字和语法(讨论细节,如"它应该说"缓入"或"进出"？').在这样做的同时,他们还希望在现实世界中进行一些测试并获得真实开发人员的反馈,因此他们鼓励像Chrome和Opera这样的网络浏览器支持未完成的内容 - 但使用前缀.前缀然后-webkit-的意思是"这是一个临时的实现,我们不知道任何其他浏览器永远不会明白'易于进出’指令,因为我们还没有完成这个决定,但你可以测试它作为只要你了解它是暂时的,你可能不得不回去修改你的代码,如果我们改变主意".

要正确执行此操作,您需要对此CSS功能是否仍处于实验阶段进行一些研究.您正在尝试使用CSS转换,因此您可能会看一下这个:

http://caniuse.com/#feat=css-transitions

在这里,您可以看到浏览器和版本的表格.您可以看到哪些版本需要前缀,例如-webkit-, - ms-,-moz-或-o-(分别适用于Safari/Chrome,Internet Explorer,Firefox和Opera).

在这种情况下,最近的Internet Explorer,Firefox和Opera的版本支持这个CSS指令没有前缀,这基本上意味着"我们认为我们正在做,现在讨论这个,肯定这将是永远这样.如果你写只是'过渡'现在你不必回来修改你的代码,因为我们改变了主意."

另一方面,基于WebKit的浏览器仍然需要-webkit-前缀.所以你应该做的是确保你添加两次这个指令 - 一次使用-webkit-前缀,然后是一行不带前缀.像这样:

-webkit-transition: opacity 0.5s ease-in-out 0s;
transition: opacity 0.5s ease-in-out 0s;

如果您觉得非常彻底,并且想要支持较旧的Firefox和Opera版本,您还可以添加-moz和-o-行.

如果您确保代码看起来像这样,您现在可以忽略警告.你已经处理了它警告你的问题.