問題タブ [vendor-prefix]

IE と chrome でうまく動作するこのシンプルな Web サイトがありますが、firefox では少しファンキーです。黄色の長方形である div と、その上にある同じ色のナビゲーション バーがありますが、何らかの理由で、firefox はナビゲーションを div のすぐ下に移動します。ここに私が持っているコードがあります:

次のCSSを使用：

以下は、CSS を設定する JS コードの抜粋です。

今ではこれで動作しますが、少し前までブラウザがスタイル プロパティtransitionPropertyのベンダー プレフィックス バージョンを使用して設定せずに協力することを拒否していたことを思い出します。欲しいです。transform-webkit-transition-property: -webkit-transform, opacity;

-webkit-transition-property: transform, opacity;. _ 将来のある時点で、一部の Webkit ブラウザーが-webkit-プレフィックスに対するチェックを突然停止することは想像に難くありません。

Modernizr (および Modernizr ドキュメント) は、それらの間の変換のためのプリミティブ (など) を提供しますが、ファッションの後のスタイルがプレフィックス付きのスタイル プロパティ名を設定する必要がprefixed()あるかどうかを確実にテストする方法は明確ではありません。transitionPropertyスタイル自体をテストして、プレフィックスを付ける必要があるかどうかを確認するのは非常に簡単です。プレフィックスのないものを割り当てて、それが「かかる」かどうかを確認するだけです。しかし、スタイル プロパティ名を指定するという特殊なケースで、この同じアプローチが機能するかどうかはわかりません。

もちろん、この種の状況が発生するたびに、CSS 宣言の 4 つの組み合わせすべてを設定するというハイパーポータブルなオーバーキル アプローチを実行することもできます。スタイル。

一部のCSS3機能がどこでも機能することを確認したい場合は、次のようなW3C推奨バージョンのプレフィックス付きバージョンを使用する必要があることを知っています。

プレフィックスが実験的な機能に使用されていることは知っていますが、なぜそれらが必要なのですか？なぜ彼らはオリジナルのW3Cでそれらをテストしないのですか？すべてのCSS3機能には、すべてのブラウザーにプレフィックスが付いているか、または付いていますか、それとも、必要と思われる場合はプレフィックス付きバージョンを作成するだけですか？

I noticed that inuit.css, which was written in SASS, has a .vendor mix-in:

Is there a way to replicate this in LESS with some of the odd features like e() and @{ } ?

Javascript を介して CSS ルールをスタイルシートに直接追加しています。

これらのルールを後で表示する必要があります。

ただし、各ブラウザーには独自のプレフィックスのみが表示されます。たとえば、Chrome を使用している場合は、次のようなものしか表示されません。

Firefox を使用しているときは、次のようなものしか得られません。

使用しているブラウザに関係なく、それらをすべて表示するにはどうすればよいですか?

PS:document.getElementById("foo").style.width; CSS を表示するようなものは使用できません。and を使用する必要がstyleSheets[]ありcssRules[]ます。

ベンダープレフィックスを使用するときは、宣言にルールをリストする順序を覚えておくことが重要です。

ベンダープレフィックスがどのように機能し、なぜ必要なのかはすでに知っていますが、ベンダープレフィックスプロパティを最初にリストし、プレフィックスなしのCSS3プロパティを最後にリストするのはなぜですか？私はまた多くの重要なサイトをチェックしました、そして彼らはこのアプローチを使用しています：

それだけです、なぜ実際のCSS3プロパティを最後に置くのですか？特別な理由がありますか？

私が取っているコースでは、次のことがわかりました（抜粋）：

ただし、この表によると、 以外のブラウザ固有の接頭辞を使用しても意味がないようです-webkit-。IE、FireFox、および Opera の新しいバージョンは常にこのプロパティをサポートしていますが、古いバージョンはサポートしていません。-moz-したがって、 ,-o-で始まる行は-ms-、ページの表示にまったく影響を与えないように思えます。の場合、今後は常にこれらを省略できますtransitionか? それとも私は何かを誤解していますか？それともテーブルが間違っていますか？