Découvrir le design responsive

Tirer parti des media queries

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans cette séquence, vous verrez l'apport des media queries (requêtes média) et la syntaxe à mettre en œuvre pour les rendre efficaces.

Transcription

Les media queries, ou les requêtes médias, ou les requêtes multimédias, comme on peut les traduire, sont une composante importante de la conception de sites Web responsives. Ces requêtes vont nous permettre d'écrire des styles qui vont correspondre aux changements de choses, comme par exemple la taille de l'écran ou son orientation. Il ne s'agit pas réellement d'une nouvelle fonctionnalité des CSS, mais plutôt d'une extension de déclaration @media qui existait déjà. Grâce aux déclarations @media, les CSS nous ont permis pendant un certain temps d'ajuster l'application des styles par type de média, c'est-à-dire par type de périphérique, par type d'appareil depuis déjà un certain temps. Dans le passé, nous avons pu définir quel style allait s'appliquer en fonction de périphériques qui permettaient de lire l'écran, comme les systèmes Braille, des projecteurs, des imprimantes, voire des appareils portables grâce à une syntaxe qui a été assez simple. Les media queries fonctionnaient sur un principe assez simple, il s'agissait dans un premier temps d'écrire une feuille de style par type de média. Donc on pouvait commencer par une feuille de style liée à l'écran, et puis ensuite on écrivait une deuxième feuille de style qui était liée aux médias à impression, mais c'est quelque chose qui n'a jamais bien fonctionné Les fabricants de téléphones portables pour la plupart ont ignoré le média handeld, en raison essentiellement d'une utilisation assez limitée, et puis aussi de leur volonté de pouvoir imposer leur système dans un environnement concurrentiel. Pour combler cette lacune, des requêtes multimédia ont été créées pour permettre aux concepteurs d'étendre les déclarations des médias en incluant d'autres propriétés lorsqu'ils allaient filtrer l'application de leur style. Et c'est quelque chose qui en fait a été extrêmement utile, car cela a permis aux concepteurs de commencer à contrôler le style, en fonction de facteurs comme la taille de l'écran, l'orientation de cet écran, la couleur, que la simple définition d'un type d'appareil. Voyons donc la syntaxe pour comprendre comment vont fonctionner ces media queries. Nous avons dans un premier temps la déclaration de la media query, et puis ensuite nous allons utiliser des opérateurs qui peuvent être par exemple ici, not ou only. Not va annuler les expressions qui suivent, et n'appliquer les styles que si les conditions qui suivent ne sont pas remplies. On peut également utiliser only parce qu'il y a d'anciens navigateurs, d'anciens agents utilisateurs, qui sont plus anciens, et qui ne vont pas supporter only. Ils vont donc ignorer les déclarations multimédia qui commencent par only. Ça peut donc être une alternative au not. Et puis on a le mot clé and, qui va nous permettre de combiner ensemble des expressions. On peut également séparer une liste de requête multimédia avec un opérateur logique comme or, qui veut dire ou. Nous avons ici par exemple une définition qui va nous permettre de déterminer un média écran avec une largeur minimale de 480 pixels, et une orientation qui est une orientation paysage. Il y a bien d'autres types d'attributs, les plus connus sont bien entendu la largeur, la hauteur, mais également la largeur périphérique, ou la hauteur du périphérique, l'orientation, et puis d'autres paramètres qui peuvent être notamment des paramètres liés à la couleur ou à la résolution. Notez que un certain nombre de paramètres vont accepter des préfixes qui sont minimum et maximum. C'est-à-dire que l'on va pouvoir définir une largeur minimum ou une largeur de périphérique minimum, ou bien entendu maximum. Si vous utilisez un lien pour accéder à des styles externes, nous pouvons utiliser cette syntaxe. Il s'agit d'un lien qui va aller chercher une feuille de style, avec un type pour cette feuille de style qui est ici screen, et largeur minimum, 480 pixels. On peut également utiliser le système @import, pour pouvoir inclure des feuilles de style Il faut également préciser que si vous ne déclarez pas un type de média, tout va être supposé. Donc si vous filtrez les résultats pour les appliquer à tout type de média, vous pouvez également exclure le type de média que vous voulez exclure, et le reste de la syntaxe va fonctionner toujours très bien. Vous pouvez sur le site du W3C, le consortium qui régule le Web, consulter les informations concernant les media queries, et si vous avez un doute sur l'utilisation de certaines media queries, vous pouvez consulter le site Canal use, où vous allez pouvoir, en fonction des différentes questions que vous vous posez, voir quel est l'état d'acceptation par les différents agents utilisateurs, c'est-à-dire par les différents navigateurs. Et vous voyez ici que sur certaines media queries, il n'y a pas de problème, alors que sur d'autres, par exemple ici sur la détection de la résolution, il peut y avoir des navigateurs qui n'acceptent pas bien ces media queries. Donc à partir du moment où vous allez travailler avec des media queries, pensez bien à vérifier que celles-ci vont être acceptées par l'ensemble des navigateurs sur lesquels vos utilisateurs vont consulter vos sites Web. Dans la vidéo qui va suivre, nous allons voir comment nous allons utiliser ces media queries pour pouvoir adapter nos designs en fonction, par exemple, de points de rupture, c'est-à-dire en fonction des différentes tailles d'écran. avec les différents périphériques mobiles. et ce sont des choses qui sont

Découvrir le design responsive

Abordez les principes du design responsive. Comprenez la problématique des écrans haute densité, analysez les grilles fluides, explorez les outils de prototypage, etc.

Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :6 sept. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !