recursal/MDN huggingface dataset:
border-end-end-radius
=====================

**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-end-end-radius`** définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés `writing-mode`, `direction` et `text-orientation`.


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
/\* Avec une valeur, le coin sera circulaire \*/
border-end-end-radius: 10px;
border-end-end-radius: 1em;

/\* Avec deux valeurs, le coin sera une ellipse \*/
border-end-end-radius: 1em 2em;

/\* Valeurs globales \*/
border-end-end-radius: inherit;
border-end-end-radius: initial;
border-end-end-radius: unset;
```


Ainsi, avec un mode d'écriture `horizontal-tb`, cette propriété logique correspondra à la propriété physique `border-bottom-right-radius`.

Syntaxe
-------

### Valeurs

`<length-percentage>`

Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée `<length>`. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.

### Syntaxe formelle
```

border-end-end-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### CSS


```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-end-radius: 10px;
}

.texteExemple {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-end-end-radius: 10px;
}
```

### HTML


```html
<div>
  <p class="texteExemple">Exemple</p>
</div>
```

### Résultat

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

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

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

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

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

* La propriété physique correspondante : `border-bottom-right-radius`
* `writing-mode`, `direction`, `text-orientation`
text-orientation
================

La propriété **`text-orientation`** définit l'orientation du texte sur une ligne. Cette propriété n'a d'effet qu'en mode vertical (autrement dit, quand `writing-mode` n'est pas `horizontal-tb`). Elle est utile pour contrôler l'affichage de l'écriture pour les langues dont le script est vertical. Elle permet aussi de gérer les en-têtes de tableaux verticaux.

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

Syntaxe

```css
/\* Valeurs avec un mot-clé \*/
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways-left;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

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


La propriété `text-orientation` peut valoir l'un des mots-clés suivants.

### Valeurs

`mixed`

Ce mot-clé permet de tourner les caractères de 90° dans le sens des aiguilles d'une montre pour les scripts horizontaux, les glyphes des scripts verticaux sont affichés normalement. C'est la valeur par défaut.

`upright`

Ce mot-clé permet d'afficher les caractères des scripts horizontaux normalement et d'afficher les glyphes des scripts verticaux « debout ». Ce mot-clé implique que tous les caractères soient considérés comme *ltr* (*left-to-right* ou gauche à droite). La valeur utilisée pour `direction` sera `ltr`, quelle que soit celle définie par l'utilisateur.

`sideways`

Ce mot-clé permet d'afficher les caractères comme s'ils étaient disposés horizontalement et que la ligne de base était tournée de 90° dans le sens des aiguilles d'une montre.

`sideways-right`

Un alias pour `sideways` conservé pour des raisons de compatibilité.

`use-glyph-orientation`

Pour les éléments SVG, ce mot-clé permet d'utiliser la valeur des propriétés SVG dépréciées `glyph-orientation-vertical` et `glyph-orientation-horizontal`.

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

|  |  |
| --- | --- |
| Valeur initiale | `mixed` |
| Applicabilité | tous les éléments exceptés les groupes de lignes, les lignes, les groupes de colonnes et les colonnes de tableaux |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | Not animatable |

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

text-orientation =   
  mixed     |  
  upright   |  
  sideways    
  
