web-dev-qa-db-fra.com

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

Je travaille sur un site Web responsive design pour fournir du contenu pour toutes les tailles d'écran. J'ai des requêtes multimédia pour 5 "étapes" différentes, et le fichier CSS pèse environ 30 Ko.

Serait-il préférable de scinder 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 préoccupation principale était l'ouverture de la page de navigateur/du périphérique/la vitesse de rendu, et non la facilité de développement.

cssresponsive-webdesigncss3media-queries
19
CamSpy

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 ordonnée.

Le seul inconvénient réel que je puisse penser à la scission serait que si l'attribut d'un élément apparaissait dans toutes vos feuilles de style, vous auriez à mettre à jour 5 fichiers distincts pour le changer (plutôt que de figurer côte à côte à la même place).

Selon la réponse donnée dans cet article, les navigateurs téléchargeront toutes les feuilles de style malgré tout. Par conséquent, la division en résolution n’économise pas la bande passante: https://stackoverflow.com/questions/16657159/when-using-media-queries -de-téléphone-charger-non-pertinentes-requêtes-et-images

16
Richard B

Cela dépend légèrement de ce que vous voulez atteindre: essayez-vous de charger votre page plus rapidement ou essayez-vous de faciliter le développement?

Si vous ciblez le 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 seul gros fichier car cela vous donne une vue d'ensemble 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, puisqu’une surcharge de travail est très lourde. En outre, vous pouvez conserver une version de développement pour vous-même et envoyer un fichier CSS réduit au Web (je trouve que YUI est une bonne méthode: http://www.refresh-sf.com/yui/ ).

De plus, j'essayerais 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 à faire est de changer légèrement le code HTML de <span class="bold-and-italic">foo bar</span> en <span class="bold italic">foo bar</span>

Je peux fortement vous suggérer de jeter un oeil à Bootstrap ( http://getbootstrap.com ), ces gars-là ont fait un excellent travail en divisant les classes en plusieurs Des classes'.

J'espère que ça aide.

4
royarisse

Il est probablement préférable d’avoir un seul fichier CSS, mais de le réduire et de le gziper. En supposant que vos 30 Ko correspondent à cette valeur, vous obtiendrez probablement une taille de fichier d’environ 5 Ko avec minification (suppression d’espaces blancs) et gzipping.

La scission vous donnera probablement plus de temps, mais seulement dans certaines conditions.

  • Vous devez vous assurer qu'une seule feuille de style est chargée à la fois - sinon, vous aurez besoin de deux ou plusieurs requêtes HTTP, qui ont elles-mêmes une surcharge, ce qui annulerait au moins partiellement le gain de la taille de fichier plus petite. Pour ce faire, il suffit pas de scinder la feuille de style et d'insérer plusieurs balises <link>- avec différents attributs de support. Les navigateurs semblent charger toutes les feuilles de style <link>ed, quel que soit le support. requêtes (merci à @cimmanon pour cette information, je ne le savais pas).
  • Le nombre de règles CSS partagées entre les feuilles de style doit être réduit. Dans le cas contraire, chacune des feuilles de style devra contenir toutes les règles communes et aura 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: Ne pas optimiser prématurément. Ne le faites que si vous avez des problèmes de performances.

4
Jost

Vous devez fractionner vos fichiers CSS en fonction des requêtes multimédia, 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 de support.

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

Le DOM n'a pas besoin d'attendre le chargement de votre fichier JS. Ajoutez seulement async si la construction de votre DOM n'a pas besoin de ce JavaScript à la charge.

3
jsninja

Je serais enclin à dire ceci.

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

Le développement est un autre type de poisson. J'ai tendance à diviser les requêtes multimédia de manière à ce qu'elles soient définies par un élément quelconque, par exemple:

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

Comme d'habitude si je change d'élément, je ne veux pas avoir à chercher partout dans le CSS (bien que vous puissiez utiliser quelque chose comme grep ...).

Mais, une chose que je dirais, c'est que cela 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 en fichiers d'écran en fonction de la taille de l'écran, essayez-le. Faites une copie du site (si possible), jouez avec la copie - si cela vous facilite la tâche, utilisez-la. Vous n'avez pas besoin de suivre un paradigme unique pour développer un site Web.

2
Algy Taylor

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
Regardt Ogies Myburgh