recursal/MDN huggingface dataset:
-webkit-animation
=================

**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-animation`** est une caractéristique média booléenne non-standard qui permet d'indiquer si les animationsCSS (`animation`) sont prises en charge dans leurs versions préfixées. Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser `@supports`.

Exemples
--------


```css
@media (-webkit-animation) {
  /\* CSS à utiliser si les animations sont prises en charge \*/
}
```

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-transform-3d`
* `-webkit-transform-2d`
* `-webkit-transition` (en-US)
* Page de test sur quirksmode.org
prefers-color-scheme
====================

**Note :** Si vous avez modifié `privacy.resistFingerprinting` à **vrai**, le paramètre `prefers-color-scheme` sera redéfini à `light`.
 Sinon, vous pouvez créer le paramètre numérique `ui.systemUsesDarkTheme` pour redéfinier le comportement par défaut et retourner `light` (valeur : 0), `dark` (valeur : 1), or `no-preference` (valeur : 2). (Firefox retournera `light` si une autre valeur est utilisée.)


La caractéristique média **`prefers-color-scheme`** permet de détecter les préférences exprimées par l'utilisateur quant au thème à utiliser (sombre ou clair).

Syntaxe
-------

`light`

Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante claire, ou qu'il n'a pas exprimé son choix.

`dark`

Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante sombre.

Exemples
--------

### CSS


```css
.day {
  background: #eee;
  color: black;
}
.night {
  background: #333;
  color: white;
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}

.day,
.night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}
```

### HTML


```html
<div class="day">Jour (initial)</div>
<div class="day light-scheme">
  Jour (modifié si utilisation d'un thème clair)
</div>
<div class="day dark-scheme">
  Jour (modifié si utilisation d'un thème sombre)
</div>
<br />

<div class="night">Nuit (initial)</div>
<div class="night light-scheme">
  Nuit (modifié si utilisation d'un thème clair)
</div>
<div class="night dark-scheme">
  Nuit (modifié si utilisation d'un thème sombre)
</div>
```

### Résultat

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

| Specification |
| --- |
| Media Queries Level 5 # prefers-color-scheme |

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

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

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

* Tutoriel vidéo (en anglais) : « Coding a Dark Mode for your Website », Coder un thème sombre pour votre site web
* Revoir la conception d'un produit ou d'un site pour le mode sombre
* Modifier le thème du system sur Windows, macOS et Android.
any-pointer
===========

**`any-pointer`** est une caractéristique média CSS (cf. `@media`) qui peut être utilisée afin de déterminer si un des mécanismes de saisie/d'entrée disponibles est un dispositif de pointage et sa précision le cas échéant.

**Note :** Si on souhaite tester la précision du mécanisme de pointage *principal*, on pourra utiliser la caractéristique `pointer` à la place.

Syntaxe
-------

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

`none`

L'appareil ne dispose d'aucun dispositif de pointage.

`coarse`

Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est limitée.

`fine`

Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est fine.


**Note :** Plusieurs valeurs peuvent correspondre si l'appareil dispose de dispositifs de pointage différents. Toutefois, la valeur `none` ne sera utilisée que lorsqu'aucun dispositif de pointage ne sera détecté.

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 (any-pointer: fine) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid blue;
  }
}

@media (any-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 # 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 `pointer`
monochrome
==========

**`monochrome`** est une caractéristique média CSS (cf. `@media`) qui peut être utilisée afin d'appliquer des styles en fonction du nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil.

Syntaxe
-------

La caractéristique `monochrome` est un entier (type `<integer>`)) dont la valeur correspond au nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil. Si l'appareil n'est pas monochrome, cela vaudra 0. Cette caractéristique est une caractéristique d'intervalle ce qui signifie qu'on peut également utiliser les variantes préfixées **`min-monochrome`** et **`max-monochrome`** afin de cibler les règles en fonction d'un minimum ou d'un maximum.

Exemples
--------

### HTML


```html
<p class="mono">Votre appareil prend en charge les pixels monochrome !</p>
<p class="no-mono">
  Votre appareil ne prend pas en charge les pixels monochromes.
</p>
```

### CSS


```css
p {
  display: none;
}

/\* Any monochrome device \*/
@media (monochrome) {
  p.mono {
    display: block;
    color: #333;
  }
}

/\* Any non-monochrome device \*/
@media (monochrome: 0) {
  p.no-mono {
    display: block;
    color: #ee3636;
  }
}
```

### Résultat

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

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

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

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

**`aspect-ratio`** est une caractéristique média CSS dont la valeur correspond au ratio (`<ratio>`) entre la largeur et la hauteur de la zone d'affichage (*viewport*).

Syntaxe
-------