```

Exemples
--------

### HTML


```html
<p class="monTexte">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
```

### CSS


```css
.monTexte {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Writing Modes Level 4 # text-orientation |

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

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

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

* `writing-mode`
* `text-combine-upright`
* `unicode-bidi`
padding-block-start
===================

**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é **`padding-block-start`** définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété `padding-top`, `padding-right`, `padding-bottom` ou `padding-left` selon les valeurs qui sont utilisées pour `writing-mode`, `direction` et `text-orientation`.

Elle est à rapprocher des propriétés `padding-block-end`, `padding-inline-start` et `padding-inline-end` qui définissent les autres écarts de remplissage logiques d'un élément.

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

Syntaxe
-------


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

/\* Valeurs de proportions \*/
/\* Type <percentage> \*/
padding-block-start: 5%; /\* Relatif à la largeur du bloc englobant \*/

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

### Valeurs

La propriété `padding-block-start` peut prendre les mêmes valeurs que la propriété `padding-left`.

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

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | tous les éléments exceptés `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` et `table-column` |
| Héritée | non |
| Pourcentages | largeur logique du bloc englobant |
| Valeur calculée | comme `length` |
| Type d'animation | une longueur |

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

padding-block-start =   
  <'padding-top'>    
  
```

Exemples
--------

### HTML


```html
<div>
  <p class="exemple">Texte d'exemple et Lorem et IP sum</p>
</div>
```

### CSS


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

.exemple {
  writing-mode: vertical-lr;
  padding-block-start: 20px;
  background-color: #c8c800;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # padding-properties |

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 :
    + `padding-top`,
    + `padding-right`,
    + `padding-bottom`,
    + `padding-left`
* `writing-mode`,
* `direction`,
* `text-orientation`
::-webkit-slider-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 **`::-webkit-slider-thumb`** représente le curseur que peut déplacer l'utilisateur le long de la piste d'un élément `<input>` de type "`range"` afin de modifier la valeur numérique associée.

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

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

* `::-webkit-slider-runnable-track`
* Les pseudo-éléments analogues utilisés par les autres navigateurs :
    + `::-moz-range-thumb`
    + `::-ms-thumb`
* CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)
text-underline-offset
=====================

La propriété CSS **`text-underline-offset`** définit le décalage de la ligne de décoration du texte par rapport à sa position originale.

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

**Note :** `text-underline-offset` n'est pas une propriété détaillée de `text-decoration`. Bien qu'un élément puisse avoir plusieurs lignes décoratives, `text-underline-offset` n'aura qu'un impact sur le soulignage (et pas sur les autres lignes telles que celles fournies par `text-decoration-line` avec `overline` ou `line-through`).

Syntaxe
-------


```css
/\* Valeur simple \*/
text-underline-offset: none;
text-underline-offset: from-font;
text-underline-offset: 0.2em;

/\* Valeurs globales \*/
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: unset;
```


La propriété `text-underline-offset` est définie avec le mot-clé `none` ou avec une valeur de la liste suivante.

### Valeurs

`auto`

Le navigateur choisit un décalage approprié pour le soulignage.

`from-font`

Si le fichier de fonte inclut des informations quant à un décalage préféré, c'est cette valeur qui sera utilisée. Si le fichier de fonte n'a pas cette information, cette valeur se comportera comme `auto`.

`<length>`

Une longueur (valeur de type `<length>`) indiquant le décalage à utiliser. Il est recommandé d'utiliser des `em` comme unité afin que le décalage suive la taille de la police (quand on zoome par exemple).

### Syntaxe formelle
```

text-underline-offset =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### CSS


```css
p {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
  text-underline-offset: 1em;
}

.deuxlignes {
  text-decoration-line: underline overline;
}
```

### HTML


```html
<p class="uneligne">Voici un texte souligné avec une ligne ondulée rouge !</p>
<p class="deuxlignes">
  Ce texte a une ligne en dessous et une ligne au dessus. Seule la ligne du
  dessous est déplacée.
</p>
```

### Résultat

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

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # underline-offset |

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

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

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

* `text-decoration`
:not
====

La pseudo-classe de négation, **`:not()`**, est une notation fonctionnelle qui prend un sélecteur comme argument. Elle permet de cibler les éléments qui ne sont pas représentés par cet argument. Le sélecteur passé en argument ne doit pas contenir d'autre sélecteur de négation et ne doit pas cibler de pseudo-élément.


```css
/\* Sélectionne n'importe quel élément qui n'est \*/
/\* pas un paragraphe \*/
:not(p) {
  color: blue;
}
```


La spécificité de la pseudo-classe `:not` est la spécificité de son argument. La pseudo-classe de négation n'ajoute pas de spécificité, contrairement aux autres pseudo-classes.

**Note :**

* Attention à ne pas écrire de sélecteurs inutiles à l'aide de cette pseudo-classe. Ainsi, `:not(*)` va exclure tous les éléments et ne sera jamais appliqué.
* À l'inverse, il est possible d'augmenter la spécificitié d'un sélecteur. Ainsi. `toto:not(truc)` ciblera les mêmes éléments que `toto`, mais avec une spécificité plus forte.
* `:not(toto){}` ciblera tout élément qui n'est pas `toto`, **notamment `<html>` et `<body>`**.
* Ce sélecteur ne s'applique qu'à un seul élément. Il ne peut pas être utilisé afin d'exclure tous les ancêtres. Ainsi, `body :not(table) a` s'appliquera aux liens contenus dans un tableau car `<tr>` ne sera pas ciblé par la partie `:not()` du sélecteur.

Syntaxe
-------

La pseudo-classe `:not()` prend en argument une liste d'un ou plusieurs sélecteurs séparés par des virgules. Cette liste ne doit pas contenir d'autre sélecteur de négation ou de pseudo-élément.

**Attention :** la possibilité d'avoir plusieurs sélecteurs est expérimentale et n'est pas encore largement prise en charge.

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

### CSS


```css
/\* Contient tous les paragraphes (p) sauf
 ceux avec le sélecteur de class "classy" \*/
