recursal/MDN huggingface dataset:
aspect-ratio
============

La propriété CSS **`aspect-ratio`** définit un **ratio d'affichage préférentiel** pour la boîte, qui sera utilisé dans le calcul des tailles automatiques et pour d'autres fonctions de mise en page.


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

/\* Valeurs globales \*/
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: unset;
```

### Valeurs

`<auto>`

Les éléments remplacés ayant leur propre ratio d'affichage intrinsèque, ils utilisent *ce dernier*. Sinon, la boîte n'a pas de ratio d'affichage préférentiel. Les calculs de tailles impliquant un ratio d'affichage intrinsèque fonctionnent toujours avec les dimensions de la boîte de contenu.

`<ratio>`

Le ratio d'affichage préférentiel de la boîte est le ratio spécifié par `width` / `height`. Les calculs de tailles impliquant un ratio d'affichage intrinsèque fonctionnent toujours avec les dimensions de la boîte de contenu spécifiées par `box-sizing`.

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

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | all elements except inline boxes and internal ruby or table boxes |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |

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

aspect-ratio =   
  auto     ||  
  <ratio>    
  
<ratio> =   
  <number [0,∞]> [ / <number [0,∞]> ]?    
  
```

Exemples
--------

### Exemples de valeurs pour aspect-ratio


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

Correspondance entre largeur et hauteur avec aspect-ratio
---------------------------------------------------------

Les navigateurs ont ajouté une propriété `aspect-ratio` interne qui s'applique aux éléments remplacés et à d'autres éléments liés qui acceptent les attributs `width` et `height`. Cela se passe dans la feuille de styles interne du navigateur.

Sur Firefox, la règle de la feuille de styles interne ressemble à cela :


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


Vous pouvez en savoir plus sur cette fonctionnalité dans l'article Setting Height And Width On Images Is Important Again (en anglais).

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

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # aspect-ratio |

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

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

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

* Faire la correspondance des attributs width et height du conteneur des éléments média avec aspect-ratio (en-US)
* Designing an aspect ratio unit for CSS (en anglais)
CSS Images
==========

***CSS Images*** est un module CSS qui définit les types d'images qui peuvent être utilisés (le type `<image>`, les URLs qu'elles contiennent, les dégradés et autres types d'images), comment les redimensionner et comment elles, ainsi que le contenu remplacé, interagissent avec les différents modèles de mise en page.

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

### Propriétés

* `image-orientation`
* `image-rendering`
* `image-resolution`
* `object-fit`
* `object-position`
### Fonctions

* `linear-gradient()`
* `radial-gradient()`
* `repeating-linear-gradient()`
* `repeating-radial-gradient()`
* `conic-gradient()`
* `repeating-conic-gradient()`
* `url()`
* `element()`
* `image()`
* `cross-fade()`
### Types de données

* `<image>`
* `<gradient>`
Guides
------

Utilisation de dégradés CSS

Présente un type spécifique d'images CSS, les *dégradés*, et comment les créer et les utiliser.

Les *sprites* CSS

Décrit la technique classique consistant à regrouper plusieurs images en un seul document pour économiser des requêtes de téléchargement et rendre une page disponible plus rapidement.

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

| Specification |
| --- |
| CSS Images Module Level 3  |
| Compatibility Standard # css-%3Cimage%3E-type |
| CSS Values and Units Module Level 4 # urls |
::part()
========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**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 pseudo-élément CSS **`::part`** représente n'importe quel élément dans un arbre fantôme qui a un attribut `part` correspondant.


```css
custom-element::part(foo) {
  /\* Styles à appliquer à la partie `foo` \*/
}
```

Syntaxe
-------

Error: could not find syntax for this itemExemples
--------

### `<tabbed-custom-element>`

#### Arbre fantôme `<tabbed-custom-element>`


```html
<style type="text/css">
 \*,
 ::before,
 ::after {
 box-sizing: border-box;
 }

 :host {
 display: flex;
 }
</style>
<div part="tab active">Tab 1</div>
<div part="tab">Tab 2</div>
<div part="tab">Tab 3</div>
```


#### Feuille de style chargée dans un arbre léger


```css
tabbed-custom-element::part(tab) {
  color: #0c0c0dcc;
  border-bottom: transparent solid 2px;
}

tabbed-custom-element::part(tab):hover {
  background-color: #0c0c0d19;
  border-color: #0c0c0d33;
}

tabbed-custom-element::part(tab):hover:active {
  background-color: #0c0c0d33;
}

tabbed-custom-element::part(tab):focus {
  box-shadow:
    0 0 0 1px #0a84ff inset,
    0 0 0 1px #0a84ff,
    0 0 0 4px rgba(10, 132, 255, 0.3);
}

tabbed-custom-element::part(active tab) {
  color: #0060df;
  border-color: #0a84ff !important;
}
```

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

