プレフィックスは良いことです。 ブラウザメーカーが新しい機能を実装するのに役立ちます。 しかし、それらからの開発者の生活はより複雑になります。 多くのプレフィックスがあり、構文に違いがある場合があります。
問題は明らかです。 プレフィックスの操作を簡単にする方法が必要です。
当然、プレフィックスの使用を停止するのは無理でしょう。 しかし、それらを生成する義務を既存のツールに移行することは、このために特に可能です。 可能なオプションをリストしようとしました。
1.プリプロセッサ
プリプロセッサの本質は、スタイルシートの作成者が、CSSにない追加の機能（変数、関数の類似性など）を使用できることです。プリプロセッサの構文を事前に学習しました。 。 コードを置き換える機能を使用して、プレフィックス付きのクロスブラウザコードを自動的に生成することもできます。
最も有名なCSSプリプロセッサは
LESSと
SASSです。
それらは直接的な競争相手ですが、違いはあります。 どちらもサーバー側で使用できますが、LESSはjavascriptファイルとしても利用できるため、この機能に特別な注意を払うことができます。
少ない
このプリプロセッサの構文は、競合他社のものよりも単純です。 サーバー側でスタイルシートを処理することは可能ですが、今ではJavaScriptファイルを介してクライアント側で作業するオプションに興味があります。
接続
<!doctype html>
<had>
<link rl="stylesheet/less" type="text/css" href="style.less">
<sript src="less-1.1.3.min.js" type="text/javascript"></sript>
</had>
ミックスイン
.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}使用する
#shape1{
.border-radius(10px);
}プレフィックスを使用するには、ミックスイン（何をどこで置き換えるかを知っている同じコード）を使用する必要があります。 CSS3用の既製のミックスインキットとライブラリがあります
lesselements.comgithub.com/jdmiller82/-lessins-snipplr.com/view/47181/less-classesroel.vanhintum.eu/more-lessサーバーまたはブラウザで.lessファイルをコンパイルする必要はありません。完成したCSSファイルをローカルで取得し、サイトで既に使用できます。
SimpLESSは、.lessを標準CSSに自動的にコンパイルするアプリケーションです。 すべてのプラットフォームで無料。
Less Appも同様のアプリケーションですが、Mac専用です。
CSSで.lessファイルをコンパイル
するDreamweaverの拡張機能もあります。
クライアントコンピューターは.lessファイルと.jsファイルを受信します。ブラウザーで処理した後、可能なすべてのプレフィックスを持つ.cssファイルがありますサス
Rubyで書かれています。 LESSよりも多くの機能があるため、大規模プロジェクトに適しています。 プレフィックスを使用して生成することは、競合他社とほぼ同じです。つまり、ミックスインを使用します。
利点の1つは、CSS3を操作するためのライブラリやミックスインを含む既製のライブラリとミックスインを含む
Compassフレームワークの存在です。 CSSのSASSファイルのローカルコンパイル用の
アプリケーションがあります。 クロスプラットフォームですが、有料です（グラフィックシェルは有料で、コンパイラはオープンソースです）。
SASS用のCSS3ミックスインライブラリもあります。
github.com/thoughtbot/bourbon
SASSファイルはサーバー上で処理され、クライアントコンピューターは既製の.cssファイルを受け取りますプリプロセッサの利点：
+プレフィックスに加えて、より多くのことができます
+ CSSファイルを自動的に処理する機能（圧縮、不要な削除など）
+通常のキャッシング（ただし、LESSはlocalStorageを使用してキャッシュされます）
プリプロセッサの欠点：
-JavaScriptを使用したバリアントの場合-ブラウザーに含まれるスクリプトへの依存
-特定のブラウザに必要なプレフィックスだけでなく、可能なすべてのプレフィックスを含む生成コード
より多くの競合他社
2.-プレフィックスなし
-Prefix-freeは、ページに接続するために必要なスクリプトです。 プリプロセッサとは異なり、通常のCSSファイルを処理します。つまり、コードには変数やミックスインはなく、最も一般的なCSSコードはベンダープレフィックスなしでのみ処理されます。
スタイルページはJavascriptを使用して処理されます。
プレフィックスは、プレフィックスのない特定のブラウザーでサポートされていないプロパティに対してのみ追加されます。
クライアントコンピューターは、プレフィックスなしで.cssファイルを受け取ります。 JavaScriptを使用してブラウザで処理した後、必要なプレフィックスのみがこのファイルに追加されます利点：
+スタイルシートの作成者は、プレフィックスなしで1つのプロパティオプションのみを使用します
+ユーザーのブラウザは、「外部」プレフィックスまたは既に古いプレフィックスを持つスタイルを受信しません
+有効なコード
+必要がなくなったら簡単に削除できます
短所：
-
インポートを介して接続されたスタイルは処理されません
-サイトをロードした後、CSS3スタイルを完全に処理する前に、ほとんど目立たない一時停止があります
-Javascriptが無効になっている場合、ユーザーにはCSS3スタイルが表示されません
-ダウンロードする追加ファイル（ただし、圧縮形式では2KBのみ）
-処理されたスタイルシートはキャッシュされません
競合他社
3.ジェネレーター
この方法はすでに多くの人が使用しています。
オンラインジェネレーターの1つを開き、そこから完成したコードをプレフィックスでコピーします。
最近、私が書いた標準プロパティにプレフィックスを持つプロパティを自動的に追加するジェネレータを探しました。 いくつかのオプションがあることが判明しました。
すべてのプレフィックスを持つ手動で準備された.cssファイルを含むファイルをサーバーにアップロードします利点：
+インストールおよび構成する必要はありません
+多くの場合、ジェネレーターはCSS3プロパティの値を便利に設定する機能を提供します
短所：
-CSS3プロパティ値を作成し、その後変更する際の自動化はありません
4.コードエディター
確かに、コードエディターとプログラミング環境のプレフィックスの置換を自動化する可能性は確かにあります。 プレフィックスにZen Codingを用意しておくと非常に便利です。
現時点では、Prefixrを使用してプラグインを見つけることができました。
このページには 、メモ帳++、TextMate、Espresso、Codaなどの
プラグインが
リストされています 。
NetBeansのプレフィックスUPDロシア語を話さないあなたのために
この記事を英語で 。