Comment puis-je implémenter l'inclusion CSS conditionnelle dans Rails 3.1 à l'aide de Sprockets ?

Inclusion conditionnelle d'actifs dans Rails 3.1 avec Sprockets

Dans la quête d'optimisation du rendu CSS, de nombreux développeurs ont du mal à relever le défi de l'inclusion sélective de CSS fichiers basés sur des conditions spécifiques. Ce problème devient pertinent lorsqu'il s'agit de mises en page réactives ou d'assurer la compatibilité entre les navigateurs.

Dans Rails 3.1, le pipeline d'actifs fournit un mécanisme puissant pour gérer les actifs statiques. Par défaut, la commande *= require_tree dans application.css inclut tous les fichiers du répertoire assets/stylesheets. Cependant, cette approche peut ne pas suffire pour inclure conditionnellement des fichiers CSS.

Une solution traditionnelle mais maladroite

Une solution de contournement consiste à spécifier manuellement chaque fichier CSS, comme illustré :

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

Bien que cette méthode fonctionne, elle devient moins pratique à mesure que le nombre de fichiers CSS augmente.

Exploiter des manifestes séparés et des dossiers organisés

Une solution plus élégante consiste à réorganiser le dossier actifs/feuilles de style et à utiliser des fichiers manifestes distincts :

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

Chaque catégorie obtient son propre fichier manifeste :

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

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

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

Le fichier de mise en page de l'application est mis à jour en conséquence :

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

N'oubliez pas d'inclure les fichiers manifestes dans config/environments/production.rb :

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

Références d'images

Avec cette structure, la prudence est de mise lorsqu'il s'agit de références d'images. Une solution potentielle consiste à déplacer les images en conséquence, garantissant ainsi une organisation cohérente avec les fichiers CSS. Alternativement, on peut choisir de qualifier le chemin de l'image ou d'utiliser l'assistant SASS pour les URL des images.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!