La caractéristique `aspect-ratio` est définie avec un ratio (type CSS `<ratio>`) qui représente le ratio entre la largeur et la hauteur de la zone d'affichage . C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-aspect-ratio`** et **`max-aspect-ratio`** afin de cibler des règles CSS en fonction d'une valeur minimale ou maximale.

Exemples
--------

### Exemples de valeurs pour aspect-ratio


```css
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
```

Correspondance entre width et height et aspect-ratio
----------------------------------------------------

Les navigateurs ont ajouté une propriété `aspect-ratio` interne qui s'applique aux éléments remplacés et aux autres éléments associés qui acceptent des attributs `width` et `height`. Celle-ci apparaît dans la feuille de style interne de l'agent utilisateur.

Pour Firefox, la feuille de style interne ressemble à :


```css
img,
input[type="image"],
video,
embed,
iframe,
marquee,
object,
table {
  aspect-ratio: attr(width) / attr(height);
}
```


Pour en savoir plus, vous pouvez consulter Définir la hauteur et largeur des images redevient important (en anglais).

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

| Specification |
| --- |
| Media Queries Level 4 # aspect-ratio |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
hue-rotate()
============

La fonction CSS **`hue-rotate()`** permet d'appliquer une rotation de teinte sur une image. Le résultat de cette fonction est une valeur `<filter-function>`.

Exemple interactif
------------------

Syntaxe
-------


```css
hue-rotate(angle)
```

### Paramètres

`angle`

L'angle de rotation sur le cercle des couleurs, exprimé avec une valeur de type `<angle>`. Une valeur de `0deg` laissera l'image inchangée. La valeur utilisée par défaut pour une interpolation sera `0`. Bien qu'il n'y ait pas de valeur maximale, la valeur de l'angle est toujours ramenée entre `360deg` et `0deg`.

Exemples
--------

### Exemples de valeurs correctes pour hue-rotate()


```css
hue-rotate(-90deg);  /\* Correspond à une rotation de 270deg \*/
hue-rotate(0deg);    /\* Sans effet \*/
hue-rotate(90deg);   /\* Rotation de 90deg \*/
hue-rotate(.5turn);  /\* Rotation de 180deg \*/
hue-rotate(405deg);  /\* Correspond à une rotation de 45deg \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-hue-rotate |

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

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

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

* `<filter-function>` et les autres fonctions associées
    + `blur()`
    + `brightness()`
    + `contrast()`
    + `drop-shadow()`
    + `grayscale()`
    + `invert()`
    + `opacity()`
    + `saturate()`
    + `sepia()`
brightness()
============

La fonction CSS **`brightness()`** applique un multiplicateur linéaire sur une image afin de la rendre plus claire ou plus sombre. Le résultat obtenu est une valeur de type `<filter-function>`.

Exemple interactif
------------------

Syntaxe
-------


```css
brightness(multiplicateur)
```

### Paramètres

`multiplicateur`

L'amplification de la clarté de l'image, indiquée sous la forme d'un nombre (`<number>`) ou d'un pourcentage (`<percentage>`). Une valeur inférieure à `100%` assombrira l'image alors qu'une valeur supérieure à `100%` la rendra plus claire. Une valeur de `0%` permettra d'obtenir une image complètement noire et une valeur de `100%` laissera l'image inchangée. La valeur par défaut utilisée lors de l'interpolation est `1`.

Exemples
--------

### Définir la clarté avec des nombres et des pourcentages


```css
brightness(0%)   /\* Complètement noir \*/
brightness(0.4)  /\* 40% de la clarté \*/
brightness(1)    /\* Aucun effet \*/
brightness(200%) /\* Double la clarté \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-brightness |

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

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

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

* `<filter-function>` et les autres fonctions associées
    + `blur()`
    + `contrast()`
    + `drop-shadow()`
    + `grayscale()`
    + `hue-rotate()`
    + `invert()`
    + `opacity()`
    + `saturate()`
    + `sepia()`
sepia()
=======

La fonction CSS **`sepia()`** convertit une image en sépia, lui donnant un aspect plus jaune/marron, voire vielli. Le résultat obtenu est une valeur de type `<filter-function>`.

Exemple interactif
------------------

Syntaxe
-------


```css
sepia(multiplicateur)
```

### Paramètres

`multiplicateur`

L'intensité de la conversion indiquée sous la forme d'un nombre (`<number>`) ou d'un pourcentage (`<percentage>`). Une valeur de `100%` permettra d'obtenir une image complètement sépia tandis qu'une valeur de `0%` laissera l'image inchangée. Les valeurs entre `0%` et `100%` représenteront des conversions proportionnelles. Lors d'une interpolation, la valeur par défaut sera `0`.

Exemples
--------

### Exemples de valeurs correctes pour sepia()


