From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/media_queries/index.md | 87 ++-- .../media_queries/testing_media_queries/index.md | 69 +-- .../css/media_queries/using_media_queries/index.md | 495 ++++++++------------- .../using_media_queries_for_accessibility/index.md | 85 ++-- 4 files changed, 293 insertions(+), 443 deletions(-) (limited to 'files/fr/web/css/media_queries') diff --git a/files/fr/web/css/media_queries/index.md b/files/fr/web/css/media_queries/index.md index 1acb40d913..b53dfe7249 100644 --- a/files/fr/web/css/media_queries/index.md +++ b/files/fr/web/css/media_queries/index.md @@ -9,77 +9,42 @@ tags: translation_of: Web/CSS/Media_Queries original_slug: Web/CSS/Requêtes_média --- -
{{CSSRef}}
+{{CSSRef}} -

Les requêtes média, plus souvent appelées media queries, sont un outil de responsive design qui permet d'adapter la feuille de style CSS en fonction de différents paramètres ou caractéristiques de l'appareil. Par exemple, on pourra appliquer différents styles si l'écran de l'appareil utilisé pour consulter le document est plus petit qu'une taille donnée ou si l'utilisateur tient son appareil en mode portrait ou paysage. La règle @ (ou at-rule) {{cssxref("@media")}} est utilisée afin d'appliquer les styles de façon conditionnelle.

+Les requêtes média, plus souvent appelées **_media queries,_** sont un outil de _responsive design_ qui permet d'adapter la feuille de style CSS en fonction de différents paramètres ou caractéristiques de l'appareil. Par exemple, on pourra appliquer différents styles si l'écran de l'appareil utilisé pour consulter le document est plus petit qu'une taille donnée ou si l'utilisateur tient son appareil en mode portrait ou paysage. La règle @ (ou _at-rule_) {{cssxref("@media")}} est utilisée afin d'appliquer les styles de façon conditionnelle. -

De plus, la syntaxe des requêtes média est également employée dans d'autres contextes, notamment l'attribut {{htmlattrxref("media", "source")}} de l'élément {{HTMLElement("source")}} qui permet de définir une chaîne de caractères contenant une requête média afin de choisir le fichier source utilisé pour une image grâce à l'élément HTML {{HTMLElement("picture")}}.

+De plus, la syntaxe des requêtes média est également employée dans d'autres contextes, notamment l'attribut {{htmlattrxref("media", "source")}} de l'élément {{HTMLElement("source")}} qui permet de définir une chaîne de caractères contenant une requête média afin de choisir le fichier source utilisé pour une image grâce à l'élément HTML {{HTMLElement("picture")}}. -

De plus, la méthode du DOM {{domxref("Window.matchMedia()")}} peut être utilisée afin de tester le résultat d'une requête média pour la fenêtre courante. On peut également utiliser la méthode {{domxref("MediaQueryList.addListener()")}} afin de recevoir une notification lorsque l'état de la requête évolue. Grâce à cette fonctionnalité, un site ou une application peut réagir aux changements de configuration, d'orientation ou d'état.

+De plus, la méthode du DOM {{domxref("Window.matchMedia()")}} peut être utilisée afin de tester le résultat d'une requête média pour la fenêtre courante. On peut également utiliser la méthode {{domxref("MediaQueryList.addListener()")}} afin de recevoir une notification lorsque l'état de la requête évolue. Grâce à cette fonctionnalité, un site ou une application peut réagir aux changements de configuration, d'orientation ou d'état. -

Vous pouvez en découvrir plus dans l'article Tester des requêtes media.

+Vous pouvez en découvrir plus dans l'article [Tester des requêtes media](/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries). -

Référence

+## Référence -

Règles @

+### Règles @ - +- {{cssxref("@import")}} +- {{cssxref("@media")}} -

Guides

