recursal/MDN huggingface dataset:
display-outside
===============

Les mots-clés de type `<display-outside>` définissent le mode de disposition extérieure de l'élément. Autrement dit, ces mots-clés précisent le rôle de l'élément dans le flux. Ces valeurs peuvent être utilisées pour la propriété `display`. La syntaxe historique (avant CSS 3) prendra une seule valeur et la nouvelle syntaxe combinera cette valeur avec une valeur `<display-inside>`.

Syntaxe
-------

Une valeur `<display-outside>` peut être l'un des mots-clés suivants.

### Valeurs

`block`

L'élément génère une boîte de bloc ce qui ajoute des passages à la ligne avant et après l'élément dans le flux normal.

`inline`

L'élément génère une ou plusieurs boîtes en lignes qui n'ajoutent pas de passages à la ligne avant ou après. Dans un flux normal, le prochain élément sera sur la même ligne si l'espace le permet.

`run-in` 
Expérimental

L'élément génère une boîte « *run-in* ». Si le voisin adjacent à l'élément est une boîte de bloc, la boîte `run-in` devient la première boîte en ligne qui suit cette boîte de bloc.

Les éléments *run-in* se comportent comme des éléments de bloc ou en ligne selon les éléments environnants. Autrement dit, si la boîte *run-in* contient une boîte de bloc, l'élément se comportera comme un bloc. Si la boîte de bloc suit une boîte *run-in*, la boîte *run-in* deviendra la première boîte en ligne de la boîte de bloc. Si une boîte en ligne succède à l'élément, la boîte *run-in* deviendra une boîte de bloc.


**Note :** Browsers that support the two value syntax, on finding the outer value only, such as when `display: block` or `display: inline` is specified, will set the inner value to `flow`. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.

**Note :** Les navigateurs qui prennent en charge la syntaxe avec deux valeurs utiliseront la valeur par défaut `flow` pour le mode intérieur si `display: block` ou `display: inline`. On a ainsi le résultat attendu (si on souhaite qu'un élément se comporte comme un bloc, on s'attend à ce que les éléments fils de cet élément contribuent à la disposition normale en bloc et en ligne).

### Syntaxe formelle
```

<display-outside> =   
  block   |  
  inline  |  
  run-in    
  
```

Exemples
--------

Dans l'exemple suivant, les éléments `<span>`, normalement affichés comme des éléments en ligne, sont paramétrés avec `display: block` et passent à la ligne en étendant leur conteneur selon l'axe en ligne.

### CSS


```css
span {
  display: block;
  border: 1px solid rebeccapurple;
}
```

### HTML


```html
<span>span 1</span> <span>span 2</span>
```

### Résultat

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

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

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

* `display`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`
* Block and Inline layout in Normal Flow
* Formatting Contexts explained
transform-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é **`transform-style`** définit si les éléments-fils d'un éléments sont positionnés dans l'espace tridimensionnel ou s'ils sont aplatis dans le plan de l'élément.

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

S'ils sont aplanis, les éléments-fils n'auront pas d'espace tridimensionnel propre.

Cette propriété n'est pas héritée et doit donc être définie sur tous les descendants de l'éléments qui ne sont pas des feuilles (autrement dit des descendants qui n'ont aucun fils).

Syntaxe
-------


```css
/\* Avec un mot-clé \*/
transform-style: preserve-3d;
transform-style: flat;

/\* Valeurs globales \*/
transform-style: inherit;
transform-style: initial;
transform-style: unset;
```

### Valeurs

`flat`

Indique que les fils de l'éléments sont positionnés dans le plan de l'élément.

`preserve-3d`

Indique que les fils de l'élément ciblé doivent être positionnés dans l'espace tridimensionnel.

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

|  |  |
| --- | --- |
| Valeur initiale | `flat` |
| Applicabilité | éléments transformables |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
| Crée un contexte d'empilement | oui |

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

transform-style =   
  flat         |  
  preserve-3d    
  
```

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # transform-style-property |

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

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

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

* Utiliser les transformations CSS
CSS Basic User Interface
========================

***CSS Basic User Interface*** est un module de la spécification CSS qui décrit les fonctionnalités et le rendu associés aux fonctionnalités de l'interface utilisateur.

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

### Propriétés