| Specification |
| --- |
| CSS Shadow Parts # part |

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

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

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

* L'attribut `part` - Utilisé pour définir des parties qui peuvent être sélectionnées par le sélecteur `::part()`
* L'attribut `exportparts` qui est utilisé pour exporter les parties d'un arbre *shadow* imbriqué vers un arbre classique
* Utilisation de CSS Shadow : `::part` et `::theme`
paint-order
===========

**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 propriété **`paint-order`** permet de contrôler l'ordre dans lequel le remplissage, les marqueurs de peinture et le contour du texte et des formes sont dessinés.

Syntaxe
-------


```css
/\* Normal \*/
paint-order: normal;

/\* Valeur unique \*/
/\* le contour est dessiné en premier, puis \*/
/\* le remplissage puis les marqueurs \*/
paint-order: stroke;
/\* les marqueurs sont dessinés en premier, \*/
/\* suivis du remplissage et du contour \*/
paint-order: markers;

/\* Plusieurs valeurs \*/
/\* Le contour est dessiné en premier puis \*/
/\* le remplissage puis les marqueurs \*/
paint-order: stroke fill;
/\* Les marqueurs sont dessinés en premiers \*/
/\* puis le contour, puis le remplissage \*/
paint-order: markers stroke fill;
```


La valeur par défaut, utilisée si aucune valeur n'est fournie, sera `fill`, `stroke`, `markers`.

Lorsqu'une seule valeur est indiquée, c'est celle-ci qui est appliquée par défaut suivi des deux autres selon l'ordre par défaut. Lorsque deux valeurs sont indiquées, elles sont appliquées dans cet ordre puis suivi de la troisième.

**Note :** Pour cette propriété, les marqueurs sont uniquement utilisés dans le cas de formes SVG qui utilisent les propriétés `marker-*` (e.g. `marker-start` (en-US)) ou l'élément `<marker>`. Les marqueurs ne sont pas appliqués sur le texte HTML, dans ce cas, seul l'ordre entre `stroke` et `fill` importe.

### Valeurs

`normal`

Les différents niveaux sont appliqués dans l'ordre normal.

`stroke`

`fill`

`markers`

Indiquent les valeurs dans l'ordre dans lequel on veut qu'elles soient peintes.

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

|  |  |
| --- | --- |
| Valeur initiale | `normal` |
| Applicabilité | éléments textes |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

paint-order =   
  normal                         |  
  [ fill || stroke || markers ]    
  
```

Exemples
--------

### SVG


```html
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <text x="10" y="75">stroke in front</text>
  <text x="10" y="150" class="stroke-behind">stroke behind</text>
</svg>
```

### CSS


```css
text {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  fill: black;
  stroke: red;
  stroke-width: 4px;
}

.stroke-behind {
  paint-order: stroke fill;
}
```

### Résultat

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PaintOrder |

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

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

La pseudo-classe **`:only-child`** représente n'importe quel élément qui est le seul enfant de son élément parent. Elle permet d'obtenir le même effet que `:first-child:last-child` ou `:nth-child(1):nth-last-child(1)`, mais avec une spécificité inférieure.


```css
/\* Cible chaque élément <p> si celui-ci \*/
/\* est le seul élément fils de son parent \*/
p:only-child {
  background-color: lime;
}
```


**Note :** En CSS3, pour cibler l'élément, il fallait que celui-ci ait un élément parent. Cette restriction a été levée avec CSS4.

Syntaxe
-------

Error: could not find syntax for this itemExemples
--------

### Exemple simple

#### CSS


```css
span:only-child {
  color: red;
}
```


#### HTML


```html
<div>
  <span> Ce span est l'unique enfant de son parent </span>
</div>

<div>
  <span> Ce span est l'un des deux enfants de son parent </span>
  <span> Ce span est l'un des deux enfants de son parent </span>
</div>
```


#### Résultat

### Exemple avec une liste

#### CSS


```css
li li {
  list-style-type: disc;
}

li:only-child {
  color: #6699ff;
  font-style: italic;
  list-style-type: square;
}
```


#### HTML


```html
<ol>
  <li>
    Premier
    <ul>
      <li>Ceci est l'unique élément enfant</li>
    </ul>
  </li>
  <li>
    Deuxième
    <ul>
      <li>Cette liste a deux éléments</li>
      <li>Cette liste a deux éléments</li>
    </ul>
  </li>
  <li>
    Troisième
    <ul>
      <li>Cette liste a trois éléments</li>
      <li>Cette liste a trois éléments</li>
      <li>Cette liste a trois éléments</li>
    </ul>
  </li>
