-prefix-free：JavaScriptのエレガントでミニチュアの「松葉杖」。さまざまなブラウザのCSS3プロパティプレフィックスを覚えてリストする必要がありません。

もちろん、 これまでに CSS3スタイルを頭脳に提供してきたサイト作成者は 、同じCSS3プロパティを繰り返して同じ値を与える必要性に対処する必要がありましたが、異なるブラウザー開発者プレフィックス（ベンダープレフィックス）



これらのプレフィックスは、ブラウザがまだ完全に標準化されていないCSS3プロパティを操作するために必要です。現在の各ブラウザの個別のプロパティ設定は、各ブラウザでのプロパティの現在の実装と標準の最終要件との考えられる違いをさらに回避すると考えられています。 Mozilla Firefoxブラウザーは、この目的のために「 -moz- 」 プレフィックス 、Google ChromeおよびApple Safari（およびその他のWebkitベースのブラウザー）のGoogle プレフィックス「 -webkit- 」、Opera プレフィックス「 -o- 」を使用しますIEはプレフィックス「 -ms- 」であり、Konqueror（および以前のバージョンのSafari）では、 プレフィックスは「 -khtml- 」です。



ただし、実際には、サイトの作成者はいくつかのブラウザーの機能の一種の「共通分母」を使用することがほとんどです。CSS3プロパティ値は、すべての最新ブラウザーで同じ（またはほぼ同じ）動作します。 はい、すべて同じ方法で記録されます。 したがって、プレフィックスの表示は、プロパティの繰り返しの繰り返しに削減されます。 たとえば、 ColorBox jQueryプラグインのいくつかのボタンに丸みを付けて影を付けるには、必然的にCSSでこれを記述する必要があります。

#cboxPrevious, #cboxNext, #cboxClose { -webkit-box-shadow: 0 0 6px #000; -moz-box-shadow: 0 0 6px #000; box-shadow: 0 0 6px #000; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、それはカドリングです。



第二に、それは不経済です。



第三に、1つまたは別のプレフィックスを指定する必要性を忘れるリスクが常にあります。 （「 一般的なCSS3エラーを回避する方法 」リストでは、このエラーが最初に表示されます。）



そのため、遅かれ早かれ、 CSSコードの作成者が接頭辞のない形式のCSSプロパティ とCSS値のみを指定できるツールが表示されるはずです。そして、自動化が特定の各ブラウザへの適応を処理します。



そして、そのようなツールが登場しました-Lea Verouに感謝します。 ここにあります：







「 -prefix-free 」スクリプトは、 圧縮形式で2 Kbのみを使用し 、CSS3プロパティを処理してブラウザーに適合させます。



これはJavaScriptであり、リーダー側で機能します。 したがって、読者のjavascriptが無効になっていると、スクリプトが機能しないことは明らかです。 一方、彼は、ブラウザで必要なプレフィックスをブラウザで直接確認して理解する機会を得て、 「User-Agent」ヘッダーのスニッフィングに依存せず、サーバー上のようにサポートされていないプロパティの準備ができた（おそらく古い）リストに依存しません。



このスクリプトは、 <style>要素およびstyle = "..."属性で指定されたスタイル 、および<link>要素で接続された外部スタイル（他のドメインからではない）を処理します。 1つの例は、セルフサイトのスタイル 「-prefix-free」です。 ただし、 「-prefix-free」は、 @ importディレクティブで接続されたスタイルを処理する方法を知りません。



OperaおよびGoogle Chromeブラウザーでは、ローカルファイルから接続されたスタイルの処理はデフォルトではサポートされていません（ ブラウザーの手動調整が必要です ）。 IEブラウザー（およびMozilla Firefox バージョン3.6以前）では、 style = "..."属性の非プレフィックスプロパティ値は機能せず、これらの古いFirefoxでは、 値だけでなくプロパティの名前も機能しません。



いくつかのプラグインが「-prefix-free」スクリプトに添付されます。 小さい方のプラグインは、jQueryライブラリ（ .css（...）メソッドを使用）がプレフィックスなしでCSS3プロパティを読み取りおよび設定できるようにし、 別のプラグインは新しい<style> および<link要素の外観を監視します> 、 style = "..."属性の変更用、CSSOMメソッド（ CSSオブジェクトモデル）の呼び出し用-必要なプロパティにプレフィックスをすばやく提供します。



確かに、この追跡には再び制限があります： style = "..."属性（WebkitのsetAttribute（）メソッドで作成され、CSSOM（ 要素など）で修正されていないプロパティの設定はGoogle Chromeでも機能しません）の変更を追跡することはできませんstyle.transform = 'rotate（ 5deg ）' ）、ただし読み取りは機能します。



ドキュメントを読み直した結果（私が再掲した主な抜粋）、 「-prefix-free」はそのようなサイトの設計に適しているかもしれないという印象を受けました。通常、読者はJavaScriptをオンにし、動的なスタイルの変更はむしろクラスの管理になります。要素のプロパティ値を直接使用するのではなく。 これらの値をstyle = "..."属性ではなくスタイル要素とファイルに保存する必要性に関しては、これは常にプレゼンテーションをコンテンツから分離するための良いトーンと考えられていました。



一方で、もちろん、プレフィックスが最初から表示されなかったことを忘れてはなりません-プレフィックスは、それぞれの目的を持っています：ブラウザー（同じブラウザーの古いバージョンと新しいバージョンを含む）の相互非互換性を克服することです。 エリック・マイヤーは 、彼のプレフィックスまたはポストハックでこれについてさらに詳しく話しました（2010年7月6日のA List Apart）。 「松葉杖」を使用したCSS3プロパティのサポートは、このような非互換性が生じる可能性がある場合は破棄する必要があります。



第三に、接頭辞の使用を狂信に変えるべきではありません。意味を失ったとき、良い「松葉杖」は互換性の問題につながることなく、著者の時間を節約するだけです。 同じEric Meyer は 、Twitterの「 -prefix -free」スクリプトを称賛し 、Lea Verouに感謝しました。