recursal/MDN huggingface dataset:
-webkit-mask-attachment
=======================

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

Si la propriété `-webkit-mask-image` est définie, **`-webkit-mask-attachment`** permet de déterminer si la position de l'image est fixe par rapport à la zone d'affichage ou si elle défile avec le bloc qui l'englobe.


```css
/\* Valeurs avec un mot-clé \*/
-webkit-mask-attachment: scroll;
-webkit-mask-attachment: fixed;
-webkit-mask-attachment: local;

/\* Valeurs multiples \*/
-webkit-mask-attachment: scroll, local;
-webkit-mask-attachment: fixed, local, scroll;

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

Syntaxe
-------

### Valeurs

`scroll`

Si le mot-clé `scroll` est utilisé, l'image de masque défilera avec le bloc qui l'englobe.

`fixed`

Si le mot-clé `fixed` est utilisé, l'image de masque ne défilera pas. Sa position sera fixe pour la zone d'affichag (*viewport*).

### Syntaxe formelle

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


```css
body {
  -webkit-mask-image: url("images/mask.png");
  -webkit-mask-attachment: fixed;
}
```

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 | `scroll` |
| Applicabilité | tous les éléments |
| Héritée | non |
| 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
----------

* `-webkit-mask` (en-US)
* `-webkit-mask-clip` (en-US)
* `-webkit-mask-box-image`
* `-webkit-mask-origin` (en-US)
* `-webkit-mask-image`
* `-webkit-mask-composite`
* `-webkit-mask-repeat` (en-US)
column-rule-width
=================

La propriété **`column-rule-width`** permet de définir la largeur du trait tracé entre les colonnes lorsqu'on utilise une disposition en colonnes.

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

Syntaxe
-------


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

/\* Valeurs de longueurs \*/
/\* Type <length> \*/
column-rule-width: 1px;
column-rule-width: 2.5em;

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


La propriété `column-rule-width` est définie grâce à une valeur de type `<br-width>`.

### Valeurs

`<br-width>`

Une valeur de longueur (type `<length>`) ou un mot-clé parmi `thin`, `medium` ou `thick` qui décrit l'épaisseur du trait séparant deux colonnes. C'est le type de valeur qui sera également utilisé pour la propriété `border-width`.

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

|  |  |
| --- | --- |
| Valeur initiale | `medium` |
| Applicabilité | éléments sur plusieurs colonnes |
| Héritée | non |
| Valeur calculée | une longueur absolue ou `0` si `column-rule-style` vaut `none` ou `hidden` |
| Type d'animation | une longueur |

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

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

Exemples
--------

### CSS


```css
.exemple {
  border: 10px solid #000000;
  columns: 3;
  column-rule-width: thick;
  column-rule-color: blue;
  column-rule-style: dashed;
}
```

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

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

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

La propriété **`empty-cells`** définit la façon dont l'agent utilisateur doit afficher les bordures et l'arrière-plan des cellules d'un tableau (`<table>`) qui n'ont aucun contenu visible.

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

Cette propriété est uniquement appliquée lorsque `border-collapse` vaut `separate`.

Syntaxe
-------


```css
/\* Valeurs avec mot-clé \*/
empty-cells: show;
empty-cells: hide;

/\* Valeurs globales \*/
empty-cells: inherit;
empty-cells: initial;
empty-cells: unset;
```


Cette propriété se définit avec l'un des mots-clés suivants.

### Valeurs

`show`

Un mot-clé indiquant que les bordures et l'arrière-plan doivent être dessinés comme pour les cellules normales.

`hide`

Un mot-clé indiquant qu'aucune bordure ou arrière-plan ne doit être dessiné.

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

|  |  |
| --- | --- |
| Valeur initiale | `show` |
| Applicabilité | éléments qui sont des cellules de tableau |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

empty-cells =   
  show  |  
  hide    
  
```

Exemples
--------

### HTML


```html
<table class="table\_1">
  <tr>
    <td>Jean</td>
    <td>Biche</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td></td>
  </tr>
</table>
<table class="table\_2">
  <tr>
    <td>Jean</td>
    <td>Biche</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td></td>
  </tr>
</table>
```

### CSS


```css
.table\_1 {
  empty-cells: show;
}
.table\_2 {
  empty-cells: hide;
}

td,
th {
  border: 1px solid #999;
  padding: 0.5rem;
}
```

### Résultat

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # empty-cells |

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

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