* `appearance` 
Expérimental
* `box-sizing`
* `cursor`
* `ime-mode` 
Obsolète
* `nav-down` 
Expérimental
* `nav-left` 
Expérimental
* `nav-right` 
Expérimental
* `nav-up` 
Expérimental
* `outline`
* `outline-width`
* `outline-style`
* `outline-color`
* `outline-offset`
* `resize`
* `text-overflow`
* `user-select` 
Expérimental
Guides
------

Utiliser des URL pour la propriété `cursor`

Ce guide décrit comment utiliser des URL avec la propriété `cursor` afin de créer des curseurs personnalisés.

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4  |
color-scheme
============

La propriété CSS **`color-scheme`** permet d'indiquer les jeux de couleurs dans lesquels un élément peut être rendu sans risque.

Les jeux de couleurs communément utilisés par les systèmes d'exploitation sont *light* (clair) et *dark* (sombre), ou *day mode* (mode jour) et *night mode* (mode nuit). Lorsqu'un utilisateur sélectionne un de ces jeux de couleurs, le système d'exploitation fait des ajustements à l'interface utilisateur. Cela comprend les contrôles de formulaires, les barres de défilement et les valeurs utilisées par le système de couleurs CSS.

Syntaxe
-------


```css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;

/\* Valeurs globales \*/
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: unset;
```


La valeur de la propriété `color-scheme` doit être un des mots-clés suivants.

### Valeurs

`normal`

Indique que l'élément ne tient pas compte d'un éventuel jeu de couleurs et qu'il devrait être rendu à l'aide du jeu de couleurs par défaut du navigateur.

`light`

Indique que l'élément peut être rendu en utilisant le jeu de couleurs claires du système d'exploitation.

`dark`

Indique que l'élément peut être rendu en utilisant le jeu de couleurs sombres du système d'exploitation.

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

|  |  |
| --- | --- |
| Valeur initiale | `normal` |
| Applicabilité | all elements and text |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

color-scheme =   
  normal                                       |  
  [ light | dark | <custom-ident> ]+ && only?    
  
```

Exemples
--------

### Adaptation aux jeux de couleurs

Pour activer la préférence de jeu de couleurs de l'utilisateur sur l'ensemble de la page, `color-scheme` peut être déclaré sur l'élément `:root`.


```css
:root {
  color-scheme: light dark;
}
```

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

| Specification |
| --- |
| CSS Color Adjustment Module Level 1 # color-scheme-prop |

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

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

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

* Appliquer des couleurs aux éléments HTML grâce à CSS
* Les autres propriétés relatives aux couleurs : `color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color` et `column-rule-color`
* `background-image`
* `-webkit-print-color-adjust`
:-webkit-autofill
=================

**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 **`:-webkit-autofill`** correspond à un élément `<input>` lorsque sa valeur est remplie automatiquement par le navigateur.

**Note :** Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent `!important` pour les déclarations avec `:-webkit-autofill` ce qui les rend difficilement modifiables sans utiliser JavaScript.

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

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

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

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

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

* Bug Chromium n°46543 : Le fond jaune des champs texte saisis automatiquement ne peut pas être désactivé.
* Bug WebKit n°66032 : Permettre aux auteurs de surcharger la couleur des champs remplis automatiquement.
* Bug Mozilla n°740979 : Implémentation de la pseudo-classe `:-moz-autofill` pour les éléments `input` avec une valeur saisie automatiquement.
CSS Namespaces
==============

***CSS Namespaces*** (ou « espaces de noms CSS ») est un module CSS qui permet aux auteurs de spécifier des espaces de noms XML en CSS.

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

### Règles @

* `@namespace`
Spécifications
--------------

| Specification |
| --- |
| CSS Namespaces Module Level 3 # declaration |

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

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

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

Pour certains éléments XUL et les pseudo-éléments qui utilisent une image grâce à la propriété `list-style-image`, la propriété **`-moz-image-region`** définit la partie de l'image qui est utilisée plutôt que l'image toute entière. Cela permet d'utiliser des images qui regroupent des *sprites* afin d'améliorer les performances.


```css
/\* Valeur avec un mot-clé \*/
-moz-image-region: auto;

/\* Valeur de type <shape> \*/
-moz-image-region: rect(0, 8px, 4px, 4px);

