recursal/MDN huggingface dataset:
color
=====

**`color`** est une caractéristique média CSS (cf. `@media`) dont la valeur est le nombre de bits par composante de couleur du périphérique de sortie, ou zéro si ce dernier ne gère pas les couleurs.

Syntaxe
-------

La caractéristique `color` est définie avec un entier (type CSS `<integer>`) et représente le nombre de bits utiisé par l'appareil d'affichage pour représenter chaque composante de couleur. Si l'appareil ne gère pas les couleurs, la valeur sera zéro. C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-color`** et **`max-color`** afin de cibler des règles en fonction d'un minimum ou d'un maximum.

**Note :** Si les différentes composantes sont représentées sur un nombre différent de bits, c'est le plus petit de ces nombres qui est utilisé. Par exemple, si un affichage utilise 5 bits pour le bleu et le rouge mais 6 bits pour le vert, on considèrera que l'appareil utilise 5 bits par couleur. Si l'appareil utilise des couleur indexées, c'est le nombre minimal de bits par composantes parmi les couleurs de l'index qui est utilisé.

Exemples
--------

### HTML


```html
<p>
  Ce texte sera noir pour les appareils qui ne prennent en charge aucune
  couleur, rouge pour ceux qui prennent peu de couleurs en charge et vert sinon.
</p>
```

### CSS


```css
p {
  color: black;
}

/\* Tout appareil qui gère des couleurs \*/
@media (color) {
  p {
    color: red;
  }
}

/\* Tout appareil qui gère des couleurs avec \*/
/\* au moins 8 bits par composante \*/
@media (min-color: 8) {
  p {
    color: #24ba13;
  }
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # color |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Appliquer des couleurs HTML à CSS
* La propriété CSS `color`
* Le type de donnée CSS `<color>`
width
=====

**`width`** est une caractéristique média CSS (cf. `@media`) qui permet d'appliquer des styles différents en fonction de la largeur de la zone d'affichage (*viewport*) ou de la largeur de la page (pour les média paginés). La largeur est exprimée comme une longueur CSS (type `<length>`.

Syntaxe
-------

**`width`** est une valeur décrivant la largeur d'affichage, les versions préfixées **`min-width`** et **`max-width`** peuvent également être utilisées afin de décrire la largeur minimale (resp. la largeur maximale).


```css
/\* Largeur exacte \*/
@media (width: 300px) {
}

/\* Un viewport avec une largeur minimale \*/
@media (min-width: 50em) {
}

/\* Un viewport avec une largeur maximale \*/
@media (max-width: 1000px) {
}
```

Exemples
--------

### HTML


```html
<div>
  Observez cet élément lorsque vous redimensionnez la largeur du viewport.
</div>
```

### CSS


```css
/\* Largeur exacte \*/
@media (width: 360px) {
  div {
    color: red;
  }
}

/\* Largeur minimale \*/
@media (min-width: 35rem) {
  div {
    background: yellow;
  }
}

/\* Largeur maximale \*/
@media (max-width: 50rem) {
  div {
    border: 2px solid blue;
  }
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # width |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
forced-colors
=============

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La caractéristique média **`forced-colors`** est utilisée afin de détecter si l'utilisateur a choisi une palette de couleur restreinte via le navigateur ou l'agent utilisateur.

**Note :** Cette fonctionnalité n'est pas encore implémentée par aucun agent utilisateur

Valeurs
-------

`none`

La palette de couleur n'est pas restreinte.

`active`

La palette de couleur est restreinte et c'est l'agent utilisateur qui fournira la palette utilisable via un système de mots-clés de couleurs CSS systèmes. La valeur de `prefers-color-scheme` sera également mise à jour afin que les auteurs puissent adapter la page.

Préférences utilisateur
-----------------------

À l'heure actuelle, aucun agent utilisateur n'implémente cette fonctionnalité bien que de nombreux systèmes d'exploitation prennent en charge ce type de paramètre.

Exemples
--------

Dans cet exemple, les couleurs utilisées par défaut sont exotiques voire illisibles. On tire ici parti d'une requête média pour utiliser une palette restreinte de l'agent utilisateur.

### HTML


```html
<div class="colors">quelques couleurs étranges</div>
```

### CSS


```css
.colors {
  background-color: red;
  color: grey;
}

@media (forced-colors: active) {
  .colors {
    background-color: white;
    color: black;
  }
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # forced-colors |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------
pointer
=======

**`pointer`** est une caractéristique média CSS (cf. `@media`) qui permet de vérifier si le dispositif de saisie/d'entrée principal est un dispositif de pointage et, le cas échéant, de connaître sa précision.

**Note :** Si on souhaite tester la précision de n'importe quel dispositif de pointage, on utilisera plutôt la caractéristique `any-pointer`.

Syntaxe
-------

Cette caractéristique est définie avec un mot-clé parmi les suivants :

`none`

Le mécanisme de saisie principal n'inclut pas de dispositif de pointage.

`coarse`

Le mécanisme de saisie principal inclut un dispositif de pointage dont la précision est limitée.

`fine`

Le mécanisme de saisie principal inclut un dispositif de pointage précis.

Exemples
--------

Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui disposent d'un pointage précis et une case à cocher plus grande lorsque le mécanisme de pointage est moins précis.

### HTML


```html
<input id="test" type="checkbox" /> <label for="test">Coucou !</label>
```

### CSS


```css
input[type="checkbox"]:checked {
  background: gray;
}

@media (pointer: fine) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid blue;
  }
}

