Le CSS est l’un des piliers fondamentaux du développement et de la conception Web. Alors que CSS a commencé comme quelque chose qui peut changer le style d’une page Web, chaque itération de spécification CSS apporte désormais plus à la table, précisément en ce qui concerne la compatibilité entre navigateurs.
Aujourd’hui, CSS est plus qu’une simple « couleur d’arrière-plan » et des spécifications de balises qui ont rendu les premiers jours de développement Web très amusants. Le CSS est devenu un outil d’aide pour faire ressortir la conception mobile et la conception Web réactive dans les applications Web sans trop d’efforts.
Dans cet article, nous approfondirons le concept de requêtes multimédias en CSS : une propriété de CSS qui peut apporter des modifications à la page Web en regardant l’appareil. Nous verrons également comment tout a évolué et nous nous concentrerons davantage sur la façon dont nous pouvons mettre en œuvre les requêtes multimédias CSS de conception réactive pour développer une expérience utilisateur transparente pour votre site Web.
Nouveau sur les sélecteurs CSS ? Consultez cette feuille de triche Ultimate CSS Selector pour dynamiser votre carrière de concepteur de sites Web.
Que sont les Media Queries en CSS ?
Les requêtes multimédias en CSS ont commencé avec la spécification CSS2 qui incorporait la règle multimédia CSS dans sa bibliothèque. Les règles multimédias ont été introduites dans le CSS après avoir observé les différents appareils multimédias qui inondaient le marché et étaient bien accueillis par les utilisateurs.
Par exemple, c’était une époque passionnante où des appareils vocaux ont été introduits qui pouvaient lire la page Web pour vous. Mais malheureusement, même si les règles des médias étaient si importantes, elles n’ont pas réussi à impressionner la communauté des développeurs. Une bonne raison est que les appareils multimédias n’étaient pas prêts pour une telle transformation (du moins jusque-là !).
Alors, pour aller de l’avant, les développeurs CSS ont pensé à une modification de cette propriété. Même si les règles multimédias ne fonctionnaient pas dans la communauté, elles peuvent introduire des requêtes capables d’analyser un périphérique multimédia et d’appliquer le CSS en conséquence. Celles-ci étaient appelées requêtes média CSS.
Comme nous le savons, les requêtes multimédias en CSS ont transformé la façon dont nous développons aujourd’hui une application Web réactive. Les requêtes média CSS sont des conditions et des requêtes qui fonctionnent parfaitement à l’ère des centaines d’appareils et de navigateurs.
Alors que les règles multimédias s’intéressaient à un smartphone, les requêtes multimédias CSS s’intéressaient à la fenêtre d’affichage, à la résolution et à l’orientation. Ces requêtes multimédias en CSS ont donné une capacité unique de rendre le contenu en fonction du type d’appareil ou de son orientation, nous amenant à la prochaine étape de la conception Web réactive. Le changement auquel les développeurs CSS ont pensé a été bien accueilli et est devenu une partie intégrante de la conception Web à l’aide des requêtes média CSS.
Avons-nous vraiment besoin de CSS Media Queries ?
La première chose qui pourrait vous venir à l’esprit est la suivante : « Avons-nous vraiment besoin de requêtes média CSS, compte tenu de la pléthore de technologies et de spécifications qui apparaissent chaque jour » ? C’est une question authentique et courante pour quelqu’un qui commence son voyage avec des requêtes multimédias en CSS.
CSS est maintenant beaucoup plus mature qu’il ne l’était lorsque CSS 2 a été introduit. Nous avons maintenant tellement de techniques avancées en CSS que de nombreux problèmes standard sont couverts par de nouveaux concepts en CSS.
Une telle chose qui me vient à l’esprit est les grilles et sous-grilles CSS. Les grilles CSS sont réactives et sont souvent destinées aux grandes mises en page. Ils nécessitent un codage manuel avec des requêtes multimédias pour réduire et agrandir la taille de la colonne en fonction de l’écran de l’appareil.
Une autre partie des grilles CSS est la CSS Flexbox, qui est également réactive et la plus appropriée pour les mises en page à petite échelle. Vous pouvez également disposer de votre propre ensemble d’outils hautement réactifs en tant que développeur Web. Ces outils réduisent nos efforts et nous font gagner beaucoup de temps, nous laissant avec cette question persistante « Devrions-nous apprendre les requêtes multimédia CSS » ?
Je pense qu’il y a deux choses à considérer pour répondre à cette question, si nous avons besoin de requêtes média CSS en 2022. Eh bien, il est tout à fait vrai que les nouvelles astuces et éléments CSS donnent des résultats plus rapides et meilleurs en termes de réactivité. Cependant, il est également vrai qu’en tant que développeur Web, je recommanderais à mes collègues développeurs d’utiliser les nouvelles spécifications plutôt que de se concentrer sur les requêtes multimédias.
Mais les nouvelles spécifications ne remplacent pas complètement le contrôle que nous obtenons grâce aux requêtes multimédias et ne sont qu’une solution aux problèmes standard du développement Web. Par exemple, dans le cas d’une conception réactive, les requêtes multimédias en CSS fourniront plus de contrôle et d’options pour mettre en œuvre différents cas d’utilisation.
Les spécifications CSS, en revanche, sont fixes. Les grilles CSS fonctionneront toujours avec la structure « grille », mais les requêtes multimédias peuvent être utilisées avec de nombreuses autres options. Il suffit de l’utiliser si les exigences de votre projet peuvent être complétées avec les nouvelles spécifications ! Cependant, les requêtes des médias viendront à votre secours pour développer quelque chose de nouveau et de créatif.
Une autre raison parfaite d’apprendre les requêtes multimédias CSS aujourd’hui est d’améliorer la spécification et les éléments CSS. Lors de l’utilisation d’un élément responsive CSS tel que les grilles CSS, vous pouvez utiliser les requêtes multimédias en plus pour améliorer ses fonctionnalités et ajouter certaines des vôtres : comme le changement de couleur (un exemple très basique).
Par conséquent, même s’il peut sembler que les requêtes multimédias en CSS ne sont pas utilisées lorsque vous commencez à développer un projet, vous trouverez de nombreux scénarios qui nécessitent des requêtes multimédias CSS pour leur mise en œuvre. Il est toujours préférable de les apprendre et de les mettre en pratique pour les mettre en œuvre dans un projet de développement Web.
Comment écrivez-vous les Media Queries en CSS pour le Responsive Design ?
La syntaxe des requêtes multimédias dans CSS ressemble aux annotations TestNG, que vous trouverez un peu uniques en tant que développeur Web novice.
La requête média peut être implémentée par le mot « média » comme suit :
@media <media_type> connector ( <query> )Par exemple:
@media only screen and (max-width: 480px) {
/* CSS rules to apply /*
}Cette requête multimédia recherchera des écrans (« uniquement écran » comme écrit) avec une largeur maximale de 480px. S’il en trouve une, les conditions seront exécutées et les modifications seront apportées au code HTML.
Pour appliquer uniquement le type de média et non les expressions de média (requêtes), les valeurs suivantes sont acceptées :
@media print {
.heading {
font-size: 12px
}
}La requête ci-dessus rendra le contenu avec l’en-tête du nom de classe à une taille de police de 12 pixels lorsque la page doit être imprimée.
Règles des fonctionnalités multimédias
Pour atteindre la réactivité via notre application Web, nous devons connaître la taille de l’appareil pour afficher un contenu spécifique. Les règles relatives aux fonctionnalités multimédias nous aident à atteindre cet objectif. Nous pouvons identifier notre condition spécifique avec des fonctionnalités multimédias et implémenter CSS en conséquence. Bien qu’il existe de nombreuses règles de fonctionnalité multimédia, nous n’aborderons que quelques-unes d’entre elles importantes pour la conception réactive.
Règles d’éléments multimédias de largeur et de hauteur
La première règle de fonctionnalité multimédia à prendre en compte consiste à vérifier la largeur et la hauteur de la fenêtre d’affichage. Les opérations de largeur peuvent être vérifiées avec les propriétés «width», «max-width» et «min-width» pour les valeurs de goulot d’étranglement.
Exemple de règle d’élément multimédia de largeur maximale :
@media screen and (max-width: 840px){
p {
color: red;
}
}Le code complet pour réaliser une conception réactive via des règles multimédias peut être écrit comme suit :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Media Queries</title>
<style>
@media screen and (max-width: 840px){
p {
color: red;
}
}
</style>
</head>
<body>
<center>
<p>Checking Media Rules</p>
</center>
</body>
</html>Pour un écran ayant une largeur de plus de 840px, la balise « p » affichera le contenu en couleur noire comme suit :
La capture d’écran ci-dessus a été prise sur la plateforme LambdaTest.
Sur un écran d’une largeur inférieure à 840 pixels, la règle multimédia changera le contenu en rouge et en taille de police comme suit :
Pour une vue beaucoup plus claire, vous pouvez exécuter le code HTML dans votre navigateur et commencer à réduire la fenêtre d’affichage pour voir l’effet.
Le navigateur utilisé ci-dessus est Opera sur la plate-forme Windows 10. De même, vous pouvez utiliser la règle de hauteur et de largeur.
Le code a été rendu sur un navigateur convivial pour les développeurs appelé LT Browser, qui facilite les tests et le développement réactifs sur plus de 50 résolutions d’écran. Vous pouvez effectuer des tests de sites Web mobiles sur LT Browser plus rapidement et plus facilement à l’aide de fonctionnalités telles que l’affichage côte à côte, la synchronisation du défilement, le débogage instantané, le test de sites Web dans différentes conditions de réseau, etc. De plus, LT Browser vous permet de collaborer avec votre équipe pour faire évoluer votre processus de développement en s’intégrant aux outils de gestion de projet.
Orientation dans les requêtes média CSS
L’orientation d’un appareil est l’un des problèmes majeurs qui cassent la réactivité de votre site Web. La réactivité ne peut jamais être atteinte si l’application Web ne peut pas comprendre l’orientation et réagir en conséquence. Comme pour les requêtes multimédias, connaître l’orientation de l’appareil peut nous aider à organiser le contenu différemment, ce qui se traduit par une plus grande réactivité.
La règle multimédia d’orientation peut être appliquée dans l’exemple suivant :
@media (orientation: landscape){
p {
color: red;
font-size: 36px;
}
}Le code ci-dessus appliquera les règles multimédias dans l’orientation paysage tandis que l’orientation portrait fonctionnera normalement.
La capture d’écran ci-dessus est tirée du navigateur LT, qui peut rendre deux appareils simultanément pour les tests.
Connecteurs dans les règles multimédias
La plupart du temps, une seule règle multimédia ne suffit pas pour atteindre la réactivité. Que se passe-t-il si nous voulons mettre en œuvre la règle multimédia sur des appareils spécifiques et avec des conditions spécifiques ? Pour de telles exigences, nous utilisons des connecteurs (logiques) dans les règles multimédias. Les connecteurs prennent trois valeurs dans les requêtes média CSS :
Ces connecteurs ont la même signification que dans les expressions booléennes et les langages de programmation. Pour appliquer le connecteur « et », le code suivant vous aidera :
@media (orientation: landscape) and (min-width: 1080px){
p {
color: red;
font-size: 36px;
}
}Le code ci-dessus ne fonctionne que lorsque la largeur minimale de l’écran est de 1080 pixels et que le…