recursal/MDN huggingface dataset:
:default
========

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

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

* Learn more
* See full compatibility
* Report feedback
La pseudo-classe **`:default`** représente un élément de l'interface utilisateur qui est l'élément par défaut parmi d'autres éléments semblables (par exemple le bouton par défaut d'un groupe de boutons).


```css
/\* Cible l'élément par défaut d'un groupe \*/
:default {
  background-color: lime;
}
```


Ainsi, le bouton actionné par défaut parmi plusieurs boutons pourra être mis en forme en le ciblant avec cette pseudo-classe.

Ce sélecteur peut être utilisé sur des éléments `<button>`, `<input type="checkbox">`, `<input type="radio">` et `<option>` :

* Un élément `<option>` par défaut est le premier qui possède l'attribut `selected` ou le premier qui est activé selon l'ordre du DOM.
* Les éléments `<input type="checkbox">` et `<input type="radio">` seront ciblés s'ils possèdent l'attribut `checked`.
* L'élément `<button>` est ciblé si c'est le bouton d'envoi par défaut d'un formulaire, c'est-à-dire le premier bouton (selon l'ordre du DOM) appartenant au formulaire (cela vaut également pour les éléments `<input>` dont le type permet d'envoyer des formulaires tels que `image` ou `submit`).

**Note :** La spécification WHATWG HTML définit cela dans le paragraphe 4.16.3.

Les éléments de l'interface utilisateur qui permette une sélection multiple peuvent avoir plusieurs éléments par défaut. Dans ce cas, tous les éléments par défaut sont ciblés via la pseudo-classe `:default`.

Syntaxe
-------

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

### CSS


```css
input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}
```

### HTML


```html
<fieldset>
  <legend>Saison préférée</legend>

  <input type="radio" name="season" id="spring" />
  <label for="spring">Printemps</label>

  <input type="radio" name="season" id="summer" checked />
  <label for="summer">Eté</label>

  <input type="radio" name="season" id="fall" />
  <label for="fall">Automne</label>

  <input type="radio" name="season" id="winter" />
  <label for="winter">Hiver</label>
</fieldset>
```

### Résultat

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

| Specification |
| --- |
| HTML Standard # selector-default |
| Selectors Level 4 # default-pseudo |

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

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

**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-mask-position-y`** permet de définir la position verticale initiale d'une image de masque.


```css
/\* Valeurs avec un mot-clé \*/
-webkit-mask-position-y: top;
-webkit-mask-position-y: center;
-webkit-mask-position-y: bottom;

/\* Valeurs proportionnelles \*/
/\* Type <percentage> \*/
-webkit-mask-position-y: 100%;
-webkit-mask-position-y: -50%;

/\* Valeurs de longueur \*/
/\* Type <length> \*/
-webkit-mask-position-y: 50px;
-webkit-mask-position-y: -1cm;

/\* Gestion de plusieurs valeurs \*/
-webkit-mask-position-y:
  50px,
  25%,
  -3em;

/\* Valeurs globales \*/
-webkit-mask-position-y: inherit;
-webkit-mask-position-y: initial;
-webkit-mask-position-y: unset;
```

Syntaxe
-------

### Valeurs

`<length-percentage>`

Une longueur indiquant la position du haut de l'image à partir du bord haut de la boîte de remplissage (*padding*). Les pourcentages sont calculés relativement à la dimension verticale de la boîte de remplissage (`0%` indique que le bord haut de l'image est aligné avec le bord haut de la boîte de remplissage et `100%` indique que le bord bas de l'image est aligné avec le bord bas de la boîte de remplissage).

`<length>`

Une longueur, mesurée à partir du bord haut de la boîte de remplissage (*padding*), qui indique la position verticale de l'image.

**`top`**

Un mot-clé équivalent à `0%`.

**`bottom`**

Un mot-clé équivalent à `100%`.

**`center`**

Un mot-clé équivalent à `50%`.

### Syntaxe formelle

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


```css
.exempleUn {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: bottom;
}

.exempleDeux {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: 25%;
}
```

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

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

|  |  |
| --- | --- |
| Valeur initiale | `0%` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Pourcentages | fait référence à la taille de la boîte elle-même |
| Valeur calculée | pour `length`, la valeur absolue, sinon un pourcentage |
| 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
----------

* `-webkit-mask-position` (en-US)
* `-webkit-mask-position-x`
* `-webkit-mask-origin` (en-US)
* `-webkit-mask-attachment`
:-moz-first-node
================

**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 **`:-moz-first-node`** correspond à un élément si celui-ci est le premier nœud d'un autre élément. Cette pseudo-classe est différente de `:first-child` car elle ne cible pas le premier élément qui possède du texte (hors blancs).

**Note :** Tout blanc qui serait au début d'un élément est ignoré pour la détermination de `:-moz-last-node`.

Syntaxe
-------
```

span:-moz-first-node { propriétés de mise en forme }
```

Exemples
--------

### CSS


```css
span:-moz-first-node {
  background-color: lime;
}
```

### HTML


```html
<p>
  <span>:-moz-first-node</span>
  <span>:-moz-last-node</span>
</p>
<p>
  Bip bop bip bop
  <span>Cet élément n'est pas ciblé car il y a du texte avant.</span>
</p>
```

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

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

* `:-moz-last-node`
* `:last-child`
Élément remplacé
================

En CSS, un **élément remplacé** est un élément dont la représentation est en dehors du champ de CSS. Ce sont des objets externes dont la représentation sera indépendante de CSS.

Autrement dit, ces éléments sont des éléments dont le contenu n'est pas impacté par les styles du document. La position de l'élément remplacé peut être modifiée avec CSS mais le contenu même de l'élément ne pourra pas être modifiée. Certains éléments remplacés comme `<iframe>` peuvent avoir leurs propres feuilles de styles mais ils n'héritent pas de celles du document parent.

Éléments remplacés
------------------

Les éléments remplacés caractéristiques sont :

* `<img>`,
* `<object>`,
* `<video>`,
* `<iframe>`
* les éléments `<input>` de type image

Par ailleurs, certains éléments comme :

* `<option>`
* `<audio>`
* `<canvas>`
* `<object>`
* `<applet>`

sont des éléments remplacés dans certains cas spécifiques. De même un élément `<input>` peut être un élément remplacé dans certains cas (lorsqu'il est de type `"image"` notamment).

Les objets insérés grâce aux propriétés CSS `content` sont des *éléments remplacés anonymes* (on les qualifie d'anonymes car ils n'existent pas dans la structure du HTML).

Utiliser CSS avec les éléments remplacés
----------------------------------------

Les éléments remplacés sont manipulés de façon spécifique par le moteur CSS, notamment pour le calcul des marges extérieures et certaines valeurs `auto`.

On notera que certains éléments remplacés ont des dimensions intrinsèques ou une ligne de base définie, qui sont utilisées par des propriétés CSS comme `vertical-align`.

### Contrôler la position des objets au sein de la boîte de contenu

Certaines propriétés CSS permettent d'indiquer la façon dont l'objet contenu dans l'élément remplacé doit occuper la boîte de l'élément. Ces propriétés sont définies dans les spécifications CSS3 Images et CSS4 Images :

`object-fit`

Indique la façon dont le contenu de l'élément remplacé doit s'inscrire dans la boîte de l'élément et comment il doit être redimensionné si besoin.

`object-position`

Indique l'alignement du contenu de l'élément remplacé dans la boîte de l'élément.

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

* Spécification HTML sur les éléments remplacés
CSS Fragmentation
=================

***CSS Fragmentation*** est un module CSS qui décrit la façon dont le contenu est divisé (fragmenté) entre plusieurs pages, régions ou colonnes.

La fragmentation se produit lorsqu'une boîte en ligne se retrouve sur plusieurs lignes ou lorsqu'un bloc s'étend sur plus d'une colonne au sein d'un conteneur de colonne ou sur un saut de page lorsque le document est imprimé. Chaque morceau de l'élément ainsi divisé est appelé un *fragment*.

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

* `box-decoration-break`
* `break-after`
* `break-before`
* `break-inside`
* `orphans`
* `widows`
Spécifications
--------------

| Specification |
| --- |
| CSS Fragmentation Module Level 3  |
:read-write
===========

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

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

* Learn more
* See full compatibility
* Report feedback
La pseudo-classe **`:read-write`** permet de cibler un élément lorsque celui-ci peut être édité par l'utilisateur (par exemple les champs texte d'un formulaire ou les éléments `<textarea>`).


```css
/\* Cible tout élément éditable \*/
/\* Pris en charge dans Firefox avec un préfixe \*/
input:-moz-read-write {
  background-color: #ccc;
}

/\* Pris en charge sans préfixe pour Blink/WebKit/Edge \*/
input:read-write {
  background-color: #ccc;
}
```


**Note :** Ce sélecteur ne sélectionne pas que les champs de saisie textuels (`<input>` ou `<textarea>`). Il permet de sélectionner n'importe quel élément qui peut être édité par l'utilisateur (par exemple un élément `<p>` avec un attribut `contenteditable`).

Syntaxe
-------

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

### CSS


```css
input {
  min-width: 25em;
}
input:-moz-read-write {
  background: cyan;
}
input:read-write {
  background: cyan;
}

p:-moz-read-write {
  background: lightgray;
}
p:read-write {
  background: lightgray;
}
p[contenteditable="true"] {
  color: blue;
}
```

### HTML


```html
<input type="text" value="Un champ en lecture seule" />
<p contenteditable>Essayez un peu d'éditer ce paragraphe.</p>
<p>Bonne chance pour celui-là !</p>
```

### Résultat

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

| Specification |
| --- |
| HTML Standard # selector-read-write |
| Selectors Level 4 # rw-pseudos |

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

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

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

* `:read-only`
* L'attribut HTML `contenteditable`
::selection
===========

Le pseudo-élément **`::selection`** permet d'appliquer des règles CSS à une portion du document qui a été sélectionnée par l'utilisateur (via la souris ou un autre dispositif de pointage).


```css
::selection {
  background-color: cyan;
}
```

Propriétés autorisées
---------------------

Seul un sous-ensemble des propriétés CSS peut être utilisé pour une règle dont le sélecteur contient `::selection` :

* `color`,
* `background-color`,
* `cursor`,
* `caret-color`,
* `outline` ainsi que les propriétés détaillées associées,
* `text-decoration` ainsi que les propriétés détaillées associées,
* `text-emphasis-color`,
* `text-shadow`.

On notera que `background-image` est ignorée, comme les autres propriétés.

Syntaxe
-------


```css
/\*Syntaxe propre à Firefox (61 et antérieur) \*/
::-moz-selection
Error: could not find syntax for this item
```

Exemples
--------

### CSS


```css
/\* du texte sélectionné sera jaune sur fond rouge \*/
::-moz-selection {
  color: gold;
  background-color: red;
}

::selection {
  color: gold;
  background-color: red;
}

/\* le texte sélectionné dans un paragraphe \*/
/\* sera blanc sur noir \*/
p::-moz-selection {
  color: white;
  background-color: black;
}

p::selection {
  color: white;
  background-color: black;
}
```

### HTML


```html
<div>Un peu de texte pour tester ::selection.</div>
<p>Essayez également de sélectionner du texte dans ce &lt;p&gt;</p>
```

### Résultat

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

Il est recommandé de **ne pas surcharger la police par défaut fournie par le système d'exploitation à des fins esthétiques** et notamment si l'utilisateur a personnalisé ces polices pour ses besoins. Pour les personnes qui connaissent moins les technologies, cette modification peut modifier leur compréhension des fonctionnalités du site.

Si la police est surchargée, il faut s'assurer que le contraste entre la couleur du texte sélectionné et celle de l'arrière-plan est suffisamment élevé afin que les personnes disposant de faibles conditions de vision puissent lire le texte lorsqu'il est sélectionné.

La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : Web Content Accessibility Guidelines (WCAG), un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Le seuil entre ces deux tailles est défini de la façon suivante :

* Si le texte est en gras : 18.66px ou plus grand
* Sinon 24px ou plus grand

Quelques ressources :

* WebAIM : vérificateur de contraste
* Explications des recommendation WCAG 1.4
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Spécifications
--------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-selection |

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

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

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

* `pointer-events` qui contrôle les évènements actifs sur l'élément
orphans
=======

La propriété **`orphans`** définit le nombre *minimum* de lignes qui doivent rester en bas d'une page, d'une région ou d'une colonne dans un conteneur de bloc.


```css
/\* Valeur numérique entière \*/
orphans: 3;

/\* Valeurs globales \*/
orphans: inherit;
orphans: initial;
orphans: unset;
```


**Note :** En typographie, un orphelin (*orphan* en anglais) est la première ligne d'un paragraphe qui apparaît isolée en bas d'une page (le paragraphe poursuivant sur la page suivante).

Syntaxe
-------

### Valeurs

`<integer>`

Seules les valeurs positives sont autorisées. Le nombre de lignes qu'on souhaite avoir au minimum avant une rupture.

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

|  |  |
| --- | --- |
| Valeur initiale | `2` |
| Applicabilité | les éléments conteneurs de blocs |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |

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

orphans =   
  <integer [1,∞]>    
  
```

Exemples
--------

### HTML


```html
<p class="exemple">
  Tout en causant ainsi, Alice était entrée dans une petite chambre bien rangée,
  et, comme elle s’y attendait, sur une petite table dans l’embrasure de la
  fenêtre, elle vit un éventail et deux ou trois paires de gants de chevreau
  tout petits. Elle en prit une paire, ainsi que l’éventail, et allait quitter
  la chambre lorsqu’ elle aperçut, près du miroir, une petite bouteille. Cette
  fois il n’y avait pas l’inscription BUVEZ-MOI — ce qui n’empêcha pas Alice de
  la déboucher et de la porter à ses lèvres. « Il m’arrive toujours quelque
  chose d’intéressant, » se dit-elle, « lorsque je mange ou que je bois. Je vais
  voir un peu l’effet de cette bouteille. J’espère bien qu’elle me fera
  regrandir, car je suis vraiment fatiguée de n’être qu’une petite nabote !
  »C’est ce qui arriva en effet, et bien plus tôt qu’elle ne s’y attendait. Elle
  n’avait pas bu la moitié de la bouteille, que sa tête touchait au plafond et
  qu’elle fut forcée de se baisser pour ne pas se casser le cou. Elle remit bien
  vite la bouteille sur la table en se disant : « En voilà assez ; j’espère ne
  pas grandir davantage. Je ne puis déjà plus passer par la porte. Oh ! je
  voudrais bien n’avoir pas tant bu ! »
</p>
```

### CSS


```css
.exemple {
  orphans: 4;
  columns: 3;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # widows-orphans |

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

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

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

* `widows`
* Média paginés
CSS Transforms
==============

Le module ***CSS Transforms*** (ou module des transformations CSS) est un module de la spécification CSS qui définit comment les éléments mis en forme avec CSS peuvent être transformés dans un espace à deux ou à trois dimensions.

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

### Propriétés

* `backface-visibility`
* `perspective`
* `perspective-origin`
* `rotate`
* `scale`
* `transform`
* `transform-box`
* `transform-origin`
* `transform-style`
* `translate`
### Types de donnée

`<transform-function>`Guides
------

Utiliser les transformations CSS

Un tutoriel pas-à-pas pour manipuler des transformations sur des éléments mis en forme avec CSS.

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

| Specification |
| --- |
| CSS Transforms Module Level 1  |
| CSS Transforms Module Level 2  |
-webkit-text-stroke
===================

**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-text-stroke`** permet de définir l'épaisseur et la couleur du contour utilisé pour les lettres d'un texte. Cette propriété est une propriété raccourcie qui permet de définir les propriétés `-webkit-text-stroke-width` et `-webkit-text-stroke-color`.


```css
/\* Valeurs de largeur et de couleur \*/
-webkit-text-stroke: 4px navy;

/\* Valeurs globales \*/
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: unset;
```

Syntaxe
-------

### Valeurs

`<length>`

L'épaisseur du contour (cf. `<length>`).

`<color>`

La couleur du contour (cf. `<color>`).

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

|  |  |
| --- | --- |
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :* `-webkit-text-stroke-width`: `0`
* `-webkit-text-stroke-color`: `currentcolor`
 |
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `-webkit-text-stroke-width`: une longueur (type `length`) absolue
* `-webkit-text-stroke-color`: couleur calculée
 |
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :* `-webkit-text-stroke-width`: discrète
* `-webkit-text-stroke-color`: une couleur
 |

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

-webkit-text-stroke =   
  <line-width>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

Exemples
--------

### CSS


```css
#exemple {
  font-size: 3em;
  margin: 0;
  -webkit-text-stroke: 2px red;
}
```

### HTML


```html
<p id="exemple">Le contour de ce texte est rouge.</p>
```

### Résultat

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

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke |

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

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

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

* Le billet de *Surfin' Safari* qui annonce cette fonctionnalité (en anglais)
* L'article de CSS-Tricks décrivant cette fonctionnalité (en anglais)
* `-webkit-text-stroke-width`
* `-webkit-text-stroke-color`
* `-webkit-text-fill-color`
row-gap (grid-row-gap)
======================

La propriété **`row-gap`** définit la taille des espaces (gouttières) entre les lignes d'un élément.

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

Syntaxe
-------


```css
/\* Valeurs de longueur \*/
/\* Type <largeur> \*/
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/\* Valeurs proportionnelles \*/
/\* Type <pourcentage> \*/
row-gap: 10%;

/\* Valeurs globales \*/
row-gap: inherit;
row-gap: initial;
row-gap: revert;
row-gap: unset;
```

### Valeurs

`<length-percentage>`

La largeur de la « gouttière » placée entre les lignes de la grille. Les valeurs exprimées en pourcentages (`<percentage>`) sont relatives aux dimensions de l'élément.

Formal definition
-----------------

|  |  |
| --- | --- |
| Valeur initiale | `normal` |
| Applicabilité | multi-column elements, flex containers, grid containers |
| Héritée | non |
| Pourcentages | fait référence à la dimension correspondante de la zone de contenu |
| Valeur calculée | as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements |
| Type d'animation | une longueur, pourcentage ou calc() ; |

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

row-gap =   
  normal                     |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### Disposition flexible

#### HTML


```html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS


```css
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  row-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}
```


#### Résultat

### Disposition en grille

#### HTML


```html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS


```css
#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(3, 1fr);
  row-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```


#### Résultat

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # column-row-gap |

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

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

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

* Les autres propriétés relatives aux gouttières : `column-gap`, `gap`
* Guide sur les grilles : *Les concepts de base des grilles CSS : les gouttières*