recursal/MDN huggingface dataset:
list-style-position
===================

La propriété **`list-style-position`** permet de définir la position du marqueur (cf. `::marker`) de liste par rapport à la boîte principale.

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

Pour définir cette propriété, on pourra aussi utiliser la propriété raccourcie `list-style`.

**Note :** Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels `display` vaut `list-item`). Par défaut, cela inclut les éléments `<li>`. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à `<ol>` ou à `<ul>`).

Une différence de comportement existe entre les navigateurs lorsqu'un élément de bloc est placé en premier au sein d'un élément de liste avec `list-style-position: inside`. Chrome et Safari placent l'élément sur la même ligne que la boîte du marqueur. En revanche, Firefox, Internet Explorer et Opera placent l'élément sur la ligne suivante. Voir le bug 36854 de Firefox pour plus d'informations.

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
list-style-position: inside;
list-style-position: outside;

/\* Valeurs globales \*/
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: unset;
```


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

### Valeurs

`inside`

La boîte du marqueur (`::marker`) est la première boîte en ligne (*inline*) de la boîte principale. Le contenu de l'élément sera appliqué à la suite de la boîte du marqueur.

`outside`

La boîte du marqueur (`::marker`) est en dehors de la boîte principale.

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

|  |  |
| --- | --- |
| Valeur initiale | `outside` |
| Applicabilité | éléments de liste |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

list-style-position =   
  inside   |  
  outside    
  
```

Exemples
--------

### Définition de la position des éléments d'une liste

#### HTML


```html
<ul class="un">
  Liste 1
  <li>Élément 1-1</li>
  <li>Élément 1-2</li>
  <li>Élément 1-3</li>
  <li>Élément 1-4</li>
</ul>
<ul class="deux">
  Liste 2
  <li>Élément 2-1</li>
  <li>Élément 2-2</li>
  <li>Élément 2-3</li>
  <li>Élément 2-4</li>
</ul>
<ul class="trois">
  Liste 3
  <li>Élément 3-1</li>
  <li>Élément 3-2</li>
  <li>Élément 3-3</li>
  <li>Élément 3-4</li>
</ul>
```


#### CSS


```css
.un {
  list-style-position: inside;
  list-style-type: square;
}

.deux {
  list-style-position: outside;
  list-style-type: circle;
}

.trois {
  list-style-position: inside;
  list-style-image: url("starsolid.gif");
}
```


#### Résultat

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # list-style-position-property |

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

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

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

* `list-style`
* `list-style-type`
* `list-style-image`
CSS Scrollbars
==============

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

Le module de spécification *CSS Scrollbars* standardise la mise en forme des barres de défilement (*scrollbar*) notamment introduite en 2000 avec Windows IE 5.5.

Exemples
--------

Dans l'exemple qui suit, on crée une barre de défilement fine avec une piste verte et un curseur violet.

### CSS


```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
```

### HTML


```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```

### Résultat

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

### Propriétés

* `scrollbar-width`
* `scrollbar-color`
Accessibilité
-------------

Lors du paramétrage des barres de défilement, on s'assurera que le contraste avec les éléments alentour est suffisant et que la surface d'interaction est suffisamment grande pour les personnes qui utilisent une interface tactile.

* Règles de base pour l'utilisabilité des barres de défilement, par Adrian Roselli (en anglais)
Spécifications
--------------

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1  |

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

### css.properties.scrollbar-color

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

### css.properties.scrollbar-width

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

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

* `::-webkit-scrollbar`
* `-ms-overflow-style`
:host
=====

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 **`:host`** permet de cibler l'hôte d'un *shadow DOM* contenant le CSS à utiliser pour cet hôte. Autrement dit, elle permet de sélectionner un élément personnalisé (*custom element*) depuis l'intérieur du *shadow DOM*.

**Note :** Cette pseudo-classe n'a aucun effet lorsqu'elle est utilisée à l'extérieur d'un *shadow DOM*.


```css
/\* Cible la racine d'un hôte de shadow DOM \*/
:host {
  font-weight: bold;
}
```

Syntaxe
-------

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

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

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


Pour le constructeur de cet élément, on crée des éléments `style` et `span` : l'élément `span` recevra le contenu de l'élément personnalisé et `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 { background: rgba(0,0,0,0.1); padding: 2px 5px; }` permet de cibler l'ensemble des instances de `<context-span>` (qui est l'hôte ici) dans le document.

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()`
Les animations CSS
==================

Les **animations CSS** sont un module CSS qui définit la façon dont les valeurs des propriétés CSS peuvent être animées au fur et à mesure d'une période via des étapes intermédiaires (*keyframes* en anglais). Le comportement de ces animations séquencées peut être défini en termes de durée, de nombre de répétitions et de la façon dont elles sont répétées.

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

### Propriétés CSS

* `animation`
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-timing-function`
### Règles @ CSS

* `@keyframes`
Guides
------

Détecter la prise en charge des animations CSS

Cet article décrit une technique permettant de détecter si le navigateur prend en charge les animations CSS.

