recursal/MDN huggingface dataset:
:optional
=========

La pseudo-classe **`:optional`** permet de cibler les éléments `<input>` ou `<textarea>` pour lesquels l'attribut `required` n'est pas activé. Cela permet ainsi d'indiquer et de mettre en forme les champs facultatifs d'un formulaire.


```css
/\* Cible les élméents <input> qui sont optionnels \*/
/\* c'est-à-dire qui n'ont pas d'attribut required \*/
input:optional {
  border: 1px dashed black;
}
```


**Note :** Afin de mettre en forme les champs obligatoires, on pourra utiliser la pseudo-classe `:required`.

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 électronique :</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-optional |
| 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
----------

* `:required`
* `:invalid`
* `:valid`
* La validation des données de formulaire
Valeur réelle
=============

La **valeur réelle** d'une propriété CSS est la valeur utilisée par le moteur une fois que toutes les approximations ont été appliquées. Ainsi, un agent utillisateur ne pourra afficher des bordures qu'avec un nombre de pixels entier et pourra ainsi être forcé d'approximer la valeur calculée pour l'épaisseur de la bordure.

Calculer la valeur réelle d'une propriété
-----------------------------------------

La valeur réelle est la valeur finale obtenue lors de la détermination d'une propriété, qui passe par les étapes suivantes :

1. La valeur initiale (indiquée par la spécification).
2. La valeur définie qui résulte de l'héritage et de la cascade.
3. La valeur calculée est calculée selon la spécification.
4. La disposition est calculée, fournissant ainsi la valeur utilisée.
5. *La valeur réelle*
Spécifications
--------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # actual-value |

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

* La valeur initiale
* La valeur définie
* La valeur calculée
* La référence CSS
Valeur spécifiée
================

La **valeur définie** d'une propriété CSS est celle explicitement définie dans la feuille de style ou grâce au style de son élément parent. Elle est déterminée selon une des trois méthodes suivantes :

1. Si la feuille de style du document a une valeur définie pour la propriété, alors c'est cette valeur qui est utilisée. Par exemple, si la propriété `color` est définie à `green` alors la couleur du texte des éléments correspondants sera verte.
2. Si la feuille de style du document n'a pas de valeur définie, alors, si c'est possible, elle sera héritée de l'élément parent. Par exemple, si on a un paragraphe (`<p>`) dans un `<div>` et que le `<div>` est ciblée par une déclaration CSS où `font` vaut `Arial` et qu'il n'y a pas de règle `font` pour `<p>`, ce dernier héritera de la police Arial.
3. Si aucun des cas précédents ne s'applique, c'est la valeur initiale de la propriété CSS qui est appliquée.
Exemples
--------

### HTML


```html
<p>Ma couleur provient explicitement de la feuille de style CSS.</p>

<div>
  Les valeurs définies de mes propriétés utilisent les valeurs initiales (par
  défaut) car aucune n'est fournie dans la feuille de style CSS.
</div>

<div class="fun">
  <p>
    La valeur définie pour ma police n'est pas fournie explicitement dans la
    feuille de style et est donc héritée de mon parent. Toutefois, la bordure
    n'est pas une propriété héritée.
  </p>
</div>
```

### CSS


```css
.fun {
  border: 1px dotted pink;
  font-family: fantasy;
}

p {
  color: green;
}
```

### Résultat

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # specified-value |

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

* La référence CSS
* La notion de valeur initiale
* La notion de valeur calculée
* La notion de valeur utilisée
* La notion de valeur résolue
* La notion de valeur réelle
::-moz-list-bullet
==================

**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 CSS **`::-moz-list-bullet`** est une extension non-standard de Mozilla utilisé pour appliquer un style aux puces des éléments d'une liste non ordonnée (autrement dit, pour un élément `<li>`) contenu dans un élément `<ul>`).

Syntaxe
-------


```css
li::-moz-list-bullet
```

Exemples
--------

### Mettre en forme les puces de liste

#### HTML


```html
<ul>
  <li>Numéro 1</li>
  <li>Numéro 2</li>
  <li>Numéro 3</li>
</ul>
```