La pseudo-classe **`:first-of-type`** permet de cibler le premier élément d'un type donné parmi ceux d'un même élément parent (et de même niveau).


```css
/\* Cible le premier élément <p> d'un type donné \*/
/\* parmi ses éléments voisins \*/
p:first-of-type {
  color: red;
}
```


**Note :** Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce prérequis a désormais été abandonné (cf. spécification des sélecteurs pour CSS4).

Syntaxe
-------

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

### CSS


```css
div :first-of-type {
  background-color: lime;
}
```

### HTML


```html
<div>
  <span>Voici le premier span !</span>
  <span>Un autre span, pas le premier.</span>
  <span>Quid de cet <em>élément imbriqué </em>?</span>
  <b>Un autre type d'élément.</b>
  <span>Ce type là est déjà apparu.</span>
</div>
```

### Résultat

**Note :** On peut voir ici que c'est le sélecteur universel qui est pris en compte quand aucun sélecteur simple n'est écrit directement avec la pseudo-classe.

**Note :** Les modifications de styles s'appliquent également aux éléments imbriqués, vous pouvez essayer de modifier l'exemple précédent pour cibler le `<div>`.

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

| Specification |
| --- |
| Selectors Level 4 # first-of-type-pseudo |

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

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

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

* `:nth-of-type`,
* `:last-of-type`
* `:first-child`
Sélecteurs de type
==================

Les sélecteurs de type CSS ciblent des éléments en fonction du nom de leur nœud. Ainsi, lorsqu'un sélecteur de type est utilisé seul, il ciblera tous les éléments de ce type (autrement dit tous les nœuds avec ce nom) contenus dans le document.


```css
/\* Cibler tous les éléments <a>. \*/
a {
  color: red;
}
```

Syntaxe
-------
```

élément { style propriétés }
```

Exemples
--------

### CSS


```css
span {
  background-color: skyblue;
}
```

### HTML


```html
<span>Voici un élément <code>span</code> avec du texte.</span>
<p>Et là un élément <code>p</code>.</p>
<span>Enfin, un autre élément <code>span</code>.</span>
```

### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # type-selectors |

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

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

**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-class CSS `:-moz-broken` s'adapte aux éléments qui représentent des liens cassés vers des images.

Ce sélecteur est principalement destiné à être utilisé par les développeurs de thèmes.

Syntaxe
-------


```css
:-moz-broken {
}
```

Exemples
--------

### HTML


```html
<img src="broken.jpg" alt="Cette image ne fonctionne pas. :-(" />
```

### CSS


```css
:-moz-broken {
  background: bisque;
  padding: 8px;
}
```

### Résultat

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

* bug Firefox 11011
* `:-moz-loading`, `:-moz-suppressed`, `:-moz-user-disabled`
CSS Positioned Layout
=====================

***CSS Positioned Layout*** (ou module CSS de disposition positionnée) est un module CSS qui définit comment positionner des éléments sur une page.

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

### Propriétés

* `bottom`
* `clear`
* `float`
* `left`
* `position`
* `right`
* `top`
* `z-index`
Guides
------

Comprendre `z-index` en CSS

Présente la notion de contexte d'empilement et explique comment fonctionne le tri sur z avec plusieurs exemples.

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

| Specification |
| --- |
| CSS Positioned Layout Module Level 3  |
:has
====

Baseline 2023
-------------

Newly availableSince December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
La pseudo-classe **`:has()`** permet de cibler un élément si au moins un des sélecteurs passés en paramètre correspond à l'élément (selon la portée, `:scope`, de l'élément).

Cette pseudo-classe `:has()` prend en paramètre une liste de sélecteurs.

**Note :** Pour des raisons de performances et dans la spécification actuelle, `has()` n'est pas classé comme un sélecteur dynamique et peut uniquement être utilisé de façon statique (par exemple avec des fonctions comme `document.querySelector()`.


```js
/\* Avec cette ligne de JavaScript, on récupère \*/
/\* tous les éléments <a> qui ont un fils direct \*/
/\* qui est un élément <img> \*/
/\* Attention, actuellement cette fonction n'est \*/
/\* pas prise en charge par les navigateurs et \*/
/\* n'est pas conçue pour fonctionner dans les \*/
/\* feuilles de style \*/
var test = document.querySelector("a:has(> img)");
```

Syntaxe
-------
```

:has(liste_selecteurs) { proprietes }
```

Exemples
--------

