recursal/MDN huggingface dataset:
grid-template-areas
===================

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 propriété **`grid-template-areas`** permet de définir des zones de grille nommées.

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

Ces zones ne sont pas associées à un objet de la grille mais peuvent être utilisées avec les propriétés de placement : `grid-row-start`, `grid-row-end`, `grid-column-start`, `grid-column-end` et les méthodes de raccourci correspondantes `grid-row`, `grid-column`, and `grid-area`.

Syntaxe
-------


```css
/\* Valeur avec un mot-clé \*/
grid-template-areas: none;

/\* Valeurs de chaînes \*/
/\* Type <string> \*/
grid-template-areas: "a b";
grid-template-areas:
  "a b b"
  "a c d";

/\* Valeurs globales \*/
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: unset;
```

### Valeurs

`none`

Le conteneur de grille ne définit aucune zone de grille nommée.

`<string>+`

Un ligne est créée pour chaque chaîne. Une colonne est créée pour chaque composant de la chaîne de caractères. Si on a un même composant réutilisé sur différentes lignes, cela créera une cellule sur les différentes lignes et colonnes. Il est nécessaire que ces cellules forment un rectangle, sinon, la déclaration est invalide. Voir `<string>` pour plus d'informations sur les valeurs de ce type.

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

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| Applicabilité | conteneurs de grille |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

grid-template-areas =   
  none       |  
  <string>+    
  
```

Exemple
-------

### HTML


```html
<section id="page">
  <header>En-tête</header>
  <nav>Navigation</nav>
  <main>Zone principale</main>
  <footer>Pied de page</footer>
</section>
```

### CSS


```css
#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav main"
    "nav foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-template-areas-property |

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

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

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

* `grid-template-rows`
* `grid-template-columns`
* `grid-template`
* Guide : les zones des grilles CSS
* Tutoriel vidéo : les zones des grilles CSS (en anglais)
:any-link
=========

