0

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

-webkit-transition 是一个未知属性
-webkit-transition: opacity 0.5s ease-in-out 0s;
------------------------------------^ 链接样式表 mycsspage.css:21

如何解决这个问题？

谢谢斯内哈
_

4

1 回答 1

6

如果属性以 -webkit- 开头，则意味着您正在使用一些实验性代码，这些代码通常只能在基于 WebKit 的浏览器（Safari、Chrome）中运行，并在其他任何地方导致错误或警告。

在注意到这个错误并提出这个问题时，你做对了——现在你可以了解一些关于 CSS 是如何开发的简单的事情，以及如何安全地使用实验性和即将推出的功能。

第一：为什么这段代码是“实验性的”？这是因为有经验的 web 开发人员和计算机专家坐在一起为 CSS 规划新功能，但他们仍在试图弄清楚它应该如何工作。随着时间的推移，他们尝试了不同的关键字和语法（讨论诸如“应该说“缓进出”还是“进出”之类的细节？）。在这样做的同时，他们还希望在现实世界中进行一些测试并从真正的开发人员那里获得反馈，因此他们鼓励 Chrome 和 Opera 等网络浏览器支持未完成的内容 - 但带有前缀. 前缀 -webkit- 然后表示“这是一个临时实现，我们不确定任何其他浏览器是否会理解“ease-in-out”指令，因为我们还没有完成决定，但您可以将其测试为只要您了解它是暂时的，如果我们改变主意，您可能需要稍后返回并修复您的代码”。

要正确执行此操作，您需要对这个 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- 行。

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

于 2012-09-18T10:52:30.310 回答