recursal/MDN huggingface dataset:
L'alignement des boîtes avec une disposition en colonnes
========================================================

Le module de spécification *Box Alignment* détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec une disposition multi-colonnes. Cette page détaille les aspects spécifiques relatifs à l'alignement et au module *Multi-Column Layout*. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

Pour une disposition en colonne, le conteneur d'alignement est le conteneur de colonnes. Le sujet d'alignement correspond à la boîte de colonne. Les propriétés qui s'appliquent pour ce type de disposition sont détaillées ci-après.

**Note :** Le module de spécification de la disposition en colonnes (*Multi-Column Layout*) précède celui pour l'alignement des boîtes. Aussi, certaines des propriétés décrites ici, bien que spécifiées afin de fonctionner pour ce mode de disposition, peuvent ne pas encore être prises en charge par les navigateurs.

`align-content` et `justify-content`
------------------------------------

La propriété `align-content` s'applique à l'axe de bloc et la propriété `justify-content` s'applique à l'axe en ligne. Tout espace ajouté entre les colonnes selon la distribution choisie sera ajouté entre les colonnes. Les gouttières pourront donc être plus larges que celles indiquées par la propriété `column-gap`.

Utiliser `justify-content` avec une valeur différente de `normal` ou `stretch` entraînera un dimensionnement des colonnes avec la valeur de `column-width`, définie sur le conteneur multi-colonnes. L'espace restant sera alors réparti selon la valeur de `justify-content`.

`column-gap`
------------

La propriété `column-gap` a été définie dans des versions antérieures du module de spécification pour la disposition multi-colonne. Son rôle a été généralisé avec les autres propriétés d'espacement dans le module d'alignement des boîtes.

On notera que, si les autres modes de disposition utilisent une valeur initiale de `0` pour `column-gap`, la disposition multi-colonne utilise une valeur initiale de `1em`.

Référence
---------

### Propriétés CSS

* `justify-content`
* `align-content`
* `column-gap`
### Termes du glossaire

* Sujet d'alignement
* Conteneur d'alignement
* Alignement de recours
scripting
=========

**`scripting`** est une caractéristique média CSS qui permet de savoir si les outils de script (ex. JavaScript) sont disponibles.

Syntaxe
-------

La caractéristique `scripting` est définie avec un mot-clé parmi les suivants :

`none`

Les outils de script sont indisponibles pour le document courant.

`initial-only`

Les outils de script sont disponibles pendant le chargement de la page mais pas ensuite.

`enabled`

Les outils de script sont pris en charge et actifs pour le document courant.

Exemples
--------

### HTML


```html
<p class="script-none">Les outils de script ne sont pas disponibles. :-(</p>
<p class="script-initial-only">
  Les outils de script sont uniquement disponibles au chargement initial.
</p>
<p class="script-enabled">Les outils de script sont activés ! :-)</p>
```

### CSS


```css
p {
  color: lightgray;
}

@media (scripting: none) {
  .script-none {
    color: red;
  }
}

@media (scripting: initial-only) {
  .script-initial-only {
    color: red;
  }
}

@media (scripting: enabled) {
  .script-enabled {
    color: red;
  }
}
```

### Résultat

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

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

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

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

**`resolution`** est une caractéristique média CSS dont la valeur représente la densité de pixels de l'appareil d'affichage.

Syntaxe
-------

La caractéristique `resolution` est une valeur de type `<resolution>` qui représente la densité de pixels de l'appareil d'affichage. C'est une caractéristique d'intervalle, cela signifie qu'on peut utiliser les variantes préfixées **`min-resolution`** et **`max-resolution`** afin d'établir des règles selon un minimum ou un maximum.

Exemples
--------

### HTML


```html
<p>Un test pour la densité de pixels de votre appareil.</p>
```

### CSS


```css
/\* Résolution exacte \*/
@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

/\* Résolution minimale \*/
@media (min-resolution: 72dpi) {
  p {
    text-decoration: underline;
  }
}

/\* Résolution maximale \*/
@media (max-resolution: 300dpi) {
  p {
    background: yellow;
  }
}
```