Dans l'exemple suivant, le sélecteur permet de cibler uniquement les éléments `<a>` qui contiennent un fils direct `<img>` :


```css
a:has(> img) {
}
```


Le sélecteur qui suit correspond aux éléments `<h1>` qui précèdent directement un élément `<p>` :


```css
h1:has(+ p) {
}
```

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

| Specification |
| --- |
| Selectors Level 4 # relational |

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

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

**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 CSS **`fit-content()`** permet d'obtenir une dimension restreinte à un intervalle donnée (en utilisant la formule `min(taille maximale, max(taille minimale, argument))`.


```css
/\* Valeurs de type <length> \*/
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/\* Valeurs de type <percentage> \*/
fit-content(40%)
```


Cette fonction peut être utilisée pour définir la taille d'une piste via les propriétés relatives aux grilles CSS où la taille maximale est définie par `max-content` et où la taille minimale est définie par `auto` et qui est calculée de façon similaire à `auto` (i.e. `minmax(auto, max-content)`), sauf que la taille de la piste est ramenée à *argument* si celui-ci est supérieur à `auto`.

Elle peut également être utilisée pour définir la taille d'une boîte avec `width`, `height`, `min-width`, `min-height`, `max-width` et `max-height` où la taille maximale fait référence à la taille maximale du contenu et où la taille minimale fait référence à la taille minimale du contenu.

Syntaxe
-------

### Valeurs

`<length>`

Une longueur (valeur de type `<length>`) exprimée de façon absolue.

`<percentage>`

Un pourcentage (valeur de type `<percentage>`) relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur). Pour les propriétés qui concernent les grilles, le pourcentage est relative à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en block pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé.

### Syntaxe formelle

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

### CSS


```css
#container {
  display: grid;
  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```

### HTML


```html
<div id="container">
  <div>Item as wide as the content.</div>
  <div>
    Item with more text in it. Because the contents of it are wider than the
    maximum width, it is clamped at 300 pixels.
  </div>
  <div>Flexible item</div>
</div>
```

### Résultat

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

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # valdef-width-fit-content |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
padding-block-end
=================

La propriété CSS **`padding-block-end`** définit la fin logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte.

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

Syntaxe
-------


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
padding-block-end: 10px; /\* Longueur absolue \*/
padding-block-end: 1em; /\* Longueur relative à la taille du texte \*/

/\* Valeurs de proportions \*/
/\* Type <percentage> \*/
padding-block-end: 5%; /\* Relatif à la largeur du bloc englobant \*/

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

### Valeurs

`<length>`

La taille du remplissage exprimée avec une valeur absolue. Cette valeur ne peut être négative.

`<percentage>`

La taille du remplissage exprimée en pourcentage, relatif à la taille du bloc englobant sur l'axe en ligne (physiquement, cela correspond à la largeur pour les sens d'écriture horizontaux (voir `writing-mode`)). Cette valeur ne peut être négative.

Description
-----------

La propriété `padding-block-end` est définie dans la spécification comme prenant les mêmes valeurs que `padding-top`. Toutefois, il s'agit d'une propriété logique qui correspond à la propriété `padding-top`, `padding-right`, `padding-bottom` ou `padding-left` selon les valeurs qui sont utilisées pour `writing-mode`, `direction` et `text-orientation`.

Elle est à rapprocher des propriétés `padding-block-start`, `padding-inline-start` et `padding-inline-end` qui définissent les autres écarts de remplissage logiques d'un élément.

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

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | tous les éléments exceptés `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` et `table-column` |
| Héritée | non |
| Pourcentages | largeur logique du bloc englobant |
| Valeur calculée | comme `length` |
| Type d'animation | une longueur |

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

padding-block-end =   
  <'padding-top'>    
  
```

Exemples
--------

### Définir la fin du remplissage sur l'axe de bloc pour un texte vertical

#### HTML


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


#### CSS


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

.exemple {
  writing-mode: vertical-lr;
  padding-block-end: 20px;
  background-color: #c8c800;
}
```


#### Résultat

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # padding-properties |

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

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

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

* Les propriétés et valeurs logiques en CSS
* Les propriétés physiques correspondantes :
    + `padding-top`
    + `padding-right`
    + `padding-bottom`
    + `padding-left`
* `writing-mode`
* `direction`
* `text-orientation`
:required
=========

