@import dans des media query

Bonjour,

J'ai trouvé sur le net une façon de faire pour utiliser @import avec une media query :

@import url(red.css) (min-width:400px) and (max-width:599px);

sur un autre site :

@import url(example.css) screen and (max-width: 1024px)

Les deux ne fonctionnent pas dans firefox 25, Chrome 31 (alors qu'une media query "classique" fonctionne). J'ai placé mes deux css (appelante et appelée) dans le même dossier.

J'ai entendu plusieurs sons de cloche concernant @import (certains disent que c'est bien d'autres que non) je ne veux pas entrer dans le débat. Je veux au moins l'utiliser pour le dev, c'est plus pratique d'avoir un fichier par point de rupture.

Merci !

deejay-bee a écrit :

Les deux ne fonctionnent pas dans firefox 25, Chrome 31 (alors qu'une media query "classique" fonctionne). J'ai placé mes deux css (appelante et appelée) dans le même dossier.

J'ai entendu plusieurs sons de cloche concernant @import (certains disent que c'est bien d'autres que non) je ne veux pas entrer dans le débat. Je veux au moins l'utiliser pour le dev, c'est plus pratique d'avoir un fichier par point de rupture.

Merci !

Bonjour,
dans ce cas as-tu essayé:

<link rel="stylesheet" media="(min-width:400px) and (max-width:599px)" href="example.css" />
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="example.css" />

Je n'ai pas tenté cette solution car cela impliquerait de modifier beaucoup de fichiers de template...

salut,
tu les as bien placés en tout début du fichier ? La syntaxe

@import url(example.css) screen and (max-width: 1024px)

devrait être parfaitement interprétée par FF.

Pour parler rapidement quand même du bien/pas bien, il faut savoir que lorsque tu utilises @import, le chargement du fichier appelé via cette règle bloque tous les autres appels aux fichiers qui viennent après celui-ci. Tant que le fichier appelé avec @import n'est pas chargé, le chargement des autres fichiers ne démarre pas. En gros, cela empêche le chargement parallèle et ça peut ralentir un site.

Je viens de tester en mettant sur la première ligne du CSS, ça marche effectivement uniquement quand c'est avant toute règle CSS. Ça ne m'arrange pas parce qu'intégrant en mobile-first, il est impossible de surcharger une règle (par exemple une div en position relative en mobile et absolut en desktop).

Du coup, il va falloir que je fasse une feuille CSS sans media query (contenant ce qui est commun à tous les points de rupture et la version mobile) et autant d'imports que je n'ai de points de rupture. Ça me semble faisable juste pour du dev, je vais tester ça merci !