recursal/MDN huggingface dataset:
flex-shrink
===========

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

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

* Learn more
* See full compatibility
* Report feedback
La propriété **`flex-shrink`** définit le facteur de rétrécissement d'un élément flexible. Si la taille de l'ensemble des éléments flexibles est supérieure à la taille du conteneur, les éléments seront comprimés selon leur facteur `flex-shrink`.

`flex-shrink` est généralement utilisé avec les propriétés `flex-grow` et `flex-basis`. Elle est souvent définie grâce à la propriété raccourcie `flex`.

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

Pour plus d'informations, voir la page Utiliser les boîtes flexibles (*flexbox*) CSS.

Syntaxe
-------


```css
/\* Valeurs numériques \*/
/\* Type <number> \*/
flex-shrink: 2;
flex-shrink: 0.6;

/\* Valeurs globales \*/
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;
```


La propriété `flex-shrink` est définie grâce à une valeur de type `<number>`.

### Valeurs

`<number>`

Un nombre (type `<number>`) qui correspond au facteur de rétrécissement utilisé. Plus la valeur est élevée, plus l'élément sera compressé si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est `1`.

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

|  |  |
| --- | --- |
| Valeur initiale | `1` |
| Applicabilité | éléments flexibles, y compris les pseudo-éléments intégrés dans le flux |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | un nombre |

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

flex-shrink =   
  <number [0,∞]>    
  
```

Exemples
--------

### HTML


```html
<p>A,B,C ont flex-shrink: 1. D et E ont flex-shrink: 2.</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>
```

### CSS


```css
#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0, 0, 0.2);
}

.box {
  flex-shrink: 1;
}

