2009-07-07 9 views
1

À quelques reprises, lorsque je suis passé du développement à la mise en scène, j'ai été mordu par la façon dont JavaScript et les feuilles de style changeaient leur comportement lorsqu'ils étaient regroupés dans un seul fichier.Pourquoi rouler javascript ou css dans les rails avec la mise en page?

Par exemple, je suis en train de garder la série de feuilles de style modulaire et petit pour maintenabilité, comme ceci:

<%= stylesheet_link_tag "reset-fonts-grid.css", "typography.css", "layout.css", "cms.css", "cms.about.css", "cms.legal.css", "comments.css", "user_generated_content.css", "overlay.css", "login_page.css", "flag_for_admin.css", 'patch.css', 'nag_guide.css', :cache => "cache/all" %> 

Le fonctionne très bien dans le développement, quand vous êtes plus préoccupé par le débogage de comptage http demandes

Mais dès que je passe à un environnement de production ou la mise en cache réglée pour être dans config/environnements/development.rb comme ci-dessous, les dispositions briser:

config.action_controller.perform_caching = false

Que se passe-t-il ici, et pourquoi un fichier concaténé se comporterait-il différemment d'une série de demandes plus petites comme celle-ci, et comment puis-je résoudre ce problème? En outre, quelle est la différence entre le nombre de requêtes http sur la page et la taille du fichier?

+0

De quelle manière les dispositions se brisent-elles? –

+0

Hi John, Fondamentalement, les styles semblent être remplacés, ou tout simplement ignorés lorsque les feuilles de style sont concaténées. Par exemple, j'ai des éléments mis à 'display: none;' qui apparaissent, détruisant les mises en page, et le remplissage ou les marges commencent à se comporter de manière très imprévisible. –

Répondre

0

Est-ce que votre CSS valide? J'ai eu par le passé des problèmes semblables aux vôtres qui ont été causés par de petites erreurs que j'ai trouvées avec la validation.

Essayez http://jigsaw.w3.org/css-validator/

+1

Ah, j'ai divisé les fichiers CSS d'un gros fichier à environ trois fichiers concaténés, et beaucoup de problèmes de mise en page sont en train de disparaître. Cela semble aider pour le CSS, mais javascript est une autre affaire. Peluches, peluches, peluches ... –

0

Sur intérêt, ça marche si vous changez votre option :cache afin qu'il ne comprend pas une barre oblique? Par exemple:

<%= stylesheet_link_tag "reset-fonts-grid.css", ..., :cache => "foo" %> 
  • Qu'est-ce que l'élément HTML link ressembler Rails génère pour votre feuille de style combiné?
0

Si vous souhaitez approfondir les détails de l'application des styles dans la situation concaténée par rapport à la situation non concaténée, vous pouvez installer le plugin FireBug pour Firefox. Ensuite, ouvrez deux fenêtres de navigateur, une avec la page en dev et une en production et utilisez FireBug pour isoler un élément DOM qui vous pose problème et comparer les attributs CSS calculés pour cet élément dans les deux situations différentes.

La dernière version de Safari a un outil intégré qui est très similaire à FireBug.

Est-il possible que Rails concatène les fichiers CSS dans un ordre incorrect? Cela semble peu probable, mais il y a peut-être un bug dans Rails. Jetez un oeil au fichier concaténé et vérifiez la commande. Si elles sont hors service, vous pouvez créer un fichier CSS maître et inclure les autres avec des instructions @include. Cela garantirait qu'ils sont lus dans le bon ordre.

Questions connexes