recursal/MDN huggingface dataset:
:checked
========

La pseudo-classe **`:checked`** représente n'importe quel **bouton radio** (`<input type="radio">`), **case à cocher** (`<input type="checkbox">`) ou **option** (`<option>` d'un élément `<select>`) qui est coché ou activé (`on`). L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe `:checked` ne s'applique plus à l'élément en question.


```css
/\* cible n'importe quel bouton radio sélectionné, case
/\* à cocher cochée ou option sélectionnée \*/
input:checked {
  margin-left: 25px;
  border: 1px solid blue;
}
```


**Note :** Les navigateurs considèrent souvent les éléments `<option>` comme des éléments remplacéset la possibilité de mise en forme avec `:checked` varie d'un navigateur à l'autre.

Syntaxe
-------

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

### Exemple simple

#### HTML


```html
<div>
  <input type="radio" name="my-input" id="yes" />
  <label for="yes">Oui</label>

  <input type="radio" name="my-input" id="no" />
  <label for="no">Non</label>
</div>

<div>
  <input type="checkbox" name="my-checkbox" id="opt-in" />
  <label for="opt-in">Cochez-moi !</label>
</div>

<select name="my-select" id="fruit">
  <option value="opt1">Pommes</option>
  <option value="opt2">Raisins</option>
  <option value="opt3">Poires</option>
</select>
```


#### CSS


```css
div,
select {
  margin: 8px;
}

/\* Libellés pour les entrées cochées \*/
input:checked + label {
  color: red;
}

/\* Éléments radio cochés \*/
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/\* Éléments cases à cocher cochés \*/
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/\* Éléments options sélectionnés \*/
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}
```


#### Résultat

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

| Specification |
| --- |
| HTML Standard # selector-checked |
| Selectors Level 4 # checked |

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

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

***CSSOM View*** (ou **Vue CSSOM**) est un module de la spécification CSS qui définit comment manipuler la vue d'un document et notamment le comportement lors du défilement (*scrolling*).

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

### Propriétés

* `scroll-behavior`
Guide
-----

Les systèmes de coordonnées

Un guide à propos des différents systèmes de coordonnées permettant de définir une position dans un contexte d'affichage : que ce soit un écran, une zone d'affichage, un appareil mobile ou bien une position sur une feuille de papier lors de l'impression.

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

| Specification |
| --- |
| CSS Overflow Module Level 3 # smooth-scrolling |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
::-webkit-search-cancel-button
==============================

**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-search-cancel-button`** représente le bouton d'annulation présenté au bout d'un champ `<input>` de type `search` et qui permet d'effacer la valeur actuellement saisie dans l'élément `<input>`. Ce bouton et ce pseudo-élément ne sont pas standards et ne sont pris en charge que par WebKit et Blink. Ce bouton est uniquement affiché pour les éléments `<input>` qui ne sont pas vides.

Syntaxe
-------


```css
selecteur::-webkit-search-cancel-button
```

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

* `::-ms-clear`
* `::-webkit-search-results-button`
scroll-margin-inline
====================

La propriété **`scroll-margin-inline`** est une propriété raccourcie logique qui définit les marges de défilement sur l'axe de bloc (i.e. les propriétés logiques `scroll-margin-inline-start` et `scroll-margin-inline-end`).

Les valeurs des marges de défilement correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (*snapport*). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.

Syntaxe
-------


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
scroll-margin-inline: 10px;
scroll-margin-inline: 1em 0.5em;

/\* Valeurs globales \*/
scroll-margin-inline: inherit;
scroll-margin-inline: initial;
scroll-margin-inline: unset;
```

### Valeurs

`<length>`

Un décalage par rapport au côté correspondant du conteneur de défilement.

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

|  |  |
| --- | --- |
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :* `scroll-margin-inline-start`: `0`
* `scroll-margin-inline-end`: `0`
 |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `scroll-margin-inline-start`: comme spécifié
* `scroll-margin-inline-end`: comme spécifié
 |
| Type d'animation | by computed value type |

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

scroll-margin-inline =   
  <length>{1,2}    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-margin-inline |

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

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

La propriété CSS **`outline-width`** est utilisée afin de définir l'épaisseur de la bordure (*outline*) d'un élément. Cette bordure est dessinée autour des éléments et délimite la boîte de bordure. Visuellement, cela permet de faire ressortir l'élément.

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

Syntaxe
-------


```css
/\* Valeurs avec un mot clé \*/
outline-width: thin;
outline-width: medium;
outline-width: thick;

/\* Valeurs de longueur \*/
/\* Type <length> \*/
outline-width: 1px;
outline-width: 0.1em;

/\* Valeurs globales \*/
outline-width: inherit;
```

### Valeurs

`thin`

La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur fine. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à `1px`.

`medium`

La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur moyenne. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à `3px`.

`thick`

La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur de trait prononcée. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à `5px`.

