recursal/MDN huggingface dataset:
paint()
=======

**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 fonction (en-US) CSS **`paint()`** définit une valeur de type `image` générée avec un `PaintWorklet`.

Syntaxe
-------


```css
paint(nomWorklet, parametres)
```

### Paramètres

`nomWorklet`

Le nom du *worklet* enregistré.

`paramètres`

Des paramètres supplémentaires, optionnels, à passer à `paintWorklet`.

Exemples
--------

### Utilisation simple

Il est possible de passer des arguments supplémentaires grâce à la fonction CSS `paint()`. Dans cet exemple, on passe deux arguments : le premier indiquant si l'image passée en arrière-plan est pleine ou constitue uniquement un contour, le second indiquant la largeur du contour ainsi formé.
```

<ul>
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
  <li>Élément 4</li>
  <li>Élément 5</li>
  <li>Élément 6</li>
  <li>Élément 7</li>
  <li>Élément 8</li>
  <li>Élément 9</li>
  <li>Élément 10</li>
  <li>Élément 11</li>
  <li>Élément 12</li>
  <li>Élément 13</li>
  <li>Élément 14</li>
  <li>Élément 15</li>
  <li>Élément 16</li>
  <li>Élément 17</li>
  <li>Élément 18</li>
  <li>Élément 19</li>
  <li>Élément 20</li>
</ul>
```


```
CSS.paintWorklet.addModule(
  "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",
);
```



```css
li {
  --boxColor: hsla(55, 90%, 60%, 1);
  background-image: paint(hollowHighlights, stroke, 2px);
}

li:nth-of-type(3n) {
  --boxColor: hsla(155, 90%, 60%, 1);
  background-image: paint(hollowHighlights, filled, 3px);
}

li:nth-of-type(3n + 1) {
  --boxColor: hsla(255, 90%, 60%, 1);
  background-image: paint(hollowHighlights, stroke, 1px);
}
```


On a ajouté une propriété personnalisée dans le sélecteur pour définir `boxColor`. Cette propriété personnalisée est accessible depuis l'objet `PaintWorklet`.

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

| Specification |
| --- |
| CSS Painting API Level 1 # paint-notation |

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

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

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

* `PaintWorklet` (en-US)
* L'API `CSS Painting` (en-US)
* Utiliser l'API CSS Painting (en-US)
* `<image>`
* `canvas` (en-US)
font-style
==========

Le descripteur **`font-style`**, associé à la règle @ `@font-face`, permet d'indiquer le style de police pour la police définie via la règle.

Pour une police donnée (un ensemble de fontes), les auteurs peuvent télécharger plusieurs fichiers correspondant à la même police mais pour différents styles. Le descripteur `font-style` peut alors être utilisé afin d'indiquer explicitement le style associé à la fonte. La valeur du descripteur correspond à la propriété de la fonte.

Syntaxe
-------


```css
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 30deg;
font-style: oblique 30deg 50deg;
```

### Valeurs

`normal`

C'est la fonte « normale » de la police qui est choisie.

`italic`

C'est la fonte italique de la police qui est choisie.

`oblique`

C'est la fonte, artificiellement penchée à partir de la police normale, de la police qui est choisie.

`oblique` avec un angle

C'est la fonte oblique (c'est-à-dire une version artificiellement penchée, obtenue à partir de la police normale) de la police qui est choisie. L'angle indiqué correspond à la pente du texte.

`oblique` avec un intervalle d'angle

Utilise une fonte comme `oblique` et indique un intervalle d'angles possibles pour la pente du texte. On notera que l'intervalle est uniquement pris en compte pour la valeur `oblique`, aucune autre valeur n'est autorisée après `normal` ou `italic`.

Définition formelle
-------------------

|  |  |
| --- | --- |
| En lien avec les règles @ | `@font-face` |
| Valeur initiale | `normal` |
| Valeur calculée | comme spécifié |

Syntaxe formelle
----------------
```

font-style =   
  auto                                      |  
  normal                                    |  
  italic                                    |  
  oblique [ <angle [-90deg,90deg]>{1,2} ]?    
  
```

Exemples
--------

Dans les exemples qui suivent, on utilisera les différentes formes liées à la police Garamond :


```css
@font-face {
  font-family: garamond;
  src: url("garamond.ttf");
}
```


![unstyled Garamond](/fr/docs/Web/CSS/@font-face/font-style/garamondunstyled.jpg)

La version en italique du texte utilisera les mêmes glyphes que la version normale, artificiellement penchés de quelques degrés.

![artificially sloped garamond](/fr/docs/Web/CSS/@font-face/font-style/garamondartificialstyle.jpg)

