recursal/MDN huggingface dataset:
:read-only
==========

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-only`** permet de cibler un élément que l'utilisateur ne peut pas modifier (l'élément est en lecture seule).


```css
/\* Cible n'importe quel élément <input> \*/
/\* en lecture seule \*/

/\* Firefox utilise un préfixe \*/
input:-moz-read-only {
  background-color: #ccc;
}

/\* Blink/WebKit/Edge n'ont pas de préfixe \*/
input:read-only {
  background-color: #ccc;
}
```


**Note :** Ce sélecteur ne permet pas de cibler que les éléments `<input>` ou `<textarea>` avec `readonly`. Il permet de sélectionner n'importe quel élément qui ne peut pas être édité par l'utilisateur.

Syntaxe
-------

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

### CSS


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

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

### HTML


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

### Résultat

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

| Specification |
| --- |
| HTML Standard # selector-read-only |
| 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-write`
* L'attribut HTML `contenteditable`
border-block-start-style
========================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété **`border-block-start-style`** définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à `border-top-style`, `border-right-style`, `border-bottom-style` ou à `border-left-style` selon les valeurs de `writing-mode`, `direction` et `text-orientation`.

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

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

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


```css
/\* border-block-start-style: style \*/
border-block-start-style: dashed;
border-block-start-style: dotted;
border-block-start-style: groove;
```

### Valeurs

`<'border-style'>`

Le style utilisé pour la ligne de la bordure, voir `border-style`.

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

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

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

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

Exemples
--------

### CSS


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

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

### HTML


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

### Résultat

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

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

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

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

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

* Les propriétés physiques correspondantes :
    + `border-top-style`,
    + `border-right-style`,
    + `border-bottom-style`,
    + `border-left-style`
* `writing-mode`, `direction`, `text-orientation`
:only-of-type
=============

La pseudo-classe CSS **`:only-of-type`** permet de cibler un élément qui ne possède aucun nœud frère du même type.

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

**Note :** Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de niveau 4).

Syntaxe
-------


```css
:only-of-type {
  /\* ... \*/
}
```

Exemples
--------

### Mettre en forme des éléments sans voisins du même type

#### HTML


```html
<main>
  <div>Je suis l'élément `div` n°1.</div>
  <p>Je suis le seul élément `p` parmi mes voisins.</p>
  <div>Je suis l'élément `div` n°2.</div>
  <div>
    Je suis l'élément `div` n°3.
    <i>Je suis le seul enfant `i`.</i>
    <em>Je suis l'élément `em` n°1.</em>
    <em>Je suis l'élément `em` n°2.</em>
  </div>
</main>
```


#### CSS


```css
main :only-of-type {
  color: red;
}
```


#### Résultat

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

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

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

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

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

* `:only-child`
* `:first-of-type`
* `:last-of-type`
* `:nth-of-type`
Propriétés personnalisées (--\*)
================================

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

Les noms des propriétés qui sont préfixés par deux tirets : `--` (par exemple : `--nom-exemple`) représentent des propriétés personnalisées (*custom properties*) qui peuvent contenir une valeur qui pourra être réutilisée dans le document grâce à la fonction `var()`.

La portée des propriétés personnalisées est celle des éléments sur lesquels elles sont déclarées. Ces personnalisées contribuent à la cascade : la valeur utilisée d'une propriété personnalisée sera déterminée par l'algorithme de la cascade.

|  |  |
| --- | --- |
| Valeur initiale | voir le texte |
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | tel que spécifié avec les variables échangées |
| Type d'animation | discrète |

Syntaxe
-------


```css
--unmotcle: left;
--unecouleur: #0000ff;
--unevaleurcomplexe: 3px 6px rgb(20, 32, 54);
```


`<declaration-value>`

Cette valeur correspond à une séquence de un ou plusieurs fragments tant que la séquence ne contient pas de fragments interdits. Elle représente l'intégralité de ce qu'une déclaration valide peut avoir comme valeur.

### Syntaxe formelle

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

### HTML


```html
<p id="premierParagraphe">
  Ce paragraphe devrait être sur fond bleu avec un texte jaune.
</p>
<p id="secondParagraphe">
  Ce paragraphe devrait être sur fond jaune avec un texte bleu.
</p>
```

### CSS


```css
:root {
  --premiere-couleur: #488cff;
  --seconde-couleur: #ffff8c;
}

#premierParagraphe {
  background-color: var(--premiere-couleur);
  color: var(--seconde-couleur);
}

#secondParagraphe {
  background-color: var(--seconde-couleur);
  color: var(--premiere-couleur);
}
```