`<length>`

Voir la page sur le type `<length>` pour les différentes valeurs correspondantes.

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

|  |  |
| --- | --- |
| Valeur initiale | `medium` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | une longueur absolue ; si le mot-clé `none` est spécifié, la valeur calculée sera `0` |
| Type d'animation | une longueur |

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

outline-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

Exemples
--------

### HTML


```html
<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="deuxpixels">2px</span>
<span id="unex">1ex</span>
<span id="deuxem">2em</span>
```

### CSS


```css
span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#deuxpixels {
  outline-width: 2px;
}

#unex {
  outline-width: 1ex;
}

#deuxem {
  outline-width: 2em;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-width |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
border-block-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-block-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 de bloc. 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-block-width: 5px 10px;
border-block-width: 5px;
border-block-width: thick;
```


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

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

### Valeur

`<'border-width'>`

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

### Syntaxe formelle
```

border-block-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-block-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-block-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`
outline-offset
==============

La propriété **`outline-offset`** définit l'espace qu'il y a entre la bordure dessinée par `outline` et le bord de la boîte de bordure d'un élément. Cet espace est transparent et la couleur visible en arrière-plan sera déterminée par l'élément parent.

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

Syntaxe
-------


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
outline-offset: 3px;
outline-offset: 0.2em;

/\* Valeurs globales \*/
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;
```

### Valeurs

`<length>`

La largeur de l'espace, voir la page `<length>` pour plus d'informations. Les valeurs négatives sont utilisées et font que la bordure dessinée est dessinée dans l'élément.

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

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié, mais avec les longueurs relatives converties en longueurs absolues |
| Type d'animation | une longueur |

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

outline-offset =   
  <length>    
  
```

Exemples
--------

### CSS


```css
.exemple {
  outline: 1px dashed red;
  /\* On décale la ligne de 10px \*/
  outline-offset: 10px;
  background: yellow;
  margin: 15px;
  border: 1px solid black;
}
```

### HTML


```html
<p class="exemple">La bordure est décalée</p>
```

### Résultat

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-offset |

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

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

**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 **`acos()`** est une fonction trigonométrique qui renvoie le cosinus inverse d'un nombre compris entre `-1` et `1`. Cette fonction effectue un unique calcul qui renvoie le nombre correspondant de radians représentant un angle entre `0deg` et `180deg`.

Syntaxe
-------


```css
/\* Valeurs numériques \*/
/\* Type <number> \*/
transform: rotate(acos(-0.2));
transform: rotate(acos(2 * 0.125));

/\* Autres valeurs \*/
transform: rotate(acos(pi / 5));
transform: rotate(acos(e / 3));
```

### Paramètres

La fonction `acos()` prend un seul paramètre.

`number`

Un nombre (une valeur de type `<number>`) compris entre `-1` et `1`. Si la valeur fournie est `1`, le résultat de la fonction sera `0`.

### Syntaxe formelle
```

<acos()> =   
  acos( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*    
  
<calc-product> =   
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*    
  
<calc-value> =   
  <number>        |  
  <dimension>     |  
  <percentage>    |  
  <calc-keyword>  |  
  ( <calc-sum> )    
  
<calc-keyword> =   
  e          |  
  pi         |  
  infinity   |  
  -infinity  |  
  NaN          
  
```

Exemples
--------

La fonction `acos()` peut être utilisée dans les transformations angulaires, par exemple avec `rotate()`, car elle renvoie une valeur de type `<angle>`.
```

<div class="box"></div>
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
```


```
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
```



```css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}

div.box-1 {
  transform: rotate(acos(-0.2));
}

div.box-2 {
  transform: rotate(acos(2 * 0.125));
}

div.box-3 {
  transform: rotate(acos(pi / 5));
}

div.box-4 {
  transform: rotate(acos(e / 3));
}
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # trig-funcs |

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

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

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

* `sin()` (en-US)
* `cos()` (en-US)
* `tan()` (en-US)
* `asin()`
* `atan()` (en-US)
* `atan2()` (en-US)
border-inline-end-style
=======================

**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-end-style`** définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à `border-top-style`, `border-right-style`, `border-bottom-style` ou à `border-left-style` selon les valeurs de `writing-mode`, `direction` et `text-orientation`.

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

Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :

* `border-block-start-style`
* `border-block-end-style`
* `border-inline-start-style`.
Syntaxe
-------


```css
border-inline-end-style: dashed;
border-inline-end-style: dotted;
border-inline-end-style: groove;
```

### Valeurs

`<'border-style'>`

Le style utilisé pour la ligne de la bordure sur ce côté, voir `border-style`

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

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

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

border-inline-end-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Exemples
--------

### CSS


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