La pseudo-classe **`:any-link`** permet de représenter un élément qui agit comme la source de l'ancre d'un hyperlien (qu'il ait été visité ou non). Elle permet donc de cibler les éléments `<a>`, `<area>` ou `<link>` avec un attribut `href`. Autrement dit, elle cible les éléments qui correspondent à `:link` ou à `:visited`.


```css
/\* cible tous les éléments qui seraient ciblés par \*/
/\* :link ou :visited \*/
:any-link {
  color: green;
  font-weight: bold;
}
```

Syntaxe
-------

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

### CSS


```css
:any-link {
  color: green;
  font-weight: bold;
}

/\* Pour les navigateurs WebKit \*/
:-webkit-any-link {
  color: green;
  font-weight: bold;
}
```

### HTML


```html
<a href="https://mozilla.org">Une page différente</a><br />
<a href="#">Une ancre</a><br />
<a>Un lien sans cible (n'est pas mis en forme)</a>
```

### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # the-any-link-pseudo |

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

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

***CSS Conditional Rules*** (ou règles conditionnelles CSS) est un module CSS qui permet de définir un ensemble de règles qui ne s'appliqueront qu'en fonction des capacités du processeur ou du document auquel la feuille de styles est appliquée.

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

### Règles @

* `@document`
* `@media`
* `@supports`
* `@import`
Spécifications
--------------

| Specification |
| --- |
| CSS Conditional Rules Module Level 5  |
| CSS Conditional Rules Module Level 4  |
| CSS Conditional Rules Module Level 3  |

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

{{Compat}}
::-moz-range-thumb
==================

**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-range-thumb`** représente le curseur qui se déplace le long de la piste dans un élément `<input>` de type `range` et qui permet de modifier la valeur numérique associée.

**Note :** Utiliser `::-moz-range-thumb` avec un autre élément que `<input type="range">` n'aura aucun effet.

Syntaxe
-------

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

### HTML


```html
<input type="range" min="0" max="100" step="5" value="50" />
```

### CSS


```css
input[type="range"]::-moz-range-thumb {
  background-color: green;
}
```

### Résultat

Une barre de progression mise en forme avec ces règles devrait ressembler à :

![Un élément 'input type=range' avec un curseur vert](/fr/docs/Web/CSS/::-moz-range-thumb/screen_shot_2015-12-04_at_13.30.08.png)

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

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla 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
----------

* Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments `<input>` de type `range` :
    + `::-moz-range-track`
    + `::-moz-range-progress`
* Les pseudo-éléments utilisés par les autres navigateurs :
    + `::-webkit-slider-thumb` pour WebKit/Blink (Safari, Chrome et Opera).
    + `::-ms-thumb` pour Internet Explorer/Edge.
* CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)
* QuirksMode : Mettre en forme les pistes et curseurs (en anglais)
:-moz-handler-disabled
======================

**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-handler-disabled`** permet de cibler un élément qui ne peut pas être affiché car le gestionnaire associé a été désactivé par l'utilisateur.

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

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-handler-blocked`
* `:-moz-handler-crashed`
border-block-start-color
========================

**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-color`** définit la couleur de la bordure pour le côté du début de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés `border-top-color`, `border-right-color`, `border-bottom-color` ou `border-left-color` selon les valeurs des propriétés `writing-mode`, `direction` et `text-orientation`.

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

Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :

* `border-block-end-color`,
* `border-inline-end-color`,
* `border-inline-start-color`.
Syntaxe
-------


```css
border-block-start-color: red;
border-block-start-color: #fffff;
border-block-start-color: rgb(200, 0, 0);

border-block-start-color: unset;
border-block-start-color: initial;
border-block-start-color: inherit;
```

### Valeurs

`<'border-color'>`

Voir `border-color`

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

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

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

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

Exemples
--------

### CSS


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

.exemple {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-start-color: red;
}
```

### HTML


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

### Résultat

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # 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 physiques correspondantes :
    + `border-top-color`,
    + `border-right-color`,
    + `border-bottom-color`,
    + `border-left-color`.
* `writing-mode`, `direction`, `text-orientation`
Filter Effects
==============

***Filter Effects*** ou « module des effets de filtre » (ou plus communément « filtres CSS ») est un module de la spécification CSS qui définit une façon de traiter le rendu d'un élément avant que celui-ci soit affiché dans le document.

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

### Propriétés

* `backdrop-filter`
* `filter`
### Types de données

* `<filter-function>`
Spécifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 2  |
| Filter Effects Module Level 1  |

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

{{Compat}}
scroll-padding-bottom
=====================

La propriété **`scroll-padding-bottom`** est une propriété qui permet de définir le remplissage sur le côté bas entre l'élément et la zone de défilement.

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.

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

Syntaxe
-------


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

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

/\* Valeurs globales \*/
scroll-padding-bottom: inherit;
scroll-padding-bottom: initial;
scroll-padding-bottom: 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 | `auto` |
| Applicabilité | conteneurs d'ascenseurs |
| Héritée | non |
| Pourcentages | relative to the scroll container's scrollport |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |

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

scroll-padding-bottom =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
border-inline-start-width
=========================

**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-inline-start-width`** définit la largeur de la bordure pour le côté du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à `border-top-width`, `border-right-width`, `border-bottom-width` ou a `border-left-width` selon les valeurs des propriétés pour `writing-mode`, `direction` et `text-orientation`.

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

Cette propriété logique est à rapprocher des autres propriétés logiques `border-block-start-width`, `border-block-end-width` et `border-inline-end-width` qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.

Syntaxe
-------


```css
/\* Valeur de longueur \*/
/\* Type <length> \*/
border-inline-start-width: 5px;
border-inline-start-width: thick;
```

### Valeurs

`<'border-width'>`

La largeur de la bordure, voir `border-width`.

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

|  |  |
| --- | --- |
| Valeur initiale | `medium` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Pourcentages | largeur logique du bloc englobant |
| Valeur calculée | une longueur absolue ; `0` si le style de la bordure vaut `none` ou `hidden` |
| Type d'animation | by computed value type |

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

border-inline-start-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

Exemples
--------

### CSS


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

.exemple {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-inline-start-width: 5px;
}
```

### HTML


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

### Résultat

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

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

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-width`
    + `border-right-width`
    + `border-bottom-width`
    + `border-left-width`
* `writing-mode`, `direction`, `text-orientation`
scroll-margin-inline-start
==========================

La propriété **`scroll-margin-inline-start`** définit la marge de défilement de l'élément sur le début de l'axe en ligne. 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-inline-start: 10px;
scroll-margin-inline-start: 1em;

/\* Valeurs globales \*/
scroll-margin-inline-start: inherit;
scroll-margin-inline-start: initial;
scroll-margin-inline-start: 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-inline-start =   
  <length>    
  
```

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

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

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

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

La propriété CSS **`mask-clip`** définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone.


```css
/\* Valeurs de type <geometry-box> \*/
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: margin-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;

/\* Valeurs avec un mot-clé \*/
mask-clip: no-clip;

/\* Mots-clés non-standards \*/
-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;

/\* Valeurs multiples \*/
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;

/\* Valeurs globales \*/
mask-clip: inherit;
mask-clip: initial;
mask-clip: revert;
mask-clip: unset;
```

Syntaxe
-------

Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.

### Valeurs

`content-box`

La partie qui est peinte est rognée sur la boîte de contenu.

`padding-box`

La partie qui est peinte est rognée sur la boîte de remplissage (*padding*).

`border-box`

La partie qui est peinte est rognée sur la boîte de bordure.

`margin-box`

La partie qui est peinte est rognée sur la boîte de marge.

`fill-box`

La partie qui est peinte est rognée sur la boîte contenant l'objet.

`stroke-box`

La partie qui est peinte est rognée sur la boîte contenant le contour.

`view-box`

C'est le *viewport* du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut `viewBox` est défini pour l'élément qui crée le *viewport*, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut `viewBox` et les dimensions de la boîte sont basées sur la hauteur et la largeur de l'attribut `viewBox`.

`no-clip`

La partie qui est peinte n'est pas rognée.

`border` 
Non-standard

Synonyme de `border-box`.

`padding` 
Non-standard

Synonyme de `padding-box`.

`content` 
Non-standard

Synonyme de `content-box`.

`text` 
Non-standard

L'image est rognée selon la forme du texte de l'élément.

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

|  |  |
| --- | --- |
| Valeur initiale | `border-box` |
| Applicabilité | tous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments `defs` et des éléments graphiques |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

mask-clip =   
  [ <coord-box> | no-clip ]#    
  
<coord-box> =   
  <paint-box>  |  
  view-box       
  
<paint-box> =   
  <visual-box>  |  
  fill-box      |  
  stroke-box      
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```

Exemples
--------

Vous pouvez modifier la valeur `mask-clip` dans l'exemple qui suit. Si vous utilisez un navigateur basé sur Chromium, modifiez la valeur de `-webkit-mask-clip`.

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-clip |

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

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

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

* Rognage et masquage en CSS (en anglais)
text-decoration-style
=====================

La propriété **`text-decoration-style`** définit le style appliqué sur les lignes visées par `text-decoration-line`. Le style s'applique à toutes les lignes définies avec `text-decoration-line`.

**Note :** Il n'existe pas de méthode permettant de mettre en forme les lignes décorées différemment les unes des autres.

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

Si la mise en forme appliquée possède une sémantique forte (par exemple barrer le texte pour indiquer qu'il a été supprimé), on recommande aux auteurs d'utiliser les balises HTML associées si elles existent (par exemple `<del>` ou `
`). Les navigateurs peuvent parfois désactiver la mise en forme et ces éléments permettent de conserver la sémantique du contenu quoi qu'il arrive.

La propriété raccourcie `text-decoration` permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.

Syntaxe
-------


```css
/\* Valeurs avec des mots-clés \*/
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

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

### Valeurs

`solid`

Dessine une ligne.

`double`

Dessine une double-ligne.

`dotted`

Dessiner une ligne avec des points.

`dashed`

Dessine une ligne avec des tirets.

`wavy`

Dessine une ligne ondulée.

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

|  |  |
| --- | --- |
| Valeur initiale | `solid` |
| Applicabilité | tous les éléments. S'applique aussi à `::first-letter` et `::first-line`. |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

text-decoration-style =   
  solid   |  
  double  |  
  dotted  |  
  dashed  |  
  wavy      
  
```

Exemples
--------

### CSS


```css
.exemple {
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: wavy;
  -moz-text-decoration-color: red;
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-style: wavy;
  -webkit-text-decoration-color: red;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
```

### HTML


```html
<p class="exemple">Et voilà le résultat.</p>
```

### Résultat

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-style-property |

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

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

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

* La propriété raccourcie `text-decoration` qui permet, entre autres, de paramétrer `text-decoration-style`.
CSS Custom Properties for Cascading Variables
=============================================

***CSS Custom Properties for Cascading Variables*** ou « module des propriétés personnalisées pour les variables CSS » est un module de la spécification CSS qui permet de créer des propriétés personnalisées afin de les utiliser à plusieurs endroits, sans avoir à répéter de valeurs.

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

### Propriétés

* `--*`
Spécifications
--------------

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