### Résultat

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

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

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

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

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

* Utiliser les variables CSS
Pseudo-éléments
===============

Un **pseudo-élément** est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l'élément ciblé par la règle. Ainsi, le pseudo-élément `::first-line` permettra de ne cibler que la première ligne d'un élément visé par le sélecteur.


```css
/\* La première ligne de chaque élément <p>. \*/
p::first-line {
  color: blue;
  text-transform: uppercase;
}
```


**Note :** À la différence des pseudo-éléments, les pseudo-classes peuvent être utilisées afin de mettre en forme un élément en fonction de son état.

Syntaxe
-------
```

sélecteur::pseudo-élément {
  propriété: valeur;
}
```


On ne peut utiliser qu'un seul pseudo-élément dans un sélecteur. Le pseudo-élément doit apparaître après les sélecteurs simple de la déclaration

Depuis CSS3, on utilise deux fois le caractère deux-points (:) pour préfixer les pseudo-éléments (afin de pouvoir les différencier des pseudo-classes). Toutefois, la plupart des navigateurs prennent en charge les pseudo-éléments pour lesquels le préfixe n'est formé que d'un seul « : ».

Liste des pseudo-éléments
-------------------------

* `::after (:after)`
* `::backdrop` 
Expérimental
* `::before (:before)`
* `::cue (:cue)`
* `::first-letter (:first-letter)`
* `::first-line (:first-line)`
* `::grammar-error` 
Expérimental
* `::marker` 
Expérimental
* `::part` 
Expérimental
* `::placeholder` 
Expérimental
* `::selection`
* `::slotted()`
* `::spelling-error` 
Expérimental
Exemples
--------

### CSS


```css
p::first-line {
  color: blue;
}
```

### HTML


```html
<p>
  C’était le Lapin Blanc qui revenait en trottinant, et qui cherchait de tous
  côtés, d’un air inquiet, comme s’il avait perdu quelque chose ; Alice
  l’entendit qui marmottait : « La Duchesse ! La Duchesse ! Oh ! mes pauvres
  pattes ; oh ! ma robe et mes moustaches ! Elle me fera guillotiner aussi vrai
  que des furets sont des furets ! Où pourrais-je bien les avoir perdus ? »
  Alice devina tout de suite qu’il cherchait l’éventail et la paire de gants
  paille, et, comme elle avait bon cœur, elle se mit à les chercher aussi ; mais
  pas moyen de les trouver.
</p>
```

### Résultat

| Navigateur | Version minimale | Prise en charge de : |
| --- | --- | --- |
| Internet Explorer | 8.0 | `:pseudo-element` |
| 9.0 | `:pseudo-element ::pseudo-element` |
| Firefox (Gecko) | 1.0 (1.0) | `:pseudo-element` |
| 1.0 (1.5) | `:pseudo-element ::pseudo-element` |
| Opera | 4.0 | `:pseudo-element` |
| 7.0 | `:pseudo-element ::pseudo-element` |
| Safari (WebKit) | 1.0 (85) | `:pseudo-element ::pseudo-element` |

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

* Les pseudo-classes
:-moz-locale-dir(ltr)
=====================

**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-locale-dir(ltr)`** correspond à un élément si l'interface utilisateur est affichée de gauche à droite. Ceci est déterminé par la préférence `intl.uidirection.`*`locale`* (où *`locale`* est le language courant) qui est fixé à "ltr".

Cela permet aux extensions (et thèmes) d'adapter facilement leur interface utilisateur basée sur les besoins du langage de l'utilisateur. Cela peut varier d'une fenêtre à une autre et même d'un onglet à un autre. Cela permet aussi aux extensions de fonctionner même si elles ne prennent pas en compte le langage de l'utilisateur par défaut, puisqu'elles peuvent prendre en compte les agencements de gauche à droite et de droite à gauche sans être inquiétée par les spécificités du langage.

Ce sélecteur ne fonctionne pas pour les documents l'HTML; il fait correspondre toujours, peu importe si le langage de l'UI va de gauche à droite ou de droite à gauche.

Exemples
--------

### HTML


```html
<p>Sur une interface allant de gauche à droite, ce texte devrait être rouge.</p>
```

### CSS


```css
p:-moz-locale-dir(ltr) {
  color: red;
}
```

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

* `:dir(…)`
* `:-moz-locale-dir(rtl)`
:defined
========

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
La pseudo-classe **`:defined`** représente n'importe quel élément ayant été défini. Cela inclut les éléments standards provenant du navigateur, ainsi que les éléments personnalisés (« *custom elements* ») ayant correctement été définis (c'est-à-dire grâce à la méthode `CustomElementRegistry.define()`).


```css
/\* Cette règle cible tout élément défini \*/
:defined {
  font-style: italic;
}