```css
sepia(0);     /\* Aucun effet \*/
sepia(.65);   /\* 65% de sépia \*/
sepia(100%);  /\* Complètement sépia \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-sepia |

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

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

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

* `<filter-function>` et les autres fonctions associées
    + `blur()`
    + `brightness()`
    + `contrast()`
    + `drop-shadow()`
    + `grayscale()`
    + `hue-rotate()`
    + `invert()`
    + `opacity()`
    + `saturate()`
drop-shadow()
=============

La fonction CSS **`drop-shadow()`** permet d'appliquer une ombre portée sur une image. Le résultat obtenu par cette fonction est une valeur `<filter-function>`.

Exemple interactif
------------------

En pratique, une ombre portée correspond à une version floutée et décalée du masque alpha de l'image, dessiné avec une couleur donnée et fusionné sous l'image.

**Note :** Cette fonction s'apparente à la propriété `box-shadow`. La propriété `box-shadow` permet de créer une ombre rectangulaire sous **la boîte entière** d'un élément. En revanche, la fonction `drop-shadow()` permet de créer un ombre qui épouse la forme (le canal alpha) de **l'image même**.

Syntaxe
-------


```css
drop-shadow(decalage-x decalage-y rayon-flou couleur)
```


La fonction `drop-shadow()` accepte un paramètre de type `<shadow>` (tel que défini dans la documentation de `box-shadow`), mais pour lequel le mot-clé `inset` et le paramètre `spread` ne sont pas acceptés.

### Paramètres

`decalage-x` `decalage-y` (required)

Deux valeurs de longueur ( type `<length>`) qui déterminent le décalage de l'ombre. `decalage-x` indique la distance horizontale, les valeurs négatives décalant l'ombre vers la gauche de l'élément. `decalage-y` indique la distance verticale, les valeurs négatives décalant l'ombre vers le haut de l'élément. Si les deux valeurs sont `0`, l'ombre est placée directement sous l'élément.

`rayon-flou` (optional)

Le rayon de flou de l'ombre, indiqué comme une longueur (type `<length>`). Plus la valeur est grande, plus l'ombre sera grande et floue. Si cette valeur n'est pas fournie, elle prendra 0 comme valeur par défaut, ce qui créera une ombre au contour net. Les valeurs négatives ne sont pas autorisées.

`couleur` (optional)

La couleur de l'ombre, indiquée sous la forme d'une valeur de type `<color>`. Si cette valeur n'est pas fournie, c'est la couleur indiquée par la propriété `color` qui est utilisée.

Exemples
--------

### Définir une ombre portée avec des décalages et un rayon de flou exprimés en pixels


```css
/\* Une ombre noire avec un rayon de flou de 10px \*/
drop-shadow(16px 16px 10px black)
```

### Définir une ombre portée avec des décalages et un rayon de flou en rem


```css
/\* Une ombre rougeâtre avec un rayon de flou de 1rem \*/
drop-shadow(.5rem .5rem 1rem #e23)
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-drop-shadow |

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

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

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

* `<filter-function>` et les autres fonctions associées
    + `blur()`
    + `brightness()`
    + `contrast()`
    + `grayscale()`
    + `hue-rotate()`
    + `invert()`
    + `opacity()`
    + `saturate()`
    + `sepia()`
* La propriété CSS `box-shadow`
saturate()
==========

La fonction CSS **`saturate()`** permet d'accentuer ou de réduire la saturation d'une image. La valeur obtenue par cette fonction est une valeur de type `<filter-function>`.

Exemple interactif
------------------

Syntaxe
-------


```css
saturate(multiplicateur)
```

### Paramètres

`multiplicateur`

L'intensité de la modification sous la forme d'un nombre (`<number>`) ou d'un pourcentage (`<percentage>`). Une valeur inférieure à `100%` réduira la saturation et une valeur supérieure accentuera la saturation. Une valeur de `0%` désaturera complètement l'image alors qu'une valeur de `100%` laissera l'image inchangée. Lors d'une interpolation, la valeur par défaut est `1`.

Exemples
--------

### Exemples de valeurs correctes pour saturate()


```css
saturate(0);     /\* Complètement sous-saturée \*/
saturate(.4);    /\* Sous-saturée à 40% \*/
saturate(100%);  /\* Aucun effet \*/
saturate(200%);  /\* Saturation doublée \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-saturate |

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

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

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

* `<filter-function>` et les autres fonctions associées
    + `blur()`
    + `brightness()`
    + `contrast()`
    + `drop-shadow()`
    + `grayscale()`
    + `hue-rotate()`
    + `invert()`
    + `opacity()`
    + `sepia()`
invert()
========

La fonction CSS **`invert()`** permet d'inverser les couleurs de l'image. La valeur obtenue par cette fonction est de type `<filter-function>`.

Exemple interactif
------------------

Syntaxe
-------


```css
invert(multiplicateur)
```

### Paramètres

`multiplicateur`

L'intensité de la conversion, indiquée sous la forme d'un nombre (`<number>`) ou d'un pourcentage (`<percentage>`). Avec `100%`, les couleurs seront entièrement inversées (ce sera un négatif de l'image originale). Une valeur de `0%` ne modifiera pas l'image. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur utilisée par défaut est `0`.

Exemples
--------

### Exemples de valeurs correctes pour invert()


```css
invert(0);     /\* Aucun effet \*/
invert(.6);    /\* Inversion à 60% \*/
invert(100%);  /\* Négatif de l'image originale \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-invert |

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

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

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

* `<filter-function>` et les autres fonctions associées
    + `blur()`
    + `brightness()`
    + `contrast()`
    + `drop-shadow()`
    + `grayscale()`
    + `hue-rotate()`
    + `opacity()`
    + `saturate()`
    + `sepia()`
grayscale()
===========

La fonction CSS **`grayscale()`** convertit une image en niveaux de gris. Le résultat de cette fonction est une valeur `<filter-function>`.

Exemple interactif
------------------

Syntaxe
-------


```css
grayscale(multiplicateur)
```

### Paramètres

`multiplicateur`

L'intensité de la conversion, indiquée sous la forme d'un nombre (`<number>`) ou d'un pourcentage (`<percentage>`). Avec une valeur égale à `100%`, l'image obtenue sera complètement en niveaux de gris. Avec une valeur égale à `0%`, l'image source restera inchangée. Les valeurs comprises entre `0%` et `100%` auront un effet intermédiaire (progression linéaire). Dans le cas d'une interpolation, la valeur par défaut utilisée est `0`.

Exemples
--------

### Exemples de valeurs correctes pour grayscale()


```css
grayscale(0)     /\* Aucun effet \*/
grayscale(.7)    /\* Converti à 70% en niveaux de gris \*/
grayscale(100%)  /\* Uniquement en niveaux de gris \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-grayscale |

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

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

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

* `<filter-function>` et les autres fonctions associées
    + `blur()`
    + `brightness()`
    + `contrast()`
    + `drop-shadow()`
    + `hue-rotate()`
    + `invert()`
    + `opacity()`
    + `saturate()`
    + `sepia()`
opacity()
=========

La fonction CSS **`opacity()`** permet de modifier la transparence de l'image. Le résultat obtenu par cette fonction est une valeur `<filter-function>`.

Exemple interactif
------------------

**Note :** Cette fonction est proche de la propriété `opacity` mais, selon le navigateur, les filtres CSS peuvent bénéficier de l'accélération matérielle pour de meilleures performances.

Syntaxe
-------


```css
opacity(multiplicateur)
```

### Paramètres

`multiplicateur`

L'intensité de l'opacité, indiquée comme un nombre (`<number>`) ou comme un pourcentage (`<percentage>`). Une valeur de `0%` entraînera une image complètement transparente. Une valeur de `100%` laissera l'image inchangée. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur par défaut utilisée sera `1`.

Exemples
--------

### Exemples de valeurs correctes pour opacity()


```css
opacity(0%);   /\* Complètement transparente \*/
opacity(50%);  /\* 50% transparent \*/
opacity(1);    /\* Aucun effet \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-opacity |

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

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

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

* La propriété CSS `opacity`
* `<filter-function>` et les autres fonctions associées
    + `blur()`
    + `brightness()`
    + `contrast()`
    + `drop-shadow()`
    + `grayscale()`
    + `hue-rotate()`
    + `invert()`
    + `saturate()`
    + `sepia()`
contrast()
==========

La fonction CSS **`contrast()`** permet d'ajuster le contraste d'une image. Le résultat de cette fonction est une valeur de type `<filter-function>`.

Exemple interactif
------------------

Syntaxe
-------


```css
contrast(multiplicateur)
```

### Paramètres

`multiplicateur`

La modification de contraste à appliquer à l'image, exprimée sous la forme d'un nombre (`<number>`) ou d'un pourcentage (`<percentage>`). Une valeur inférieure à `100%` réduira le contraste et une valeur supérieure à `100%` accentuera le contraste. Une valeur de `0%` permettra d'obtenir une image complètement grise et une valeur de `100%` laissera l'image inchangée. La valeur par défaut utilisée pour les interpolations est `1`.

Exemples
--------

### Définir un contraste à l'aide de nombres et de pourcentages


```css
contrast(0);     /\* Complètement gris \*/
contrast(65%);   /\* 65% de contraste \*/
contrast(1);     /\* Aucun effet \*/
contrast(200%);  /\* Contraste doublé \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-contrast |

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

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

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

* `<filter-function>` et les autres fonctions associées
    + `blur()`
    + `brightness()`
    + `drop-shadow()`
    + `grayscale()`
    + `hue-rotate()`
    + `invert()`
    + `opacity()`
    + `saturate()`
    + `sepia()`