p:not(.classy) {
  color: red;
}

/\* Les balises p sont exclues \*/
/\* Attention, il est nécessaire d'avoir un \*/
/\* combinateur. On ne peut pas écrire ':not(p)' \*/
\*:not(p) {
  color: green;
}

/\* Les éléments qui ne sont pas des paragraphes \*/
/\* et qui n'ont pas la classe "classy" \*/
/\* Note : cette syntaxe n'est pas bien supportée \*/
body :not(.classy, p) {
  font-family: sans-serif;
}
```

### HTML


```html
<p>Un peu de texte.</p>
<p class="classy">Encore du texte.</p>
<span> Et toujours du texte. </span>
```

### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # negation |

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

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

***CSS Shapes*** est un module de spécification CSS qui décrit les formes géométriques. Selon le niveau 1 de cette spécification, les formes CSS peuvent être appliquées aux éléments flottants. Cette spécification définit différentes façon permettant de définir la forme d'un élément flottant afin que les lignes « coulent » autour de la forme plutôt qu'autour du rectangle formé par la boîte de l'élément.

Exemple simple
--------------

Dans l'exemple qui suit, on a une image qui flotte à gauche et la propriété `shape-outside` qui lui est appliquée vaut `circle(50%)`. Ceci crée une forme circulaire autour de laquelle le contenu peut s'inscrire. Les boîtes des lignes pour le texte qui entourent l'image sont donc modifiées.

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

### Propriétés

* `shape-image-threshold`
* `shape-margin`
* `shape-outside`
### Types de donnée

* `<basic-shape>`
Guides
------

* Un aperçu des formes CSS (*CSS Shapes*)
* Les formes appliquées aux différentes boîtes (en-US)
* Des formes simples
* Des formes à partir d'images
* Éditer les contours d'une forme en CSS dans Firefox (en-US)
Ressources externes
-------------------

* Une liste de ressources sur les formes CSS (en anglais)
* *CSS Shapes 101* (en anglais)
* Creating non-rectangular layouts with CSS Shapes (en anglais)
* *How To Use CSS Shapes In Your Web Design* (en anglais)
* *How To Get Started With CSS Shapes* (en anglais)
* *What I Learned In One Weekend With CSS Shapes* (en anglais)
* *CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components* (en anglais)
Spécifications
--------------

| Specification |
| --- |
| CSS Shapes Module Level 1  |
:lang
=====

La pseudo-classe **`:lang`** permet de définir la mise en forme d'un élément selon la langue dans laquelle il est écrit.


```css
/\* Correspond aux paragraphes, uniquement si ceux-ci \*/
/\* sont indiqués comme étant en anglais (en) \*/
p:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
```


**Note :** En HTML, la langue d'un élément est déterminée par l'attribut `lang`, l'élément `<meta>` et d'autres informations comme les en-têtes HTTP ; pour les autres types de documents, d'autres méthodes peuvent être utilisées.

Les chaînes de caractères admissibles pour définir des langues sont définies dans la spécification HTML 4.0.

Syntaxe
-------

### Syntaxe formelle

Error: could not find syntax for this item### Paramètre

`language-code`

La chaîne de caractères (`<string>`) qui définit la langue des éléments qu'on veut sélectionner.

Exemples
--------

Dans cet exemple, la pseudo-classe `:lang` est utilisée pour faire correspondre le parent d'une citation en utilisant `:first-child`. Il ne s'agit pas de la seule solution pour ce type de problème, ni même de la meilleure (qui dépendra du type de document). Les valeurs Unicode sont utilisées pour certains caractères spéciaux de citation.

### CSS


```css
:lang(fr) > Q {
  quotes: "« " " »";
}