### Résultat

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

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

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

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

**`color-gamut`** est une caractéristique média dont la valeur décrit l'intervalle approximatif des couleurs qui sont prises en charge par l'agent utilisateur et l'appareil responsable de l'affichage.

Syntaxe
-------

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

`srgb`

L'appareil d'affichage prend approximativement en charge l'espace de couleurs sRGB ou un espace plus grand. Cela correspond à la majorité des appareils d'affichage.

`p3`

L'appareil d'affichage prend approximativement en charge l'espace de couleurs spécifié par l'espace de couleur DCI P3 ou un espace plus grand; L'espace p3 est plus grand (et inclut) l'espace srgb.

`rec2020`

L'appareil d'affichage prend approximativement l'espace de couleurs spécifié par l'espace de couleurs ITU-R Recommendation BT.2020 ou un espace plus grand. L'espace rec2020 est plus grand (et inclut) l'espace p3.

Exemples
--------

### HTML


```html
<p>Un test simple.</p>
```

### CSS


```css
@media (color-gamut: srgb) {
  p {
    background: #f4ae8a;
  }
}
```

### Résultat

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

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

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

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

**`height`** est une caractéristique média CSS (cf. `@media`) dont la valeur représente la hauteur de la zone d'affichage (*viewport*) (ou de la boîte de page pour les média paginés).

Syntaxe
-------

La caractéristique `height` est définie comme une longueur (type `<length>`) et représente la hauteur de la zone d'affichage. C'est une caractéristique d'intervalle et on peut donc utiliser les variantes préfixées **`min-height`** et **`max-height`** afin de cibler des règles selon un minimum ou un maximum.

Exemples
--------

### HTML


```html
<div>
  Surveillez cet élément lors du redimensionnement de la zone d'affichage.
</div>
```

### CSS


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

/\* Hauteur minimale \*/
@media (min-height: 25rem) {
  div {
    background: yellow;
  }
}

/\* Hauteur maximale \*/
@media (max-height: 40rem) {
  div {
    border: 2px solid blue;
  }
}
```

### Résultat

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
-webkit-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.

**`-webkit-device-pixel-ratio`** est une caractéristique média non-standard, alternative à la caractéristique média standard `resolution`.

Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter un pixel CSS (`px`). Bien que la valeur soit de type `<number>`, sans unité donc, l'unité implicite est `dppx`.

**Attention :** Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera `resolution`.

Syntaxe
-------

**`-webkit-device-pixel-ratio`** est une valleur décrivant un intervalle. On peut également utiliser **`-webkit-min-device-pixel-ratio`** et **`-webkit-max-device-pixel-ratio`** pour fixer un seuil minimum/maximum.

### Valeurs

`<number>`

Le nombre de pixels physiques pour chaque pixel (`px`) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est `dppx`.

Implémentation
--------------


```css
/\* Unité dppx implicite \*/
@media (-webkit-min-device-pixel-ratio: 2) { ... }
/\* équivalent à \*/
@media (min-resolution: 2dppx) { ... }

/\* De même \*/
@media (-webkit-max-device-pixel-ratio: 2) { ... }
/\* équivalent à \*/
@media (max-resolution: 2dppx) { ... }
```

Exemples
--------

### CSS


```css
/\* Résolution exacte \*/
@media (-webkit-device-pixel-ratio: 1) {
  p {
    color: red;
  }
}

/\* Résolution minimale \*/
@media (-webkit-min-device-pixel-ratio: 1.1) {
  p {
    font-size: 1.5em;
  }
}