@media (pointer: coarse) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border: 2px solid red;
  }
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # pointer |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* La caractéristique média `any-pointer`
shape
=====

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La caractéristique média **`shape`** peut être utilisée afin de tester la forme d'un appareil pour distinguer les affichages rectangulaires des affichages ronds.

Syntaxe
-------

La caractéristique `shape` peut prendre une valeur parmi deux valeurs définies : `rect` qui représente un écran rectangulaire ou `round` qui représente un écran circulaire, ovale ou elliptique.

`rect`

La forme est un rectangle, un carré ou une forme similaire (ex. un rectangle arrondi) qui permet d'utiliser un affichage traditionnel.

`round`

La forme est arrondie telle un cercle, un ovale ou une ellipse et les dispositions arrondies seront plus appropriées sur ces écrans.

Exemples
--------

**Note :** Aucun navigateur n'implémente actuellement cette fonctionnalité.

### Exemple simple

#### HTML


```html
<h1>Coucou le monde !</h1>
```


#### CSS


```css
h1 {
  text-align: left;
}

@media (shape: rect) {
  h1 {
    text-align: left;
  }
}

@media (shape: round) {
  h1 {
    text-align: center;
  }
}
```


#### Résultat

### Feuille de style spécifique

Ce fragment de code HTML permettra d'appliquer une feuille de style particulière pour les appareils qui ont des écrans arrondis.


```html
<head>
  <link rel="stylesheet" href="default.css" />
  <link
 media="screen and (shape: rect)"
 rel="stylesheet"
 href="rectangle.css" />
  <link media="screen and (shape: round)" rel="stylesheet" href="round.css" />
</head>
```

Spécifications
--------------

| Specification |
| --- |
| CSS Round Display Level 1 # shape-media-feature |

Compatibilité des navigateurs
-----------------------------

{{Compat}}
any-hover
=========

**`any-hover`** est une caractéristique média CSS qui permet de vérifier si un mécanisme de saisie/d'entrée permet à l'utilisateur de survoler les éléments.

Syntaxe
-------

La caractéristique `any-hover` est définie avec un mot-clé parmi ceux de la liste ci-après.

`none`

