recursal/MDN huggingface dataset:
-webkit-mask-repeat-y
=====================

**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-mask-repeat-y`** définit la façon dont une image de masque est répétée verticalement.


```css
/\* Valeurs avec un mot-clé \*/
-webkit-mask-repeat-y: repeat;
-webkit-mask-repeat-y: no-repeat;
-webkit-mask-repeat-y: space;
-webkit-mask-repeat-y: round;

/\* Valeurs multiples \*/
-webkit-mask-repeat-y: repeat, no-repeat, space;

/\* Valeurs globales \*/
-webkit-mask-repeat-y: inherit;
-webkit-mask-repeat-y: initial;
-webkit-mask-repeat-y: unset;
```

Syntaxe
-------

### Valeurs

`repeat`

L'image de masque est répétée verticalement.

`no-repeat`

L'image de masque n'est pas répétée verticalement, seul un exemplaire est dessiné selon l'axe vertical. Le contenu restant sur l'axe vertical pour les éléments masqués n'est pas affiché.

`space`

L'image est répétée tant que possible sans être rognée. La première et la dernière images sont accolées aux bords bas et haut de l'élément et l'espace restant est réparti entre les copies de l'image. La propriété `mask-position` est ignorée sauf si une seule image peut être affichée sans qu'il n'y ait de rognage. On aura uniquement du rognage s'il n'y a pas suffisamment d'espace pour afficher une seule image.

`round`

L'image est repétée et les différents exemplaires sont tous étirés de la même façon afin qu'il n'y ait pas d'espace entre chaque. Ainsi, une image qui mesure originellement 260px et qui est répétée trois fois pourra être étirée jusqu'à ce que chaque répétition soit haute de 300px, ensuite une autre image sera ajoutée et toutes seront compressées à 225px.

### Syntaxe formelle

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


```css
.exempleun {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-y: repeat;
}

.exempledeux {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-y: no-repeat;
}
```

### Gestion de plusieurs images

On peut définir un style de répétition (`<repeat-style>`) différent pour chacune des images de masque en séparant les valeurs par des virgules :


```css
.exempletrois {
  -webkit-mask-image: url("mask1.png"), url("mask2.png");
  -webkit-mask-repeat-y: repeat, space;
}
```


Chaque image aura la valeur associée, dans le même ordre.

|  |  |
| --- | --- |
| Valeur initiale | `repeat` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | pour `length`, la valeur absolue, sinon un pourcentage |
| 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
----------

* `-webkit-mask-repeat` (en-US),
* `-webkit-mask-repeat-x`
offset-distance
===============

Baseline 2023
-------------

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**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é **`offset-distance`** définit une position le long d'un chemin `offset-path`.

Syntaxe
-------


```css
/\* Valeur par défaut \*/
offset-distance: 0;

/\* La position à la moitié de offset-path \*/
offset-distance: 50%;

/\* Une position absolue le long du chemin \*/
offset-distance: 40px;
```


``<length-percentage>``

Une longueur qui définit l'emplacement de l'élément le long du chemin (défini par `offset-path`). La valeur 100% représente la longueur totale du chemin (lorsque `offset-path` est défini par une forme simple ou grâce à la fonction `path()`).

### Syntaxe formelle
```

offset-distance =   
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### Animation

La notion de mouvement contenue dans *CSS Motion Path* vient principalement de la propriété `offset-distance`. Si on souhaite animer un élément le long du chemin, on définira un chemin avec `offset-path` et on utilisera une animation qui fera évoluer `offset-distance` de `0%` à `100%`.

#### HTML


```html
<div id="motion-demo"></div>
```


#### CSS


```css
#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
```


#### Résultat

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

| Specification |
| --- |
| Motion Path Module Level 1 # offset-distance-property |

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

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

**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é **`rotate`** permet d'indiquer des rotations individuellement et indépendamment de la propriété `transform`. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour `transform`.

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
rotate: none;

/\* Valeur angulaire \*/
rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;

