Note: Cette question fait référence à un projet Rails avec Sass & Compass.
Utiliser les rails Pipeline d'actif? Alors jetez un coup d'œil à Cette question .
Nous développons une grande application avec de nombreux cas d'utilisation et de nombreuses pages de style individuel, en partie pour plusieurs contextes. Ce qui signifie simplement beaucoup d'informations de style.
Avec la dernière section de notre application, nous avons brisé la limite d'Internet Explorer de 4095 sélecteurs par style. (Veux une preuve de cette limitation? http://marc.beffl.co .uk / Browser_bugs / CSS-Sélecteur-Limit / )
d'accord. Alors, pourquoi ne pas simplement diviser la feuille de style d'application en plusieurs conception?
Eh bien, les mélanges et l'héritage du sélecteur ne fonctionneront pas sur plusieurs fichiers Sass (non partiels), non?
Je dirais que la qualité des feuilles de style est plutôt bonne, nous ne pouvons pas optimiser la quantité supérieure de sélecteurs. (Il y a plutôt plus à venir.)
Je crois aussi que minimiser la quantité de sélecteurs ne devrait pas être notre objectif d'optimisation principal. L'équipe Sass Core conseille d'utiliser le sélecteur héritage au lieu de mixes, le cas échéant afin de sauvegarder la taille du fichier CSS. Ce faisant, le nombre de sélecteurs a tendance à se développer.
Alors, que dois-je faire?
Je pense à écrire un script qui génère des fichiers CSS supplémentaires, partitionnant mon fichier Big Application.css. Celles-ci ne seraient chargées que dans IE, alors (afin que je n'ai pas de plusieurs demandes dans les navigateurs modernes).
J'aurais besoin d'un analyseur CSS simple pour cela afin de couper le fichier Application.css après max. 4095 Sélecteurs à une position valide.
Et j'aurais besoin d'une compas de compas - après crochet afin que les développeurs n'ont pas besoin de générer les fichiers IE à la main afin de le tester.
S'il vous plaît, dites-moi que vous avez eu une meilleure idée!
meilleur,
Christian
3 Réponses :
Si vous ne pouvez pas réduire le nombre de sélecteurs, il n'y a pas d'autre choix que de diviser le fichier CSS.
Votre solution proposée pour le faire semble déjà optimale, si un peu compliqué à mettre en œuvre.
Les mélanges sont utilisables sur plusieurs fichiers. Cependant, il n'est logiquement pas possible que @extend puisse fonctionner avec plusieurs fichiers. C'est le but de la présente directive de donner une seule règle (qui ne devrait pas être dupliqué sur plusieurs fichiers). Par conséquent, je ne peux pas scinder des fichiers.
Ainsi, j'ai mis en place un séparateur: https://gist.github.com / 1131536
après ces Deux Les commits ont trouvé leur chemin dans Sass and Compass, vous pouvez utiliser le crochet suivant dans vos rails Le Cssssplitter mentionné ci-dessus a été publié comme un joyau: https://github.com/zweilove/csss_splitter config / compas.rb afin de créer automatiquement les feuilles de style supplémentaires pour IE:
J'ai pu l'installer avec succès, avec une mise en garde: les nouvelles feuilles de style ne sont pas automatiquement incluses dans la tête de mon fichier. Ainsi, le code suivant doit être inclus avec d'autres liens de la feuille de style: <% dir.glob ("Public / StylesSheets / compilé / Écran _ *"). Chaque fiche | %> <% = stylesheet_link_tag fichier.sub (/ public \ / stylesheets \ //, '') .SUB (/ \. CSS /, ''),: Média => '' Ecran '%> <% fin de%>
Existe-t-il une solution à ce problème disponible pour le pipeline d'actif? Si la compas On_stylesheet_saved Callback n'est jamais appelée, comment puis-je transmettre les fichiers CSS compilés à la CSSSSSPLITTER via un moteur des pignons? J'ai essayé @ Crispy's Correction situé gist.github.com/2398394 , mais il n'apparaît pas travailler (mis en évidence par mes propres expériences et autres commentaires).
Il y a une solution disponible pour le pipeline d'actif: Stackoverflow.com/Questtions/12126118/...
Malheureusement, ce CsssPlitter ne gère pas la scission des fichiers CSS qui utilisent des requêtes multimédias :(
Un moyen facile de le faire est http://blesscsss.com/ . Simplement:
Alternative intéressante pour les personnes qui n'utilisent pas de rails et du pipeline d'actifs!
Soyez prudent avec l'utilisation de Bénies. Je ne pouvais pas l'utiliser car j'ai couru dans ce numéro Github.com/Paulyoung/bless. JS / Problèmes / 38
Avez-vous essayé d'utiliser @import dans votre CSS pour vous déplacer dans la casquette 4095? (Ne devrait-il pas être 4096?)
En Sass, vous @ Import partiels qui font partie d'un grand fichier CSS. Et oui, il est 2 ^ 12 - 1.
N'oubliez pas que c'est-à-dire que c'est-à-dire une limite sur le nombre de fichiers CSS (31, je pense), donc si vous fractionnez le fichier, méfiez-vous également.
Ouais, bien sûr. Mais je pense que 31 * 4095 Sélectors devraient le faire. ;) On dit également que chaque feuille de style ne peut que 288 kb de taille. Je ne peux pas confirmer cela; Ma feuille de style avec 4095 Selectors est de 363kb et fonctionne très bien.