recursal/MDN huggingface dataset:
overscroll-behavior-y
=====================

La propriété CSS **`overscroll-behavior-y`** permet de contrôler le comportement de l'agent utilisateur lorsqu'on atteint la limite de la zone de défilement sur l'axe vertical.

**Note :** Voir `overscroll-behavior` pour plus de détails.

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
overscroll-behavior-y: auto;
overscroll-behavior-y: contain;
overscroll-behavior-y: none;

/\* Valeurs globales \*/
overscroll-behavior-y: inherit;
overscroll-behavior-y: initial;
overscroll-behavior-y: unset;
```


La propriété `overscroll-behavior-x` est définie avec un des mots-clés définis ci-après.

### Valeurs

`auto`

Le dépassement de la zone de défilement se déroule normalement.

`contain`

Le comportement normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.

`none`

Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.

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

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | les éléments de bloc non remplacés et les éléments en bloc en ligne et en bloc (inline-block) |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

overscroll-behavior-y =   
  contain  |  
  none     |  
  auto       
  
```

Exemples
--------


```css
.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}
```


Voir `overscroll-behavior` pour un exemple complet et plus de détails.

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

| Specification |
| --- |
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical |

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

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

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

* Take control of your scroll: customizing pull-to-refresh and overflow effects (en anglais)
::target-text
=============

**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 pseudo-élément CSS **`::target-text`** représente le texte vers lequel l'écran vient de défiler, dans le cas où le navigateur prend en charge les fragments `scroll-to-text`. Il permet aux auteurs de mettre en valeur cette section de texte.


```css
::target-text {
  background-color: pink;
}
```

Syntaxe
-------

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

### Mise en valeur de scroll-to-text


```css
::target-text {
  background-color: rebeccapurple;
  color: white;
  font-weight: bold;
}
```


Pour voir ce code CSS en action, suivez ce lien vers la démonstration de scroll-to-text.

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-target-text |

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

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

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

* Text fragments (en anglais)
:-moz-loading
=============

**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-loading`** correspond aux éléments qui ne peuvent être affichés, car ils n'ont pas été chargés (par exemple les images qui n'ont pas encore été transférées sur le réseau). On notera que les images *en cours de chargement* (le fichier est arrivé et est en train d'être traité pour affichage par le navigateur) ne sont pas ciblées par cette pseudo-classse.

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

Syntaxe
-------


```css
:-moz-loading {
}
```

Exemples
--------


```css
img:-moz-loading {
  background-color: #aaa;
  background-image: url(loading-animation.gif) center no-repeat;
}
```

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

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

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

* `:-moz-broken`, `:-moz-suppressed`, `:-moz-user-disabled`
::-moz-progress-bar
===================

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

Le pseudo-élément **`::-moz-progress-bar`** s'appliquant à la zone d'élément HTML `<progress>` représente la valeur de la progression effectuée jusqu'à présent. Vous pourrez par exemple, modifier la couleur de la barre de progression.

Syntaxe
-------

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

### CSS


```css
#redbar::-moz-progress-bar {
  background-color: red;
}
```

### HTML


```html
<progress id="redbar" value="30" max="100">30 %</progress>
```

### Résultat

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

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

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

* `<progress>`
* `::-ms-fill`
* `::-webkit-progress-bar`
* `::-webkit-progress-value`
* `::-webkit-progress-inner-element`
:out-of-range
=============

La pseudo-classe **`:out-of-range`** cible un élément `<input>` lorsque la valeur de son attribut `value` est en dehors de l'intervalle autorisé par les attributs `min` et `max`. Ceci permet d'informer l'utilisateur que la valeur actuellement renseignée dans l'élément est hors des limites acceptables.


```css
/\* Cible n'importe quel élément <input> qui possède un \*/
/\* attribut range et que la valeur associée est en \*/
/\* dehors de cet intervalle \*/
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
}
```


**Note :** Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.

Syntaxe
-------

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

### HTML


```html
<form action="" id="form1">
  <ul>
    Les valeurs entre 1 et 10 sont autorisées.
    <li>
      <input
 id="valeur1"
 name="valeur1"
 type="number"
 placeholder="1 à 10"
 min="1"
 max="10"
 value="12" />
      <label for="valeur1">Votre valeur est </label>
    </li>
  </ul>