/\* Un axe x, y, z et l'angle associé \*/
rotate: x 90deg;
rotate: y 0.25turn;
rotate: z 1.57rad;

/\* Un vector et l'angle associé \*/
rotate: 1 1 1 90deg;
```

### Valeurs

Valeur angulaire

Une valeur `<angle>` qui indique l'angle à utiliser, autour de l'axe Z, pour tourner les éléments. Cela est équivalent à la fonction `rotate()`.

Le nom de l'axe et l'angle associé

Le nom de l'axe par rapport auquel on souhaite effectuer la rotation (`"x"`, "`y`" ou "`z"`), puis une valeur `<angle>` qui indique l'angle à appliquer pour la rotation. Cela est équivalent à l'une des fonctions `rotateX()`/`rotateY()`/`rotateZ()`.

Un vecteur et l'angle associé

Trois nombres (valeurs `<number>`) qui représentent une vecteur centré sur l'origine qui définit la ligne autour de laquelle on souhaite faire tourner l'élément puis une valeur `<angle>` qui indique l'angle de rotation. Cela est équivalent à la fonction `rotate3d()`.

`none`

Cette valeur indique qu'aucune rotation ne devrait être appliquée.

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

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| Applicabilité | éléments transformables |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | une transformation |
| Crée un contexte d'empilement | oui |

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

rotate =   
  none                                    |  
  <angle>                                 |  
  [ x | y | z | <number>{3} ] && <angle>    
  
```

Exemples
--------

### HTML


```html
<div>
  <p class="rotate">Rotation</p>
</div>
```

### CSS


```css
\* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  border-radius: 20px;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.rotate {
  transition: rotate 1s;
}