Manipuler les animations CSS

Un tutoriel pas-à-pas qui explique comment créer des animations CSS. Cet article décrit les différentes propriétés et règles @ relatives aux animations et comment elles interagissent.

Conseils pour les animations CSS

Des conseils et astuces pour tirer le meilleur parti des animations CSS. Dans cet article, on décrit une technique qui permet de relancer une animation qui a déjà été exécutée, ce que l'API ne permet pas de faire nativement.

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

| Specification |
| --- |
| CSS Animations Level 2  |
| CSS Animations Level 1  |

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

{{Compat}}Voir aussi
----------

* Les transitions CSS qui permettent de déclencher des animations suite à des actions utilisateur.
-webkit-box-reflect
===================

**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é **`-webkit-box-reflect`** peut être utilisée afin de créer un effet de réflexion d'un élément dans une direction donnée.


```css
/\* Valeurs de directions \*/
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;

/\* Valeurs incluant un décalage \*/
-webkit-box-reflect: below 10px;

/\* Valeur de masque \*/
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

/\* Valeurs globales \*/
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-box-reflect: unset;
```


**Attention :** Cette fonctionnalité ne doit pas être utilisée sur le Web. Pour créer des effets de reflet sur le Web, on pourra utiliser la fonction CSS standard `element()`.

Syntaxe
-------

### Valeurs

`above`*,* `below`*,* `right`*,* `left`

Des mots-clés qui indiquent la direction dans laquelle créer la réflexion (respectivement : au-dessus, en-dessous, à droite, à gauche).

`<length>`

La taille du reflet créé, cf. `<length>` sur les valeurs possibles.

`<image>`

Le masque à appliquer au reflet, cf. `<image>` sur les valeurs possibles.

### Syntaxe formelle

Error: could not find syntax for this itemSpécifications
--------------

Cette propriété n'est pas en voie de standardisation et ne fera pas partie de CSS. Pour créer des reflets en CSS, on pourra utiliser la fonction standard `element()`.

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

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

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

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

* La documentation Apple
* La spécification WebKit
* L'article de Lea Verou sur les réflexions CSS en utilisant les fonctionnalités en voie de standardisation
element
=======

**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 **`element()`** définit une valeur `<image>` générée à partir d'un élément HTML arbitraire. L'image est calculée dynamiquement : si l'élément HTML change, les propriétés CSS utilisant la valeur seront automatiquement mis à jour.

Un scénario pour lequel cette fonction est particulièrement utile : on génère une image dans un élément HTML `<canvas>` et on l'utilise comme arrière-plan.

Pour les navigateurs basés sur Gecko, on peut utiliser la méthode `document.mozSetImageElement()` pour modifier l'élément utilisé comme arrière-plan pour un `background` CSS donné.

Syntaxe
-------
```

element(id)
```

### Paramètres

**`id`**

L'identifiant (correspondant à l'attribut `id`) de l'élément HTML visé.

Exemples
--------

### Un premier exemple réaliste

#### CSS


```css
.exemple {
  width: 400px;
  height: 400px;
  background: -moz-element(#monArrierePlan) no-repeat;
}

.paragraphe {
  transform-origin: 0 0;
  transform: rotate(45deg);
  color: white;
}

#monArrierePlan {
  width: 1024px;
  height: 1024px;
  background-image: linear-gradient(to right, red, orange, yellow, white);
}
.cache {
  overflow: hidden;
  height: 0;
}
```


#### HTML


```html
<div class="exemple">
  <p>Cet élément utilise l'élément #monArrierePlan comme image de fond !</p>
</div>

<div class="cache">
  <div id="monArrierePlan">
    <p class="paragraphe">Et voici un texte inscrit sur l'arrière-plan.</p>
    <div>
      <div></div>
    </div>
  </div>
</div>
```


#### Résultat

Pour les navigateurs qui prennent en charge `element`, on peut ici voir un arrière-plan généré avec un paragraphe HTML.

### Un second exemple plus méchant

#### CSS


```css
.exemple {
  width: 400px;
  height: 100px;
  background: -moz-element(#monArrierePlan);
}

.cache {
  overflow: hidden;
  height: 0;
}
```


#### HTML


```html
<div class="exemple"></div>

<div class="cache">
  <button id="monArrierePlan" type="button">Méchant bouton</button>
</div>
```


#### Résultat

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

| Specification |
| --- |
| CSS Images Module Level 4 # element-notation |

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

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

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

* `document.mozSetImageElement()`
* `image()`
* `image-set()`
* `<image>`
* `<gradient>`
* `element()`
* `cross-fade()`
* `document.mozSetImageElement()`
scroll-margin-block
===================

La propriété **`scroll-margin-block`** est une propriété raccourcie logique qui définit les marges de défilement sur l'axe de bloc (i.e. les propriétés logiques `scroll-margin-block-start` et `scroll-margin-block-end`).

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

Les valeurs des marges de défilement correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (*snapport*). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.