Parmi les mécanismes de saisi, aucun ne permet de survoler les éléments (ou il n'existe aucun dispositif de pointage).

`hover`

Un ou plusieurs mécanismes de saisie permettent de survoler le contenu simplement.

Exemples
--------

### HTML


```html
<a href="#">Essayez de me survoler !</a>
```

### CSS


```css
@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # any-input |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* La caractéristique média `hover`
-webkit-transform-3d
====================

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

**`-webkit-transform-3d`** est une caractéristique média booléenne non-standard qui indique si les transformations CSS en 3D (cf. `transform`) préfixées sont prises en charge par le navigateur.

**Note :** Cette caractéristique est uniquement prise en charge par WebKit et Blink. Une méthode alternative standard consiste à utiliser `@supports` à la place.

Exmple
------


```css
@media (-webkit-transform-3d) {
  .toto {
    transform-style: preserve-3d;
  }
}

@media (-webkit-transform-3d: 1) {
  .toto {
    transform-style: preserve-3d;
  }
}
```

Spécifications
--------------

| Specification |
| --- |
| Compatibility Standard # css-media-queries-webkit-transform-3d |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `-webkit-transform-2d`
* `-webkit-transition`
* `-webkit-animation`
* Page de test sur quirksmode.org
inverted-colors
===============

**`inverted-colors`** est une caractéristique média CSS (cf. `@media`) qui indique si l'agent utilisateur ou si le système d'exploitation sous-jacent inverse les couleurs.

Syntaxe
-------

Cette caractéristique est définie avec un des mots-clés parmi ceux qui suivent :

`none`

Les couleurs sont affichées normalement.

`inverted`

Les couleurs des pixels de la zone affichée ont été inversées.

Exemples
--------

### HTML


```html
<p>
  Si vous utilisez les couleurs inversées, ce texte devrait être bleu sur blanc
  (l'inverse de jaune sur noir). Sinon, il devrait être rouge sur gris clair.
</p>
<p>
  Si le texte est gris, cela indique que votre navigateur ne prend pas en charge
  la caractéristique média `inverted-colors`.
</p>
```

### CSS


```css
p {
  color: gray;
}

@media (inverted-colors: inverted) {
  p {
    background: black;
    color: yellow;
  }
}

@media (inverted-colors: none) {
  p {
    background: #eee;
    color: red;
  }
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # inverted |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
update
======

**`update`** est une caractéristique média (cf. `@media`) qui permet de vérifier la vitesse à laquelle l'appareil d'affichage peut modifier l'apparence du contenu.

Syntaxe
-------

La caractéristique `update` est définie avec un mot-clé parmi ceux de la liste ci-après.

`none`

Une fois le document affiché, son apparence ne peut plus être modifiée (ex. le document est imprimé sur du papier).

`slow`

Une fois le document affiché, son apparence peut évoluer mais lentement (ex. des livres électroniques utilisant une encre électronique ou des appareils de lecture avec un niveau d'énergie faible).

`fast`

Une fois le document affiché, son apparence peut évoluer rapidement (ex. un ordinateur qui serait capable de gérer les transitions CSS).

Exemples
--------

### HTML


```html
<p>
  Si ce texte est animé, cela signifie que vous utilisez un appareil avec un
  affichage qui évolue rapidement.
</p>
```

### CSS


```css
@keyframes jiggle {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(25px);
  }
}

@media (update: fast) {
  p {
    animation: 1s jiggle linear alternate infinite;
  }
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # update |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
grid
====

**`grid`** est une caractéristique média CSS (cf `@media`) dont la valeur est un booléen qui indique si l'appareil d'affichage fonctionne grâce à une grille (ex. un terminal ou un appareil qui ne dispose que d'une police à chasse fixe) ou grâce à une matrice d'affichage (avec des pixels « classiques »).

La plupart des ordinateurs actuels possèdent des écrans matriciels. Parmi les appareils qui utilisent un affichage en grille, on trouve les appareils qui n'affichent que du texte dans un terminal ou des téléphones simples avec une seule police fixe.

Syntaxe
-------

La caractéristique `grid` est une valeur booléenne (`0` ou `1`) (type `<mq-boolean>` (en-US)) qui indique si l'appareil d'affichage fonctionne selon une grille.

Exemples
--------

### HTML


```html
<p class="unknown">
  Impossible de savoir si l'affichage fonctionne sur une grille. :-(
</p>
<p class="bitmap">L'appareil dispose d'un affichage matriciel.</p>
<p class="grid">L'appareil utilise une grille pour l'affichage !</p>
```

### CSS


```css
:not(.unknown) {
  color: lightgray;
}

@media (grid: 0) {
  .unknown {
    color: lightgray;
  }

  .bitmap {
    color: red;
    text-transform: uppercase;
  }
}

@media (grid: 1) {
  .unknown {
    color: lightgray;
  }

  .grid {
    color: black;
    text-transform: uppercase;
  }
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # grid |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
overflow-inline
===============

**`overflow-inline`** est une caractéristique média CSS (cf. `@media`) qui indique la façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage (*viewport*) dans l'axe logique en ligne (c'est-à-dire le sens correspondant au sens de lecture).

Syntaxe
-------

La caractéristique `overflow-inline` est définit avec un mot-clé parmi ceux de la liste suivante :

`none`

Le contenu qui dépasse n'est pas affiché.

`scroll`

Le contenu qui dépasse peut être visualisé en utilisant une barre de défilement.

Exemples
--------

### HTML


```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis
  eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in
  faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat,
  tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet
  rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis
  dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend.
  Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt
  sed eget ex.
</p>
```

### CSS


```css
@media (overflow-inline: scroll) {
  p {
    color: red;
  }
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| Media Queries Level 4 # mf-overflow-inline |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
aural
=====

**Obsolète:** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

Un groupe de médias défini par les standards CSS.

**Note :** Ce groupe de médias n'a jamais été complètement implémenté dans Gecko et a été supprimé dans Gecko 6.0. C'est le type de média speech qui le remplace.

Spécifications
--------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification  |

Compatibilité des navigateurs
-----------------------------

{{Compat}}Voir aussi
----------

* @media
-webkit-transform-2d
====================

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

**`-webkit-transform-2d`** est une caractéristique média booléenne non-standard qui indique si les transformations CSS en 2D (cf. `transform`) préfixées sont prises en charge par le navigateur.

**Note :** Cette caractéristique est uniquement prise en charge par WebKit et Blink. Mieux vaut utiliser la méthode alternative standard avec `@supports` à la place si possible.

Spécifications
--------------

Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la référence CSS Apple pour Safari (en anglais) .

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `-webkit-transition` (en-US)
* `-webkit-transform-3d`
* `-webkit-animation` (en-US)
* Page de test sur quirksmode.org
-moz-device-pixel-ratio
=======================

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

 **Obsolète:** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

La caractéristique média **`-moz-device-pixel-ratio`**, associée à `@media`, est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS.

**Attention :** Ne pas utiliser cette fonctionnalité ! La caractéristique `resolution` et l'unité `dppx` permettent d'obtenir le même mécanisme.

`-moz-device-pixel-ratio` peut être utilisée si besoin d'être compatible avec des versions de Firefox antérieures à la version 16 et `-webkit-device-pixel-ratio` peut être utilisée avec les navigateurs WebKit qui ne prennent pas en charge `dppx`. Par exemple :


```css
@media (-webkit-min-device-pixel-ratio: 2), /\* Navigateurs basés sur Webkit \*/
       (min--moz-device-pixel-ratio: 2), /\* Anciens Firefox (avant Firefox 16) \*/
       (min-resolution: 2dppx), /\* La méthode standard \*/
       (min-resolution: 192dpi) /\* Utilisée si dppx n'est pas gérée \*/
```


Voir cet article du CSSWG pour les bonnes pratiques quant à la compatibilité de `resolution` et `dppx`.

**Note :** Cette caractéristique est également implémentée par Webkit et IE 11 pour Windows Phone 8.1 sous le nom `-webkit-device-pixel-ratio`. Les versions préfixées pour les seuils minimal / maximal sont intitulées `min--moz-device-pixel-ratio` et `max--moz-device-pixel-ratio` sous Gecko, tandis que sous Webkit, elles sont intitulées `-webkit-min-device-pixel-ratio` et `-webkit-max-device-pixel-ratio`.

Syntaxe
-------

`<number>`

Le nombre de pixels physiques pour un pixel CSS.


**Média :** `Media/Visual` (en-US)
**Gestion des préfixes min/max :** Oui

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
display-mode
============

**`display-mode`** est une caractéristique média CSS (cf. `@media`) qui permet d'appliquer différentes règles CSS selon le mode d'affichage de l'application. On pourra utiliser cette caractéristique afin qu'un utilisateur ait une expérience similaire selon qu'il lance le site depuis une URL ou depuis une icône sur un bureau.

Cette caractéristique correspond à la propriété `display` du manifeste de l'application web. Les deux s'appliquent au contexte de navigation de plus haut niveau ainsi qu'aux contextes fils. Cette requête s'appliquera dans tous les cas (qu'un manifeste d'application soit présent ou non).

Syntaxe
-------

La caractéristique `display-mode` est définie avec un mot-clé parmi ceux du tableau ci-après.

| Valeur (mode d'affichage) | Description | Mode d'affichage utilisé en recours |
| --- | --- | --- |
| `fullscreen` | Toute la zone d'affichage est utilisée et aucun autre élément d'interface utilisateur (*chrome*) n'est affiché. | `standalone` |
| `standalone` | L'application se comportera comme une application indépendante avec une fenêtre différente, une icône distincte dans les barres d'application. Dans ce mode, l'agent utilisateur supprimera les éléments d'interface utilisateur liés au contrôle de la navigation mais pourra conserver les autres éléments tels que la barre d'état. | `minimal-ui` |
| `minimal-ui` | L'application se comportera comme une application indépendante mais son interface utilisateur sera restreinte aux contrôles de navigation. Les éléments affichés peuvent varier selon les navigateurs. | `browser` |
| `browser` | L'application ouvre un nouvel onglet dans le navigateur ou une nouvelle fenêtre selon le navigateur et la plateforme utilisés. | Aucun |

Exemples
--------


```css
@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}
```

Spécifications
--------------

| Specification |
| --- |
| Media Queries Level 5 # display-mode |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.