Comment puis-je implémenter le rendu CSS conditionnel dans Rails 3.1 ?

Rendu CSS conditionnel dans Rails 3.1

Le pipeline d'actifs Rails 3.1 offre un mécanisme puissant pour gérer les actifs statiques, y compris les fichiers CSS. Cependant, le rendu conditionnel du CSS en fonction de critères spécifiques peut être une tâche difficile.

L'approche par défaut

Par défaut, la commande *= require_tree inclut tous les fichiers CSS dans le Répertoire actifs/feuilles de style. Cette approche peut conduire à un ensemble CSS volumineux et illisible.

Inclusion de fichiers individuels

En guise de solution de contournement, vous pouvez spécifier manuellement chaque fichier CSS individuellement dans votre application.css manifeste. Bien que cette méthode offre un contrôle plus fin, elle peut s'avérer fastidieuse et peu flexible.

Une solution plus intelligente

Une solution plus élégante consiste à utiliser des fichiers manifestes distincts pour décomposer les exigences CSS en groupes logiques. Cette approche vous permet d'ajouter automatiquement de nouvelles feuilles de style sans avoir besoin de modification manuelle.

Étape 1 : Réorganiser la structure des actifs

Commencez par réorganiser votre dossier app/assets/stylesheets dans la structure suivante :

• all : contient votre feuille de style de base et toutes les feuilles de style qui s'appliquent à tous vues.
• print : contient des feuilles de style spécifiques à l'impression.
• ie : contient des feuilles de style spécifiques aux navigateurs Internet Explorer.
• application-all.css : un fichier manifeste qui inclut toutes Fichiers CSS dans le répertoire "all".
• application-print.css : un fichier manifeste qui inclut tous les fichiers CSS dans le répertoire "print". répertoire.
• application-ie.css : un fichier manifeste qui inclut tous les fichiers CSS dans le répertoire "ie".

Étape 2 : modifier les fichiers manifestes

Ensuite, modifiez les trois fichiers manifestes comme indiqué ci-dessous :

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

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

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

Étape 3 : Mettre à jour la présentation de l'application

Modifiez la présentation de votre application pour inclure les nouveaux fichiers manifeste :

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

Étape 4 : Configurer l'environnement de production

Ajoutez les nouveaux fichiers manifestes à votre config/environments/production.rb :

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

Remarque sur les références d'images

Sachez que cette approche de rendu conditionnel peut affecter les références d'images dans vos feuilles de style. Pour garantir un chargement correct des images, vous pouvez déplacer les images pour qu'elles suivent la même structure de dossiers, qualifier les chemins d'image ou utiliser l'assistant SASS image-url('image.png').

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!