Syntaxe
-------


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
scroll-margin-block: 10px;
scroll-margin-block: 1em 0.5em;

/\* Valeurs globales \*/
scroll-margin-block: inherit;
scroll-margin-block: initial;
scroll-margin-block: unset;
```

### Valeurs

`<length>`

Un décalage par rapport au côté correspondant du conteneur de défilement.

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

|  |  |
| --- | --- |
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :* `scroll-margin-block-start`: `0`
* `scroll-margin-block-end`: `0`
 |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `scroll-margin-block-start`: comme spécifié
* `scroll-margin-block-end`: comme spécifié
 |
| Type d'animation | by computed value type |

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

scroll-margin-block =   
  <length>{1,2}    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-margin-block |

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

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

La propriété **`scroll-padding-block`** est une propriété raccourcie qui permet de définir le remplissage, sur l'axe de bloc, entre l'élément et la zone de défilement. Autrement dit, elle permet de définir `scroll-padding-block-end` et `scroll-padding-block-start`.

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

Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (*scrollport*). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
scroll-padding-block: auto;

/\* Valeurs de longueur \*/
/\* Type <length> \*/
scroll-padding-block: 10px;
scroll-padding-block: 1em 0.5em;
scroll-padding-block: 10%;

/\* Valeurs globales \*/
scroll-padding-block: inherit;
scroll-padding-block: initial;
scroll-padding-block: unset;
```

### Valeurs

`<length-percentage>`

Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.

`auto`

Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à `0px` mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.

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

|  |  |
| --- | --- |
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :* `scroll-padding-block-start`: `auto`
* `scroll-padding-block-end`: `auto`
 |
| Applicabilité | conteneurs d'ascenseurs |
| Héritée | non |
| Pourcentages | relative to the scroll container's scrollport |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `scroll-padding-block-start`: comme spécifié
* `scroll-padding-block-end`: comme spécifié
 |
| Type d'animation | by computed value type |

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

scroll-padding-block =   
  [ auto | <length-percentage [0,∞]> ]{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-padding-block |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Modèle de boîte
===============

**Le modèle de boîte CSS** (*Basic Box Model* en anglais) est un module CSS qui définit les boîtes rectangulaires (y compris leurs zones de remplissage (*padding*) et de marges) qui sont générées pour disposer les éléments selon leur modèle de mise en forme visuelle.

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

### Propriétés

#### Les propriétés qui définissent le flux du contenu dans une boîte

* `overflow`
* `overflow-x`
* `overflow-y`

#### Les propriétés qui définissent la taille d'une boîte

* `height`
* `width`
* `max-height`
* `max-width`
* `min-height`
* `min-width`

#### Les propriétés qui définissent les marges d'une boîte

* `margin`
* `margin-bottom`
* `margin-left`
* `margin-right`
* `margin-top`
* `margin-trim` 
Expérimental

#### Les propriétés qui définissent le remplissage (*padding*) d'une boîte

* `padding`
* `padding-bottom`
* `padding-left`
* `padding-right`
* `padding-top`

#### Les autres propriétés

* `box-shadow`
* `visibility`
Guides
------

Une introduction au modèle de boîte CSS

Cet article explique un des concepts clé de CSS : le modèle de boîte. Il définit notamment les notions de marge, de remplissage (*padding*) ainsi que les différentes zones qui forment une boîte.

Maîtriser la fusion des marges

Dans certains cas, deux marges adjacentes sont fusionnées en une seule. Cet article explique quand cela se produit et comment contrôler ce comportement.

Le modèle de mise en forme visuel

Cet article explique le modèle de mise en forme visuel.

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

| Specification |
| --- |
| CSS Box Model Module Level 3  |
:last-of-type
=============

La pseudo-classe **`:last-of-type`** cible un élément qui est le dernier enfant d'un type donné dans la liste des enfants de l'élément parent.


```css
/\* Cible n'importe quel paragraphe qui est \*/
/\* le dernier paragraphe de son élément parent \*/
p:last-of-type {
  color: lime;
}
```


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

Syntaxe
-------

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

Pour cibler le dernier élément `<em>` au sein d'un élément `<p>`, on pourra utiliser la règle qui suit (illustrée ensuite sur un fragment HTML).

### CSS


```css
p em:last-of-type {
  color: lime;
}
```

### HTML


```html
<p>
  <em>Je ne suis pas vert :(</em>
  <strong>Je ne suis pas vert :(</strong>
  <em>Je suis vert :D</em>
  <strong>Je ne suis pas vert non plus :(</strong>
</p>

<p>
  <em>Je ne suis pas vert :(</em>
  <span>
    <em>Je suis vert !</em>
  </span>
  <strong>Je ne suis pas vert :(</strong>
  <em>Je suis vert :D</em>
  <span>
    <em>Je suis aussi vert !</em>
    <strike>Je ne suis pas vert</strike>
  </span>
  <strong>Je ne suis pas vert non plus :(</strong>
</p>
```

### Résultat

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

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

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

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

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

* `:nth-last-of-type`
* `:first-of-type`
* `:last-child`