Solution de pipeline d’actifs Rails pour le sélecteur IE / 4096 - Limite de feuille de style

Question

Le problème

Microsoft IE soutien de la documentation explique que dans Internet Explorer 6-9:

1. Toutes les balises de style après les 31 premières balises de style ne sont pas appliquées.
2. Toutes les règles de style après la première 4,095 règles ne sont pas appliquées.
3. Sur les pages qui utilise les @import règle continuellement à importer des feuilles de style externes que d'importer d'autres feuilles de style les feuilles de style sont plus que trois niveaux de profondeur sont ignorés.

Il y a beaucoup de preuve de ce problème avec le script de démos. Voir aussi Bénir.

Solution nécessaire

Nous avons besoin d'une façon de diviser compilé les feuilles de style générées par les Pignons dans l'asset pipeline pour garder le max sélecteur de compter au-dessous de 4096, et de les lier dans le code HTML de déployant une application Rails. Comment pouvons-nous passer à la compilation de sortie de la transformation des actifs (plus précisément les feuilles de style) comme argument à une méthode qui peut ensuite modifier les fichiers?

Voir ci-dessous les tentatives pour un endroit pour commencer. Si quelqu'un pouvait m'aider à trouver une façon de rendre opérationnelle (ou une toute nouvelle solution), ce serait fantastique!

Solution existante tentatives

• Bless a été créé pour résoudre ce problème en divisant les feuilles de style pour garder le max sélecteur de comte par feuille sous la limite. Bénir s'exécute sur le serveur node.js. Je n'ai pas vu un Rubis-équivalent encore. Eric Champs essayé de servir actifs compilé avec boussole pour Bénir (fonctionnement en nœud), mais que la solution dépend de la Boussole de la manipulation de l'actif de la compilation, et donc ne semble pas fonctionner avec l'asset pipeline. Notez qu'au lieu de se lier plusieurs feuilles de style, Bénissez ajoute @include des déclarations à la première feuille, ce qui peut être le chemin à parcourir afin d'éviter de toucher le balisage.

• Lorsque Christian Peters (@croustillant) découvert ce problème, il a mis en œuvre un splitter comme Bénisse également transmis Boussole de sortie d'un module personnalisé, qui fonctionnait très bien avant de Rails 3.1. Plus tard, il adapte ses splitter avec un SprocketsEngine pour l'intégration avec les Rails Asset pipeline. J'ai essayé de mettre en œuvre le nouveau code, mais il ne semble pas fonctionner automatiquement (si le séparateur fonctionne très bien lorsqu'il est appelé manuellement dans la console).

Informations connexes

Pour plus d'informations sur le CSS limites dans IE 6-9, voir ces questions connexes:

• Est-ce que IE 8 ont une limite sur le nombre de feuilles de style par page?
• Internet Explorer règles CSS limites

Answer 1

Nous avons un système automatisé (quoique quelque peu gênant) de la solution de travail dans la production de Rails 3.1 application avec asset pipeline en place. Ryan déjà référencé de la solution à sa question, mais j'essaie de trouver une façon plus complète la réponse.

L'asset pipeline tuyaux d'un élément d'actif par le biais de différents Pignons moteurs.

De sorte que vous pourriez avoir par exemple un ie.css.sass.erb qui s'exécute par le biais de l'ERB Pignon moteur et ensuite transmis à la Sass Pignon moteur etc. Mais il est toujours l'un fichier et un fichier.

Dans ce problème particulier, nous aimerions avoir 1 entrant fichier et n sortant de fichiers. Nous n'avons pas trouvé un moyen de rendre cela possible avec les pignons. Mais nous avons trouvé une solution de contournement:

Fournir un ie.css.sass qui comprend l'ensemble de la feuille de style et un ie_portion2.css.sass.split2 qui vient des importations de le remplir ie.fichier css:

//= include 'ie.css'

Pour l' split2 extension de fichier, nous enregistrons un des Pignons du Moteur:

require 'css_splitter'
Rails.application.assets.register_engine '.split2', CssSplitter::SprocketsEngine

Lors de l'évaluation des actifs à la split2 extension, on passe son contenu à la CssSplitter et de lui ordonner d'en extraire la partie 2 (> 4095 sélecteurs):

require 'tilt'
module CssSplitter

  class SprocketsEngine < Tilt::Template
    def self.engine_initialized?
      true
    end

    def prepare
    end

    def evaluate(scope, locals, &block)
      part = scope.pathname.extname =~ /(\d+)$/ && $1 || 0
      CssSplitter.split_string data, part.to_i
    end
  end
end

Ce serait également travailler pour les autres pièces (split3, ...).

Le CSS Splitter reconnaît valide endroits où les feuilles de style peut être divisé en plusieurs parties avec moins de 4096 sélecteurs et renvoie la partie demandée.

Le résultat est un ie_portion2.css dont vous avez le lien dans la tête et précompiler séparément.

J'espère que mon révisé CSS Splitter Gist est assez complet pour employer la solution.

Mise à jour:

Le CssSplitter mentionend ci-dessus a été communiqué comme un joyau: https://github.com/zweilove/css_splitter

Answer 2

La solution que j'utilise dans la production est très simple, pas d'automatisme, mais fonctionne très bien. Pour moi, c'était la chose la plus évidente à faire, alors peut-être que vous avez pensé à elle déjà et ne l'aiment pas, de toute façon, ici, nous allons:

Je suis en supposant que vous êtes à l'aide de sass, si non, je pense que vous devriez :)

D'abord, diviser votre application.css.scss sous la forme de plusieurs fichiers, par exemple: application_a.css.scss et application_b.css.scss

Deuxièmement, dans votre application.css.scss le fichier, utilisez:

@import "application_a"
@import "application_b"

Troisièmement, dans votre modèle de mise en page, inclure le fichier complet, ou les deux parties:

<!--[if !IE]><!-->
  # link to application.css.scss
<!--<![endif]-->

<!--[if IE]>
  # link to application_a.css.scss
  # link to application_b.css.scss
<![endif]-->

Note de côté: Ne pas générer votre feuille de style les fichiers manifeste par l'asset pipeline, le faire par l'intermédiaire de sass et il est @import déclaration, tout le reste va conduire à des problèmes.