</form>
```

### CSS


```css
li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: " OK";
}

input:out-of-range + label::after {
  content: "hors des limites !";
}
```

### Résultat

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

| Specification |
| --- |
| HTML Standard # selector-out-of-range |
| Selectors Level 4 # out-of-range-pseudo |

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

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

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

* `:in-range`
* Le guide de validation des données de formulaire
alpha-value
===========

Le type de donnée CSS **`<alpha-value>`** représente une valeur qui peut être un nombre (`<number>`) ou un pourcentage (`<percentage>`) et qui indique le canal alpha ou *l'opacité* d'une couleur.

Syntaxe
-------

Si la valeur est fournie comme un nombre, la valeur peut être comprise entre 0 (complètement transparent) et 1 (complètement opaque). Il est possible d'utiliser des valeurs décimales comprises entre ces valeurs. Les valeurs à l'extérieur de cet intervalle sont valides mais elles sont écrétées à 0 ou 1.

Lorsque la valeur est fournie en pourcentage 0% correspond à une transparence complète tandis que 100% correspond à une opacité totale.

Interpolation
-------------

Lorsqu'une animation fait évoluer une valeur de type `<alpha-value>`, les valeurs sont interpolées comme des nombres réels à point flottant. La vitesse de l'interpolation est déterminée par la fonction de temporisation associée à l'animation.

Exemples
--------

Certaines fonctionnalités CSS utilisent des valeurs `<alpha-value>` dont les notations fonctionnelles pour les couleurs telles que `rgba()` et `hsla()` et aussi `shape-image-threshold` (qui détermine les pixels à prendre en compte pour une image lorsqu'on souhaite en extraire une forme).


```css
/\* <rgba()> \*/
color: rgba(34, 12, 64, 0.6);
color: rgba(34 12 64 / 60%);
```



```css
/\* shape-image-threshold \*/
shape-image-threshold: 70%;
shape-image-threshold: 0.7;
```

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

| Specification |
| --- |
| CSS Color Module Level 4 # typedef-color-alpha-value |
border-image-source
===================

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

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

* Learn more
* See full compatibility
* Report feedback
La propriété **`border-image-source`** définit l'image (type `<image>`) qu'on souhaite utiliser pour mettre en forme la bordure. Si la valeur de cette propriété vaut `none`, ce sera la mise en forme définie par la propriété `border-style` qui sera utilisée.

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

Syntaxe
-------


```css
/\* Valeur avec un mot-clé \*/
/\* Ici, pas de border-image, \*/
/\* on utilise border-style \*/
border-image-source: none;

/\* Valeur de type <image> \*/
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);

/\* Valeurs globales \*/
border-image-source: inherit;
border-image-source: initial;
border-image-source: unset;
```


La propriété `border-image-slice` peut être utilisée afin de diviser une image source en régions qui seront insérées dynamiquement pour constituer la bordure imagée finale.

### Valeurs

`none`

Cette valeur permet d'indiquer qu'aucune image ne doit être utilisée pour la bordure. Ce sera le style défini par la propriété `border-style` qui sera utilisé.

`<image>`

Une référence vers l'Image qu'on souhaite utiliser pour dessiner la bordure. Voir `<image>`.

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

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| Applicabilité | tous les éléments sauf les éléments de table internes lorsque `border-collapse` vaut `collapse`. S'applique aussi à `::first-letter`. |
| Héritée | non |
| Valeur calculée | `none` ou l'image avec son URI rendue absolue |
| Type d'animation | discrète |

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

border-image-source =   
  none     |  
  <image>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Exemples
--------

Voir la page de la propriété raccourcie `border-image` et les différents exemples.

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image-source |

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

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

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

* `border`
* `outline`
* `box-shadow`
* `background-image`
* `url()`
font-kerning
============

La propriété **`font-kerning`** contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est *bien crénée*, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable.
 ![Exemple pour font-kerning](/fr/docs/Web/CSS/font-kerning/font-kerning.png)


```css
font-kerning: auto;
font-kerning: normal;
font-kerning: none;

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

Syntaxe
-------

### Valeurs

`auto`

Ce mot-clé laisse au navigateur le choix d'utiliser ou non le crénage. Quand la taille de la police est petite, le crénage de la police peut avoir l'air étrange et les navigateurs le désactiveront. C'est la valeur par défaut.

