Wie kann ich die bedingte CSS-Einbindung in Rails 3.1 mithilfe von Sprockets implementieren?

Bedingte Asset-Einbindung in Rails 3.1 mit Sprockets

Auf der Suche nach einer Optimierung des CSS-Renderings kämpfen viele Entwickler mit der Herausforderung, CSS selektiv einzubinden Dateien basierend auf bestimmten Bedingungen. Dieses Problem wird relevant, wenn es um responsive Layouts geht oder um die Kompatibilität zwischen Browsern sicherzustellen.

In Rails 3.1 bietet die Asset-Pipeline einen leistungsstarken Mechanismus zur Verwaltung statischer Assets. Standardmäßig schließt der Befehl *= require_tree in application.css alle Dateien im Verzeichnis asset/stylesheets ein. Dieser Ansatz reicht jedoch möglicherweise nicht aus, um CSS-Dateien bedingt einzubinden.

Eine traditionelle, aber umständliche Lösung

Eine Problemumgehung besteht darin, jede CSS-Datei manuell anzugeben, wie dargestellt:

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

Obwohl diese Methode funktioniert, wird sie mit der Anzahl der CSS-Dateien weniger praktisch erhöht sich.

Nutzung separater Manifeste und organisierter Ordner

Eine elegantere Lösung besteht darin, den Ordner „Assets/Stylesheets“ neu zu organisieren und separate Manifestdateien zu verwenden:

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

Jede Kategorie erhält eine eigene Manifestdatei:

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

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

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

Die Anwendungslayoutdatei wird aktualisiert entsprechend:

<%= 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]-->

Denken Sie daran, die Manifestdateien in config/environments/produktion.rb einzuschließen:

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

Bildreferenzen

Mit Aufgrund dieser Struktur ist beim Umgang mit Bildverweisen Vorsicht geboten. Eine mögliche Lösung besteht darin, Bilder entsprechend zu verschieben und so eine konsistente Organisation mit den CSS-Dateien sicherzustellen. Alternativ kann man sich dafür entscheiden, den Bildpfad zu qualifizieren oder den SASS-Helfer für Bild-URLs zu nutzen.

Das obige ist der detaillierte Inhalt vonWie kann ich die bedingte CSS-Einbindung in Rails 3.1 mithilfe von Sprockets implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!