1 feuille de style par typologie d'écran / ou 1 pour toutes

Bonjour,

Je souhaiterai savoir s'il est possible d'avoir une feuille de style par typologie d'écran ou si nous sommes obligés d'intégrer tous les media query dans une et même feuille de style.

ex:
1er cas - 1 feuille css par typologie d'écran
Typologie d'écran A - dans une feuille de style A

@media only screen and (min-width:960px) and (max-width:1150px) {

}

Typologie d'écran B - dans une feuille de style B

@media only screen and (min-width:1151px) {

}

donc j'appelle ensuite ce deux feuilles de style dans mon html

<link href="feuille de style A.css" rel="stylesheet" type="text/css">
<link href="feuille de style B.css" rel="stylesheet" type="text/css">



2ème cas - 1 feuille css pour ttes les typologies d'écran
Typologie d'écran A et B - dans une feuille de style AB

@media only screen and (min-width:960px) and (max-width:1150px) {

}

@media only screen and (min-width:1151px) {

}

donc j'appelle ensuite cette feuille de style dans mon html

<link href="feuille de style AB.css" rel="stylesheet" type="text/css">


Je vous pose cette question car j'ai testé les deux cas et seul le cas n°2 fonctionne.

Merci d'avance pour vos réponses éclairées

Bonjour,

Je t'invite à lire l'article sur les Mediaqueries, tu pourras y trouver ton bonheur :

<link rel="stylesheet" media="screen and (min-width:960px) and (max-width:1150px)" href="feuille-de-style-A.css" type="text/css" />
<link rel="stylesheet" media="screen and (min-width:1151px)" href="feuille-de-style-B.css" type="text/css" />

Modifié par SolidSnake (12 Feb 2016 - 11:09)

Bonjour,

je ne trouve pas de raison pour laquelle la 1ère solution ne fonctionnerait pas ?

Pour des raisons liées à la webperf (ne charger qu'une seule ressource CSS donc un seul fichier - sauf cas rare où la CSS est énorme et doit être découpée), on (alsacreations.fr et tout plein de monde) charge une seule CSS contenant tout dont les MQ.
Mais nos fichiers de travail sont de nombreux fichiers LESS modulaires et découpés selon les besoins de chaque projet, compilés en CSS puis minifiés via gulp : aucun lien entre les fichiers de travail et celui/ceux reçus par un navigateur
Modifié par Felipe (12 Feb 2016 - 14:26)

très bien
merci pour ces réponses
@felipe: Il me semble que la premier cas ne fonctionne pas car j'ai oublié de renseigner les media de ma feuille de style <link rel="stylesheet" media="screen and (min-width:960px) and (max-width:1150px)" href="feuille-de-style-A.css" type="text/css" />

De plus, du fait du nombre de typologie d'écran à traiter il me semble plus pratique de séparer les feuilles de style par typologie d'écran. Mais si cela est vraiment impactant pour les webperf, je ne vais pas insister.