.box1 {
  flex-shrink: 2;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-shrink-property |

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

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

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

* Guide sur les boîtes flexibles : *Les concepts de bases*
* Guide sur les boîtes flexibles : *Contrôler les proportions des boîtes flexibles le long de l'axe principal*
counter-set
===========

La propriété CSS **`counter-set`** définit un compteur CSS avec une certaine valeur. Elle permet de manipuler les valeurs des compteurs existants et ne créera qu'un nouveau compteur que lorsqu'il n'existe pas de compteur avec le nom indiqué sur l'élément.

**Note :** La valeur d'un compteur peut être incrémentée ou décrémentée grâce à la propriété CSS `counter-increment`.

Syntaxe
-------


```css
/\* Définir "mon-compteur" avec la valeur 0 \*/
counter-set: mon-compteur;

/\* Définir "mon-compteur" avec la valeur -1 \*/
counter-set: mon-compteur -1;

/\* Définir "compteur1" avec 1 et "compteur2" à 4 \*/
counter-set: compteur1 1 compteur2 4;

/\* Réinitialiser les compteurs qui auraient été \*/
/\* définis avec des règles moins spécifiques \*/
counter-set: none;

/\* Valeurs globales \*/
counter-set: inherit;
counter-set: initial;
counter-set: unset;
```


La propriété `counter-set` est définit avec l'une de ces deux valeurs :

* Une valeur de type `<custom-ident>` qui fournit le nom du compteur, éventuellement suivie d'un entier (`<integer>`). Il est possible de définir plusieurs compteurs à réinitialiser en séparant les valeurs grâce à un espace.
* Le mot-clé `none`.
### Valeurs

`<custom-ident>`

Le nom du compteur à définir ou à modifier.

`<integer>`

La valeur à utiliser pour le compteur à chaque occurrence de l'élément. Par cette valeur sera `0`. S'il n'existe pas déjà de compteur avec le nom courant pour l'élément, l'élément créera un nouveau compteur avec ce nom et utilisera alors cette valeur.

`none`

Aucune définition ou modification de compteur ne doit être appliquée. Cette valeur peut être utilisée afin de surcharger une déclaration `counter-set` d'une règle moins spécifique.

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

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |

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

counter-set =   
  [ <counter-name> <integer>? ]+  |  
  none                              
  
```

Exemples
--------


```css
h1 {
  counter-set: chapitre section 1 page;
  /\* Les compteurs "chapitre" et "page" sont
 définis à 0, et le compteur "section"
 est défini à 1. \*/
}
```

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # propdef-counter-set |

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

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

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

* Utiliser les compteurs CSS
* `counter-increment`
* `counter-reset`
* `@counter-style`
* Les fonctions `counter()` et `counters()`
* `content`
:-moz-user-disabled
===================

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

La pseudo-classe CSS `:-moz-user-disabled` correspond aux éléments représentant des images qui n'ont pas été chargées car elles ont été entièrement désactivées dans les préférences de l'utilisateur.

Ce sélecteur est destiné principalement à une utilisation par les développeurs de thèmes.

Syntaxe
-------


```css
:-moz-user-disabled {
}
```

Exemples
--------


```css
:-moz-user-disabled {
  background-color: lightgray;
  padding: 8px;
}
```

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

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

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

* `:-moz-broken`
* `:-moz-loading`
* `:-moz-suppressed`
-moz-float-edge
===============

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

La propriété **`-moz-float-edge`** définit si les propriétés de hauteur et de larguer d'un élément incluent la marge, la bordure et/ou le remplissage (*padding*).


```css
/\* Valeurs avec un mot-clé \*/
-moz-float-edge: border-box;
-moz-float-edge: content-box;
-moz-float-edge: margin-box;
-moz-float-edge: padding-box;

/\* Valeurs globales \*/
-moz-float-edge: inherit;
-moz-float-edge: initial;
-moz-float-edge: unset;
```

Syntaxe
-------

### Valeurs

`border-box`

Les propriétés de hauteur et de largeur incluent le contenu, le remplissage et la bordure mais pas la marge.

`content-box`

Les propriétés de hauteur et de largeur incluent le contenu, mais pas le remplissage, la bordure et la marge.

`margin-box`

Les propriétés de hauteur et de largeur incluent le contenu, le remplissage, la bordure et la marge.

`padding-box`

Les propriétés de hauteur et de largeur incluent le contenu et le remplissage mais pas la bordure ni la marge.

### Syntaxe formelle
```

-moz-float-edge =
  border-box | content-box | margin-box | padding-box
```

Exemples
--------

### CSS


```css
.box {
  display: block;
  height: 5px;
  margin: 0.5em auto 0.5em auto;
  color: gray;
  -moz-float-edge: margin-box;
  box-sizing: border-box;
}
```

### HTML


```html
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
```

### Résultat

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

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

|  |  |
| --- | --- |
| Valeur initiale | `content-box` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

* bug Firefox 432891
font-smooth
===========

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

La propriété **`font-smooth`** permet de contrôler l'application d'algorithmes anti-crénelage (*anti-aliasing*) sur le rendu des fontes de caractères.

Syntaxe
-------


```css
/\* Valeurs avec mot-clé \*/
font-smooth: auto;
font-smooth: never;
font-smooth: always;

/\* Valeurs de type <length> \*/
font-smooth: 2em;
```


**Note :** Webkit implémente **`-webkit-font-smoothing`** avec d'autres valeurs, **là aussi c'est une propriété non-standard qui ne devrait pas être utilisée**.

* `auto` : c'est le navigateur qui décide la meilleure approche
* `none` - l'anti-crénelage est désactivé.
* `antialiased` - lisse les caractères au niveau du pixel (et non par sous-échantillonnage). Pour des textes clairs sur fonds sombres, cette méthode fait paraître le texte plus clair.
* `subpixel-antialiased` - sur la plupart des affichages non-Retina, cela donnera le texte le plus lisse.

**Note :** Firefox implémente **`-moz-osx-font-smoothing`** avec d'autres valeurs, **là aussi c'est une propriété non-standard qui ne devrait pas être utilisée**.

* `auto` - le choix est laissé au navigateur. Cela correspond généralement à `grayscale`.
* `grayscale` - On applique un anti-crénelage par niveau de gris (et non par sous-échantillonnage). Pour des textes clairs sur fonds sombres, cette méthode fait paraître le texte plus clair.

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

Bien que mentionnée dans les premiers brouillons pour CSS3 Fonts, `font-smooth` a été retirée de cette spécification et ne fait plus partie du standard.

* Valeur initiale : `auto`
* S'applique à tous les éléments et au contenu généré
* Héritée : oui
* Valeurs relatives : par rapport à la taille de police utilisée sur l'élément parent
* Type de média : Visuel
* Valeur calculée : comme la valeur définie
Compatibilité des navigateurs
-----------------------------

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

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

* Il faut arrêter de vouloir « réparer » le lissage des fontes – UsabilityPost (en anglais)
border-inline-width
===================

**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é **`border-inline-width`** définit la largeur de la bordure sur les côtés d'un élément sur les côtés de l'axe en ligne. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à `border-top-width` et `border-bottom-width` ou à `border-left-width` et `border-right-width` selon les valeurs des propriétés `writing-mode`, `direction` et `text-orientation`.


```css
/\* Valeurs de type <'border-width'> \*/
border-inline-width: 5px 10px;
border-inline-width: 5px;
border-inline-width: thick;
```


The border width in the other dimension can be set with `border-block-width`, which sets `border-block-start-width`, and `border-block-end-width`.

Syntaxe
-------

### Valeur

`<'border-width'>`

La largeur de la bordure. Voir `border-width`.

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

|  |  |
| --- | --- |
| Valeur initiale | `medium` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Pourcentages | largeur logique du bloc englobant |
| Valeur calculée | une longueur absolue ; `0` si le style de la bordure vaut `none` ou `hidden` |
| Type d'animation | by computed value type |

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

border-inline-width =   
  <'border-top-width'>{1,2}    
  
```

Exemples
--------

### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.texteExemple {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-inline-width: 5px 10px;
}
```

### HTML


```html
<div>
  <p class="texteExemple">Texte d'exemple</p>