/\* Valeurs globales \*/
-moz-image-region: inherit;
-moz-image-region: initial;
-moz-image-region: unset;
```


La syntaxe de cette propriété est semblable à la syntaxe de la propriété `clip`. Les quatre valeurs sont relatives au coin en haut à gauche de l'image.

**Note :** Pour un système qui fonctionne pour n'importe quel arrière-plan, on pourra utiliser la propriété `-moz-image-rect()`.

Syntaxe
-------

### Valeurs

`auto`

La région pour l'image est définie automatiquement

`<shape>`

Une forme définit la portion d'image qui doit être utilisée. La fonction `rect()` permet de définir un rectangle. Les paramètres de cette fonction correspondent respectivement aux décalages des bords haut, droit, bas et gauche. Voir `<shape>`.

### Syntaxe formelle

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


```css
#example-button {
  /\* display only the 4x4 area from the top left of this image \*/
  list-style-image: url("chrome://example/skin/example.png");
  -moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
  /\* use the 4x4 area to the right of the first for the hovered button \*/
  -moz-image-region: rect(0px, 8px, 4px, 4px);
}
```

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 | `auto` |
| Applicabilité | éléments XUL `image` et aux pseudo-éléments `:-moz-tree-image`, `:-moz-tree-twisty` et `:-moz-tree-checkbox`. **Note :** `-moz-image-region` ne fonctionnera qu'avec les éléments `image` où l'icône est définie avec `list-style-image`. Cela ne fonctionnera pas avec l'`<image src="url" />` XUL. |
| Héritée | oui |
| 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
----------

* `-moz-image-rect()`
font-optical-sizing
===================

La propriété CSS **`font-optical-sizing`** permet de contrôler la façon dont l'agent utilisateur rend le texte avec (ou non) différentes représentations visuelles en fonction de la taille. Cette propriété ne fonctionne qu'avec les polices qui disposent d'un axe de variation pour la taille optique.

Par exemple, les textes de petites tailles sont généralement affichés avec des traits plus épais et des empattements (*serifs*) plus grands. En revanche, les textes plus grands sont souvent plus fins et utilisent plus de contrastes entre les traits fins et épais.

**Note :** L'axe de variation pour la taille optique est représenté par `opsz` dans `font-variation-settings`.

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
font-optical-sizing: none;
font-optical-sizing: auto; /\* valeur initiale \*/

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

### Valeurs

`none`

L'agent utilisateur ne modifiera pas la forme des glyphes pour une vue optimale.

`auto`

L'agent utilisateur modifiera la forme des glyphes pour une vue optimale.

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

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| 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-optical-sizing =   
  auto  |  
  none    
  
```

Exemples
--------

### CSS


```css
@font-face {
  src: url("AmstelvarAlpha-VF.ttf");
  font-family: "Amstelvar";
  font-style: normal;
}

p {
  font-size: 36px;
  font-family: Amstelvar;
}

.no-optical-sizing {
  font-optical-sizing: none;
}
```

### HTML


```html
<p class="optical-sizing">
  Ce paragraphe est dimensionné pour une meilleure lecture. C'est le
  comportement par défaut.
</p>

<p class="no-optical-sizing">
  Ce paragraphe n'est pas adapté pour une meilleure lecture. Vous devriez voir
  une différence avec les navigateurs qui prennent en charge cette
  fonctionnalité.
</p>
```


**Note :** La police utilisée dans cet exemple possède un dimensionnement optique et est disponible sous licence libre en téléchargement sur GitHub.

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-optical-sizing-def |

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

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

La fonction de pseudo-classe **`:host()`** permet de sélectionner l'hôte du *shadow DOM* contenant le CSS à utiliser, uniquement si le sélecteur passé en argument correspond à l'élément hôte.

Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction `:host()`. Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser `:host-context()`.

**Note :** Cette fonction n'a aucun effet si elle est utilisée en dehors d'un *shadow DOM*.


```css
/\* On cible l'hôte du shadow DOM uniquement s'il
 correspond au sélecteur passé en argument \*/
:host(.special-custom-element) {
  font-weight: bold;
}
```

Syntaxe
-------

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

Les fragments de code suivants sont extraits du dépôt d'exemple *host-selectors* (voir le résultat en direct).

Dans cet exemple, on dispose d'un élément personnalisé, `<context-span>`, qui peut contenir du texte :


```html
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
```


Dans le constructeur de l'élément, on crée un élément `style` et un élément `span`. Ce dernier recevra le contenu textuel de l'élément personnalisé et l'élément `style` recevra quelques règles CSS :


```js
let style = document.createElement("style");
let span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
```


