Dois-je diviser un grand fichier de requêtes multimédia CSS en fichiers séparés pour chaque taille d'écran?


19

Je travaille sur un site Web de conception réactive pour fournir du contenu pour toutes les tailles d'écran. J'ai des requêtes multimédias pour 5 "étapes" différentes, et le fichier CSS fait environ 30 Ko.

Serait-il préférable de diviser cela en fichiers séparés et de les rendre similaires à ceci:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

ou dois-je les conserver dans un seul fichier CSS?

Mise à jour: Je voulais juste ajouter que ma principale préoccupation était la vitesse d'ouverture / de rendu des pages de navigateur / appareil, pas la facilité de développement.


Existe-t-il des plugins grunt / webpack / quels qu'ils soient pour prendre un seul fichier CSS et le diviser en plusieurs fichiers séparés par une requête multimédia? Ensuite, vous pourriez sans doute obtenir la facilité de développement offerte par un fichier monolithique et également l'optimisation de la vitesse de fichiers séparés.
Kevin Wheeler

Réponses:


16

Je pense que cela dépend vraiment de ce que vous trouvez le plus facile à développer et de ce qui vous aide à garder une feuille de style bien rangée.

Le seul véritable inconvénient auquel je peux penser en fractionnant serait que si l'attribut d'un élément apparaît dans toutes vos feuilles de style, vous devez mettre à jour 5 fichiers distincts pour le changer (plutôt qu'il n'apparaît côte à côte au même endroit).

Selon la réponse sur ce post, les navigateurs téléchargeront toutes les feuilles de style indépendamment, donc la répartition sur la résolution n'est pas un économiseur de bande passante: /programming/16657159/when-using-media-queries-does-a -phone-charge-non-pertinentes-requêtes-et-images


Dans cet article que vous avez lié, savez-vous ce qu'il entend par "c'est une limitation du CSSOM"?
DisgruntledGoat

1
Le modèle d'objet CSS - dev.w3.org/csswg/cssom - je crois que cela définit la façon dont CSS doit être géré, et donc je pense que la limitation à laquelle il se réfère ne sera pas d'avoir un modèle qui gère ces styles dans une plus grande économie de bande passante façon.
Richard B

3
Bien que ce ne soit pas un économiseur de téléchargement, c'est en quelque sorte. Un navigateur donnera la priorité aux liens de requêtes multimédias correspondants par rapport aux non correspondants. Un fichier css correspondant bloquera le rendu de la page tandis qu'un non correspondant obtient une priorité inférieure par le navigateur pour télécharger et ne bloque pas du tout le rendu de la page. De plus, une fois divisé, vous pouvez utiliser js pour télécharger de manière conditionnelle si vous souhaitez enregistrer et utiliser la bande passante.
dalore

4

Cela dépend légèrement de ce que vous voulez réaliser: essayez-vous d'accélérer le chargement de votre page ou essayez-vous de faciliter le développement?

Si vous ciblez ce dernier, vous pouvez utiliser plusieurs feuilles, mais c'est une question de préférence. Je trouve qu'il est plus facile d'utiliser un gros fichier car cela vous donne un aperçu de tous les styles que vous avez déclarés.

Si vous voulez une page de chargement plus rapide que votre meilleur pari serait de minimiser le nombre de demandes, car les frais généraux d'une demande sont assez importants. De plus, vous pouvez conserver une version de développement pour vous-même et servir un CSS minimisé sur le Web (je trouve YUI une bonne méthode: http://www.refresh-sf.com/yui/ ).

De plus, j'essaierais d'optimiser le CSS lui-même. Vous pouvez essayer de fusionner des classes très similaires, par exemple:

.bold-and-italic { font-weight: bold; text-style: italic; }

Peut être converti en:

.bold { font-weight: bold; }
.italic { text-style: italic; }

La seule chose est que vous devez changer légèrement le code HTML <span class="bold-and-italic">foo bar</span>en<span class="bold italic">foo bar</span>

