ブラウザの検出なしにキーフレームを使用できますか？

Question

私はいくつかのCSS3キーフレームアニメーションを使用するサイトを作っています。

私が見たガイドでは、ブラウザごとに別のコードを使用することをお勧めします。
など。わずかに異なるグループが、本質的に同じことを示唆して

@-webkit-keyframes NAME-YOUR-ANIMATION { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@-moz-keyframes NAME-YOUR-ANIMATION { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@-o-keyframes NAME-YOUR-ANIMATION { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@keyframes NAME-YOUR-ANIMATION { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
#box { 
    -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ 
    -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ 
    -o-animation:  NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ 
    animation:   NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ 
} 

And this oneを：示唆This guide。

しかし、私はブラウザ検出が最新のWebページでは貧弱な方法であると言っている多くの記事を見てきました。

This page (same site as above)

W3C agreesが、例外は、CSSでブラウザプレフィックスのために作ることができると感じています。

ブラウザを指定するのではなく機能のサポートを照会するアプローチを使用してキーフレームを使用できますか？

Answer 1

しかし、私はブラウザ検出が最新のWebページでは貧弱な方法であると言っている多くの記事を見てきました。

はい、ブラウザの検出は、信頼性が低く、近い将来に中断する可能性があるため、適切な方法ではありません。

ただし、ここで行っていることは、that articleに記載されているように、「ブラウザの検出」ではありません。ベンダープレフィックスを使用しています。

ベンダーのプレフィックスはOKです。これは、まだ「ドラフト」と見なされている機能を実装しています。これを行う方法はです。

"問題は、ブラウザが必ずしもこれを行う"標準的な "方法を必ずしもサポートしていないことです。ベンダープレフィックスなし。おそらく彼らはそれが標準である前にこれを実装したからでしょう。 「最終的な」実施が合意される前に。その間、ベンダーのプレフィックスを使用して動作する方法を実装します。ベンダープレフィックスのルールは、最終的な「標準」と同じように機能しない可能性があります。

したがって、ベンダーのプレフィックスのバージョンは、常に（またはしばらくの間）、そのブラウザ用に設計されています。ブラウザは、他のすべてのベンダーの接頭辞付きのルールを無視します（CSSでは、ブラウザが何かを理解しなければ無視する必要があります）。ブラウザが標準を実装し、ベンダ非接頭辞のルールをサポートし始めると、それが優先されるルールになります。