Sprockets を使用して Rails 3.1 に条件付き CSS インクルードを実装するにはどうすればよいですか?

Sprockets を使用した Rails 3.1 への条件付きアセットの組み込み

CSS レンダリングを最適化する探求において、多くの開発者は CSS を選択的に組み込むという課題に苦労しています。特定の条件に基づいてファイルを作成します。この問題は、応答性の高いレイアウトを扱う場合、またはブラウザ間の互換性を確保する場合に関連します。

Rails 3.1 では、アセット パイプラインは静的アセットを管理するための強力なメカニズムを提供します。デフォルトでは、application.css の *= require_tree コマンドには、assets/stylesheets ディレクトリ内のすべてのファイルが含まれます。ただし、このアプローチは、CSS ファイルを条件付きで含める場合には十分ではない可能性があります。

伝統的だが不格好な解決策

回避策の 1 つは、図に示すように、各 CSS ファイルを手動で指定することです。

*= require_self
*= require home.css
...
*= require blueprint/screen.css

この方法は機能しますが、CSS ファイルの数が増えると実用的ではなくなります

個別のマニフェストと整理されたフォルダーの活用

より洗練されたソリューションには、アセット/スタイルシート フォルダーを再編成し、個別のマニフェスト ファイルを使用することが含まれます:

app/assets/stylesheets
+-- all
    +-- your_base_stylesheet.css
+-- print
    +-- blueprint
        +-- print.css
    +-- your_print_stylesheet.css
+-- ie
    +-- blueprint
        + ie.css
    +-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css

各カテゴリは独自のマニフェストを取得しますfile:

/* application-all.css */
*= require_self
*= require_tree ./all

/* application-print.css */
*= require_self
*= require_tree ./print

/* application-ie.css */
*= require_self
*= require_tree ./ie

それに応じてアプリケーション レイアウト ファイルが更新されます:

<%= stylesheet_link_tag "application-all", :media => "all" %>
<%= stylesheet_link_tag "application-print", :media => "print" %>

<!--[if lte IE 8]>
    <%= stylesheet_link_tag "application-ie", :media => "all" %>
<![endif]-->

忘れずに config/environments/production.rb にマニフェスト ファイルを含めてください:

config.assets.precompile += %w( application-all.css application-print.css application-ie.css )

画像参照

この構造では、注意が必要です。画像参照を扱うときに必要です。考えられる解決策の 1 つは、それに応じて画像を移動し、CSS ファイルと一貫した構成を確保することです。あるいは、画像パスを修飾するか、画像 URL の SASS ヘルパーを利用することを選択することもできます。

以上がSprockets を使用して Rails 3.1 に条件付き CSS インクルードを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。