La pseudo-classe **`:required`** permet de cibler un élément `<input>` pour lequel l'attribut `required` est activé. Cela permet de mettre en forme les éléments obligatoires pour remplir correctement un formulaire.


```css
/\* Cible les éléments <input> qui ont \*/
/\* l'attribut required \*/
input:required {
  border: 1px dashed red;
}
```


**Note :** La pseudo-classe `:optional` pourra être utilisée pour mettre en forme les champs facultatifs.

Syntaxe
-------

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

### CSS


```css
input {
  border-width: 3px;
}
input:optional {
  border-color: #008000;
}
input:required {
  border-color: #800000;
}
```

### HTML


```html
<form>
  <label for="url-input">Tapez une URL :</label>
  <input type="url" id="url-input" />
  <br />
  <br />
  <label for="email-input">Tapez une adresse courriel :</label>
  <input type="email" id="email-input" required />
</form>
```

### Résultat

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

Si un formulaire (`<form>`) contient des champs (`<input>`) optionnels, les champs obligatoires doivent être indiqués avec l'attribut `input`. Ainsi, les personnes utilisant des outils d'assistance (par exemple un lecteur d'écran) pourront savoir que ces champs ont besoin d'un contenu valide afin de pouvoir envoyer le formulaire.

Les champs obligatoires devraient également être indiqués visuellement et cette indication ne doit pas uniquement être fournie avec une couleur. Généralement, un texte descriptif ou une icône est utilisé.

* Explications des recommendation WCAG 1.4
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Spécifications
--------------

| Specification |
| --- |
| HTML Standard # selector-required |
| Selectors Level 4 # opt-pseudos |

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

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

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

* `:optional`
* `:invalid`
* `:valid`
* La validation des données d'un formulaire
<integer>
=========

Le type de donnée CSS **`<integer>`** permet de représenter des nombres entiers positifs ou négatifs. Aucune unité n'est liée à la valeur. Les entiers sont utilisés dans de nombreuses propriétés CSS comme `z-index`, `line-height`, `counter-increment`, `column-count`, `grid-row`, `repeat()`. Ce type est un sous-type de `<number>`.

Syntaxe
-------

Un entier se compose d'un ou de plusieurs chiffres, de 0 à 9, éventuellement précédés par un seul signe `+` ou `-`. Il n'y a pas d'unité pour ce type de donnée.

Toutes les valeurs de type `<integer>` sont également des valeurs de type `<number>`, bien que l'inverse ne soit pas vrai.

**Note :** Il n'y a pas de bornes à l'ensemble des valeurs de type `<entier>` valides. Opera supporte des valeurs jusqu'à 2^15-1, IE jusqu'à 2^20-1 et d'autres navigateurs des valeurs encore plus hautes. Durant le cycle CSS3 Values, il y a eu de nombreuses discussions pour définir une valeur minimale à supporter : la dernière décision, en date d'avril 2012 pendant la phase LC, était [-2^27-1; 2^27-1] # mais d'autres valeurs comme 2^24-1 et 2^30-1 ont aussi été proposées # #. Le dernier brouillon ne fait plus apparaître de limite.

Interpolation
-------------

Les valeurs du type `<entier>` peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par incrémentation discrète. Le calcul est réalisé comme si les valeurs étaient des nombres réels, en virgule flottante et la valeur discrète est obtenue en utilisant la fonction partie entière. La rapidité de l'interpolation est déterminée par la `fonction de temporisation` associée à l'animation.

Exemples
--------

Ces valeurs sont des entiers valides :


```css
12          Entier positif (sans le signe + à l'avant)
+123        Entier positif (avec le signe + à l'avant)
-456        Entier négatif
0           Zéro
+0          Zéro, avec un signe + à l'avant
-0          Zéro, avec un signe - à l'avant (bien qu'étrange, cette valeur est acceptée)
```


Ces valeurs sont des entiers non valides :


```css
12.0        Ceci est un <number>, pas un <entier>, bien qu'il représente un entier
12.         Le point ne peut pas faire partie d'un <entier>
+---12      Un seul +/- à l'avant est accepté
ten         Les lettres ne sont pas acceptées
_5          Les caractères spéciaux ne sont pas acceptés
\35         Les caractères Unicode échappés ne sont pas acceptés, même s'ils sont un entier (ici : 5)
\4E94       Les chiffres non-arabes ne sont pas acceptés, même échappés (ici : le 5 japonais, 五)
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # integers |

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

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

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

* `<number>`