#### CSS


```css
::-moz-list-bullet {
  color: red;
  font-size: 1.5em;
}
```


#### Résultat

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

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

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

* `:-moz-list-number`
* `::marker`
Transitions CSS
===============

Les **transitions CSS** permettent de créer des transitions harmonieuses entre les valeurs des propriétés CSS concernées. Elles permettent aussi de définir leur évolution (accélération/décélération), via les fonctions de minutage.

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

### Propriétés

* `transition`
* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function`
Guides
------

Utiliser les transitions CSS

Cet article est un tutoriel expliquant, étape par étape, comment créer une transition CSS. Il décrit chaque propriété CSS utilisée dans le cadre de ces transitions et comment elles interagissent.

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

| Specification |
| --- |
| CSS Transitions  |

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

* Apparentées aux transitions CSS, les animations CSS peuvent déclencher des animations indépendamment du changement des valeurs spécifiées.
border-inline-end-color
=======================

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

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

Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :

* `border-block-start-color`,
* `border-block-end-color`,
* `border-inline-start-color`.
Syntaxe
-------


```css
border-inline-end-color: red;
border-inline-end-color: #fffff;
border-inline-end-color: rgb(200, 0, 0);

border-inline-end-color: unset;
border-inline-end-color: initial;
border-inline-end-color: inherit;
```

### Valeurs

`<'border-color'>`

Voir `border-color`

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

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

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

border-inline-end-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### CSS


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

.exemple {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-end-color: red;
}
```

### HTML


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

### Résultat

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

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

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-color`,
    + `border-right-color`,
    + `border-bottom-color`,
    + `border-left-color`.
* `writing-mode`, `direction`, `text-orientation`
var()
=====

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

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

* Learn more
* See full compatibility
* Report feedback
La fonction **`var()`** peut être utilisée à la place d'une valeur pour n'importe quelle propriété d'un élément. Elle permet d'insérer la valeur d'une propriété personnalisée (custom property).


```css
var(--header-color, blue);
```


La fonction `var()` ne peut pas être utilisée pour les noms de propriété, les sélecteurs et pour tout ce qui n'est pas une valeur de propriété.

Syntaxe
-------

Le premier argument de la fonction est le nom de la propriété qu'on veut substituer. Le deuxième argument, optionnel, est une valeur de recours (*fallback*) qui est utilisée au cas où la valeur de subsitution référencée par la propriété est invalide.
```

<var()> =   
  var( <custom-property-name> , <declaration-value>? )    
  
```


**Note :** La syntaxe de la valeur de recours permet d'utiliser des virgules. Aussi, si on a `var(--toto, red, blue)`, la valeur de recours sera bien `red, blue` (autrement dit, tout ce qui est situé après la première virgule sert de valeur de recours).

### Valeurs

`<custom-property-name>`

Le nom d'une propriété personnalisée, représenté par un identifiant valide qui commence par deux tirets. Les propriétés personnalisées sont uniquement utilisées par les auteurs et les utilisateurs. CSS ne définit pas leur valeur ou leur sémantique.

`<declaration-value>`

Une valeur de subsitution qui peut être utilisée afin que la règle soit valide si la valeur du premier argument ne peut être utilisée ici.

Exemples
--------


```css
:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}
```



```css
/\* On ajoute un paramètre de secours \*/
.component .header {
  color: var(--header-color, blue); // à ce moment header-color n'est pas définie, c'est donc le bleu qui est utilisé
}
.component .text {
  color: var(--text-color, black);
}

.component {
  --text-color: #080;
}
```

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

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1 # using-variables |

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

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

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

* `env(…)` – variables d'environnement en lecture seule, contrôlées par l'agent utilisateur.
* Utiliser les variables CSS
font-synthesis
==============

La propriété **`font-synthesis`** indique au navigateur s'il peut synthétiser la graisse ou la mise en italique des polices utilisées si ces variantes sont absentes.


```css
font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: weight style;