/\* Résolution maximale \*/
@media (-webkit-max-device-pixel-ratio: 3) {
  p {
    background: yellow;
  }
}
```

### HTML


```html
<p>Voici un test pour la densité de pixel de votre appareil.</p>
```

### Résultat

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

| Specification |
| --- |
| Compatibility Standard # css-media-queries-webkit-device-pixel-ratio |

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

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

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

* `resolution`
* `-webkit-transition` (en-US)
* `-webkit-transform-3d`
* `-webkit-transform-2d`
* `-webkit-animation` (en-US)
* Article du W3C pour éviter le préfixe
color-index
===========

**`color-index`** est une caractéristique média CSS (cf. `@media`) dont la valeur correspond au nombre d'entrées que comporte la palette de couleurs du périphérique de sortie, ou zéro si ce dernier n'en utilise pas.

Syntaxe
-------

La caractéristique `color-index` est définie sous la forme d'un entier (type `<integer>`) et représente le nombre d'entrées de la palette de couleurs de l'appareil d'affichage (ou zéro si l'appareil n'utilise pas une telle palette). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-color-index`** et **`max-color-index`** afin cibler des règles en fonction d'un minimum ou d'un maximum.

Exemples
--------

### Exemple simple

#### HTML


```html
<p>Un test simple.</p>
```


#### CSS


```css
p {
  color: black;
}

@media (color-index) {
  p {
    color: red;
  }
}

@media (min-color-index: 15000) {
  p {
    color: #1475ef;
  }
}
```


#### Résultat

### Feuille de style personnalisée

Ce fragment HTML permet d'appliquer une feuille de style spécifique pour les appareils qui disposent d'au moins 256 couleurs.


```html
<link rel="stylesheet" href="http://toto.truc.com/base.css" />
<link
 rel="stylesheet"
 media="all and (min-color-index: 256)"
 href="http://toto.truc.com/feuille\_style\_couleurs.css" />
```

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

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

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

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

**`overflow-block`** est une caractéristique média CSS 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 de bloc (c'est-à-dire le sens perpendiculaire au sens de lecture).

Syntaxe
-------

La caractéristique `overflow-block` est définie avec un mot-clé de la liste suivante :

`none`

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

`scroll`

Une barre de défilement est ajoutée afin de pouvoir visualiser le contenu qui dépasse de la zone d'affichage.

`optional-paged`

Une barre de défilement est ajoutée pour que l'utilisateur puisse voir le contenu ou l'auteur peut utiliser des sauts de page afin que le contenu soit lisible sur une autre page (ex. diaporamas).

`paged`

Le contenu qui dépasse est entraîné sur la page suivante (ex. livres électroniques, impression).

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-block: scroll) {
  p {
    color: red;
  }
}
```

### Résultat

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

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

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

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

**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.

**`device-aspect-ratio`** est une caractéristique média (cf. `@media`) dont la valeur correspond au ratio entre la largeur et la hauteur de l'appareil d'affichage.

Syntaxe
-------

La caractéristique `device-aspect-ratio` est définie sous la forme d'un ratio (type CSS `<ratio>`). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-device-aspect-ratio`** et **`max-device-aspect-ratio`** afin de cibler des règles en fonction de minimum ou maximum.

Exemples
--------


```css
article {
  padding: 1rem;
}

@media screen and (min-device-aspect-ratio: 16/9) {
  article {
    padding: 1rem 5vw;
  }
}
```

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

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

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

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

**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 CSS **`prefers-contrast`** permet de détecter si l'utilisatrice ou l'utilisateur a configuré son système pour utiliser un contraste élevé (ou faible).

Syntaxe
-------

`no-preference`

Cette valeur indique que qu'aucune préférence particulière n'a été exprimée. La valeur de ce mot-clé est évaluée à `false` dans un contexte booléen.

`more`

Cette valeur indique que le système a été configuré afin d'avoir un contraste plus élevé.

`less`

Cette valeur indique que le système a été configuré afin d'avoir un niveau de contraste plus faible.

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

Les différents systèmes d'exploitation prennent en charge des réglages de contrastes et les agents utilisateurs peuvent utiliser les valeurs de ces réglages pour déterminer la valeur de cette caractéristique.

Exemples
--------

Par défaut, cet exemple présente un contraste trop faible pour la lisibilité.

### HTML


```html
<div class="contrast">Une boîte avec un contraste faible.</div>
```

### CSS


```css
.contrast {
  width: 100px;
  height: 100px;
  outline: 2px dashed black;
}

@media (prefers-contrast: more) {
  .contrast {
    outline: 2px solid black;
  }
}
```