En revanche, si on dispose d'une vraie version italique, on peut l'indiquer via le descripteur `src` et indiquer que c'est une police italique via `font-style`. Une « vraie » police italique utilisera des glyphes différents et la qualité calligraphique obtenue sera meilleure qu'avec les glyphes normaux penchés artificiellement.


```css
@font-face {
  font-family: garamond;
  src: url("garamond-italic.ttf");
  /\* On indique ici que la police est italique \*/
  font-style: italic;
}
```


![italic garamond](/fr/docs/Web/CSS/@font-face/font-style/garamonditalic.jpg)

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-prop-desc |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
line-gap-override
=================

Le descripteur CSS **`line-gap-override`** définit la mesure de l'écart de lignes de la police. La mesure de l'écart de lignes peut être l'écart recommandé par la police ou encore un écart externe.

Syntaxe
-------


```css
line-gap-override: normal;
line-gap-override: 90%;
```

### Valeurs

`normal`

La valeur par défaut. Lorsqu'elle est utilisée, la valeur de la mesure est obtenue à partir du fichier de police.

`<percentage>`

Une valeur exprimée en pourcentage (type `<percentage>`) qui traduit l'augmentation ou la réduction par rapport à la taille de la police (`font-size`).

Définition formelle
-------------------

|  |  |
| --- | --- |
| En lien avec les règles @ | `@font-face` |
| Valeur initiale | `normal` |
| Pourcentages | comme spécifié |
| Valeur calculée | comme spécifié |

Syntaxe formelle
----------------
```

line-gap-override =   
  [ normal | <percentage [0,∞]> ]{1,2}    
  
```

Exemples
--------

### Surcharge de la mesure d'une police de recours

La propriété `line-gap-override` peut aider à la surcharge des mesures d'une police de secours pour qu'elles correspondent mieux à celles de la police principale.


```css
@font-face {
  font-family: web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: local-font;
  src: local(Local Font);
  line-gap-override: 125%;
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-metrics-override-desc |

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

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

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

* `descent-override`
* `font-display`
* `font-family`
* `font-weight`
* `font-style`
* `font-stretch`
* `font-variant`
* `font-feature-settings`
* `font-variation-settings`
* `line-gap-override`
* `src`
* `size-adjust`
* `unicode-range descriptor`
font-family
===========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Learn more
* See full compatibility
* Report feedback
Le descripteur **`font-family`** permet aux auteurs d'un document de définir la police de caractères à utiliser au sein d'une règle @ `@font-face`.

Syntaxe
-------


```css
/\* Valeurs de chaînes de caractères \*/
/\* Type <string> \*/
font-family: "police de caractères a";
font-family: "une autre police";

/\* Valeur de type <custom-ident> \*/
font-family: exemplepolice;
```

### Valeurs

`<family-name>`

Définit le nom de la police de caractères.

Définition formelle
-------------------

|  |  |
| --- | --- |
| En lien avec les règles @ | `@font-face` |
| Valeur initiale | `n/a (required)` |
| Valeur calculée | comme spécifié |

Syntaxe formelle
----------------
```

font-family =   
  <family-name>    
  
<family-name> =   
  <string>         |  
  <custom-ident>+    
  