/\* Cette règle cible n'importe quelle instance d'un élément personnalisé donné \*/
simple-custom:defined {
  display: block;
}
```

Syntaxe
-------

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

Les fragments de code qui suivent sont tirés du dépôt `defined-pseudo-class` (voir le résultat en *live*).

Pour cette démonstration on définit un élément personnalisé trivial :


```js
customElements.define(
  "simple-custom",
  class extends HTMLElement {
    constructor() {
      super();

      let divElem = document.createElement("div");
      divElem.textContent = this.getAttribute("text");

      let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem);
    }
  },
);
```


On insère ensuite une copie de cet élément dans le document, à côté d'un paragraphe classique `<p>` :


```html
<simple-custom text="Le texte de l'élément personnalisé"></simple-custom>

<p>Un paragraphe normal</p>
```


Dans la feuille CSS, on inclut d'abord les règles suivantes :


```css
// On utilise deux arrières-plans distincts pour ces deux éléments
p {
  background: yellow;
}

simple-custom {
  background: cyan;
}

// On met en italique le texte de ces deux éléments
:defined {
  font-style: italic;
}
```


Ensuite, on fournit les deux règles suivantes afin de masquer les instances de l'élément personnalisé qui ne sont pas définies et, pour celles qui sont définies, on indique que ce sont des éléments de bloc :


```css
simple-custom:not(:defined) {
  display: none;
}

simple-custom:defined {
  display: block;
}
```


Ces dernières règles sont utiles lorsqu'on a un élément personnalisé complexe qui met du temps à charger : pour ceux-là, on peut vouloir les masquer jusqu'à ce que la définition soit complète afin de ne pas avoir de scintillement d'éléments non mis en forme sur la page.

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

| Specification |
| --- |
| HTML Standard # selector-defined |

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

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

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

* Les composants web
column-span
===========

La propriété **`column-span`** permet à un élément de s'étendre sur toutes les colonnes lorsque la valeur de cette propriété est `all`. Un élément qui s'étend sur plus d'une colonne est appelé un élément étendu (*spanning element*).

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


```css
/\* Valeurs avec un mot-clé \*/
column-span: none;
column-span: all;

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

Syntaxe
-------

### Valeurs

`none`

L'élément ne s'étend pas sur plusieurs colonnes.

`all`

L'élément s'étend sur l'ensemble des colonnes. Le contenu du flux normal apparaissant avant l'élément est équilibré entre toutes les colonnes de façon automatique. L'élément établit un nouveau bloc de contexte de formatage.

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

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| Applicabilité | éléments de type bloc participant au flux |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

column-span =   
  none  |  
  all     
  
```

Exemples
--------

### CSS


```css
.exemple {
  border: 10px solid #000000;
  columns: 3;
}

h2 {
  column-span: all;
}
```

### HTML


```html
<div 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. »
  <h2>La suite</h2>
  « 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. »
</div>
```

### Résultat

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

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # column-span |

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

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

La pseudo-classe CSS **`:scope`** représente les éléments qui sont des points de référence ou des portées auxquels faire correspondre les sélecteurs.


```css
/\* Sélectionne un élément dans la portée \*/
:scope {
  background-color: lime;
}
```


À l'heure actuelle, lorsqu'elle est utilisée dans une feuille de style, `:scope` est identique à `:root`, car il n'existe pas de moyen explicite pour créer un élément dont la portée est restreinte. Lorsqu'elle est utilisée à travers des méthodes telles que `querySelector()`, `querySelectorAll()`, `matches()` ou `closest()`, `:scope` correspond à l'élément sur lequel la méthode est appelée.

Syntaxe
-------


```css
:scope {
  /\* … \*/
}
```

Exemples
--------

### Identité

Dans cet exemple, on voit comment utiliser la pseudo-classe `:scope` avec la méthode `Element.matches()` afin de désigner l'élément sur lequel la méthode est appelée. Ici, si `:scope` est prise en charge et que le paragraphe est contenu dans la portée de `:root`, le texte est affiché dans le paragraphe avec l'identifiant `output`.

#### JavaScript


```js
const paragraph = document.getElementById("para");
const output = document.getElementById("output");

if (paragraph.matches(":scope")) {
  output.textContent =
    "Le premier paragraphe est sa propre portée, comme attendu !";
}
```


#### HTML


```html
<p id="para">
  Ceci est un paragraphe, pas forcément intéressant en tant que tel.
