新しいCSS機能に接頭辞を付ける理由は何ですか？

ブラウザーが接頭辞のないバージョンを使用するのではなく、ブラウザーに新しいCSS機能の接頭辞を付ける正当な理由はありますか？

たとえば、背景のグラデーションのサンプルコードは次のようになります。

#arbitrary-stops {
  /* fallback DIY*/

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* IE 10 */
  background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Opera 11.10+ */
  background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}

Webマスターに同じコードを4回コピーアンドペーストさせて同じ結果を得ることのポイントは何ですか？

注：よく引用される理由の1つは、ブラウザが仕様を正しく実装していないか、仕様が決定的でないかのいずれかである接頭辞付きのスタイルが一時的なものであることが意図されていることです。

IMO、この理由はナンセンスです：

• ブラウザーエンジンが仕様を正しく実装していない場合、ブラウザーがプレフィックスのない形式で実装していないか、プレフィックスの形式で実装していないかに関係なく、ブラウザーは準拠していません。
• 仕様が明確でない場合は、同じ名前の以前の実装がいつあったかが問題になることがあります。たとえば、CSS2にはlinear-gradientがあったが、CSS3がlinear-gradient追加機能で拡張することを意図していた場合-css3-<style>、動作しているCSS2と実験的なCSS3を区別して、新しいドラフトの実装に一時的にプレフィックスを付けるのが賢明です。実際には、CSS2にはlinear-gradient他のCSS3の新奇性はありません。

また、ブラウザごとに実装形式が異なる場合も理解できます。たとえば、テキストシャドウにはFirefoxが必要で、<weight-of-shadow distance-x distance-y color>Chromeには必要であるとし<distance-x distance-y weight-of-shadow color>ます。しかし、実際にはそうではありません。少なくとも、これまで使用したCSS3のすべての新機能は同じ形式でした。

これによると、W3Cノート：

将来のCSS機能との衝突を回避するために、CSS2.1仕様では、CSSの独自の実験的な拡張のための接頭辞付き構文を予約しています。

仕様がW3Cプロセスの勧告候補段階に達する前に、CSS機能のすべての実装は実験的と見なされます。CSSワーキンググループは、実装がW3Cワーキングドラフトの機能を含め、そのような機能のベンダー接頭辞付き構文を使用することを推奨しています。これにより、ドラフトの将来の変更との非互換性が回避されます。

こことここで CSSの状態を追跡できます。

また、ブラウザごとに実装形式が異なる場合も理解できますが、実際はそうではありません。少なくとも、これまで使用したCSS3のすべての新機能は同じ形式でした。

これは、このゲームを十分長くプレイしていないことを示しています。

問題は、Webブラウザーが同じ方法で新しい機能を実装しないことです。ブラウザが標準化されていない機能を実装しているのを見るのはよくあることであり、その結果、すべてが異なるブラウザで異なる動作をします。

それだけでなく、新しい機能はバグが多いことが多く（名前でIEを呼び出すことは避けます）、さまざまな要素の構文が同じであっても、結果は異なります。

これは、新機能を使いたがっている開発者にとって頭痛の種です。彼らはスタイルシートの作成を終えた後、不可解な理由により、ブラウザーによってレンダリングが異なることにすぐに気付きます。

プレフィックスが登場する前は、開発者はブラウザ間の検出可能な違いに頼らざるを得ませんでした。その多くはCSSパーサーのエラーを悪用することでした。これにより、次のような嫌悪感が生じました。

padding: 10px;
width: 200px;
w\idth: 180px;
height: 200px;
heigh\t: 180px;

この種のハッキングは、開発者が見つけたあらゆる風変わりな方法を使用して、ブラウザごとにスタイルシートをカスタマイズしようとした結果です。

プレフィックスを標準化することにより、開発者は異なるブラウザー間で安定していない機能を使用できます。接頭辞は、それが明白著者は唯一特定のWebブラウザに適用されるべきスタイルを提供しようとしていることを確認します。-moz--webkit-

機能が安定し、ブラウザが同じように動作し始めたら、プレフィックスを削除して、機能を1回宣言できます。

接頭辞は、すべてのブラウザに対して一度スタイルを宣言する必要があることを意味しないことを理解することが重要だと思います。接頭辞は、Webブラウザーが標準に準拠していないことがわかった場合はいつでも、追加のスタイルを宣言する必要があることを意味します。たとえば、上記のコードの代わりに、次のコードから始める必要があります。

 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

Microsoftが線形勾配を正しく計算できないことに突然気付いた場合は、プレフィックスを追加してIEの問題を修正できます。

 /* Friggin IE */
 background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

いずれかのブラウザの動作が異なるにもかかわらず、ページはどのブラウザでも同じように見えます。

これはA List Apartのこの記事で非常に包括的にカバーされていることがわかります。

ブラウザーエンジンが仕様を正しく実装していない場合、ブラウザーがプレフィックスのない形式で実装していないか、プレフィックスの形式で実装していないかに関係なく、ブラウザーは準拠していません。

違いは、ブラウザが準拠した場合でも互換性が損なわれないことです。ブラウザの動作が仕様と異なる場合、新しい名前でリストされているため、変更しても古いコードは破損しません。