### Résultat

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

| Specification |
| --- |
| Media Queries Level 5 # prefers-contrast |

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 spécifique à Microsoft `-ms-high-contrast`
* La caractéristique média `forced-colors`
orientation
===========

**`orientation`** est une caractéristique média CSS (cf. `@media`) qui peut être utilisée pour vérifier l'orientation de la zone d'affichage (*viewport*) (ou la boîte de la page pour les média paginés).

Syntaxe
-------

La caractéristique `orientation` se définit grâce à l'un des mots-clés suivants :

`portrait`

La zone d'affichage est en mode portrait (la hauteur est la plus grande dimension).

`landscape`

La zone d'affichage est en mode paysage (la largeur est la plus grande dimension).

Exemples
--------

### HTML


```html
<div>Boîte 1</div>
<div>Boîte 2</div>
<div>Boîte 3</div>
```

### CSS


```css
body {
  display: flex;
}

div {
  background: yellow;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}
```

### Résultat

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

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

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

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

**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.

**`device-height`** est une caractéristique média (cf. `@media`) dépréciée dont la valeur correspond à la hauteur de la surface de rendu pour l'appareil d'affichage.

Syntaxe
-------

La caractéristique `device-height` est définie comme une longueur (type `<length>`). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-device-height`** et **`max-device-height`** afin d'utiliser des critères de minimum et maximum.

Exemples
--------

Ce fragment HTML applique une feuille de style spécifique pour les appareils dont la hauteur est inférieure à 800 pixels.


```html
<link
 rel="stylesheet"
 media="screen and (max-device-height: 799px)"
 href="http://toto.truc.com/short-styles.css" />
```

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

| Specification |
| --- |
| Media Queries Level 4 # device-height |

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

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

**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.

**`-webkit-transition`** est une caractéristique média booléenne non-standard qui permet d'indiquer si les transitions CSS (`transition`) sont prises en charge dans leurs versions préfixées.

**Note :** Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser `@supports`.

Privilégier `@supports`
-----------------------

S'il vous faut déterminer si les transitions CSS sont prises en charges, évitez d'utiliser `-webkit-transition`. En lieu et place, on utilisera la règle @ `@supports` :


```css
@supports (transition: initial) {
  /\* Les règles CSS à utiliser si \*/
  /\* les transitions 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
----------

* Utiliser les media queries
* Utiliser les transitions CSS
* `@supports`
* `transition`
* `-webkit-transform-3d`
* `-webkit-transform-2d`
* `-webkit-animation` (en-US)
* Page de test sur quirksmode.org
device-width
============

**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.

**`device-width`** est une caractéristique média dépréciée dont la valeur représente la largeur de la surface de rendu de l'appareil d'affichage.

Syntaxe
-------

`device-width` est définie comme une longueur (type `<length>`). C'est une caractéristique d'intervalle et les variantes préfixées **`min-device-width`** et **`max-device-width`** peuvent être utilisées pour manipuler un minimum ou un maximum.

Exemples
--------

Ce code HTML applique une feuille de style pour pour les appareils plus étroits que 800 pixels.


```html
<link
 rel="stylesheet"
 media="screen and (max-device-width: 799px)"
 href="http://toto.truc.com/narrow-styles.css" />
```

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

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

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

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

**`hover`** est une caractéristique média CSS (cf. `@media`) qui permet de vérifier si le dispositif de saisie/d'entrée principal permet à l'utilisateur de survoler les éléments.

Syntaxe
-------

La caractéristique `hover` est définie avec un mot-clé parmi ceux de la liste suivant :

`none`

Le mécanisme de saisie principal ne permet pas de survoler les éléments (ou ne le permet pas de façon simple ; par exemple sur les appareils mobiles qui émulent le survol avec un appui long) ou il n'existe pas de dispositif de pointage principal.

`hover`

Le mécanisme de saisie principal permet de survoler les éléments simplement.

Exemples
--------

### HTML


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

### CSS


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

### Résultat

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

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

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-hover`