Les requêtes médias, ou media queries en anglais, sont des formes de conditions CSS qui si respectées par le visiteur produisent des règles d'affiche et de mise en page.
Un exemple très concret est la résolution d'écran du visiteur. Si celui-ci dispose de telle résolution d'écran, vous pouvez lui appliquer telles propriétés CSS sur ces balises.
Par exemple, pour une résolution en dessous de 1280 pixels de large, on peut augmenter ou diminuer la taille du texte, voir même changer la couleur de celui-ci. Bref, tout ce que l'on peut faire en CSS on peut le faire avec les requêtes médias à telle condition.
Les requêtes médias sont des conditions qui indiquent quand on doiut appliquer certaines propriétés CSS.
Il y a deux manières d'utiliser les requêtes médias en HTML. Soit en les chargeant directement à partir d'une feuille de style CSS (recommandé) soit en les créant plusieurs fichiers CSS pour chaque condition.
Nous allons maintenant voir les deux méthodes disponibles en détails.
Types de Requêtes Médias
Requêtes médias : feuille de style différente
On commence par le plus compliqué, et personnellement je ne recommande pas trop cette méthode pour les requêtes médias.
Pour ce faire il faut utiliser la balise <link /> que nous avons vu en tout début de tutoriel (mais vraiment au tout début), qui permet de faire appel à une feuille de style CSS.
Voici comment on l'utilise normalement :
<link rel="stylesheet" href="style.css" />
Ce code, inséré évidemment dans la partie HEAD de la page HTML, permet de faire appel à la feuille de style "style.css".
Voici maintenant comment on l'utilise avec les requêtes médias. Il suffit d'ajouter l'attribut "media" et d'y mettre ses conditions d'applications, avec évidemment dans l'attribut "href" la nouvelle feuille de style CSS.
Le fichier style.css sera chargé normalement quoi qu'il arrive, mais si la taille de l'écran du visiteur en largeur est inférieure à 1280 pixels la feuille de style style2.css sera incluse et prendra le dessus.
Requêtes médias : même feuille de style
Maintenant nous allons voir une deuxième solution pour parvenir aux mêmes fins, plus simple et plus efficace.
Nous n'utiliserons qu'un seul fichier CSS dans lequel nous inclurons, au début ou à la fin de préférence, les conditions nécessaires à nos requêtes médias.
Pour cela il suffit d'ajouter "@media" puis les conditions, en l'occurrence "screen and (max-width: 1280px)" et enfin les ouvertures et fermetures "{" et "}". Avec à l'intérieur nos propriétés CSS évidemment.