/\* Valeurs globales \*/
font-synthesis: initial;
font-synthesis: inherit;
font-synthesis: unset;
```


La plupart des polices occidentales incluent les variantes de graisse et d'italique mais certaines polices récentes ou utilisées pour le chinois, le japonais, le coréen ou d'autres scripts ont tendance à ne pas inclure ces éléments. La synthèse automatique du gras ou de l'italique par le navigateur peut réduire la lisibilité du texte et il est alors préférable de désactiver l'émulation du gras et de l'italique du navigateur.

Syntaxe
-------

Cette propriété peut prendre l'une des formes suivantes :

* le mot-clé `none`
* le mot-clé `weight` ou le mot-clé `style`
* la valeur `weight style`
### Valeurs

`none`

Ce mot-clé indique que la graisse ou l'italique ne doivent pas être synthétisés.

`weight`

Ce mot-clé indique qu'une fonte grasse peut être synthétisée si besoin.

`style`

Ce mot-clé indique qu'une fonte italique peut être synthétisée si besoin.

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

|  |  |
| --- | --- |
| Valeur initiale | `weight style small-caps position`  |
| Applicabilité | all elements and text. S'applique aussi à `::first-letter` et `::first-line`. |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

font-synthesis =   
  none                                           |  
  [ weight || style || small-caps || position ]    
  
```

Exemples
--------

### HTML


```html
<div class="syn">Ne me synthétisez pas !</div>
```

### CSS


```css
.syn {
  font-synthesis: none;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-synthesis |

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

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

**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-force-broken-image-icon`** est une propriété CSS non-standard. Lorsqu'elle vaut `1`, elle permet de forcer l'affichage d'une icône d'image brisée même si l'image possède un attribut `alt`. Lorsqu'elle vaut `0`, l'image est utilisée de façon normale et n'affichera que l'attribut `alt`.

Syntaxe
-------

### Valeurs

`<integer>`

Une valeur de 1 indique qu'une icône d'image brisée est affichée même si l'image possède un attribut `alt`. `0` indique que seul l'attribut `alt` doit être affiché.

**Note :** Même si la valeur est `1`, l'attribut `alt` sera affiché. Voir ci-après.

### Syntaxe formelle

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

### CSS


```css
img {
  -moz-force-broken-image-icon: 1;
  height: 100px;
  width: 100px;
}
```

### HTML


```html
<img src="/lien/vers/image/cassée.png" alt="Un lien vers une image cassée" />
```

### Résultat

| Screenshot | Live sample |
| --- | --- |
|  |  |

**Note :** Si `-moz-force-broken-image-icon` a la valeur `1` et que ni la hauteur ni largeur de l'image ne sont spécifiées alors l'image ne sera pas affichée et l'attribut `alt` sera masqué.

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

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

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | images |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

Notes
-----

* Cette propriété ne fonctionne que sur les navigateurs basés sur Gecko.
* L'usage de cette propriété n'est pas recommandée. Une propriété *alt* adéquate devrait être utilisé.
Voir aussi
----------

* bug Firefox 58646
:-moz-handler-crashed
=====================

**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-handler-crashed`** permet de cibler un élément qui ne peut pas être affiché car le plugin sensé le dessiner a planté.

Cette pseudo-classe est principalement destinée aux développeurs de thèmes.

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-handler-blocked`
* `:-moz-handler-disabled`
:focus-within
=============

La pseudo-classe **`:focus-within`** s'applique à tous les éléments pour lesquels la pseudo-classe `:focus` s'applique ainsi qu'à tous leurs éléments descendants, y compris ceux du *Shadow DOM*. Autrement dit, cette pseudo-classe s'applique lorsqu'un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu'on clique sur un champ d'un formulaire).


```css
/\* Cible n'importe quel <div> lorsqu'un \*/
/\* de ses descendants a reçu le focus \*/
div:focus-within {
  background: yellow;
}
```


Cette pseudo-classe s'applique également aux descendants de l'élément ciblé ainsi qu'aux descendants dont la racine est la racine d'un arbre du Shadow DOM.