div:hover .rotate {
  rotate: 1 -0.5 1 180deg;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # individual-transforms |

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

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

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

* `translate`
* `scale`
* `transform`
font-language-override
======================

La propriété **`font-language-override`** permet de contrôler l'utilisation des glyphes spécifiques à une langue pour une police.


```css
/\* Valeur avec un mot-clé \*/
font-language-override: normal;

/\* <string> values \*/
font-language-override: "ENG"; /\* Use English glyphs \*/
font-language-override: "TRK"; /\* Use Turkish glyphs \*/
/\* Valeurs globales \*/
font-language-override: initial;
font-language-override: inherit;
font-language-override: unset;
```


Par défaut, les navigateurs utilisent l'attribut global `lang` pour déterminer la langue du texte d'un élément. Grâce à cette information, certains glyphes spéciaux, conçus pour cette langue, peuvent être utilisés. Ainsi, de nombreuses polices possèdent un caractère spécial pour la ligature `fi` afin que le point du `i` fusionne avec le caractère précédent. Cette ligature ne devrait pas être utilisée en turc, car il existe deux formes pour le i, avec et sans point : `i` et `ı`.

Quelques fois, l'auteur d'un document peut vouloir surcharger la langue. Ainsi, si la fonte ne sait pas que la langue azérie possède un i sans point, comme le turc, on pourra utiliser `font-language-override` pour forcer l'utilisation des glyphes turcs qui seront plus adaptés que les glyphes par défaut.

Syntaxe
-------

Cette propriété est définie avec le mot-clé `normal` ou avec une chaîne de caractères (`<string>`).

### Valeurs

`normal`

Ce mot-clé force l'utilisation des glyphes de la langue définie pour cette police.

`<string>`

Cette chaîne de caractère force le navigateur à utiliser les glyphes de la langue correspondante. Les valeurs qui peuvent être utilisées sont les valeurs du système de langue OpenType.

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

|  |  |
| --- | --- |
| Valeur initiale | `normal` |
| 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-language-override =   
  normal    |  
  <string>    
  
```

Exemples
--------

### CSS


```css
p.para1 {
  font-language-override: normal;
}

p.para2 {
  font-language-override: "DAN";
}
```

### HTML


```html
<p class="para1">Réglage par défaut.</p>
<p class="para2">
  Un paragraphe pour lequel <code>font-language-override</code>
  cible le danois
</p>
```

### Résultat

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-language-override-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`
* `font-kerning`
offset-rotate
=============

Baseline 2023
-------------

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**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é **`offset-rotate`** définit l'orientation et la direction de l'élément lorsqu'il est positionné le long du chemin représenté par `offset-path`.

Syntaxe
-------


```css
/\* Suit la direction du chemin avec un éventuel \*/
/\* décalage angulaire \*/
offset-rotate: auto;
offset-rotate: auto 45deg;

/\* Suit la direction du chemin mais orienté dans la
/\* direction opposée \*/
offset-rotate: reverse;

/\* Conserve une rotation constante quelle que soit la position
/\* sur le chemin \*/
offset-rotate: 90deg;
offset-rotate: 0.5turn;
```


`auto`

L'élément est tourné avec l'angle donné par la direction du chemin `offset-path`, relativement à l'axe des abscisses. C'est la valeur par défaut.

``<angle>``

L'élément est tourné d'un angle fixe (indiqué dans le sens horaire).

`auto <angle>`

Si le mot-clé `auto` est suivi d'une valeur `<angle>`, l'élément est tourné de l'angle donné par rapport à la direction du chemin.

`reverse`

L'élément est tourné de façon similaire à `auto`, mais fait face à la direction opposée. Cette valeur est équivalente à `auto 180deg`.

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

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | éléments transformables |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | comme <angle>, <basic-shape> ou <path()> |

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

offset-rotate =   
  [ auto | reverse ]  ||  
  <angle>               
  
```

Exemples
--------

### CSS


```css
div {
  width: 40px;
  height: 40px;
  background: #2bc4a2;
  margin: 20px;
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
  animation: move 5000ms infinite alternate ease-in-out;

  offset-path: path("M20,20 C20,50 180,-10 180,20");
}
div:nth-child(1) {
  offset-rotate: auto;
}
div:nth-child(2) {
  offset-rotate: auto 90deg;
}
div:nth-child(3) {
  offset-rotate: 30deg;
}

@keyframes move {
  100% {
    offset-distance: 100%;
  }
}
```

### HTML


```html
<div></div>
<div></div>
<div></div>
```

### Résultat

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

| Specification |
| --- |
| Motion Path Module Level 1 # offset-rotate-property |

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

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

***CSS Counter Styles*** est un module CSS qui permet de définir ses propres styles pour les compteurs utilisés dans les listes numérotées.

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

### Propriétés

* `counter-increment`
* `counter-reset`
### Règles @

* `@counter-style`
    + `system`
    + `additive-symbols`
    + `negative`
    + `prefix`
    + `suffix`
    + `range`
    + `pad`
    + `speak-as`
    + `fallback`
Guides
------

Manipuler les compteurs CSS

Cet article décrit comment utiliser les compteurs CSS afin de numéroter des éléments HTML et de réaliser des comptages complexes.

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

| Specification |
| --- |
| CSS Counter Styles Level 3  |

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

{{Compat}}
::-webkit-meter-inner-element
=============================

**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-meter-inner-element`** est un pseudo-élément qui permet de sélectionner et d'appliquer des styles au conteneur d'un élément `<meter>`.

Exemples
--------

### CSS


```css
meter {
  /\* Réinitialise l'apparence par défaut \*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

meter::-webkit-meter-inner-element {
  -webkit-appearance: inherit;
  box-sizing: inherit;
  border: 1px solid #aaa;
}
```

### HTML


```html
<meter min="0" max="10" value="6">Score out of 10</meter>
```

### Résultat

**Note :** Cela ne fonctionne que pour les navigateurs Webkit/Blink.

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

Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément `<meter>` :

* `::-webkit-meter-bar`
* `::-webkit-meter-even-less-good-value`
* `::-webkit-meter-optimum-value`
* `::-webkit-meter-suboptimum-value`
border-block-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-color`** définit la couleur de la bordure d'un élément sur les côtés de l'axe de bloc. Cette propriété correspondra à différentes propriétés physiques pour les couleurs de la bordure selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété logique peut correspondre à `border-top-color` et `border-bottom-color` ou à `border-right-color` et `border-left-color` selon les valeurs des propriétés `writing-mode`, `direction` et `text-orientation`.


```css
border-block-color: yellow;
border-block-color: #f5f6f7;
```


Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique `border-inline-color` qui définit `border-inline-start-color` et `border-inline-end-color`.

Syntaxe
-------

### Valeurs

`<'color'>`

La couleur de la bordure. Voir `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-color =   
  <'border-top-color'>{1,2}    
  
```

Exemples
--------

### CSS


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

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

### HTML


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

### Résultat

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-block-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 qui peuvent correspondre à cette propriété :
    + `border-top-color`,
    + `border-right-color`,
    + `border-bottom-color`,
    + `border-left-color`.
* Les propriétés relatives aux propriétés logiques : `writing-mode`, `direction`, `text-orientation`
* bug Firefox 1297097
Sélecteurs enfant
=================

Le combinateur `>` sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants **directs** des éléments ciblés par le premier sélecteur.


```css
/\* Les éléments <li> qui sont des enfant d'un \*/
/\* <ul class="mon-truc"> \*/
ul.mon-truc > li {
  margin: 2em;
}
```


En comparaison, lorsque deux sélecteurs sont combinés à l'aide du sélecteur descendant, l'expression formée par la combinaison des deux sélecteurs cible les éléments correspondant au second sélecteur qui ont un parent de n'importe quel niveau qui correspond au premier sélecteur, quelque soit le nombre de « sauts » dans le DOM.

Syntaxe
-------
```

selecteur1 > selecteur2 { déclarations CSS }
```

Exemples
--------

### CSS


```css
span {
  background-color: white;
}

div > span {
  background-color: blue;
}
```

### HTML


```html
<div>
  <span
 >Premier span du div.
    <span>Deuxième span, dans un span dans un div.</span>
  </span>
</div>
<span>Troisième span, en dehors de tout div.</span>
```

### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # child-combinators |

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

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

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

* Le combinateur de descendant
-webkit-text-stroke-width
=========================

**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-text-stroke-width`** permet de définir l'épaisseur du trait qui entoure les lettres du texte.

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | une longueur (type `length`) absolue |
| Type d'animation | discrète |

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
-webkit-text-stroke-width: thin;
-webkit-text-stroke-width: medium;
-webkit-text-stroke-width: thick;

/\* Valeurs de longueur \*/
/\* Type <length> \*/
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-width: 0.1em;
-webkit-text-stroke-width: 1mm;
-webkit-text-stroke-width: 5pt;

/\* Valeurs globales \*/
-webkit-text-stroke-width: inherit;
-webkit-text-stroke-width: initial;
-webkit-text-stroke-width: unset;
```

### Valeurs

`<line-width>`

La largeur du trait utilisé pour entourer les lettres du texte.

### Syntaxe formelle
```

-webkit-text-stroke-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

Exemples
--------

### CSS


```css
p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-color: red;
}

#thin {
  -webkit-text-stroke-width: thin;
}

#medium {
  -webkit-text-stroke-width: 3px;
}

#thick {
  -webkit-text-stroke-width: 1.5mm;
}
```

### HTML


```html
<p id="thin">Trait fin</p>
<p id="medium">Trait moyen</p>
<p id="thick">Trait épais</p>
```

### Résultat

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

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke-width |

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

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

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

* Le billet de *Surfin' Safari* qui annonce cette fonctionnalité (en anglais)
* L'article de CSS-Tricks à propos de cette fonctionnalité (en anglais)
* `-webkit-text-stroke-color`
* `-webkit-text-stroke`
* `-webkit-text-fill-color`