</div>
```

### Résultat

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-inline-width |

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

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

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

* Les propriétés physiques qui peuvent correspondre à cette propriété logique `border-top-width`, `border-right-width`, `border-bottom-width`, and `border-left-width`
* `writing-mode`, `direction`, `text-orientation`
column-fill
===========

La propriété **`column-fill`** permet de contrôler la façon dont le contenu est réparti entre les colonnes. Le contenu peut être équilibré (afin de prendre la même hauteur sur toutes les colonnes) ou être réparti de façon automatique (avec `auto`) et remplir l'espace nécessaire.

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

Syntaxe
-------


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

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


Cette propriété est définie grâce à l'un des mots-clés définis ci-après.

### Valeurs

`auto`

Un mot-clé indiquant que les colonnes sont remplies dans l'ordre.

`balance`

Un mot-clé indiquant que le contenu doit être équitablement réparti entre les colonnes. Pour les médias paginés, seule la dernière page est équilibrée.

`balance-all`

Un mot-clé indiquant que le contenu doit être équitablement réparti entre les colonnes. Pour les média paginés, toutes les pages sont équilibrées.

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

|  |  |
| --- | --- |
| Valeur initiale | `balance` |
| Applicabilité | éléments sur plusieurs colonnes |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

column-fill =   
  auto         |  
  balance      |  
  balance-all    
  
```

Exemples
--------

### CSS


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

### 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 # cf |

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

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

La propriété **`column-rule-color`** permet de définir la couleur de la ligne tracée entre les colonnes lorsqu'on utilise une disposition en colonnes.

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

Syntaxe
-------


```css
/\* Valeurs de couleur \*/
/\* Type <color> \*/
column-rule-color: red;
column-rule-color: rgb(192, 56, 78);
column-rule-color: transparent;
column-rule-color: hsla(0, 100%, 50%, 0.6);

/\* Valeurs globales \*/
column-rule-color: inherit;
column-rule-color: initial;
column-rule-color: revert;
column-rule-color: unset;
```


La propriété `column-rule-color` se définit grâce à une valeur de type `<color>`.

### Valeurs

`<color>`

Une valeur de couleur qui indique la couleur du trait entre les colonnes.

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

|  |  |
| --- | --- |
| Valeur initiale | `currentcolor` |
| Applicabilité | éléments sur plusieurs colonnes |
| Héritée | non |
| Valeur calculée | couleur calculée |
| Type d'animation | une couleur |

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

column-rule-color =   
  <color>    
  
```

Exemples
--------

### HTML


```html
<p>
  « 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>