</ol>
```


#### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # only-child-pseudo |

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

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

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

* `:only-of-type`
* `:first-child`
* `:last-child`
* `:nth-child`
::-webkit-meter-optimum-value
=============================

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

Le pseudo-élément **`::-webkit-meter-optimum-value`** permet de mettre en forme l'élément `<meter>` lorsque la valeur de son attribut tombe dans l'intervalle haut. La couleur appliquée par défaut est le vert.

Exemples
--------

### CSS


```css
meter::-webkit-meter-bar {
  background: none;
  background-color: whiteSmoke;
  box-shadow: 0 5px 5px -5px #333 inset;
}

meter::-webkit-meter-optimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
}
```

### HTML


```html
<meter min="0" max="10" value="6">Score out of 10</meter>
```

### Résultat

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

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

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

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

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

Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément `<meter>` :

* `::-webkit-meter-inner-element`
* `::-webkit-meter-bar`
* `::-webkit-meter-even-less-good-value`
* `::-webkit-meter-suboptimum-value`
:popover-open
=============

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
La pseudo-classe CSS **`:popover-open`** représente un élément *popover* (c'est-à-dire un élément avec un attribut `popover`) qui est dans l'état ouvert. Vous pouvez l'utiliser pour appliquer un style aux éléments *popovers* uniquement lorsqu'ils sont affichés.

Syntaxe
-------


```css
:popover-open {
  /\* ... \*/
}
```

Exemples
--------

### CSS

Par défaut, les *popovers* apparaissent au milieu de la zone d'affichage (*viewport*). Le style par défaut porté par la feuille de styles de l'agent utilisateur ressemble à ceci :


```css
[popover] {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 0.25em;
  overflow: auto;
  color: CanvasText;
  background-color: Canvas;
}
```


Pour surcharger les styles par défaut et faire apparaître le *popover* ailleurs, vous pouvez remplacer les styles ci-dessus par quelque chose comme :


```css
:popover-open {
  width: 200px;
  height: 100px;
  position: absolute;
  inset: unset;
  bottom: 5px;
  right: 5px;
  margin: 0;
}
```

### HTML


```html
<button popovertarget="monpopo">Afficher/masquer le popover</button>

<div id="monpopo" popover="manual">Coucou ? Caché ?</div>
```

### Résultat

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

| Specification |
| --- |
| HTML Standard # selector-popover-open |

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

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

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

* L'API Popover
column-count
============

La propriété **`column-count`** décrit le nombre de colonnes d'un élément lorsqu'on utilise une disposition en colonnes.

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

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
column-count: auto;

/\* Valeurs numériques \*/
/\* Type <number> \*/
column-count: 3;

/\* Valeurs globales \*/
column-count: inherit;
column-count: initial;
column-count: unset;
```

### Valeurs

`auto`

Un mot-clé qui indique que le nombre de colonnes doit être déterminé à partir d'autres propriétés CSS (par exemple à partir de `column-width`).

`<number>`

Un nombre (type `<integer>`) strictement positif qui décrit le nombre idéal de colonnes avec lequel répartir le contenu de l'élément. Si la valeur de `column-width` n'est pas `auto`, cette propriété indique simplement le nombre maximal de colonnes autorisé.

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

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | Block containers except table wrapper boxes |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | un entier |

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

column-count =   
  auto             |  
  <integer [1,∞]>    
  
```

Exemples
--------

### CSS


```css
.exemple {
  border: 10px solid #000000;
  column-count: 3;
}
```

### HTML


```html
<p class="exemple">
  « Mais alors, » pensa Alice, « ne serai-je donc jamais plus vieille que je ne
  le suis maintenant ? D’un côté cela aura ses avantages, ne jamais être une
  vieille femme. Mais alors avoir toujours des leçons à apprendre ! Oh, je
  n’aimerais pas cela du tout. » « Oh ! Alice, petite folle, » se répondit-elle.
  « Comment pourriez-vous apprendre des leçons ici ? Il y a à peine de la place
  pour vous, et il n’y en a pas du tout pour vos livres de leçons. »