Je peux vous suggérer de jeter un œil à Bootstrap ( http://getbootstrap.com ), ces gars-là ont fait un excellent travail en divisant les classes en plusieurs «sous-classes».

J'espère que ça aide.


1
Les classes nommées d'après le style sont de mauvaise forme. Pourrait aussi bien mettre un attribut de style si vous allez à cela. Mieux vaut nommer les classes logiques. Comme.important
Dalore

4

Il est probablement préférable de n'avoir qu'un seul fichier CSS, mais de le réduire et de le compresser. En supposant que vos 30 Ko soient avant cela, vous obtiendrez probablement la taille du fichier à environ 5 Ko avec minification (suppression des espaces blancs) et gzipping.

Le fractionnement vous permettra probablement d'accélérer davantage, mais uniquement sous certaines conditions.

  • Vous devez vous assurer qu'une seule feuille de style est chargée à la fois - sinon vous auriez besoin de deux requêtes HTTP ou plus, qui ont elles-mêmes une surcharge, ce qui annulerait au moins en partie le gain de la taille de fichier plus petite. Pour ce faire, il ne suffit pas de simplement diviser la feuille de style et d'insérer plusieurs <link>balises avec différents attributs de média, les navigateurs semblent charger toutes les <link>feuilles de style ed indépendamment des requêtes média (merci à @cimmanon pour cette info, je ne savais pas que) .
  • Le nombre de règles CSS partagées entre les feuilles de style doit être petit - sinon chacune des feuilles de style multiples devrait contenir toutes les règles communes et aurait donc presque la taille de l'original.
  • Vous utilisez un préprocesseur CSS (ou quelque chose de similaire), il est donc gérable d'avoir les mêmes morceaux de code dans 5 feuilles de style.

Aussi: n'optimisez pas prématurément. Ne le faites que si vous rencontrez des problèmes de performances.


3
Il convient de noter que si vous utilisez la <link rel="stylesheet" />balise pour tous vos fichiers spécifiques aux requêtes multimédias, vous ne pourrez pas empêcher le navigateur de les télécharger. Vous devez utiliser le reniflement du navigateur côté serveur ou utiliser JavaScript pour examiner les dimensions de la fenêtre et injecter les feuilles de style appropriées. Aucun de ces choix n'est bon.
cimmanon

1
Je suis un peu surpris, mais vous avez raison - je pensais que l'ajout de l'attribut media au <link>-tag aurait empêché le chargement de feuilles de style non correspondantes. Pourquoi les navigateurs font ça? C'est bien sûr la raison la plus importante pour ne pas diviser les feuilles de style.
Jost

Ils le font parce que votre écran peut changer, que se passe-t-il si vous êtes sur un mobile et que vous le faites pivoter de portrait en paysage, tout à coup la largeur de votre écran est différente. Ou sur le bureau, vous pouvez redimensionner la fenêtre de votre navigateur ou faire glisser votre fenêtre sur un autre écran si vous avez une configuration à plusieurs moniteurs. Si le navigateur ne télécharge pas tous les actifs CSS à l'avance, il y aura un retard dans le rendu de la page si et quand l'une des actions ci-dessus se produit
MrCarrot

Il vaut mieux les séparer. La plupart des navigateurs de nos jours sont des navigateurs spdy (votre site https et spdy comme il se doit) et avec spdy, plusieurs connexions sont multiplexées dans la même connexion, donc le nombre de fichiers n'a plus d'importance maintenant. Les navigateurs mettront également les fichiers css de requêtes multimédias non correspondants avec une priorité inférieure à télécharger et, plus important encore, ne bloqueront pas le rendu de la page.
dalore

3

Vous devez diviser vos fichiers CSS en fonction des requêtes multimédias car les fichiers CSS bloquent le rendu.

Lorsque le navigateur construit votre DOM, il doit d'abord attendre et charger tous vos fichiers CSS. Vous réduirez le temps de chargement de votre page si certains de vos fichiers CSS ne sont chargés qu'en fonction de certaines requêtes multimédias.

Cela vaut également pour l'ajout d'async à une balise de script JavaScript; ex <script src='myfile.js' async></script>. : .

Le DOM n'a pas à attendre le chargement de votre fichier JS. N'ajoutez async que si la construction de votre DOM n'a pas besoin de ce JavaScript à la charge.


J'ai entendu dire que si vous ne voulez vraiment pas que vos scripts asynchrones retardent potentiellement le rendu, exécutez-les sur l'événement window.onload au lieu d'utiliser async.
Kevin Wheeler

2

Je serais enclin à dire cela.

Pour la production, conservez-les toujours dans un seul fichier; la raison étant qu'il est plus efficace pour le navigateur, et cela devrait être votre principal intérêt (OMI) lors du passage du développement à la production.

Le développement est une autre marmite de poisson. J'ai tendance à diviser les requêtes multimédias afin qu'elles soient par n'importe quel élément, par exemple:

.foo { // .. some css }
.foo:hover, .foo:focus { // hover css }
@media screen and (max-width: 400px) {
    .foo { // .. some differentcss }
}

Comme généralement si je change un élément, je ne veux pas avoir à chercher partout pour le CSS (bien que vous puissiez utiliser quelque chose comme grep ...).

Mais , une chose que je dirais, c'est qu'il vaut la peine de considérer le site lui-même, le processus de développement et le logiciel. Si vous pensez vraiment qu'il vaudra la peine de les séparer dans des fichiers basés sur la taille de l'écran, essayez-le. Faites une copie du site (si possible), jouez avec la copie - si c'est plus facile, utilisez-la. Vous n'avez pas besoin de suivre un paradigme unique pour développer un site Web.


1

Simple: utilisez 1 feuille de style et ajoutez-y simplement des commentaires pour faciliter la recherche et la modification des styles CSS, par exemple:

//sheet 1 (mobile device 800 px)
code

//sheet 2 (mobile device 768 px)
code

//sheet 3 (mobile device 480 px)
code

//sheet 4 (desktop size 1024 px)
code

Si vous le souhaitez, vous pouvez utiliser plusieurs feuilles de style et les appeler pour chaque taille spécifique.


-1

Je préfère regarder Bootstrap . C'est 1 fichier CSS qui contient tout le CSS. Il fonctionne sur près de 99% des navigateurs et est extrêmement réactif.

Cliquez sur la démo en direct et effectuez un zoom avant ( Ctrl += zoom avant, Ctrl -= zoom arrière, Ctrl 0= normal) ou ouvrez-le sur votre mobile pour voir son rendu.


2
Il a déjà écrit 30 Ko de CSS, comment le passage au bootstrap pourrait-il être bénéfique?
Steve Sanders

Autrement dit, oui, je suis d'accord 30kb de css est une mission à refaire. Je voudrais simplement le copier et le coller dans différentes feuilles de style, tout en fonction de la façon dont il est structuré, vous pouvez dupliquer et renommer les fichiers CSS et supprimer toutes les parties inutiles.
Regardt Ogies Myburgh
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.