```

### CSS


```css
p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-color: blue;
}
```

### Résultat

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

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

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

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

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

* Le type de donnée `<color>`
* Les autres propriétés relatives aux couleurs : `color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow` et `caret-color`
* Appliquer des couleurs sur des éléments HTML grâce à CSS
CSS Miscellaneous
=================

Cette page regroupe des propriétés CSS qui sont hautement expérimentales ou qui ne rentrent dans aucune autre catégorie.

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

### Propriétés

* `all`
* `text-rendering`
Spécifications
--------------

*Ces propriétés n'ont pour la plupart pas de lien entre elles, consultez leur pages respectives pour connaître leurs spécifications.*

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

*Ces propriétés n'ont pour la plupart pas de lien entre elles, consultez leurs pages respectives pour connaître leur disponibilité dans les navigateurs.*
animation-delay
===============

La propriété **`animation-delay`** définit la durée d'attente avant de démarrer une animation une fois qu'elle a été appliquée à un élément.

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

La valeur par défaut, `0s`, indique que l'animation doit démarrer dès qu'elle est appliquée. Dans les autres cas, la valeur indique le décalage à observer entre le début de l'animation et le moment où celle-ci a été appliquée sur l'élément.

Si des valeurs négatives sont utilisées, l'animation débutera immédiatement en étant déjà « avancée ». Par exemple, si on utilise la valeur `-1s` comme durée, l'animation commencera immédiatement avec l'état qu'elle aurait « normalement » eue au bout d'une seconde.

Généralement, on passera par la propriété raccourcie `animation` afin de définir l'ensemble des propriétés liées aux animations en une seule fois.

Syntaxe
-------


```css
animation-delay: 3s;
animation-delay: 2s, 4ms;
```

### Valeurs

`<time>`

La durée avec laquelle décaler le début de l'animation à partir du moment où celle-ci a été appliquée à l'élément. La valeur peut être indiquée en secondes (`s` comme suffixe) ou en millisecondes (`ms` comme suffixe). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.


**Note :** Lorsqu'on utilise plusieurs valeurs (séparées par des virgules) pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par `animation-name`. Pour plus d'informations, voir : paramétrer les valeurs des propriétés pour plusieurs animations.

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

|  |  |
| --- | --- |
| Valeur initiale | `0s` |
| Applicabilité | tous les éléments, ainsi que les pseudo-elements `::before` et `::after` |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | Not animatable |

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

animation-delay =   
  <time>#    
  
```

Exemples
--------

### CSS


```css
p {
  animation-duration: 3s;
  animation-delay: 15s;
  animation-name: glissement;
  animation-iteration-count: infinite;
}
@keyframes glissement {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
```

### HTML


```html
<p>
  La Chenille et Alice se considérèrent un instant en silence. Enfin la Chenille
  sortit le houka de sa bouche, et lui adressa la parole d’une voix endormie et
  traînante.
</p>
```

### Résultat

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

| Specification |
| --- |
| CSS Animations Level 1 # animation-delay |

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

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

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

* Manipuler les animations CSS
* `AnimationEvent`
::-moz-range-track
==================

**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 **`::-moz-range-track`** est un pseudo-élément spécifique à Mozilla et représente la piste d'un élément `<input>` de type `range`.

**Note :** `::-moz-range-track` n'aura aucun effet s'il est utilisé sur autre chose qu'un élément `<input type="range">`.

Syntaxe
-------

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

### HTML


```html
<input type="range" min="0" max="100" step="5" value="50" />
```

### CSS


```css
input[type="range"]::-moz-range-track {
  background-color: green;
}
```

### Résultat

Une barre de progression mise en forme de cette façon devrait ressembler à :

![Un intervalle avec une piste verte.](/fr/docs/Web/CSS/::-moz-range-track/screen_shot_2015-12-04_at_10.14.34.png)

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

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla 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 de Gecko qui permettent de mettre en forme les autres parties des éléments `<input>` de type `range` :
    + `::-moz-range-thumb` qui représente le curseur qui se déplace le long de la piste.
    + `::-moz-range-progress` qui représente la partie inférieure de la piste (ce qui est déjà « couvert »).
* Les pseudo-éléments utilisés par les autres navigateurs :
    + `::-webkit-slider-runnable-track` pour WebKit/Blink (Safari, Chrome et Opera).
    + `::-ms-track` pour Internet Explorer/Edge.
* CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)