Ce sélecteur est notamment utile lorsqu'on veut, par exemple, mettre en avant l'ensemble d'un formulaire lorsque l'utilisateur passe le focus sur l'un de ses éléments `<input>`.

Syntaxe
-------

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

### CSS


```css
.name-container {
  padding: 4px;
}

.name-container:focus-within {
  background: yellow;
}

input {
  margin: 4px;
}
```

### HTML


```html
<p>
  L'élément div ci-après aura un fond jaune si l'un des deux champs de saisie a
  le focus.
</p>
<div class="name-container">
  <label for="prenom">
    Prénom :
    <input id="prenom" placeholder="Prénom" type="text" />
  </label>
  <label for="nom">
    Nom :
    <input id="nom" placeholder="Nom" type="text" />
  </label>
</div>
```

### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # the-focus-within-pseudo |

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

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

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

* `:focus`
* `:focus-visible` 
Expérimental
::cue
=====

Le pseudo-élément CSS **`::cue`** permet de cibler les indications textuelles WebVTT d'un élément. Ce pseudo-élément peut être utilisé afin de mettre en forme les légendes et autres indications textuelles pour les médias avec des pistes VTT.


```css
::cue {
  color: yellow;
  font-weight: bold;
}
```

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

Seul un sous-ensemble des propriétés CSS peut être utilisé avec le pseudo-élément `::cue` :

* `background` et les propriétés détaillées associées
* `color`
* `font` et les propriétés détaillées associées
* `line-height`
* `opacity`
* `outline` et les propriétés détaillées associées
* `ruby-position`
* `text-combine-upright`
* `text-decoration` et les propriétés détaillées associées
* `text-shadow`
* `visibility`
* `white-space`

Les propriétés sont appliquées à l'ensembles des indications (comme si celles-ci formaient un seul ensemble). Seule `background` (ou les propriétés raccourcies associées) s'appliquent à chaque indication séparément (afin d'éviter de créer des boîtes qui masqueraient de grandes zones sur le média).

Syntaxe
-------

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

La règle CSS suivante permet d'avoir les indications textuelles dans un texte blanc et sur un arrière-plan qui est une boîte noire transparent.


```css
::cue {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element |

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

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

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

* Web Video Tracks Format (WebVTT)
inset-inline-end
================

**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é **`inset-inline-end`** définit la fin du décalage logique en ligne (*inline*) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi `top`, `right`, `bottom` ou `left` selon les valeurs des propriétés `writing-mode`, `direction` et `text-orientation`.

**Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-inline-end`. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
inset-inline-end: 3px;
inset-inline-end: 2.4em;

/\* Valeurs relatives à la largeur \*/
/\* du bloc englobant \*/
/\* Type <percentage> \*/
inset-inline-end: 10%;

/\* Valeurs avec un mot-clé \*/
inset-inline-end: auto;

/\* Valeurs globales \*/
inset-inline-end: inherit;
inset-inline-end: initial;
inset-inline-end: unset;
```


Elle est liée aux propriétés `inset-block-start`, `inset-block-end` et `inset-inline-start` qui permettent de définir les autres décalages de l'élément.

Syntaxe
-------

### Valeurs

La propriété `inset-inline-end` peut prendre les mêmes valeurs que la propriété `left`.

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

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | éléments positionnés |
| Héritée | non |
| Pourcentages | largeur logique du bloc englobant |
| Valeur calculée | identiques aux propriétés qui décalent les boîtes : `top`, `right`, `bottom`, `left` sauf que ces directions sont logiques |
| Type d'animation | une longueur, pourcentage ou calc() ; |

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

inset-inline-end =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### HTML


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

### CSS


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

.exemple {
  writing-mode: vertical-lr;
  position: relative;
  inset-inline-end: 20px;
  background-color: #c8c800;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # position-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 physiques correspondantes :
    + `top`
    + `right`
    + `bottom`
    + `left`
* `writing-mode`
* `direction`
* `text-orientation`
* Les propriétés qui définissent les autres décalages :
    + `inset-block-start`,
    + `inset-block-end`,
    + `inset-inline-start`