+## Guides -
-
Manipuler les requêtes média
-
Cet article présente les requêtes média, ce qu'elles font, et explique les différentes expressions qu'il est possible d'utiliser.
-
Tester les requêtes média
-
Cet article explique comment tester une requête média grâce à un programme JavaScript. On pourra par exemple déterminer l'état de l'appareil, mettre en place des gestionnaires d'évènements afin d'être notifié lorsque les résultats d'une requête média évoluent (par exemple lorsqu'un utilisateur tourne son appareil).
-
Utiliser des requêtes média pour l'accessibilité
-
Cet article explique comment les requêtes média peuvent être utilisées afin de rendre un site plus accessible.
-
+- [Manipuler les requêtes média](/fr/docs/Web/CSS/Media_queries) + - : Cet article présente les requêtes média, ce qu'elles font, et explique les différentes expressions qu'il est possible d'utiliser. +- [Tester les requêtes média](/fr/docs/Web/CSS/Media_Queries/Testing_media_queries) + - : Cet article explique comment tester une requête média grâce à un programme JavaScript. On pourra par exemple déterminer l'état de l'appareil, mettre en place des gestionnaires d'évènements afin d'être notifié lorsque les résultats d'une requête média évoluent (par exemple lorsqu'un utilisateur tourne son appareil). +- [Utiliser des requêtes média pour l'accessibilité](/fr/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility) + - : Cet article explique comment les requêtes média peuvent être utilisées afin de rendre un site plus accessible. -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries')}}{{Spec2('CSS5 Media Queries')}} 
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Définition initiale.
+| Spécification | État | Commentaires | +| ------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{SpecName('CSS5 Media Queries')}} | {{Spec2('CSS5 Media Queries')}} |   | +| {{SpecName('CSS3 Conditional')}} | {{Spec2('CSS3 Conditional')}} |   | +| {{SpecName('CSS4 Media Queries')}} | {{Spec2('CSS4 Media Queries')}} |   | +| {{SpecName('CSS3 Media Queries')}} | {{Spec2('CSS3 Media Queries')}} |   | +| {{SpecName('CSS2.1', 'media.html')}} | {{Spec2('CSS2.1')}} | Définition initiale. | -

Voir aussi

+## Voir aussi - +- La règle-@ {{cssxref("@supports")}} afin d'appliquer une mise en forme selon que l'agent utilisateur prend ou non en charge certaines technologies CSS. diff --git a/files/fr/web/css/media_queries/testing_media_queries/index.md b/files/fr/web/css/media_queries/testing_media_queries/index.md index a77f0c6f18..072c3e63c5 100644 --- a/files/fr/web/css/media_queries/testing_media_queries/index.md +++ b/files/fr/web/css/media_queries/testing_media_queries/index.md @@ -9,70 +9,73 @@ tags: translation_of: Web/CSS/Media_Queries/Testing_media_queries original_slug: Web/CSS/Requêtes_média/Tester_les_media_queries --- -
{{CSSRef}}
+{{CSSRef}} -

Le {{Glossary("DOM")}} fournit un certain nombre de fonctionnalités qui permettent de tester les résultats d'une requête média (media query) avec un script. Pour cela, on utilise l'interface {{domxref("MediaQueryList")}} ainsi que ses méthodes et ses propriétés. Une fois qu'on a créé un objet {{domxref("MediaQueryList") }}, on peut vérifier le résultat de la requête ou également recevoir des notifications automatiques lorsque le résultat de la requête change.

+Le {{Glossary("DOM")}} fournit un certain nombre de fonctionnalités qui permettent de tester les résultats d'une requête média (_media query_) avec un script. Pour cela, on utilise l'interface {{domxref("MediaQueryList")}} ainsi que ses méthodes et ses propriétés. Une fois qu'on a créé un objet {{domxref("MediaQueryList") }}, on peut vérifier le résultat de la requête ou également recevoir des notifications automatiques lorsque le résultat de la requête change. -

Créer une liste de requêtes média

+## Créer une liste de requêtes média -

Avant d'évaluer les résultats d'une requête, on doit créer un objet {{domxref("MediaQueryList")}} qui représente la requête média. Pour cela, on utilisera la méthode {{domxref("window.matchMedia")}}.

