高性能包装検出ブラウザがcss3属性に対応 function_html/css_WEB-ITnose

css3 は長い間リリースされてきましたが、ブラウザが特定の css3 属性をサポートしているかどうかを判断するのは少し時代遅れですが、この記事では主にサポートされているかどうかを判断しないことについて説明します。しかし、カプセル化の方が優れていると判断するにはどうすればよいですか? コメントは大歓迎です。

ブラウザが css3 移行をサポートしているかどうかを確認する方法は非常に簡単です:

'transition' in document.body.style

Chrome と IE は document.body をサポートしていますが、Firefox は document.body をサポートしていません。 .documentElement をサポートしていない人のために説明すると、doctype で宣言された ie は document.documentElement をサポートしません。

したがって、両方をサポートする要素を作成し、要素のスタイルに属性が存在するかどうかを判断します。

'transition' in document.createElement( 'i' ).style

もちろん、古い Chrome や Firefox では、これは標準の範囲内ですが、遷移はサポートされていません。遷移をサポートします。たとえば、Chrome の CSS は -webkit-transition: 1s; として記述されるため、js もこの状況を判断し、下位互換性を持たせる必要があります。

次に、簡潔なカプセル化コードを投稿し、それを段階的に分析して、複雑さを避け、全体的なビューを生成できないようにします。

    function cssProperty( attr ){            var prefix = [ 'O', 'ms', 'Moz', 'Webkit' ],                length = prefix.length,                style = document.createElement( 'i' ).style;            cssProperty =  function( attr ){                if( attr in style ){                    return true;                }                attr = attr.replace( /^[a-z]/, function( val ){                    return val.toUpperCase();                });                var len = length;                while( len-- ){                    if( prefix[ len ] + attr in style ){                       return true;                    }                }                return false;            };            return cssProperty( attr );        }

以下は、段落ごとの説明です。

なぜ文字列カット prefix = 'O ms Moz Webkit'.split( ' ' ) を使用する代わりに prefix = [ 'O', 'ms', 'Moz', 'Webkit' ]

を直接宣言するのかこのように書かれています。

著者によるテスト後のテストコードは次のとおりです。不要な影響を避けるために、2つのコードを一緒にテストしたり、2つのコードを別々にテストしたりして結果に違いはありません。

怠惰にするために、他のブラウザでも同様の結果が得られるはずだと推定しているので、IE テストは行いません:

テスト結果はミリ秒単位で次のとおりです:

明らかに、 prefix = [ 'O' , 'ms', 'Moz', 'Webkit' ] を直接宣言すると、コードの実行がより効率的になります。

もう一度見てください [ 'O', 'ms', 'Moz', 'Webkit' ] は 25 バイト、ファイル サイズから見ても 'O ms Moz Webkit'.split( ' ' ) は 28 バイトです パフォーマンスの観点から見ても、前者は後者よりも優れています。

しかし、jQuery を含む多くの海外ソースが分割を使用するのはなぜでしょうか?

(追伸: jQuery-2.1.3 ソースコードの 5738 行目に cssPrefix を記述する場合、直接代入が使用されます。コードは右に示すとおりです。 cssPrefixes = [ "Webkit", "O", "Moz", "ms" ])

理由は次のようなものだと思います。分割文字列の種類が多い場合、分割を使用するとファイルのバイト数を減らすことができ、実行効率は 99999 倍に削減されるとほとんど無視できますが、ファイルは無視しても構いませんが、実行効率を優先するよりも、こちらを選択した方が良いでしょう。

(追伸: おそらくもう 1 つの理由は、一重引用符、カンマ、角括弧を使用する配列とは異なり、分割コードを書くのが便利だからです... 見せびらかすためだけなら忘れてください)

本題に戻りますが、私たちはどちらの側よりも優れているため、前者を選択するべきであることに疑いの余地はありません。

❤ インターネット上の一部のコードがキャッシュされず、毎回スタイルを取得しないことについて、同じブラウザ環境で、この要素のスタイルは次の秒で変更されるのでしょうか?異なる要素も変化しますか? div 要素はトランジションをサポートしていますが、他の要素はトランジションをサポートしていませんか? ！

次のコードは誰が海外から来たものなのでしょうか (もちろん、中国の多くの人が何も考えずにコピーしたようです): http://code.tutsplus.com/tutorials/quick-tip-detect-css3-support-in-ブラウザ -with-javascript--net-16444

❤ よく見てみると、なぜ私の配置が次のようになっているのかがわかります: O ms Moz Webkit、他の人は次のようになります: Webkit Moz O ms;その理由は、2015 年の年間ブラウザ市場シェア ランキングから来ています: http://tools.yesky.com/420/93749420.shtml

中国では、Opera PC バージョンはおそらく役に立たず、すでに Webkit カーネル I に切り替わっています。開発者にとっては落とし穴が多すぎるので、それについては話さないでください。

ということで、全体的なランキングはchrome、Firefox、ie、operaという結果になりました。

後続の

whileループ

の判定コードでは判定が逆順になっているため、実行効率の観点から ほとんどの場合chromeからアクセスされるため、Webkitカーネルが先に判定され、条件が満たされるとループが抜け出し、実行が削減され、運用効率が向上します。

❤ 私のコードには余分な var len = length; があります。これをテストするには、(古いバージョンの) ブラウザーがこれらの 2 つの属性のみをサポートしています (Firefox13 など)。 2 回目以降のアラート ポップアップは、len が不足するため false になります。

    alert( cssProperty( 'columns' ) )    alert( cssProperty( 'animation' ) )

❤函数封装如下封装，如果像国外那种柯里化封装表示js一加载完就会执行外层的匿名函数，然后把新函数赋值给supports，如果页面一定会用到检测函数，那么这种方法与下面的封装效果无差，但是如果页面不一定 用到，即cssProperty变成了整站全局函数，或许另多个页面用到，于是像下面这样封装就不会造成函数的自执行，只有第一次调用函数的时候，函数才会执行，然后被赋予新值，详情可以参考一下《JavaScript高级程序设计第三版》惰性载入函数。

    function cssProperty( attr ){         //...code         cssProperty =  function( attr ){             //...code         };         return cssProperty( attr );    }

最后欢迎访问我的 Github ，欢迎Star，欢迎Fork，一起成长。