2

次のような CSS を記述できるプラグインまたはこの性質のものはありますか。

transition:all 300ms; 
box-shadow:0 3px 2px #222; 
backface-visibility:hidden;

等..

-webkit-、-moz-、などを必要とするブラウザ バージョンでは-ms-、-o-スタイルシートがロードされると、必要な場所に自動的に追加されます。

4

1 に答える 1

5

はい、 -prefix -freeを使用すると、どこでもプレフィックスのない CSS プロパティのみを使用できます。必要な場合にのみ、現在のブラウザーのプレフィックスを CSS コードに追加して、舞台裏で動作します。プロジェクトのウェブサイト

特徴

  • または 要素内のすべてのスタイルシートを処理し、必要に応じてベンダー プレフィックスを追加します
  • スタイル属性を持つ要素を処理し、必要に応じてベンダー プレフィックスを追加します
  • 新しい or 要素、スタイル属性の変更、および CSSOM の変更を処理します (プラグインが必要)
  • jQuery の .css() メソッドが接頭辞なしのプロパティを取得および設定できるようにします (プラグインが必要です)

制限事項

  • @import されたファイルのプレフィックス コードはサポートされていません
  • CORS 対応でない限り、クロスオリジン リンク スタイルシートのプレフィックスはサポートされていません
  • Chrome と Opera では、接頭辞なしでリンクされたスタイルシートはローカルでは機能しません。ただし、それは自分で変更できます。
  • インライン スタイル (style 属性内) の接頭辞なしの値は、IE および Firefox < 3.6 では機能しません。Firefox < 3.6 のプロパティも同様です。

使い方

ページの任意の場所に prefixfree.js を含めるだけです。FOUCを最小限に抑えるために、スタイルシートの直後に配置することをお勧めします

これで完了です。

ブラウザのサポート

対象となるブラウザのサポートは、 IE9+、Opera 10 + 、Firefox 3.5 + 、Safari 4+、デスクトップの Chrome、モバイルの Safari、Android ブラウザ、Chrome、モバイルの Opera Mobileです。

接頭辞mycss

さらに、プレフィックスなしの css コードを貼り付けて、すべてのベンダー プレフィックスを含む css を返すオンライン サービスもあります。http://prefixmycss.com/

CSS3プリーズ

css3please.com : ジョナサン ニールとポール アイリッシュによって作成された、クロス ブラウザーの css3 ルール ジェネレーター。必要なプロパティ全体で変更を同期および正規化することに加えて、IE フィルターを介していくつかの機能の IE サポートもこっそり取り入れます。

SASSとコンパス

もう 1 つの方法は、COMPASS mixin で CSS プリプロセッサSASSを使用することです。

Sassは、ネストされたルール、変数、ミックスイン、セレクターの継承などを追加する CSS3 の拡張機能です。Sass は整形式の CSS を生成し、スタイルシートの整理と保守を容易にします。

Compassは Sass の拡張を可能にし、再利用可能なパターンでいっぱいで、スプライト、CSS3、タイフォグラフィーをベストプラクティスに基づく簡単で標準的な方法で使用できます。

最後に、Google で働いている最高のフロントエンド開発者の 1 人である Paul Irish の記事を読むことをお勧めします。

于 2012-12-31T16:57:36.870 に答える