+Avant d'évaluer les résultats d'une requête, on doit créer un objet {{domxref("MediaQueryList")}} qui représente la requête média. Pour cela, on utilisera la méthode {{domxref("window.matchMedia")}}. -

Ainsi, si on veut avoir une liste de requête qui détermine si l'appareil utilisé est orienté en portrait ou en paysage, on pourra écrire :

+Ainsi, si on veut avoir une liste de requête qui détermine si l'appareil utilisé est orienté en portrait ou en paysage, on pourra écrire : -
var mql = window.matchMedia("(orientation: portrait)");
-
+```js +var mql = window.matchMedia("(orientation: portrait)"); +``` -

Vérifier le résultat d'une requête

+## Vérifier le résultat d'une requête -

Une fois que la liste de requêtes média a été créée, on peut vérifier le résultat de la requête grâce à la propriété matches qui représente les résultat de la requête :

+Une fois que la liste de requêtes média a été créée, on peut vérifier le résultat de la requête grâce à la propriété `matches` qui représente les résultat de la requête : -
if (mql.matches) {
+```js
+if (mql.matches) {
   /* La zone d'affichage/viewport est en portrait */
 } else {
   /* La zone d'affichage/viewport est en paysage */
 }
-
+``` -

Recevoir des notifications liées à la requête

+## Recevoir des notifications liées à la requête -

Afin de savoir lorsque l'évaluation d'une requête a changé, il sera plus efficace de déclarer un listener plutôt que d'interroger sans cesse le résultat. Pour cela, on pourra utiliser la méthode addListener() sur l'objet {{domxref("MediaQueryList")}} et définir un observateur qui implémente l'interface {{domxref("MediaQueryListListener")}} :

+Afin de savoir lorsque l'évaluation d'une requête a changé, il sera plus efficace de déclarer un _listener_ plutôt que d'interroger sans cesse le résultat. Pour cela, on pourra utiliser la méthode `addListener()` sur l'objet {{domxref("MediaQueryList")}} et définir un observateur qui implémente l'interface {{domxref("MediaQueryListListener")}} : -
var mql = window.matchMedia("(orientation: portrait)");
+```js
+var mql = window.matchMedia("(orientation: portrait)");
 mql.addListener(handleOrientationChange);
 handleOrientationChange(mql);
-
+``` -

Ce code crée la liste de requêtes média qui teste l'orientation (l'objet mql) puis ajoute un listener. Une fois qu'on a ajouté le listener, on l'invoque une fois. Cela permet d'ajuster l'état initial du listener selon l'orientation de l'appareil (sinon, le code aurait considéré que l'appareil était en portrait par défaut même si ce dernier était en paysage, ce qui aurait engendré des incohérences).

+Ce code crée la liste de requêtes média qui teste l'orientation (l'objet `mql`) puis ajoute un _listener_. Une fois qu'on a ajouté le _listener_, on l'invoque une fois. Cela permet d'ajuster l'état initial du _listener_ selon l'orientation de l'appareil (sinon, le code aurait considéré que l'appareil était en portrait par défaut même si ce dernier était en paysage, ce qui aurait engendré des incohérences). -

La méthode handleOrientationChange() qu'on implémente ensuite consulte le résultat de la requête et gère le cas où l'orientation est modifiée :

+La méthode `handleOrientationChange()` qu'on implémente ensuite consulte le résultat de la requête et gère le cas où l'orientation est modifiée : -
function handleOrientationChange(mql) {
+```js
+function handleOrientationChange(mql) {
   if (mql.matches) {
     /* La zone d'affichage/viewport est en portrait */
   } else {
     /* La zone d'affichage/viewport est en paysage */
   }
 }
-
+``` -

Terminer la réception des notifications

+## Terminer la réception des notifications -

Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser removeListener() sur l'objet  {{domxref("MediaQueryList") }} :

+Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser `removeListener()` sur l'objet  {{domxref("MediaQueryList") }} : -
mql.removeListener(handleOrientationChange);
-
+```js +mql.removeListener(handleOrientationChange); +``` -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

Interface MediaQueryList

+### Interface `MediaQueryList` -

{{Compat("api.MediaQueryList")}}

+{{Compat("api.MediaQueryList")}} -

Voir aussi

+## Voir aussi - +- [Les requêtes média (_media queries_)](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries "CSS/Media queries") +- {{domxref("window.matchMedia()")}} +- {{domxref("MediaQueryList")}} +- {{domxref("MediaQueryListEvent")}} diff --git a/files/fr/web/css/media_queries/using_media_queries/index.md b/files/fr/web/css/media_queries/using_media_queries/index.md index b87d5cba87..bb27b12759 100644 --- a/files/fr/web/css/media_queries/using_media_queries/index.md +++ b/files/fr/web/css/media_queries/using_media_queries/index.md @@ -4,376 +4,265 @@ slug: Web/CSS/Media_Queries/Using_media_queries translation_of: Web/CSS/Media_Queries/Using_media_queries original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries --- -
{{CSSRef}}
- -

Les requêtes média (media queries) permettent de modifier l'apparence d'un site ou d'une application en fonction du type d'appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (viewport) par exemple).

- -

Les requêtes média sont utilisées afin :

- - - -
-

Note : Les exemples de cet article utilisent @media à des fins d'illustration. Toutefois, la syntaxe est la même pour les différents types de requêtes média.

-
- -

Syntaxe

- -

Une requête média se compose d'un type de média optionnel et d'une ou plusieurs expressions de caractéristiques de média. Plusieurs requêtes peuvent être combinées entre elles grâce à des opérateurs logiques. Les requêtes média ne sont pas sensibles à la casse.

- -

Une requête média vaut true si le type de média correspond à l'appareil utilisé pour l'affichage du document et si toutes les expressions relatives aux caractéristiques sont vraies. Les requêtes qui utilisent des types de média inconnus valent toujours false.

- -
-

Note : Lorsqu'une feuille de style est attachée à un élément <link> comportant une requếte média, cette feuille de style sera toujours téléchargée, même si la requête renvoie false. Toutefois, le contenu de cette feuille n'est pas appliquée tant que le résultat de la requête ne devient pas true.

-
- -

Types de média

- -

Un type de média définit une catégorie générale d'appareil. Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les opérateurs logiques not ou only. Par défaut, le type de média utilisé est all.

- -
-
all
-
Correspond pour tous les appareils.
-
print
-
Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur les médias paginés.
-
screen
-
Correspond aux appareils dotés d'un écran.
-
speech
-
Correspond aux outils de synthèse vocale.
-
- -
-

Note : Les types de média dépréciés CSS2.1 et Media Queries 3 ont défini plusieurs types additionnels (tty, tv, projection, handheld, braille, embossed, and aural) qui ont ensuite été dépréciés avec Media Queries 4. Ces types ne doivent donc plus être utilisés. Le type aural a été remplacé par le type speech.

-
- -

Caractéristiques média (media features)

- -

Les caractéristiques média décrivent certaines caractéristiques spécifiques de l'agent utilisateur, de l'appareil d'affichage ou de l'environnement. Les expressions de caractéristique média testent leur présence ou leur valeur. Chaque expression de caractéristique doit être entourée de parenthèses.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomRésuméNotes
{{cssxref("@media/width","width")}}La largeur de la zone d'affichage (viewport)
{{cssxref("@media/height","height")}}La hauteur de la zone d'affichage
{{cssxref("@media/aspect-ratio","aspect-ratio")}}Le rapport largeur/hauteur de la zone d'affichage
{{cssxref("@media/orientation","orientation")}}L'orientation la zone d'affichage
{{cssxref("@media/resolution","resolution")}}La densité de pixel pour l'appareil d'affichage
{{cssxref("@media/scan","scan")}}Le processus de scan de l'appareil d'affichage
{{cssxref("@media/grid","grid")}}Le type d'écran de l'appareil : matriciel ou grille ?
{{cssxref("@media/update-frequency","update")}}La fréquence de modification du contenu par l'appareil d'affichageAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/overflow-block","overflow-block")}}La façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage selon l'axe de blocAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/overflow-inline","overflow-inline")}}La possibilité de faire défiler (scroll) le contenu qui dépasse de la zone d'affichage sur l'axe en ligneAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/color","color")}}Le nombre de bits pour chaque composante de couleur pour l'appareil d'affichage (ou 0 si l'appareil ne gère pas les couleurs)
{{cssxref("@media/color-gamut","color-gamut")}}Un intervalle approximatif des couleurs prises en charge par l'agent utilisateur et l'appareil d'affichageAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/color-index","color-index")}}Le nombre d'éléments dans le tableau des couleurs de l'appareil d'affichage (ou 0 si l'appareil ne dispose pas d'un tel tableau)
{{cssxref("@media/display-mode","display-mode")}}Le mode d'affichage de l'application, tel qu'indiqué par la propriété display du manifesteDéfinie dans la spécification pour les manifestes des applications web.
{{cssxref("@media/monochrome","monochrome")}}Le nombre de bits par pixel pour le frame buffer monochrome de l'appareil d'affichage ou 0 si l'appareil n'est pas monochrome
{{cssxref("@media/inverted-colors","inverted-colors")}}L'inversion (ou non) des couleurs par l'agent utilisateur ou le système d'exploitationReportée au niveau 5 du module de spécification Media Queries.
{{cssxref("@media/pointer","pointer")}}La présence d'un appareil de pointage comme mécanisme de saisie principal et sa précisionAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/hover","hover")}}La capacité du mécanisme de saisie principal à survoler les élémentsAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/any-pointer","any-pointer")}}La présence d'un appareil de pointage parmi les mécanismes de saisie et sa précisionAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/any-hover","any-hover")}}La capacité d'un des mécanismes de saisie à survoler les élémentsAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/light-level","light-level")}}Le niveau de luminosité de l'environnementAjoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}L'utilisateur préfère que la quantité de mouvement sur la page soit réduite.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}L'utilisateur préfère que la transparence utilisée sur la page soit réduite.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-contrast", "prefers-contrast")}}L'utilisateur préfère que le contraste soit augmenté ou réduit entre des couleurs proches.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}L'utilisateur préfère utiliser un thème clair ou un thème sombre.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/forced-colors", "forced-colors")}}Détecte si l'agent utilisateur restreint la palette de couleurs.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/scripting","scripting")}}La disponibilité des fonctions de script (JavaScript par exemple)Reportée au niveau 5 du module de spécification Media Queries.
{{cssxref("@media/device-width","device-width")}} {{obsolete_inline}}La largeur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/device-height","device-height")}} {{obsolete_inline}}La hauteur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/device-aspect-ratio","device-aspect-ratio")}} {{obsolete_inline}}Le rapport largeur/hauteur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
- -

