JavaScript はブラウザーの CSS3 サポートを迅速に検出します。 機能_JavaScript のヒント

このプロジェクトでは、ブラウザーが「変換」をサポートしているかどうかを検出するなど、特定の CSS3 機能をサポートしているかどうかを迅速に検出する必要があります。そうすると、レイアウトには 2 つのまったく異なるレイアウトが含まれることになります。

もちろん、この記事で紹介した簡単な方法に加えて、modernizr という、より有名で一般的な方法もあります。スクリプトを実行すると、ブラウザーのサポートが追加されます。 html クラスのすべてのプロパティのリスト。

利点:

js は構成可能であり、構成スクリプトで不要な特徴検出を削除できます。特徴検出に基づく js ライブラリはシンプルで使いやすいです。

さらに、ブラウザの UA を判定するというあまり良くない方法もあります。これは、UA が偽造される可能性があり、バージョン判定が面倒で不安定であるためです。

利点: パフォーマンスが最適になる可能性があります

最後の方法は、この記事で紹介した方法です。ブラウザが特定の CSS 機能をサポートしているかどうかをすばやく検出する関数を作成しました。これは、ブラウザが特定の CSS 機能をサポートしているかどうかをすぐに知る必要があるシナリオに適しています。複数ではなく）。

利点:

優れたパフォーマンス、強力な汎用性、単一 CSS プロパティの検出に適しています

コードをコピー コードは次のとおりです:

var support = (function() {
var div = document.createElement('div'),
vendors = 'Khtml O Moz Webkit '.split(' '),
len =vendors.length;
return function(prop) {
if ( prop in div.style ) return true; div.style の prop ) return true;
prop = prop.replace(/^[a-z]/, function(val) {
return val.toUpperCase();
while); (len--) {
if (vendors[len] prop in div.style ) {
return true;
}
return
}; })();
if (supports('textShadow') ) {
document.documentElement.className = ' textShadow';


これが最終的なコードです。原則は次のとおりです。
1. div を作成し、それがサポートする属性の配列リストである div.style を取得します。

2. 配列にテキストが含まれているかどうかを確認し、含まれている場合は直接 true を返します。

3. Webkit とテキストなどのさまざまなプレフィックスを確認し、スタイルに含まれている場合は true を返します。

4. CSS の属性名は -webkit-transition ですが、DOM スタイルでは webkitTransition に対応することに注意してください。なぜこんなことが起こるのか私にもわかりません。

参考:

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-detect-css-support-in-browsers-with-javascript/