`normal`

Ce mot-clé force l'application du crénage.

`none`

Ce mot-clé empêche le navigateur d'utiliser l'information de crénage stockée dans la police.

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-kerning =   
  auto    |  
  normal  |  
  none      
  
```

Exemples
--------

### CSS


```css
#nokern,
#kern {
  font-size: 2rem;
  font-family: serif;
}
#nokern {
  font-kerning: none;
}
#kern {
  font-kerning: normal;
}
```

### HTML


```html
<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>
```

### JavaScript


```js
var input = document.getElementById("input"),
  kern = document.getElementById("kern"),
  nokern = document.getElementById("nokern");
input.addEventListener("keyup", function () {
  kern.textContent = input.value; /\* On met à jour le contenu \*/
  nokern.textContent = input.value;
});
kern.textContent = input.value; /\* On initialise le contenu \*/
nokern.textContent = input.value;
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-kerning-prop |

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

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

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

* `font-variant`
* `font-variant-position`
* `font-variant-east-asian`
* `font-variant-caps`
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-alternates`
* `font-synthesis`
* `letter-spacing`.
border-top-color
================

La propriété **`border-top-color`** définit la couleur utilisée pour la bordure haute d'un élément.

Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies `border-color` et/ou `border-top`.

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

Syntaxe
-------


```css
/\* Valeurs de type <color> \*/
border-top-color: red;
border-top-color: #ffbb00;
border-top-color: rgb(255, 0, 0);
border-top-color: hsla(100%, 50%, 25%, 0.75);
border-top-color: currentColor;
border-top-color: transparent;

/\* Valeurs globales \*/
border-top-color: inherit;
border-top-color: initial;
border-top-color: unset;
```

### Valeurs

`<color>`

Une valeur de couleur (type `<color>`) qui décrit la couleur utilisée pour la bordure du côté haut.

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

|  |  |
| --- | --- |
| Valeur initiale | `currentcolor` |
| Applicabilité | tous les éléments. S'applique aussi à `::first-letter`. |
| Héritée | non |
| Valeur calculée | couleur calculée |
| Type d'animation | une couleur |

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

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

Exemples
--------

### CSS


```css
.maboite {
  border: solid 0.3em gold;
  border-top-color: red;
  width: auto;
}

.texterouge {
  color: red;
}
```

### HTML


```html
<div class="maboite">
  <p>
    Une boîte avec une bordure autour. Notez le côté de la boîte qui est
    <span class="texterouge">rouge</span>.
  </p>
</div>
```

### Résultat

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-color |

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

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

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

* Les propriétés raccourciées liées aux bordures
    + `border`,
    + `border-top`,
    + `border-color`.
* Les propriétés de couleur pour les autres bordures :
    + `border-right-color`,
    + `border-bottom-color`,
    + `border-left-color`.
* Les autres propriétés liées à la bordure du haut :
    + `border-top-style`,
    + `border-top-width`.
CSS Ruby
========

***CSS Ruby Layout*** est un module CSS qui fournit des propriétés de contrôle pour le rendu et la mise en forme des annotations Ruby utilisées dans les documents d'Asie orientale afin d'indiquer la prononciation ou d'annoter le texte de base.

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

### Propriétés

* `ruby-align`
* `ruby-position`
Spécifications
--------------

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1  |
:visited
========

La pseudo-classe **`:visited`** permet de modifier l'aspect d'un lien après que l'utilisateur l'a visité. Pour des raisons relatives à la vie privée, les propriétés qui peuvent être utilisées sont restreintes.


```css
a:visited {
  color: #4b2f89;
}
```


Cette mise en forme peut être écrasée par toute autre pseudo-classe liée aux liens (`:link`, `:hover`, et `:active`) qui apparaîtrait dans les règles CSS suivantes. Il est donc important de bien ordonner les pseudo-classes pour une bonne mise en forme : `:visited` doit être utilisée après une règle basée sur `:link`, mais avant les autres (`:link` — `:visited` — `:hover` — `:active`).

Restrictions
------------

Pour des raisons de vie privée, les navigateurs limitent les propriétés qui peuvent être appliquées à cette pseudo-classe :

* Les propriétés CSS autorisées sont `color`, `background-color`, `border-color`, `border-bottom-color`, `border-left-color`, `border-right-color`, `border-top-color`, `outline-color`, `column-rule-color`
* Les attributs SVG autorisés sont `fill` and `stroke`.
* La composante alpha sera ignorée : la composante alpha d'un lien non-visité est utilisé à la place (sauf quand l'opacité est `0`, dans ce cas, toute la couleur est ignorée, ainsi que celle de la règle non-visité).
* Bien qu'on puisse modifier la couleur d'un lien, la méthode `window.getComputedStyle` mentira et indiquera toujours la valeur de la couleur de la règle pour les liens non-visités.

Pour d'autres informations sur ces limitations et leurs raisons d'être, se référer à l 'article Vie privée et le sélecteur `:visited`.

Syntaxe
-------

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

### CSS


```css
a:visited {
  color: #00ff00;
}
```

### HTML


```html
<p>
  <a href="https://developer.mozilla.org/fr/docs/Web/CSS/:visited">
    Cette page est visitée
  </a>