Opérateurs logiques

- -

Les opérateurs logiques not, and et only peuvent être utilisés afin de construire une requête média complexe. Il est aussi possible de combiner plusieurs requêtes média en les séparant par des virgules.

- -

and

+{{CSSRef}} -

L'opérateur and permet de combiner plusieurs requêtes média en une seule. Pour que la requête résultante soit vraie, il faut que chacune des sous-requêtes soit vraie. Cet opérateur est également utilisé afin de relier des caractéristiques média avec des types de média.

+**Les requêtes média (_media queries_)** permettent de modifier l'apparence d'un site ou d'une application en fonction du type d'appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (_viewport_) par exemple). -

not

+Les requêtes média sont utilisées afin : -

L'opérateur not est utilisé afin d'obtenir le résultat opposé d'une requête média (il renvoie true si l'opérande renvoie false). S'il est utilisé dans une liste de requêtes séparées par des virgules, il ne nie que la requête sur laquelle il est appliqué. Si l'opérateur not est utilisé, la requête doit nécessairement contenir un type de média.

+- D'appliquer certains styles de façon conditionnelle avec le [CSS](/fr/docs/Web/CSS) grâce [aux règles @](/fr/docs/Web/CSS/At-rule) [`@media`](/fr/docs/Web/CSS/@media) et [`@import`](/fr/docs/Web/CSS/@import). +- De cibler certains médias pour les éléments [`