.exemple {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-inline-end-style: dashed;
}
```

### HTML


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

### Résultat

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-style |

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 correspondantes :
    + `border-top-style`,
    + `border-right-style`,
    + `border-bottom-style`,
    + `border-left-style`
* `writing-mode`, `direction`, `text-orientation`
-webkit-overflow-scrolling
==========================

**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é **`-webkit-overflow-scrolling`** permet de contrôler si l'appareil tactile utilise l'inertie pour faire défiler l'élément visé par la déclaration.

Valeurs
-------

`auto`

Le défilement « normal » est utilisé : le défilement s'arrête dès que le doigt ne touche plus l'écran.

`touch`

Le défilement simule une certaine inertie : le contenu continue à défiler légèrement après que le toucher soit fini. La vitesse et la durée du défilement sont proportionnelles à la vitesse de déplacement du doigt sur l'écran. Cela crée un nouveau contexte d'empilement.

### Syntaxe formelle

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

### CSS


```css
div {
  width: 100%;
  overflow: auto;
}

p {
  width: 200%;
  background: #f5f9fa;
  border: 2px solid #eaf2f4;
  padding: 10px;
}

.scroll-touch {
  -webkit-overflow-scrolling: touch; /\* on laisse le défilement se poursuivre \*/
}

.scroll-auto {
  -webkit-overflow-scrolling: auto; /\* on arrête le défilement immédiatement \*/
}
```

### HTML


```html
<div class="scroll-touch">
  <p>Ce paragraphe a un défilement inertiel.</p>
</div>
<div class="scroll-auto">
  <p>Pas celui-ci.</p>
</div>
```

### Résultat

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

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Elle est documentée dans la référence CSS de Safari.

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | boîtes défilantes |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

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

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

* L'article de CSS-Tricks sur cette fonctionnalité, avec une démonstration (en anglais)
* Article de Smashing Magazine (en anglais) : décrire l'effet du rebondissement du scroll et le fonctionnement dans les différents navigateurs
CSS Table
=========

***CSS Table*** (ou module des tableaux CSS) est un module CSS qui définit comment disposer les données de tableaux.

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

### Propriétés

* `border-collapse`
* `border-spacing`
* `caption-side`
* `empty-cells`
* `table-layout`
* `vertical-align`
Spécifications
--------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification  |
border-spacing
==============

La propriété **`border-spacing`** définit la distance qu'il y a entre les bordures de cellules adjacentes d'un tableau (uniquement lorsque `border-collapse` vaut `separate`). Cette propriété est équivalente à l'attribut HTML déprécié `cellspacing` mais une deuxième valeur peut être utilisée afin d'obtenir un espacement vertical différent de l'espacement horizontal.

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

La valeur de `border-spacing` est également utilisée le long du bord extérieur du tableau, où la distance entre la bordure du tableau et les cellules dans la première/dernière colonne ou ligne est la somme du `border-spacing` approprié (horizontal ou vertical) et du `padding` correspondant (top, right, bottom ou left).

**Note :** La propriété `border-spacing` équivaut à l'attribut déprécié `cellspacing` de l'élément `<table>`, sauf qu'il possède une seconde valeur optionnelle qui peut être utilisée pour définir différents espacements horizontaux et verticaux.

Syntaxe
-------


```css
/\* Une valeur de longueur \*/
/\* Type <length> \*/
border-spacing: 2px;

/\* La première valeur indique \*/
/\* l'espacement horizontal et \*/
/\* la seconde le vertical. \*/
border-spacing: 1cm 2em;

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


La propriété `border-spacing` peut être définie avec une ou deux valeurs :

* Avec une valeur de type `<length>`, la valeur est utilisée pour l'espacement vertical ainsi que pour l'espacement horizontal.
* Avec deux valeurs de type `<length>`, la première définit l'espacement horizontal (entre les colonnes) et la seconde définit l'espacement vertical (entre les lignes).
### Valeurs

`length`

Une valeur de longueur (`<length>` qui décrit l'espacement entre les cellules.

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

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | des éléments `table` and `inline-table` |
| Héritée | oui |
| Valeur calculée | deux longueurs absolues |
| Type d'animation | discrète |

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

border-spacing =   
  <length>{1,2}    
  
```

Exemples
--------

### CSS


```css
table {
  border-collapse: separate;
  border: 1px solid #000;
}

td {
  border: 1px solid #000;
  padding: 5px;
}

.unevaleur {
  border-spacing: 5px;
}

.deuxvaleurs {
  border-spacing: 5px 10px;
}
```

### HTML


```html
<table class="unevaleur">
  <tr>
    <td>Ces cellules</td>
    <td>sont séparées par 5px</td>
    <td>tout autour.</td>
  </tr>
</table>
<br />
<table class="deuxvaleurs">
  <tr>
    <td>Ces cellules</td>
    <td>sont séparées par 5px d'écart horizontal</td>
    <td>et 10px d'écart vertical.</td>
  </tr>
</table>
```

### Résultat

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # separated-borders |

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

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

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

* `border-collapse`
* `border-style`
* L'élément HTML `<table>`