La règle `:host(.footer) { color : red; }` s'applique à toutes les instances de l'élément `<context-span>` (il s'agit ici de l'hôte) du document qui possèdent la classe `footer`. Ici, pour ces éléments donnés, on utilise une couleur spécifique.

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

| Specification |
| --- |
| CSS Scoping Module Level 1 # host-selector |

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

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

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

* Les composants web
* `:host`
* `:host-context()`
asin()
======

**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 (en-US) CSS **`asin()`** est une fonction trigonométrique qui renvoie l'arc sinus d'un nombre compris entre `-1` et `1`. Cette fonction effectue un unique calcul qui renvoie le nombre correspondant de radians représentant un angle entre `-90deg` et `90deg`.

Syntaxe
-------


```css
/\* Valeurs numériques \*/
/\* Type <number> \*/
transform: rotate(asin(-0.2));
transform: rotate(asin(2 * 0.125));

/\* Autres valeurs \*/
transform: rotate(asin(pi / 5));
transform: rotate(asin(e / 3));
```

### Paramètres

La fonction `asin()` prend un seul paramètre.

`number`

n nombre (une valeur de type `<number>`) compris entre `-1` et `1`. Si la valeur fournie inférieure à `-1` ou supérieure à `1`, ou `NaN`, le résultat de la fonction sera `NaN`.

### Syntaxe formelle
```

<asin()> =   
  asin( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*    
  
<calc-product> =   
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*    
  
<calc-value> =   
  <number>        |  
  <dimension>     |  
  <percentage>    |  
  <calc-keyword>  |  
  ( <calc-sum> )    
  
<calc-keyword> =   
  e          |  
  pi         |  
  infinity   |  
  -infinity  |  
  NaN          
  
```

Exemple
-------

La fonction `asin()` peut être utilisée dans les transformations angulaires, par exemple avec `rotate()`, car elle renvoie une valeur de type `<angle>`.
```

<div class="box"></div>
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
```


```
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
```



```css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}

div.box-1 {
  transform: rotate(asin(-0.2));
}

div.box-2 {
  transform: rotate(asin(2 * 0.125));
}

div.box-3 {
  transform: rotate(asin(pi / 5));
}

div.box-4 {
  transform: rotate(asin(e / 3));
}
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # trig-funcs |

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

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

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

* `sin` (en-US)
* `cos` (en-US)
* `tan` (en-US)
* `acos`
* `atan` (en-US)
* `atan2` (en-US)
user-modify
===========

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

**Obsolète:** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

La propriété **`user-modify`** n'a aucun effet. Elle était initialement conçue pour déterminer si le contenu d'un élément peut être édité ou non par l'utilisateur.


```css
/\* Valeurs avec un mot-clé \*/
user-modify: read-only;
user-modify: read-write;
user-modify: write-only;

/\* Valeurs globales \*/
user-modify: inherit;
user-modify: initial;
user-modify: unset;
```


**Attention :** Cette propriété a été remplacée par l'attribut `contenteditable`.

Cette propriété est similaire à l'attribut HTML `contenteditable`. Une propriété similaire : `user-focus` a été proposée pour des brouillons de la spécification CSS3 pour les interfaces utilisateur mais fut rejetée par le groupe de travail. **Elle a été désactivée de Firefox et n'a donc pas d'effet.**

Syntaxe
-------

La propriété `user-modify` est définie grâce à un mot-clé parmi ceux de la liste ci-après.

### Valeurs

`read-only`

La valeur par défaut, le contenu ne peut pas être modifié.

`read-write`

L'utilisateur peut lire et modifier le contenu.

`read-write-plaintext-only` 
Non-standard

Identique à `read-write` mais la mise en forme du texte sera perdue.

`write-only`

L'utilisateur peut éditer le contenu mais ne peut pas le lire.

### Syntaxe formelle

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

### CSS


```css
.readwrite {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
}
```

### HTML


```html
<div class="readwrite">L'utilisateur est capable de modifier ce texte.</div>
```

### Résultat

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

`user-modify` a été proposée pour la spécification CSS 3 sur les interfaces utilisateurs (le brouillon de travail de février 2000 qui est désormais remplacé par le module *Basic User Interface* de *CSS 3*).

Valeur introuvable dans la base de donnéesCompatibilité des navigateurs
-----------------------------

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

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

* `-moz-user-focus`
* `-moz-user-input`
* `-moz-user-select` (en-US)