Combinaison de fichiers CSS en ce qui concerne @media
Nous avons un site Web où les accélérations habituelles de sites Web à haute performance et sites Web encore plus rapides ont rapporté des dividendes.
Cependant, nous avons négligé les feuilles de style (en raison des difficultés décrites ci-dessous) et nous en sommes finalement venus à nous mordre, le CSS représentant 500 ms de notre chargement de page de 1600 ms (le rapport des deux résultats est assez cohérent d’un critère à l’autre - les chiffres réels). décrits ici sont ceux du repère le plus pratique que nous ayons à nous donner).
Parallèlement à l’efficacité des sélecteurs, le nombre total de requêtes HTTP doit être réduit. Voici un exemple (sans text="text/css" charset="utf-8" par souci de brièveté):
<link rel="stylesheet" href="global.css" media="all" />
<link rel="stylesheet" href="page.css" media="all" />
<link rel="stylesheet" href="print.css" media="print" />
<link rel="alternative stylesheet" href="print.css" media="all" title="Print" />
Cela semble être une configuration courante (feuille de style globale, feuille de style par page/catégorie et mise en page imprimée), mais nous rencontrons de véritables problèmes pour trouver une solution viable en raison du fait que chaque option possède une arme à double tranchant:
global.css et page.css peuvent être combinés. Cependant, global.css serait téléchargé à plusieurs reprises à côté de page.css (car page.css correspond à une catégorie/page spéciale) si l'utilisateur continuait à passer aux pages/catégories spéciales et devait le faire. servi seul
le fichier print.css peut être combiné et utiliser les règles CSS2 @media, mais cela ne fonctionnerait pas avec les navigateurs CSS1 (ce site doit fonctionner avec IE6)
la version de print.css liée à l'aide de
rel="alternative stylesheet" media="all" title="Print"n'apparaît pas nécessaire, mais les développeurs l'ont Cargo Culted sur chaque projet sans savoir ce qu'il fait et nous craignons de le supprimer
Comme cela semble être une configuration courante, qu'ont fait les autres quand ils ont été confrontés à une configuration similaire?, Est-ce que quelqu'un peut faire la lumière sur des feuilles de style alternatives pour l'impression?, Existe-t-il une nouvelle approche de ce qui précède?
Avez-vous une seule page.css ou existe-t-il plusieurs versions différentes pour différentes pages et catégories?
En supposant qu'il n'y en ait qu'un, je suggérerais:
Combinez global.css et page.css dans une seule feuille de style. Après la première demande, l’utilisateur aura quand même une version en cache de celle-ci.
Fusionner vos règles d'impression dans la feuille de style ci-dessus en utilisant @media. Vous pouvez ensuite ajouter un commentaire conditionnel pour IE6 uniquement pour lui donner une feuille de style d'impression fonctionnelle.
La "feuille de style alternative" donnera aux navigateurs qui le supportent le choix d'utiliser cette feuille de style plutôt que la feuille principale. Dans votre cas, cela semble être un moyen facile de donner à l'utilisateur une "vue imprimable". Si vous souhaitez conserver cela, vous devez séparer print.css, évitez donc de fusionner les règles d'impression dans le fichier principal.
Comme je suis sûr que les livres que vous avez liés disent, vous voudrez également que ces feuilles de style soient compressées et que leurs en-têtes soient périmés afin d'en maximiser les avantages.