</p>
<p id="output"></p>
```


#### Résultat

### Enfants directs

La pseudo-classe `:scope` peut également s'avérer utile lorsqu'on doit obtenir un descendant direct d'un élément `Element`.

#### JavaScript


```js
const context = document.getElementById("context");
const selected = context.querySelectorAll(":scope > div");

document.getElementById("results").innerHTML = Array.prototype.map
  .call(selected, (element) => `#${element.getAttribute("id")}`)
  .join(", ");
```


#### HTML


```html
<div id="context">
  <div id="element-1">
    <div id="element-1.1"></div>
    <div id="element-1.2"></div>
  </div>
  <div id="element-2">
    <div id="element-2.1"></div>
  </div>
</div>
<p>
  Identifiants des éléments sélectionnés&nbsp;:
  <span id="results"></span>
</p>
```


#### Résultat

La portée de `context` est l'élément dont l'identifiant (`id`) vaut `context`. Les éléments sélectionnés sont les éléments `<div>` qui sont des enfants directs de ce contexte, c'est-à-dire `element-1` et `element-2`, mais pas leurs descendants à eux.

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

| Specification |
| --- |
| Selectors Level 4 # the-scope-pseudo |

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

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

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

* La pseudo-classe `:root`
* Localiser des éléments du DOM grâce aux sélecteurs
* `Element.querySelector()` et `Element.querySelectorAll()`
* `Document.querySelector()` et `Document.querySelectorAll()`
* `DocumentFragment.querySelector()` et `DocumentFragment.querySelectorAll()`
isolation
=========

La propriété **`isolation`** indique que l'élément crée un nouveau contexte d'empilement (*stacking context*).

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

Cette propriété s'avère particulièrement utile avec `mix-blend-mode` afin de ne mélanger que l'arrière plan d'un contexte d'empilement particulier.

Syntaxe
-------


```css
/\* Valeurs avec mots-clés \*/
isolation: auto;
isolation: isolate;

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


La propriété `isolation` est définie avec l'un des mots-clés suivants.

### Valeurs

`auto`

Un mot-clé qui indique qu'un nouveau contexte d'empilement doit être créé uniquement si une propriété appliquée à l'élément le rend nécessaire.

`isolate`

Un mot-clé qui indique qu'un nouveau contexte d'empilement doit être créé.

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

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | Tous les éléments. En SVG, cela s'applique aux éléments de conteneurs, aux éléments graphiques et aux éléments faisant référence à des éléments graphiques. |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | Not animatable |

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

isolation =   
  <isolation-mode>    
  
<isolation-mode> =   
  auto     |  
  isolate    
  
```

Exemples
--------

### CSS


```css
.a {
  background-color: rgb(0, 255, 0);
}
#b {
  width: 200px;
  height: 210px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
#e {
  isolation: isolate;
}
```

### HTML


```html
<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  </div>
  <div id="e">
    <div class="a c">isolate</div>
  </div>
</div>
```

### Résultat

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

| Specification |
| --- |
| Compositing and Blending Level 2 # isolation |

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

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

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

* `<blend-mode>`
* `mix-blend-mode`
* `background-blend-mode`
Commentaires
============

Les commentaires sont utilisés afin d'ajouter des notes explicatives ou pour empêcher le navigateur d'interpréter certaines parties de la feuille de style. Les commentaires n'ont donc aucun impact sur la disposition d'un document.

Syntaxe
-------

On peut utiliser des commentaires à chaque endroit où un blanc est autorisé.


```css
/\* Commentaire \*/
```

Exemples
--------


```css
/\* Commentaire sur une ligne \*/

/\*
Commentaire
sur plusieurs
lignes
\*/

/\* Le commentaire qui suit permet
 de désactiver une règle \*/
/\*
span {
 color: blue;
 font-size: 1.5em;
}
\*/
```

Notes
-----

La syntaxe des commentaires avec `/* */` est utilisée pour étaler un commentaire sur une ou plusieurs lignes. On ne peut pas utiliser d'autres moyens pour les commentaires dans une feuille de style externe. Lorsqu'on utilise l'élément `<style>`, on peut utiliser les commentaires HTML `<!-- -->` pour masquer du CSS sur des navigateurs plus anciens mais cela n'est pas une méthode recommandée.

À l'instar des autres langages de programmation programmation qui utilisent `/* */` pour les commentaires, il est impossible de les imbriquer. Autrement dit, la première apparition de `*/` suivant un `/*`, ferme le commentaire.

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

* La référence CSS