</p>
```

### Résultat

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

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # cc |

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

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

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

* Apprendre - la disposition multi-colonnes
* Les concepts de bases pour la disposition multi-colonnes
CSS Overflow
============


 Le module de spécification ***CSS Overflow*** décrit les fonctionnalités CSS relatives au dépassement et au défilement du contenu pour les médias visuels. En CSS, le dépassement se produit lorsque le contenu d'une boîte s'étend au-delà des bords de la boîte.
Dépassement au dessin (*ink overflow*) et dépassement défilable (*scrollable overflow*)
---------------------------------------------------------------------------------------

Il existe deux types de dépassement en CSS. Le premier, intitulé en anglais ***ink overflow*** (qu'on pourrait traduire par « dépassement pour le dessin ») indique le dépassement des effets visuels qui ne modifient pas la disposition ou le dimensionnement (ex. les ombres des boîtes, les bordures des images, les décorations du texte, les caractères avec un jambage qui dépasse, etc.).

Le second type de dépassement, ***scrollable overflow*** (ou dépassement défilable) se produit lorsque du contenu se situe hors de la boîte et qu'il est nécessaire de fournir un mécanisme pour faire défiler le contenu afin de pouvoir le consulter. Les propriétés de ce module de spécification décrivent ce qui se passe lorsque le contenu dépasse d'une boîte.

Exemple
-------

L'exempel interactif suivant illustre comment la modification de la valeur de la propriété `overflow` change la façon dont est géré le dépassement pour une boîte avec une hauteur fixe.

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

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

### Propriétés CSS

* `overflow`
* `overflow-block`
* `overflow-inline`
* `overflow-x`
* `overflow-y`
* `text-overflow`
* `block-overflow` 
Expérimental
* `line-clamp` 
Expérimental
* `max-lines` 
Expérimental
* `continue` 
Expérimental
### Propriétés spécifiques

* `-webkit-line-clamp` 
Non-standard
Spécifications
--------------

| Specification |
| --- |
| CSS Overflow Module Level 3 # propdef-overflow |

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

* Les propriétés qui permettent de mettre en forme les barres de défilement/ascenceurs : `scrollbar-width` et `scrollbar-color`
scroll-padding-block-end
========================

La propriété **`scroll-padding-block-end`** est une propriété qui permet de définir le remplissage, à la fin de l'axe de bloc, entre l'élément et la zone de défilement.

Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (*scrollport*). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

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

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
scroll-padding-block-end: auto;

/\* Valeurs de longueur \*/
/\* Type <length> \*/
scroll-padding-block-end: 10px;
scroll-padding-block-end: 1em;
scroll-padding-block-end: 10%;

/\* Valeurs globales \*/
scroll-padding-block-end: inherit;
scroll-padding-block-end: initial;
scroll-padding-block-end: unset;
```

### Valeurs

`<length-percentage>`

Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.

`auto`

Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à `0px` mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.

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

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | conteneurs d'ascenseurs |
| Héritée | non |
| Pourcentages | relative to the scroll container's scrollport |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |

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

scroll-padding-block-end =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |

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

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

La propriété **`word-spacing`** définit la règle d'espacement utilisée entre les balises et entre les mots.

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

Syntaxe
-------


```css
/\* Avec un mot-clé \*/
word-spacing: normal;

/\* Valeurs de longueur \*/
/\* type <length> \*/
word-spacing: 3px;
word-spacing: 0.3em;

/\* Valeurs en pourcentages \*/
/\* type <percentage> \*/
word-spacing: 50%;
word-spacing: 200%;

/\* Valeurs globales \*/
word-spacing: inherit;
word-spacing: initial;
word-spacing: unset;
```

### Valeurs

`normal`

L'espace normale entre les mots (ou inter-mot), tel qu'il est défini par la police courante et/ou le navigateur.

`<length>`

Une valeur de longueur définit l'espace qu'on ajoute à l'inter-mot intrinsèque défini par la police. Voir `<length>` pour les différentes valeurs et unités possibles.

`<percentage>`

Une valeur en pourcentages définit la taille de l'inter-mot à utiliser par rapport à la position du prochain caractère (si on utilise `-100%`, l'espace sera nul et si on utilise `100%`, il sera doublé). Voir `<percentage>` pour les différentes valeurs et unités possibles.

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

|  |  |
| --- | --- |
| Valeur initiale | `normal` |
| Applicabilité | tous les éléments. S'applique aussi à `::first-letter` et `::first-line`. |
| Héritée | oui |
| Pourcentages | se rapporte à la largeur du glyphe concerné |
| Valeur calculée | une longueur (type `length`) absolue |
| Type d'animation | une longueur |

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

word-spacing =   
  normal    |  
  <length>    
  
```

Exemple
-------

### HTML


```html
<p id="ligne1">Voici le texte de la ligne 1</p>
<p id="ligne2">Et voilà celui de la ligne 2</p>
```

### CSS


```css
#ligne1 {
  word-spacing: 15px;
}

#ligne2 {
  word-spacing: 5em;
}
```

### Résultat

Accessibilité
-------------

Utiliser des valeurs trop importantes (positives ou négatives) pour `word-spacing` rend le texte illisible. Si l'espacement utilisé est trop grand, la structure visuelle ne permettra plus d'identifier une phrase. Si l'espacement est trop petit, les mots se chevaucheront et on ne pourra plus distinguer le début et la fin de chaque mot.

La bonne valeur à utiliser pour `word-spacing` doit être déterminée au cas par cas, en fonction du type de police utilisé et de la largeur de celle-ci.

* Comprendre les règles WCAG 1.4
* Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0
Spécifications
--------------

| Specification |
| --- |
| CSS Text Module Level 3 # word-spacing-property |

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

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