diff options
Diffstat (limited to 'files/fr/web/css')
| -rw-r--r-- | files/fr/web/css/@media/index.html | 125 | ||||
| -rw-r--r-- | files/fr/web/css/media_queries/using_media_queries/index.html | 110 |
2 files changed, 93 insertions, 142 deletions
diff --git a/files/fr/web/css/@media/index.html b/files/fr/web/css/@media/index.html index 7a67bea0bb..bc94ddbaf3 100644 --- a/files/fr/web/css/@media/index.html +++ b/files/fr/web/css/@media/index.html @@ -1,29 +1,22 @@ --- title: '@media' slug: Web/CSS/@media -tags: - - CSS - - Reference - - Règle @ +browser-compat: css.at-rules.media translation_of: Web/CSS/@media --- <div>{{CSSRef}}</div> -<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle @</a> <strong><code>@media</code></strong> permet d'associer un ensemble d'instructions imbriquées (délimité par des accolades) avec une condition définie par une <a href="/fr/docs/Web/CSS/Media_queries">requête média</a>. La règle <code>@media</code> peut être utilisé au niveau le plus haut de la feuille de style et également <a href="/fr/docs/Web/CSS/Règles_@#Les_règles_de_groupe_conditionnelles">à l'intérieur d'un groupe de règles conditionnel</a>.</p> +<p>La <a href="/fr/docs/Web/CSS/At-rule">règle @</a> <strong><code>@media</code></strong> permet d'appliquer une partie d'une feuille de styles en fonction du résultat d'une ou plusieurs <a href="/fr/docs/Web/CSS/Media_Queries">requêtes média (<i lang="en">media queries</i>)</a>. Grâce à cette règle, on peut indiquer une requête média et un ensemble de règles CSS qui s'appliquent uniquement si la requête média est vérifiée pour l'appareil, le contexte avec lequel le contenu est consulté.</p> -<pre class="brush: css no-line-numbers">@media (max-width: 600px) { - .sidebar { - display: none; - } -}</pre> - -<p>Il est possible de manipuler la règle @ <code>@media</code> via le CSSOM (et JavaScript) notamment grâce à l'interface {{domxref("CSSMediaRule")}}.</p> +<div class="note"> + <p><strong>Note :</strong> Il est possible de manipuler la règle @ <code>@media</code> via le CSSOM (et JavaScript) grâce à l'interface <a href="/fr/docs/Web/API/CSSMediaRule"><code>CSSMediaRule</code></a>.</p> +</div> -<h2 id="Syntaxe">Syntaxe</h2> +<h2 id="syntax">Syntaxe</h2> -<p>Une requête média (type <code><media-query></code>) est composée d'un type de média (optionnel) et/ou de différentes caractéristiques relatives au média. Une requête média peut être imbriquée dans une autre <a href="/fr/docs/Web/CSS/Règles_@#Les_règles_de_groupe_conditionnelles">règle conditionnelle</a>.</p> +<p>Une requête média (type <code><media-query></code>) est composée d'un type de média (optionnel) et/ou de différentes caractéristiques relatives au média. Une requête média peut être imbriquée dans une autre <a href="/fr/docs/Web/CSS/At-rule#les_r%c3%a8gles_de_groupe_conditionnelles">règle conditionnelle</a>.</p> -<pre class="brush: css no-line-numbers">/* Au niveau le plus haut du code */ +<pre class="brush: css">/* Au niveau le plus haut du code */ @media screen and (min-width: 900px) { article { padding: 1rem 3rem; @@ -40,17 +33,37 @@ translation_of: Web/CSS/@media } </pre> -<p>Pour plus d'informations sur la syntaxe des requêtes média, voir <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Utiliser les requêtes média</a>.</p> +<p>Pour plus d'informations sur la syntaxe des requêtes média, voir <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">Utiliser les requêtes média</a>.</p> + +<h2 id="description">Description</h2> + +<h3 id="media_types">Types de média</h3> + +<p>{{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_types")}}</p> -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +<h3 id="media_features">Caractéristiques de média</h3> -{{csssyntax}} +<p>{{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_features")}}</p> -<h2 id="Les_caractéristiques_média">Les caractéristiques média</h2> +<h2 id="accessibility_concerns">Accessibilité</h2> -<p>{{page("/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries","Caractéristiques_média_(media_features)")}}</p> +<p>Pour une meilleure interaction, notamment avec les personnes qui zooment sur une page pour accroître la taille du texte ou qui définissent une taille de police par défaut pour l'ensemble du navigateur, on utilisera l'unité <code><a href="/fr/docs/Web/CSS/length#em">em</a></code> comme valeur pour <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">les requêtes média</a> lorsqu'il faut utiliser une longueur (<a href="/fr/docs/Web/CSS/<length>"><code><length></code></a>).</p> -<h2 id="Exemples">Exemples</h2> +<p>Les unités <code><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units#longueur_et_taille">em</a></code> et <code><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units#longueur_et_taille">px</a></code> sont toutes les deux valides mais <code><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units#longueur_et_taille">em</a></code> s'adapte mieux quand la taille de la police du navigateur a été ajustée.</p> + +<p>On privilégiera, autant que possible, les requêtes média de la spécification de niveau 4 afin d'améliorer l'ergonomie. On pourra, par exemple, se baser sur <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion"><code>prefers-reduced-motion</code> afin de détecter si l'utilisateur souhaite minimiser les animations ou les déplacements</a>.</p> + +<h2 id="security">Sécurité</h2> + +<p>Les requêtes média fournissent des informations quant aux capacités de l'appareil avec lequel on navigue. L'ensemble de ces capacités peut être détourné afin de construire une empreinte qui identifie l'appareil ou le catégorise de façon non-désirée.</p> + +<p>Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyées afin de contourner ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renverront leurs valeurs par défaut afin d'éviter leur utilisation pour du pistage.</p> + +<h3 id="formal_syntax">Syntaxe formelle</h3> + +<p>{{csssyntax}}</p> + +<h2 id="examples">Exemples</h2> <pre class="brush: css">@media print { body { font-size: 10pt } @@ -81,73 +94,19 @@ translation_of: Web/CSS/@media } </pre> -<p>Pour plus d'exemples, voir <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Utiliser les requêtes média</a>.</p> +<p>Pour plus d'exemples, voir <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">Utiliser les requêtes média</a>.</p> -<h2 id="Accessibilité">Accessibilité</h2> +<h2 id="specifications">Spécifications</h2> -<p>Pour une meilleure interaction, notamment avec les personnes qui zooment sur une page pour accroître la taille du texte ou qui définissent une taille de police par défaut pour l'ensemble du navigateur, on utilisera l'unité <code><a href="/fr/docs/Web/CSS/length#em">em</a></code> comme valeur pour <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">les requêtes média</a> lorsqu'il faut utiliser une longueur ({{cssxref("<length>")}}).</p> +<p>{{Specifications}}</p> -<p>Les unités <code><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Longueur_et_taille">em</a></code> et <code><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Longueur_et_taille">px</a></code> sont toutes les deux valides mais <code><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Longueur_et_taille">em</a></code> s'adapte mieux quand la taille de la police du navigateur a été ajustée.</p> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>On privilégiera, autant que possible, les requêtes média de la spécification de niveau 4 afin d'améliorer l'ergonomie. On pourra, par exemple, se baser sur <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion"><code>prefers-reduced-motion</code> afin de détecter si l'utilisateur souhaite minimiser les animations ou les déplacements</a>.</p> - -<h2 id="Sécurité">Sécurité</h2> - -<p>Les requêtes média fournissent des informations quant aux capacités de l'appareil avec lequel on navigue. L'ensemble de ces capacités peut être détourné afin de construire une empreinte qui identifie l'appareil ou le catégorise de façon indésirée.</p> - -<p>Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyées afin de contourner ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renverront leurs valeurs par défaut afin d'éviter leur utilisation pour du pistage.</p> +<p>{{Compat}}</p> -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Commentaires</th> - <th scope="col">Retours</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}</td> - <td>Réintègre <code>light-level</code>, <code>inverted-colors</code> et les requêtes média personnalisées qui avaient été retirées la spécification de niveau 4.<br> - Ajout des caractéristiques média <code>prefers-reduced-motion</code>, <code>prefers-reduced-transparency</code>, <code>prefers-contrast</code> et <code>prefers-color-scheme</code>.</td> - <td><a href="https://github.com/w3c/csswg-drafts/issues"><em>Issues</em> GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td> - <td>Définition de la syntaxe de base pour la règle <code>@media</code>.</td> - <td><a href="https://github.com/w3c/csswg-drafts/issues"><em>Issues</em> GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td> - </tr> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td> - <td> - <p>Ajout des caractéristiques média <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>update</code>, <code>overflow-block</code> et <code>overflow-inline</code>.<br> - Dépréciation de l'ensemble des types de média à l'exception de <code>screen</code>, <code>print</code>, <code>speech</code> et <code>all</code>.<br> - La syntaxe est rendue plus flexible avec l'ajout (entre autres) du mot-clé <code>or</code>.</p> - </td> - <td><a href="https://github.com/w3c/csswg-drafts/issues"><em>Issues</em> GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td> - <td></td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td> - <td>Définition initiale.</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("css.at-rules.media")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Media_queries">Les requêtes média</a></li> - <li>L'interface CSSOM {{domxref("CSSMediaRule")}} qui est associée avec cette règle @.</li> + <li><a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">Utiliser les requêtes média</a></li> + <li>L'interface CSSOM <a href="/fr/docs/Web/API/CSSMediaRule"><code>CSSMediaRule</code></a> qui est associée avec cette règle @.</li> </ul> diff --git a/files/fr/web/css/media_queries/using_media_queries/index.html b/files/fr/web/css/media_queries/using_media_queries/index.html index ef57afbdfd..21228d0eaf 100644 --- a/files/fr/web/css/media_queries/using_media_queries/index.html +++ b/files/fr/web/css/media_queries/using_media_queries/index.html @@ -1,14 +1,6 @@ --- title: Media queries slug: Web/CSS/Media_Queries/Using_media_queries -tags: - - Avancé - - CSS - - CSS3 - - Guide - - Media Queries - - Requêtes média - - Responsive Design translation_of: Web/CSS/Media_Queries/Using_media_queries original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries --- @@ -19,26 +11,26 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries <p>Les requêtes média sont utilisées afin :</p> <ul> - <li>D'appliquer certains styles de façon conditionnelle grâce <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">aux règles @</a> {{cssxref("@media")}} et {{cssxref("@import")}}<a href="/fr/docs/Web/CSS/At-rule">.</a></li> - <li>De cibler certains médias pour les éléments {{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}} et d'autres éléments <a href="/fr/docs/Web/HTML">HTML</a> grâce à l'attribut <code>media=</code>.</li> - <li>De <a href="/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries">tester et surveiller l'état d'un média</a> grâce aux méthodes {{domxref("Window.matchMedia()")}} et {{domxref("MediaQueryList.addListener()")}}.</li> + <li>D'appliquer certains styles de façon conditionnelle avec le <a href="/fr/docs/Web/CSS">CSS</a> grâce <a href="/fr/docs/Web/CSS/At-rule">aux règles @</a> <a href="/fr/docs/Web/CSS/@media"><code>@media</code></a> et <a href="/fr/docs/Web/CSS/@import"><code>@import</code></a>.</li> + <li>De cibler certains médias pour les éléments <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a> et d'autres éléments <a href="/fr/docs/Web/HTML">HTML</a> grâce à l'attribut <code>media=</code>.</li> + <li>De <a href="/fr/docs/Web/CSS/Media_Queries/Testing_media_queries">tester et surveiller l'état d'un média</a> grâce aux méthodes <a href="/fr/docs/Web/API/Window/matchMedia"><code>Window.matchMedia()</code></a> et <a href="/fr/docs/Web/API/MediaQueryList/addListener"><code>MediaQueryList.addListener()</code></a>.</li> </ul> <div class="note"> <p><strong>Note :</strong> Les exemples de cet article utilisent <code>@media</code> à des fins d'illustration. Toutefois, la syntaxe est la même pour les différents types de requêtes média.</p> </div> -<h2 id="Syntaxe">Syntaxe</h2> +<h2 id="syntax">Syntaxe</h2> <p>Une requête média se compose d'un <em>type de média</em> optionnel et d'une ou plusieurs expressions de <em>caractéristiques de média</em>. 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.</p> <p>Une requête média vaut <code>true</code> 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 <code>false</code>.</p> <div class="note"> -<p><strong>Note :</strong> Lorsqu'une feuille de style est attachée à un élément {{HTMLElement("link")}} comportant une requếte média, cette feuille de style <a href="http://scottjehl.github.com/CSS-Download-Tests/">sera toujours téléchargée</a>, même si la requête renvoie <code>false</code>. Toutefois, le contenu de cette feuille n'est pas appliquée tant que le résultat de la requête ne devient pas <code>true</code>.</p> +<p><strong>Note :</strong> Lorsqu'une feuille de style est attachée à un élément <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a> comportant une requếte média, cette feuille de style <a href="http://scottjehl.github.com/CSS-Download-Tests/">sera toujours téléchargée</a>, même si la requête renvoie <code>false</code>. Toutefois, le contenu de cette feuille n'est pas appliquée tant que le résultat de la requête ne devient pas <code>true</code>.</p> </div> -<h3 id="Types_de_média"><a id="types" name="types">Types de média</a></h3> +<h3 id="media_types">Types de média</h3> <p>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 <code>not</code> ou <code>only</code>. Par défaut, le type de média utilisé est <code>all</code>.</p> @@ -46,16 +38,16 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries <dt><code id="all">all</code></dt> <dd>Correspond pour tous les appareils.</dd> <dt><code id="print">print</code></dt> - <dd>Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur <a href="/fr/docs/Web/CSS/Média_paginés">les média paginés</a>.</dd> + <dd>Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur <a href="/fr/docs/Web/CSS/Paged_Media">les médias paginés</a>.</dd> <dt><code id="screen">screen</code></dt> <dd>Correspond aux appareils dotés d'un écran.</dd> <dt><code id="speech">speech</code></dt> <dd>Correspond aux outils de synthèse vocale.</dd> </dl> -<div class="note"><strong>Note : Les types de média dépréciés</strong> CSS2.1 et <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> ont défini plusieurs types additionnels (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>) qui ont ensuite été dépréciés avec <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a>. Ces types ne doivent donc plus être utilisés. Le type <code>aural</code> a été remplacé par le type <code>speech</code>.</div> +<div class="note"><strong>Note : Les types de média dépréciés</strong> CSS2.1 et <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> ont défini plusieurs types additionnels (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>) qui ont ensuite été dépréciés avec <a href="https://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a>. Ces types ne doivent donc plus être utilisés. Le type <code>aural</code> a été remplacé par le type <code>speech</code>.</div> -<h3 id="Caractéristiques_média_media_features"><a id="caractéristiques" name="caractéristiques">Caractéristiques média (<em>media features</em>)</a></h3> +<h3 id="media_features">Caractéristiques média (<i lang="en">media features</i>)</h3> <p>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.</p> @@ -185,7 +177,7 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries </tr> <tr> <td>{{cssxref("@media/prefers-contrast", "prefers-contrast")}}</td> - <td>L'utilisateur préfère que la contraste soit augmenté ou réduit entre des couleurs proches.</td> + <td>L'utilisateur préfère que le contraste soit augmenté ou réduit entre des couleurs proches.</td> <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td> </tr> <tr> @@ -221,7 +213,7 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries </tbody> </table> -<h3 id="Opérateurs_logiques">Opérateurs logiques</h3> +<h3 id="logical_operators">Opérateurs logiques</h3> <p>Les opérateurs logiques <code>not</code>, <code>and</code> et <code>only</code> 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.</p> @@ -245,45 +237,45 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries <p>Les virgules permettent de combiner plusieurs requêtes en une. Chaque requête est traitée séparément. Autrement dit, si une des requêtes de la liste renvoie <code>true</code>, toute la requête combinée renverra <code>true</code>. En ce sens, l'opérateur <code>,</code> agit comme un opérateur booléen <code>or</code>.</p> -<h2 id="Cibler_des_types_de_média">Cibler des types de média</h2> +<h2 id="targeting_media_types">Cibler des types de média</h2> -<p>Les types de média décrivent la catégorie générale de l'appareil utilisé. Bien que la plupart des sites web soient principalement conçus pour être affichés sur des écrans, il est possibles d'avoir des styles spécifiques pour les impressions ou pour les lecteurs d'écran. Voici une requête qui permet de cibler les imprimantes ou autres appareils imprimant le contenu sur plusieurs pages :</p> +<p>Les types de média décrivent la catégorie générale de l'appareil utilisé. Bien que la plupart des sites web soient principalement conçus pour être affichés sur des écrans, il est possible d'avoir des styles spécifiques pour les impressions ou pour les lecteurs d'écran. Voici une requête qui permet de cibler les imprimantes ou autres appareils imprimant le contenu sur plusieurs pages :</p> -<pre class="brush: css notranslate">@media print { ... }</pre> +<pre class="brush: css">@media print { ... }</pre> <p>Il est possible de cibler plusieurs types à la fois. La règle suivante permet de cibler les écrans et les appareils d'impression :</p> -<pre class="brush: css notranslate">@media screen, print { ... }</pre> +<pre class="brush: css">@media screen, print { ... }</pre> <p>Pour une liste complète des types de média, voir <a class="internal" href="#types">ci-avant</a>. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.</p> -<h2 id="Cibler_des_caractéristiques_média">Cibler des caractéristiques média</h2> +<h2 id="targeting_media_features">Cibler des caractéristiques média</h2> <p>Les caractéristiques média décrivent les caractéristiques spécifiques d'un agent utilisateur, d'un appareil d'affichage ou de l'environnement. On peut ainsi cibler différents styles pour les écrans larges, pour les ordinateurs qui disposent d'une souris ou pour les appareils utilisés dans une faible luminosité. Dans l'exemple qui suit, on a une requête qui vérifie si le mécanisme de saisie principal de l'appareil peut survoler les éléments :</p> -<pre class="brush: css notranslate">@media (hover: hover) { ... }</pre> +<pre class="brush: css">@media (hover: hover) { ... }</pre> <p>De nombreuses caractéristiques média sont des caractéristiques portant sur un intervalle et peuvent être préfixées par <code>min-</code> ou <code>max-</code> afin d'exprimer des seuils de valeurs. Par exemple, la requête suivante permet d'appliquer des styles à condition que la largeur de la zone d'affichage (<em>viewport</em>) soit inférieure à 1250px :</p> -<pre class="brush: css notranslate">@media (max-width: 1250px) { ... }</pre> +<pre class="brush: css">@media (max-width: 1250px) { ... }</pre> -<div class="blockIndicator note"> -<p>Selon la spécification du W3C, les barres de défilement font parties des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.</p> +<div class="note"> +<p>Selon la spécification du W3C, les barres de défilement font partie des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.</p> </div> <p>Si on utilise une caractéristique média sans indiquer de valeur, la requête sera vérifiée tant que la valeur de cette caractéristique n'est pas nulle (ou <code>none</code> pour la spécification de niveau 4). Ainsi, la requête suivante permettra d'appliquer les styles qu'elle contient si l'appareil peut afficher des couleurs :</p> -<pre class="brush: css notranslate">@media (color) { ... }</pre> +<pre class="brush: css">@media (color) { ... }</pre> <p>Si une caractéristique ne s'applique pas à l'appareil, les expressions utilisant cette caractéristique renverront <code>false</code>. Ainsi, la requête suivante aura toujours la valeur <code>false</code> car aucun appareil de synthèse vocale ne possède de caractéristique relative à ses proportions d'écran :</p> -<pre class="brush: css notranslate">@media speech and (aspect-ratio: 11/5) { ... }</pre> +<pre class="brush: css">@media speech and (aspect-ratio: 11/5) { ... }</pre> <p>Pour plus d'exemples, voir les pages de référence de chacune de ces caractéristiques depuis <a href="#caractéristiques">le tableau ci-dessus</a>.</p> -<h2 id="Créer_des_requêtes_média_complexes">Créer des requêtes média complexes</h2> +<h2 id="creating_complex_media_queries">Créer des requêtes média complexes</h2> -<p>Il est parfois nécessaire d'avoir une requête qui repose sur plusieurs conditions. Pour cela, on peut utiiliser les opérateurs logiques : <code>not</code>, <code>and</code>, <code>only</code> et la virgule (<code>,</code>) afin de combiner plusieurs requêtes média.</p> +<p>Il est parfois nécessaire d'avoir une requête qui repose sur plusieurs conditions. Pour cela, on peut utiliser les opérateurs logiques : <code>not</code>, <code>and</code>, <code>only</code> et la virgule (<code>,</code>) afin de combiner plusieurs requêtes média.</p> <p>Dans l'exemple précédent, on a utilisé l'opérateur <code>and</code> afin de combiner un type de média et une caractéristique média. Cet opérateur peut également servir à assembler plusieurs requêtes média pour en former la conjonction logique. L'opérateur <code>not</code> permet d'obtenir la négation d'une requête média tandis que l'opérateur <code>only</code> empêche les anciens navigateurs d'appliquer les styles qu'une requête contient.</p> @@ -291,95 +283,95 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries <p><strong>Note :</strong> Dans la plupart des cas, le type de média <code>all</code> est utilisé par défaut si aucun autre type n'est fourni. Toutefois, lorsqu'on utilise les opérateurs <code>not</code> ou <code>only</code>, il est nécessaire de fournir un type de média explicite.</p> </div> -<h3 id="Combiner_plusieurs_types_ou_caractéristiques">Combiner plusieurs types ou caractéristiques</h3> +<h3 id="combining_multiple_types_or_features">Combiner plusieurs types ou caractéristiques</h3> <p>Le mot-clé <code>and</code> permet de combiner une caractéristique média avec un type de média ou avec d'autres caractéristiques média. L'exemple suivant permet de restreindre l'application d'un style aux appareils orientés en mode paysage et dont la largeur mesure au moins 30ems :</p> -<pre class="brush: css notranslate">@media (min-width: 30em) and (orientation: landscape) { ... }</pre> +<pre class="brush: css">@media (min-width: 30em) and (orientation: landscape) { ... }</pre> <p>Si on souhaite restreindre ces règles aux écrans, on pourra ajouter une clause avec le type de média <code>screen</code> :</p> -<pre class="brush: css notranslate">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre> +<pre class="brush: css">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre> -<h3 id="Tester_plusieurs_requêtes">Tester plusieurs requêtes</h3> +<h3 id="testing_for_multiple_queries">Tester plusieurs requêtes</h3> <p>La virgule peut être utilisée afin de créer une disjonction (un OU logique) sur différentes clauses (types de média, caractéristiques ou états). Dans l'exemple qui suit, les styles de la requête sont appliqués si l'appareil possède une hauteur supérieure ou égale à 680 pixels ou si l'écran est en mode portrait :</p> -<pre class="brush: css notranslate">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre> +<pre class="brush: css">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre> <p>Avec cet exemple, si l'utilisateur utilise une imprimante et que la page mesure 800 pixels de haut, la requête média aurait été vérifiée. Il en aurait été de même si l'utilisateur avait utilisé un smartphone avec une zone d'affichage haute de 480 pixels en portrait car la deuxième clause aurait renvoyée <code>true</code>.</p> -<h3 id="Opérer_une_négation">Opérer une négation</h3> +<h3 id="inverting_a_querys_meaning">Opérer une négation</h3> <p>Le mot-clé <code>not</code> permet d'inverser le résultat d'une requête. Il inversera uniquement la requête sur laquelle il est appliqué (et non la liste des requêtes s'il est utilisé au sein de requêtes séparées par des virgules). Le mot-clé <code>not</code> ne peut pas être utilisé afin d'inverser une caractéristique média, il peut uniquement être utilisé pour une requête média complète. Dans la requête qui suit, l'opérateur <code>not</code> est évalué en dernier :</p> -<pre class="brush: css notranslate">@media not all and (monochrome) { ... } +<pre class="brush: css">@media not all and (monochrome) { ... } </pre> <p>La requête précédente est donc équivalente à :</p> -<pre class="brush: css notranslate">@media not (all and (monochrome)) { ... } +<pre class="brush: css">@media not (all and (monochrome)) { ... } </pre> <p>Mais elle n'est pas équivalente à :</p> -<pre class="brush: css example-bad notranslate">@media (not all) and (monochrome) { ... }</pre> +<pre class="brush: css example-bad">@media (not all) and (monochrome) { ... }</pre> <p>De même :</p> -<pre class="brush: css notranslate">@media not screen and (color), print and (color) { ... } +<pre class="brush: css">@media not screen and (color), print and (color) { ... } </pre> <p>sera évaluée comme :</p> -<pre class="brush: css notranslate">@media (not (screen and (color))), print and (color) { ... }</pre> +<pre class="brush: css">@media (not (screen and (color))), print and (color) { ... }</pre> -<h3 id="Améliorer_la_compatibilité_avec_les_anciens_navigateurs">Améliorer la compatibilité avec les anciens navigateurs</h3> +<h3 id="improving_compatibility_with_older_browsers">Améliorer la compatibilité avec les anciens navigateurs</h3> <p>Le mot-clé <code>only</code> empêche les navigateurs qui ne prennent pas en charge les requêtes média avec les caractéristiques média d'appliquer les styles concernés. Cet opérateur n'a aucun effet pour les navigateurs modernes<em>.</em></p> -<pre class="brush: css notranslate">@media only screen and (color) { ... } +<pre class="brush: css">@media only screen and (color) { ... } </pre> -<h2 id="Améliorations_syntaxiques_avec_la_spécification_de_niveau_4">Améliorations syntaxiques avec la spécification de niveau 4</h2> +<h2 id="syntax_improvements_in_level_4">Améliorations syntaxiques avec la spécification de niveau 4</h2> <p>La spécification de niveau 4 pour les requêtes média ajoute des améliorations syntaxiques pour les requêtes média qui portent sur un intervalle (par exemple les critères de largeur et de hauteur). On peut par exemple utiliser le préfixe <code>max-</code> pour les largeurs et écrire :</p> -<pre class="brush: css notranslate">@media (max-width: 30em) { ... }</pre> +<pre class="brush: css">@media (max-width: 30em) { ... }</pre> <p>Avec les requêtes média de niveau 4, on peut écrire :</p> -<pre class="brush: css notranslate">@media (width <= 30em) { ... }</pre> +<pre class="brush: css">@media (width <= 30em) { ... }</pre> <p>Si on utilise <code>min-</code> et <code>max-</code> conjointement, on peut tester l'appartenance d'une valeur à un intervalle :</p> -<pre class="brush: css notranslate">@media (min-width: 30em) and (max-width: 50em) { ... }</pre> +<pre class="brush: css">@media (min-width: 30em) and (max-width: 50em) { ... }</pre> <p>Avec les requêtes média de niveau 4, on peut écrire :</p> -<pre class="brush: css notranslate">@media (30em <= width <= 50em ) { ... } +<pre class="brush: css">@media (30em <= width <= 50em ) { ... } </pre> <p>Les requêtes média de niveau 4 permettent également d'utiliser une logique booléenne avec les opérateurs <code>and</code>, <code>not</code> et <code>or</code>.</p> -<h3 id="Tester_labsence_dune_caractéristique_avec_not">Tester l'absence d'une caractéristique avec <code>not</code></h3> +<h3 id="negating_a_feature_with_not">Tester l'absence d'une caractéristique avec <code>not</code></h3> <p>On peut utiliser l'opérateur <code>not()</code> autour d'une caractéristique média afin de tester l'absence de cette caractéristique. Ainsi, on peut <code>not(hover)</code> pour cibler les appareils qui ne permettent pas le survol d'un élément :</p> -<pre class="brush: css notranslate">@media (not(hover)) { ... }</pre> +<pre class="brush: css">@media (not(hover)) { ... }</pre> -<h3 id="Tester_plusieurs_caractéristiques_avec_or">Tester plusieurs caractéristiques avec <code>or</code></h3> +<h3 id="testing_for_multiple_features_with_or">Tester plusieurs caractéristiques avec <code>or</code></h3> <p>Il est possible d'utiliser l'opérateur <code>or</code> pour tester une correspondance sur plus d'une caractéristique. Dans l'exemple suivant, on cible les appareils qui ont un affichage monochrome (<code>not (color)</code>) ou qui permettent de survoler les éléments (<code>hover</code>) :</p> -<pre class="brush: css notranslate">@media (not (color)) or (hover) { ... } +<pre class="brush: css">@media (not (color)) or (hover) { ... } </pre> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries">Tester des requêtes média en script</a></li> - <li><a href="http://davidwalsh.name/animate-media-queries">Utiliser les animations CSS entre les requêtes média (en anglais)</a></li> - <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla#Caractéristiques">Les caractéristiques média spécifiques à Mozilla</a></li> - <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit#Caractéristiques_média">Les caractéristiques média spécifiques à WebKit</a></li> + <li><a href="/fr/docs/Web/CSS/Media_Queries/Testing_media_queries">Tester des requêtes média en script</a></li> + <li><a href="https://davidwalsh.name/animate-media-queries">Utiliser les animations CSS entre les requêtes média (en anglais)</a></li> + <li><a href="/fr/docs/Web/CSS/Mozilla_Extensions#caract%c3%a9ristiques">Les caractéristiques média spécifiques à Mozilla</a></li> + <li><a href="/fr/docs/Web/CSS/WebKit_Extensions#caract%c3%a9ristiques_m%c3%a9dia">Les caractéristiques média spécifiques à WebKit</a></li> </ul> |