Verwendung der Rails 3.1-Assets-Pipeline zur bedingten Verwendung bestimmter Css

Question

Ich bin in den Prozess der Erstellung meiner ersten Solo Rails app mit Rails 3.1.rc5. Mein Problem ist, dass ich meine Website render die verschiedenen CSS-Dateien bedingt haben wollen. Ich verwende Blueprint CSS und ich versuche, sprockets/rails render haben screen.css die meiste Zeit, print.css nur beim Drucken, und ie.css nur, wenn die Website über den Internet Explorer aufgerufen wird.

Leider ist der Standard *= require_tree Befehl in der application.css Manifest enthält alles in der assets/stylesheets Verzeichnis und führt zu einem unangenehmen CSS-Wirrwarr. Meine derzeitige Abhilfe ist eine Art Brute-Force-Methode, bei der ich alles einzeln festlege:

In application.css:

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

In meinen Stylesheets teilweise (haml):

<!--[if lt IE 9]
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
![endif]-->
= stylesheet_link_tag "application"
= stylesheet_link_tag 'blueprint/print', media: 'print'
<!--[if lt IE8]]
= stylesheet_link_tag 'blueprint/ie'
![endif]-->
= javascript_include_tag "application"

Das funktioniert, ist aber nicht besonders schön. Ich habe ein paar Stunden der Suche getan, um sogar so weit zu kommen, aber ich hoffe, dass es einige einfachere Möglichkeit, es zu tun, die ich gerade verpasst habe. Wenn ich sogar bestimmte Verzeichnisse selektiv rendern könnte (ohne Unterverzeichnisse einzubeziehen), würde das den ganzen Prozess viel weniger starr machen.

Danke!

Answer 1

Ich habe einen Weg gefunden, es weniger starr und zukunftssicher zu machen, indem ich weiterhin die Asset-Pipeline verwende, aber die Stylesheets gruppiert habe. Es ist nicht viel einfacher als Ihre Lösung, aber diese Lösung ermöglicht es Ihnen, automatisch neue Stylesheets hinzuzufügen, ohne die gesamte Struktur erneut bearbeiten zu müssen.

Sie sollten getrennte Manifestdateien verwenden, um die Dinge zu trennen. Zuerst müssen Sie Ihre app/assets/stylesheets Ordner:

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

Anschließend bearbeiten Sie die drei Manifestdateien:

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

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

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

Als nächstes aktualisieren Sie Ihre Anwendungslayoutdatei:

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

Vergessen Sie nicht, diese neuen Manifestdateien in Ihre config/environments/production.rb einzubinden:

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

Aktualisierung:

Wie Max schon sagte, muss man bei dieser Struktur auf die Bildreferenzen achten. Sie haben ein paar Möglichkeiten:

1. Verschieben Sie die Bilder so, dass sie dem gleichen Muster folgen
   • Beachten Sie, dass dies nur funktioniert, wenn die Bilder nicht alle gemeinsam genutzt werden
   • Ich erwarte, dass dies für die meisten nicht in Frage kommt, da es die Dinge zu sehr verkompliziert.
2. Qualifizieren Sie den Bildpfad:
   • background: url('/assets/image.png');
3. Verwenden Sie den SASS-Helfer:
   • background: image-url('image.png');

Answer 2

Ich bin heute auf dieses Problem gestoßen.

Am Ende habe ich alle IE-spezifischen Stylesheets in lib/assets/stylesheets abgelegt und eine Manifestdatei pro IE-Version erstellt. Dann in application.rb fügen Sie sie in die Liste der Dinge zu vorkompilieren:

config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]

Fügen Sie diese Manifestdateien in Ihre Layouts ein, und schon sind Sie startklar!

Answer 3

Das ist eine ziemlich elegante Methode. Ich verwende bedingte Klassen auf html oder modernizr. Siehe diesen Artikel für eine gute Darstellung auf, was was tut. modernizr-vs-conditional-classes-on-html