```

Exemples
--------


```css
@font-face {
  font-family: exemplepolice;
  src: url("exemplepolice.ttf");
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-family-desc |

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

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

Le descripteur CSS **`descent-override`** définit la mesure du jambage inférieur (descendant) de la police (voir la définition de jambage). La mesure du jambage inférieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.

Syntaxe
-------


```css
descent-override: normal;
descent-override: 90%;
```

### Valeurs

`normal`

La valeur par défaut. La mesure du jambage inférieur est obtenue à partir du fichier de police.

`<percentage>`

Une valeur exprimée en pourcentage (type `<percentage>`) qui traduit l'augmentation ou la réduction par rapport à la taille de la police (`font-size`.

Définition formelle
-------------------

|  |  |
| --- | --- |
| En lien avec les règles @ | `@font-face` |
| Valeur initiale | `normal` |
| Pourcentages | comme spécifié |
| Valeur calculée | comme spécifié |

Syntaxe formelle
----------------
```

descent-override =   
  [ normal | <percentage [0,∞]> ]{1,2}    
  
```

Exemples
--------

### Surcharge de la mesure d'une police de recours

La propriété `descent-override` peut aider à la surcharge de la mesure d'une police de secours pour qu'elle corresponde mieux à celle de la police principale.


```css
@font-face {
  font-family: web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: local-font;
  src: local(Local Font);
  descent-override: 125%;
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-metrics-override-desc |

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

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

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

* `ascent-override`
* `font-display`
* `font-family`
* `font-weight`
* `font-style`
* `font-stretch`
* `font-variant`
* `font-feature-settings`
* `font-variation-settings`
* `line-gap-override`
* `src`
* `size-adjust`
* `unicode-range descriptor`
font-display
============

La propriété **`font-display`** détermine la façon dont une fonte est affichée selon qu'elle ait été chargée et prête à être utilisée.

Le déroulement de l'affichage d'une police
------------------------------------------

La gestion d'une fonte de caractères s'effectue selon trois périodes distinctes dont la première commence lorsque l'agent utilisateur tente de télécharger une fonte.

Période 1 : Blocage des fontes

Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit être rendu avec une fonte alternative invisible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.

Période 2 : Échange des fontes

Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit utiliser une fonte alternative visible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.

Période 3 : Échec du chargement des fontes

Si la fonte n'est pas chargée, l'agent utilisateur considère qu'il y a eu un échec du chargement et utilise la fonte alternative disponible.


|  |  |
| --- | --- |
| En lien avec les règles @ | `@font-face` |
| Valeur initiale | `auto` |
| Valeur calculée | comme spécifié |

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
```

### Valeurs

`auto`

La stratégie d'affichage de la fonte est définie par l'agent utilisateur.

`block`

La période de blocage est courte et est suivi d'une période d'échange infinie.

`swap`

La période de blocage est extrêmement courte et est suivie par une période d'échange infinie.

`fallback`

La période de blocage est extrêmement courte et est suivie par une courte période d'échange.

`optional`

La période de blocage est extrêmement courte et il n'y a pas de période d'échange.

### Syntaxe formelle
```

font-display =   
  auto      |  
  block     |  
  swap      |  
  fallback  |  
  optional    
  
```

Exemples
--------


```css
@font-face {
  font-family: FonteExemple;
  src:
    url(/chemin/vers/fonts/examplefont.woff) format("woff"),
    url(/chemin/vers/fonts/examplefont.eot) format("eot");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-display-desc |

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

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

Le descripteur CSS **`ascent-override`** définit la mesure du jambage supérieur (ascendant) de la police (voir la définition de jambage). La mesure du jambage supérieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.

Syntaxe
-------


```css
ascent-override: normal;
ascent-override: 90%;
```

### Valeurs

`normal`

La valeur par défaut. La mesure du jambage supérieur est obtenue à partir du fichier de police.

`<percentage>`

Une valeur exprimée en pourcentage (type `<percentage>`) qui traduit l'augmentation ou la réduction par rapport à la taille de la police (`font-size`.

Définition formelle
-------------------

|  |  |
| --- | --- |
| En lien avec les règles @ | `@font-face` |
| Valeur initiale | `normal` |
| Pourcentages | comme spécifié |
| Valeur calculée | comme spécifié |

Syntaxe formelle
----------------
```

ascent-override =   
  [ normal | <percentage [0,∞]> ]{1,2}    
  
```

Exemples
--------

### Surcharge de la mesure d'une police de recours

La propriété `ascent-override` peut aider à la surcharge de la mesure d'une police de secours pour qu'elle corresponde mieux à celle de la police principale.


```css
@font-face {
  font-family: web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: local-font;
  src: local(Local Font);
  ascent-override: 125%;
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-metrics-override-desc |

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

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

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

* `descent-override`
* `font-display`
* `font-family`
* `font-weight`
* `font-style`
* `font-stretch`
* `font-variant`
* `font-feature-settings`
* `font-variation-settings`
* `line-gap-override`
* `src`
* `size-adjust`
* `unicode-range descriptor`
size-adjust
===========

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

Le descripteur CSS **`size-adjust`** CSS définit un multiplicateur destiné aux contours des glyphes et aux mesures associées à la police. Cela facilite l'harmonisation de l'apparence des polices lorsqu'elles sont rendues avec la même taille.

Le descripteur `size-adjust` se comporte d'une manière similaire à la propriété `font-size-adjust`. Il calcule l'ajustement à effectuer par police en faisant la correspondance avec leurs hauteurs respectives.

Syntaxe
-------


```css
size-adjust: 90%;
```

### Valeurs

`<percentage>`

Une valeur exprimée en pourcentage (type `<percentage>`), avec une valeur initiale de 100%.

Toutes les mesures associées à la police sont mises à l'échelle en utilisant le pourcentage fourni. Cela comprend les glyphes, les tables de hauteur de ligne et surcharge les valeurs fournies par les descripteurs `@font-face`.

Définition formelle
-------------------

|  |  |
| --- | --- |
| En lien avec les règles @ | `@font-face` |
| Valeur initiale | `100%` |
| Pourcentages | comme spécifié |
| Valeur calculée | comme spécifié |

Syntaxe formelle
----------------
```

size-adjust =   
  <percentage [0,∞]>    
  
```

Exemples
--------

### Surcharge de la mesure d'une police de recours

La propriété `size-adjust` peut aider à la surcharge des mesures d'une police de secours pour qu'elles correspondent mieux à celles de la police principale.


```css
@font-face {
  font-family: web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: local-font;
  src: local(Local Font);
  size-adjust: 90%;
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 5 # size-adjust-desc |

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

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

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

* `font-display`
* `font-family`
* `font-weight`
* `font-style`
* `font-stretch`
* `font-variant`
* `font-feature-settings`
* `font-variation-settings`
* `src`
* `unicode-range descriptor`
font-variation-settings
=======================

Le descripteur **`font-variation-settings`**, associé à la règle @ `@font-face` permet d'indiquer les variations de police de bas niveau pour les polices OpenType ou TrueType.

Syntaxe
-------


```css
/\* On utilise les paramètres par défaut \*/
font-variation-settings: normal;

/\* On indique les valeurs pour les noms des axes OpenType \*/
font-variation-settings: "xhgt" 0.7;
```

### Valeurs

`normal`

Le texte est disposé avec les paramètres par défaut.

`<string> <number>`

Lorsque le texte est affiché, la liste des noms des axes OpenType est envoyée au moteur afin d'activer ou de désactiver des paramètres de la police. Chaque paramètre se compose d'un nom (`<string>`) de 4 caractères ASCII, suivis d'un nombre (`<number>`) qui indique la valeur de l'axe. Si la chaîne de caractères contient moins ou plus de caractères ou contient des caractères en dehors de l'intervalle de points de code U+20 - U+7E, la propriété entière sera considérée comme invalide. Le nombre utilisé peut être décimal ou négatif.

Définition formelle
-------------------

|  |  |
| --- | --- |
| En lien avec les règles @ | `@font-face` |
| Valeur initiale | `normal` |
| Valeur calculée | comme spécifié |

Syntaxe formelle
----------------
```

font-variation-settings =   
  normal                  |  
  [ <string> <number> ]#    
  
```

Exemples
--------


```css
@font-face {
  font-family: "OpenTypeFont";
  src: url("open\_type\_font.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-variation-settings:
    "wght" 400,
    "wdth" 300;
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-rend-desc |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Gestion du dépassement en multi-colonnes
========================================

Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.

Le dépassement dans les boîtes des colonnes
-------------------------------------------

On peut avoir un dépassement lorsqu'un objet est plus grand que la taille de la boîte de la colonne. Cela peut notamment se produire lorsqu'on a une image dans une colonne et que la largeur de cette image est supérieure à la valeur de `column-width` ou à la largeur des colonnes selon le nombre indiqué avec `column-count`.

Dans cette situation, le contenu dépasse sur la prochaine colonne et n'est pas rogné à la boîte de la colonne. Voici un exemple qui suit et une illustration du résultat attendu (les navigateurs actuels pouvant afficher un résultat différent).

![](/fr/docs/Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout/image-overflow-multicol.png)

Si on veut une image qui se réduise à la boîte de la colonne, on pourra utiliser les solutions pour les images adaptatives et `max-width: 100%` pour y parvenir.

Plus de colonnes que d'espace disponible
----------------------------------------

La façon dont les colonnes dépassent dépend du contexte dans lequel le document est affiché : est-ce un média fragmenté (pour l'impression par exemple) ou un média continu (une page web par exemple) ?

Pour un média fragmenté, une fois qu'un fragment (ex. une page) est rempli de colonnes, les colonnes suivantes seront ajoutées sur le fragment suivant (ex. une nouvelle page) et ainsi de suite. Pour les médias continus, les colonnes dépasseront selon l'axe en ligne. Pour le Web, cela signifie qu'on aura une barre de défilement horizontal.

Dans l'exemple qui suit, on peut observer un tel dépassement. Le conteneur multi-colonnes possède une hauteur fixée et il y a plus de texte que d'espace nécessaire pour créer des colonnes. On a alors des colonnes créées en dehors du conteneur.

**Note :** On peut souhaiter qu'une future version de la spécification permette de préciser la direction selon laquelle les colonnes qui dépassent sont affichées et ainsi pouvoir dépasser dans la direction de bloc (et non uniquement selon l'axe en ligne).

Utiliser les requêtes média verticales
--------------------------------------

Lorsque les colonnes sont plus hautes que la zone d'affichage (*viewport*), par défaut, le lecteur devra faire défiler le contenu verticalement pour tout voir, dégradant ainsi l'ergonomie. Pour éviter ce problème, on peut n'appliquer les colonnes que lorsque la hauteur est suffisante.

Dans l'exemple qui suit, on utilise par exemple une requête média avec `min-height` pour vérifier la hauteur avant d'appliquer les propriétés relatives aux colonnes.

Dans le dernier guide de cette série, nous verrons comment la disposition multi-colonnes interagit avec le module de spécification Fragmentation et nous permet de contrôler la façon dont le contenu est coupé entre les colonnes.