</p>
<p>
  <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/">
    Essayez celle-ci peut-être ?
  </a>
</p>
```

### Résultat

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

| Specification |
| --- |
| HTML Standard # selector-visited |
| Selectors Level 4 # link |

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

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

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

* Vie privée et le sélecteur `:visited`
* Les pseudo-classes relatives aux liens :
    + `:link`,
    + `:visited`,
    + `:hover`,
    + `:active`.
scroll-margin-left
==================

La propriété **`scroll-margin-left`** définit la marge de défilement de l'élément sur le côté gauche. 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.

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

Syntaxe
-------


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

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

### Valeurs

`<length>`

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

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

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

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

scroll-margin-left =   
  <length>    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-physical |

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

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

La règle @ **`@import`** est utilisée afin d'importer des règles à partir d'autres feuilles de style. Ces règles @ doivent être utilisées avant toutes les autres règles, à l'exception de `@charset`. `@import` n'est pas une instruction imbriquée et ne peut donc pas être utilisée à l'intérieur de groupe de règles conditionnelles.


```css
@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import "custom.css";
@import url("chrome://communicator/skin/");
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);
```


Afin que les agents utilisateurs évitent de récupérer des ressources pour des types de média qui ne sont pas pris en charge, les auteurs peuvent définir des règles `@import` spécifiques à chaque média. Ces imports conditionnels comportent une liste de requête média séparées par des virgules, situées après l'URL. Si aucune requête média n'est indiquée, l'import est inconditionnel. Cela aura le même effet que d'utiliser la requête média `all`.

Syntaxe
-------
```

@import url;
@import url liste-requetes-media;
```


où on a :

`url`

Une valeur de type `<string>` ou `<url>()` qui représente l'emplacement de la ressource qu'on souhaite importer. L'URL peut être absolue ou relative. On notera que, pour un paquet Mozilla, l'URL ne pointe pas nécessairement vers un fichier, elle peut simplement définir le nom du paquet et la partie utilisée, le fichier approprié sera alors choisi automatiquement (e.g. **chrome://communicator/skin/**). Voir cet article pour plus d'informations.

`liste-requetes-media`

Une liste de requêtes média séparées par des virgules qui conditionnent l'application des règles CSS pour l'URL associée. Si le navigateur ne prend en charge aucune des requêtes indiquées, il ne charge pas la ressource associée.

### Syntaxe formelle
```

@import =   
  @import [ <url> | <string> ] [ layer | layer( <layer-name> ) ]? <import-conditions> ;    
  
<url> =   
  <url()>  |  
  <src()>    
  
<layer-name> =   
  <ident> (en-US) [ '.' <ident> (en-US) ]\*    
  
<import-conditions> =   
  [ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>?    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
<supports-condition> =   
  not <supports-in-parens>                            |  
  <supports-in-parens> [ and <supports-in-parens> ]\*  |  
  <supports-in-parens> [ or <supports-in-parens> ]\*     
  
<supports-in-parens> =   
  ( <supports-condition> )  |  
  <supports-feature>        |  
  <general-enclosed>          
  
<supports-feature> =   
  <supports-decl>    
  
<general-enclosed> =   
  [ <function-token> <any-value>? ) ]  |  
  [ ( <any-value>? ) ]                   
  
<supports-decl> =   
  ( <declaration> )    
  
```

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # at-import |

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

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