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 がどのように開発されているか、実験的な機能や今後の機能を安全に使用する方法について、いくつかの簡単なことを学ぶことができます.

最初: なぜこのコードは「実験的」なのですか? それは、CSS の新機能を計画するために一緒に座っている経験豊富な Web 開発者とコンピューターの専門家が、CSS がどのように機能するかをまだ正確に把握しようとしているからです。時間が経つにつれて、彼らはさまざまなキーワードと構文を試します (「「イーズインアウト」または「インアウト」と言うべきかなどの詳細について議論します)。その一方で、彼らは実世界でのテストと実際の開発者からのフィードバックも求めているため、Chrome や Opera などの Web ブラウザーが未完成のものをサポートすることを推奨していますが、接頭辞が付いています。. 接頭辞 -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- プレフィックスが必要です。したがって、この命令を 2 回追加するようにしてください。1 回目は -webkit- 接頭辞を付けて、その後に接頭辞なしで 1 行追加します。このような：

-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 に答える