Wie kann ich bedingtes CSS-Rendering in Rails 3.1 implementieren?

Bedingtes CSS-Rendering in Rails 3.1

Die Asset-Pipeline von Rails 3.1 bietet einen leistungsstarken Mechanismus zum Verwalten statischer Assets, einschließlich CSS-Dateien. Das bedingte Rendern von CSS basierend auf bestimmten Kriterien kann jedoch eine herausfordernde Aufgabe sein.

Der Standardansatz

Standardmäßig schließt der Befehl *= require_tree alle CSS-Dateien in ein Assets/Stylesheets-Verzeichnis. Dieser Ansatz kann zu einem großen und unlesbaren CSS-Bundle führen.

Einbindung einzelner Dateien

Um dieses Problem zu umgehen, können Sie jede CSS-Datei manuell einzeln in Ihrer application.css angeben Manifest. Obwohl diese Methode eine feinere Kontrolle bietet, kann sie mühsam und unflexibel sein.

Eine intelligentere Lösung

Eine elegantere Lösung besteht darin, separate Manifestdateien zu verwenden, um CSS-Anforderungen aufzuschlüsseln logische Gruppen. Mit diesem Ansatz können Sie automatisch neue Stylesheets hinzufügen, ohne dass eine manuelle Bearbeitung erforderlich ist.

Schritt 1: Asset-Struktur neu organisieren

Beginnen Sie mit der Neuorganisation Ihres App/Assets/Stylesheets-Ordners in die folgende Struktur:

• alle: Enthält Ihr Basis-Stylesheet und alle Stylesheets, die für alle gelten Ansichten.
• print: Enthält Stylesheets speziell für das Drucken.
• d. h.: Enthält Stylesheets speziell für Internet Explorer-Browser.
• application-all.css: Eine Manifestdatei, die alle enthält CSS-Dateien im Verzeichnis „all“.
• application-print.css: Eine Manifestdatei, die alle CSS-Dateien im Verzeichnis „print“ enthält. Verzeichnis.
• application-ie.css: Eine Manifestdatei, die alle CSS-Dateien im Verzeichnis „ie“ enthält.

Schritt 2: Manifestdateien bearbeiten

Bearbeiten Sie als Nächstes die drei Manifestdateien wie unten gezeigt:

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

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

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

Schritt 3: Anwendungslayout aktualisieren

Ändern Sie Ihr Anwendungslayout, um die neuen Manifestdateien einzuschließen:

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

Schritt 4: Produktionsumgebung konfigurieren

Fügen Sie die neuen Manifestdateien zu Ihrem hinzu config/environments/produktion.rb:

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

Hinweis zu Bildreferenzen

Beachten Sie, dass sich dieser bedingte Rendering-Ansatz auf Bildreferenzen in Ihren Stylesheets auswirken kann. Um sicherzustellen, dass Bilder ordnungsgemäß geladen werden, können Sie Bilder so verschieben, dass sie derselben Ordnerstruktur folgen, Bildpfade qualifizieren oder die SASS-Helfer-Bild-URL ('image.png') verwenden.

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