:lang(de) > Q {
  quotes: "»" "«" "\2039" "\203A";
}

:lang(en) > Q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
```

### HTML


```html
<div lang="fr">
  <q>
    Cette citation française a
    <q>une citation</q>
    imbriquée.
  </q>
</div>

<div lang="de">
  <q>
    Cette citation allemande a
    <q>une citation</q>
    imbriquée.
  </q>
</div>

<div lang="en">
  <q>
    Cette citation anglaise a
    <q>une citation</q>
    imbriquée.
  </q>
</div>
```

### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # lang-pseudo |

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

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

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

* `:dir`
* L'attribut HTML `lang`
* Propriété `lang` du DOM
* Les codes de langues selon W3C HTML4 (en anglais)
* L'attribut `lang` selon W3C DOM Level 2 HTML (en anglais)
* Les codes de langues BCP 47
:local-link
===========

La pseudo-classe CSS **`:local-link`** représente un lien vers le même document. Il s'agit donc d'un élément qui est l'ancre source d'un lien hypertexte dont la cible est une URL absolue correspondant à l'URL du document contenant l'élément.


```css
/\* Sélectionne n'importe quel <a> ciblant le document courant \*/
a:local-link {
  color: green;
}
```

Syntaxe
-------

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

### HTML


```html
<a href="#target">Voici un lien vers la page courante.</a><br />
<a href="https://example.com">Voici un lien externe</a><br />
```

### CSS


```css
a:local-link {
  color: green;
}
```

### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # local-link-pseudo |

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

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

* Pseudo-classes relatives aux liens : `:link`, `:visited`, `:hover`, `:active`
Sélecteurs d'ID
===============

Un sélecteur d'identifiant (*ID selector*) permet, pour un document HTML, de cibler un élément grâce à la valeur de son attribut `id`. Il faut que la valeur soit exactement la même que celle du sélecteur pour que l'élément soit effectivement ciblé.


```css
/\* L'élément avec l'identifiant id="demo" \*/
#demo {
  border: red 2px solid;
}
```

Syntaxe
-------
```

#valeur_identifiant { déclarations }
```


**Note :** Cela est équivalent à la notation suivante qui utilise un `sélecteur d'attribut`:
```

[id=valeur_identifiant] { déclarations }
```


Exemples
--------

### CSS


```css
#identifie {
  background-color: blue;
}
```

### HTML


```html
<span id="identifie">Voici un span avec du texte.</span>
<span>Et un autre (mais sans identifiant).</span>
```

### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # id-selectors |

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

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

La propriété CSS **`mask-image`** définit l'image qui sera utilisée comme masque pour un élément.

Par défaut, cela signifie que le canal alpha de l'image du masque sera multiplié par le canal alpha de l'élément. Cette combinaison peut être contrôlée avec la propriété `mask-mode`.


```css
/\* Valeur avec un mot-clé \*/
mask-image: none;

/\* Valeur de type <mask-source> \*/
mask-image: url(masks.svg#mask1);

/\* Valeurs de type <image> \*/
mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
mask-image: image(url(mask.png), skyblue);

/\* Gestion de plusieurs masques \*/
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1), transparent);

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

Syntaxe
-------

### Valeurs

`none`

Le masque défini par ce mot-clé sera une image noire transparente.

`<mask-source>`

Une référence `url()` vers un masque SVG (`<mask>`) ou une image CSS.

`<image>`

Une image utilisée pour le masque.

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

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| 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é mais avec les valeurs `url` rendues absolues |
| Type d'animation | discrète |

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

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

Exemples
--------

### Définir une image de masque avec une URL

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

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

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

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

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

* Rognage et masquage avec CSS (en anglais)
* Appliquer des effets à des images avec la propriété CSS `mask-image` (en anglais)