Comment utiliser les requêtes multimédias en HTML et CSS pour créer des sites Web réactifs
Si vous souhaitez développer des sites Web / applications Web, savoir comment créer des conceptions réactives est essentiel à votre succès.
Dans le passé, la création de sites Web qui s'adaptaient bien à différentes tailles d'écran était un luxe que les propriétaires de sites Web devaient demander à un développeur. Cependant, la montée en puissance de l'utilisation des smartphones et des tablettes fait désormais du responsive design une nécessité dans le monde du développement logiciel.
L'utilisation de requêtes multimédias est sans conteste le meilleur moyen de garantir que votre site Web / application Web s'affiche exactement comme vous le souhaitez sur chaque appareil.
Comprendre la conception réactive
En un mot, la conception réactive consiste à utiliser HTML / CSS pour créer une mise en page de site Web / application Web qui s'adapte à différentes tailles d'écran. En HTML / CSS, il existe plusieurs façons d'atteindre la réactivité dans la conception d'un site Web:
- Utilisation des unités rem et em au lieu de pixels (px)
- Définition de la fenêtre / de l'échelle de chaque page Web
- Utilisation des requêtes multimédias
Que sont les requêtes multimédias?
Une requête multimédia est une fonctionnalité de CSS qui a été publiée dans la version CSS3. Avec l'introduction de cette nouvelle fonctionnalité, les utilisateurs de CSS ont la possibilité d'ajuster l'affichage d'une page Web en fonction de la hauteur, de la largeur et de l'orientation de l'appareil / de l'écran (mode paysage ou portrait).
Les requêtes multimédias fournissent un cadre pour créer du code une fois et l'utiliser plusieurs fois dans votre programme. Cela peut ne pas sembler très utile si vous développez un site Web avec seulement trois pages Web, mais si vous travaillez pour une entreprise avec des centaines de pages Web différentes, cela vous fera gagner beaucoup de temps.
Utilisation des requêtes multimédias
Vous devez prendre en compte plusieurs éléments lorsque vous utilisez des requêtes multimédias: structure, placement, plage et liaison.
La structure des requêtes multimédias
Exemple de structure de requête multimédia
@media only/not media-type and (expression){
/*CSS code*/
}La structure générale d'une requête multimédia comprend:
- Le mot-clé @media
- Le mot-clé non / unique
- Un type de support (qui peut être soit écran, impression ou discours)
- Le mot-clé "et"
- Une expression unique entre parenthèses
- Code CSS inclus dans une paire d'accolades ouvertes et fermées.
Exemple de requête multimédia avec le seul mot-clé
@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}L'exemple ci-dessus applique le style CSS (en particulier une couleur d'arrière-plan bleu) uniquement aux écrans de périphériques d'une largeur de 450 pixels et moins, donc essentiellement des smartphones. Le mot clé «only» peut être remplacé par le mot clé «not», puis le style CSS dans la requête multimédia ci-dessus ne s'appliquerait qu'à l'impression et à la parole.
Cependant, par défaut, une déclaration de requête de média générale s'applique aux trois types de média, il n'est donc pas nécessaire de spécifier un type de média, sauf si l'objectif est d'en exclure un ou plusieurs.
Exemple de requête multimédia par défaut
/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}Le placement des requêtes multimédias
Une requête multimédia est une propriété CSS; il ne peut donc être utilisé que dans le langage de style. Il existe trois façons différentes d'inclure du CSS dans votre code; cependant, seules deux de ces méthodes offrent un moyen pratique d'inclure des requêtes multimédias dans vos programmes: CSS interne ou externe.
La méthode interne consiste à ajouter la balise <style> à la balise <head> du fichier HTML et à créer la requête multimédia dans les paramètres de la balise <style>.
La méthode externe consiste à créer une requête multimédia dans un fichier CSS externe et à la lier à votre fichier HTML via la balise <link>.
La gamme des requêtes multimédias
Que les requêtes multimédias soient utilisées via CSS interne ou externe, il existe un aspect majeur du langage de style qui peut avoir un impact négatif sur le fonctionnement d'une requête multimédia. CSS a une règle d'ordre de priorité. Lorsque vous utilisez un sélecteur CSS , ou dans ce cas une requête multimédia, chaque nouvelle requête multimédia ajoutée au fichier CSS remplace (ou prime) celle qui précède.
Le code de requête multimédia par défaut que nous avons ci-dessus cible les smartphones (450 px de large et moins), donc si vous souhaitez définir un arrière-plan différent pour les tablettes, vous pourriez penser que vous pouvez simplement ajouter le code suivant à votre fichier CSS préexistant.
Exemple de requête multimédia de tablette
/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}
Le seul problème est que, en raison de l'ordre de priorité, les tablettes auraient une couleur d'arrière-plan rouge et les smartphones auraient désormais également une couleur d'arrière-plan rouge car 450 pixels et moins sont inférieurs à 800 pixels.
Une façon de résoudre ce petit problème serait d'ajouter la requête média pour les tablettes avant celle pour les smartphones; ce dernier remplacerait l'ancien et vous auriez maintenant des smartphones avec une couleur de fond bleu et des tablettes avec une couleur de fond rouge.
Cependant, il existe un meilleur moyen d'obtenir un style distinct pour les smartphones et les tablettes sans se soucier de l'ordre de priorité. Il s'agit d'une fonctionnalité des requêtes multimédias connue sous le nom de spécification de plage, dans laquelle le développeur peut créer une requête multimédia avec la largeur maximale et minimale (la plage).
Requête multimédia de tablette avec exemple de plage
/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}
Avec l'exemple ci-dessus, le placement des requêtes multimédias dans une feuille de style devient inutile car la conception des tablettes et des smartphones cible deux collections distinctes de largeur.
Lier des requêtes multimédias
Si vous ne souhaitez pas intégrer de requêtes multimédias dans votre code CSS, il existe une méthode alternative que vous pouvez utiliser. Cette méthode implique l'utilisation de requêtes multimédias dans la balise <link> d'un fichier HTML, donc au lieu d'avoir une feuille de style massive contenant les préférences de style pour les smartphones, les tablettes et les ordinateurs, vous pouvez utiliser trois fichiers CSS distincts et créer vos requêtes multimédias dans la balise <link>.
La balise <link> est un élément HTML utilisé pour importer le style CSS à partir d'une feuille de style externe. Cette balise a une propriété multimédia qui fonctionne de la même manière qu'une requête multimédia en CSS.
Utilisation de requêtes multimédias dans l'exemple de balise de lien
<!-- main stylesheet -->
<link rel="stylesheet" href="main.css">
<!-- tablet stylesheet -->
<link rel="stylesheet" media="(max-width:800px) and (min-width:451px)"
href="tablet.css">
<!-- smartphone stylesheet -->
<link rel="stylesheet" media="(max-width:450px)" href="smartphone.css">
Le code ci-dessus doit être placé dans la balise <head> de votre fichier HTML. Il ne vous reste plus qu'à créer trois fichiers CSS distincts avec les noms de fichier main.css, tablet.css et smartphone.css, puis créer la conception spécifique que vous souhaitez pour chaque appareil.
Le style du fichier principal s'appliquera à tous les écrans d'une largeur supérieure à 800px, le style du fichier de la tablette s'appliquera à tous les écrans d'une largeur comprise entre 450px et 801px, et le style du fichier du smartphone s'appliquera à tous les écrans ci-dessous. 451px.
Vous disposez désormais des outils nécessaires pour créer des designs réactifs
Si vous êtes arrivé à la fin de cet article, vous avez pu découvrir ce qu'est le responsive design et pourquoi il est utile. Vous pouvez désormais identifier et utiliser les requêtes multimédias dans les fichiers CSS et HTML. De plus, vous avez été initié à l'ordre de priorité dans CSS et avez vu comment cela pourrait affecter le fonctionnement de vos requêtes multimédias.
Crédit d'image: Espace négatif / Pexels