recursal/MDN huggingface dataset:
ruby-position
=============

**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é **`ruby-position`** définit la position d'un élément ruby par rapport à son élément de base. L'élément ruby peut ainsi être positionné au-dessus de l'élément (`over`), en-dessous (`under`) ou entre les caractères, sur leur droite (`inter-character`).


```css
/\* Valeurs avec un mot-clé \*/
ruby-position: over;
ruby-position: under;
ruby-position: inter-character;

/\* Valeurs globales \*/
ruby-position: inherit;
ruby-position: initial;
ruby-position: unset;
```

Syntaxe
-------

### Valeurs

`over`

Un mot-clé qui indique que les annotations ruby doivent être placée au-dessus du texte pour les scripts horizontaux et à droite pour les scripts verticaux.

`under`

Un mot-clé qui indique que les annotations ruby doivent être placés sous le texte pour les scripts horizontaux et à gauche pour les scripts verticaux.

`inter-character`

Un mot-clé qui indique que les annotations ruby doivent être placées entre les différents caractères.

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

|  |  |
| --- | --- |
| Valeur initiale | `alternate` |
| Applicabilité | annotations ruby des conteneurs |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

ruby-position =   
  [ alternate || [ over | under ] ]  |  
  inter-character                      
  
```

Exemples
--------

Ce fragment HTML rendra un résultat différent pour chaque valeur de `ruby-position` :


```html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```

### Au-dessus du texte
```

<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```



```css
ruby {
  ruby-position: over;
}
```


On obtiendra le résultat suivant :

### En-dessous du texte
```

<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```



```css
ruby {
  ruby-position: under;
}
```


On obtiendra le résultat suivant :

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

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1 # rubypos |

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

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

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

* Les éléments HTML à propos de Ruby : `<ruby>`, `<rt>`, `<rp>` et `<rtc>`.
* Les propriétés CSS à propos de Ruby : `ruby-align`, `ruby-merge`.
Compositing and Blending
========================

***Compositing and Blending*** (Composition et fusion) est un module de la spécification CSS qui définit la façon dont les formes de différents éléments sont combinés afin de former une seule image.

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

### Propriétés

* `background-blend-mode`
* `isolation`
* `mix-blend-mode`
### Types de donnée

* `<blend-mode>`
Spécifications
--------------

| Specification |
| --- |
| Compositing and Blending Level 2  |
| Compositing and Blending Level 1  |

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

{{Compat}}
:-moz-only-whitespace
=====================

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

**Note :** Dans la spécification CSS4 Selectors, le sélecteur `:empty` a été modifié pour se comporter comme `:-moz-only-whitespace` mais aucun navigateur ne prend actuellement en charge cette fonctionnalité.

La pseudo-classe **`:-moz-only-whitespace`** correspond aux éléments qui n'ont aucun nœud enfant, aux nœuds texte vides ou aux nœuds texte ne possédant que des espaces.

Syntaxe
-------

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

### HTML


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

### CSS
```

:root {
  overflow: hidden;
  max-width: 100vw;
  max-height: 100vh;
}

div {
  background-color: #ccc;
  box-sizing: border-box;
  height: 100vh;
  min-height: 16px;
  min-height: 1rem;
}
```



```css
div {
  border: 4px solid red;
}

:-moz-only-whitespace {
  border-color: lime;
}
```

### Résultat

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

#### No specification found

No specification data found for `css.selectors.-moz-only-whitespace`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

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

* `:blank` 
Expérimental
* `:empty`
margin-inline-end
=================

**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é **`margin-inline-end`** définit la marge logique appliquée à la fin des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour `writing-mode`, `direction`, and `text-orientation`, elle peut correspondre à `margin-top`, `margin-right`, `margin-bottom` ou `margin-left`.

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

Cette propriété est à rapprocher de `margin-block-start`, `margin-block-end` et de `margin-inline-start` qui définissent les autres marges appliquées à l'élément.

Syntaxe
-------


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
margin-inline-end: 10px; /\* Une longueur absolue \*/
margin-inline-end: 1em; /\* Une longueur relative à la taille du texte \*/
margin-inline-end: 5%; /\* Une largeur relative à la
 largeur du bloc englobant \*/

/\* Valeurs avec un mot-clé \*/
margin-inline-end: auto;

/\* Valeurs globales \*/
margin-inline-end: inherit;
```

### Valeurs

La propriété `margin-inline-end` peut prendre les mêmes valeurs que la propriété `margin-left`.

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

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | identique à `margin` |
| Héritée | non |
| Pourcentages | dépend du modèle en couches |
| Valeur calculée | si spécifié par une longueur, la valeur absolue correspondante; si spécifié par un pourcentage, la valeur telle que spécifiée; sinon, `auto` |
| Type d'animation | une longueur |

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

margin-inline-end =   
  <'margin-top'>    
  
```

Exemples
--------

### CSS


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

.exemple {
  writing-mode: vertical-lr;
  margin-inline-end: 20px;
  background-color: #c8c800;
}
```

### HTML


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

### Résultat

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # margin-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 :
    + `margin-top`,
    + `margin-right`,
    + `margin-bottom`
    + `margin-left`
* `margin-inline-start`
* `writing-mode`
* `direction`
* `text-orientation`
:-moz-window-inactive
=====================

**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-window-inactive`**, spécifique à Mozilla, correspond à n'importe quel élément qui se trouve sur une fenêtre inactive.

**Note :** Avant l'existence de cette pseudo-classe, on pouvait donner des styles différents aux fenêtres avec l'attribut `active="true"` sur la fenêtre XUL de plus haut niveau. Cet attribut n'est plus utilisé.

`:-moz-window-inactive` fonctionne également pour le contenu des documents HTML.

Exemples
--------

Cet exemple illustre la modification de l'apparence de l'arrière-plan d'une boîte selon que la fenêtre est active ou non.

### CSS


```css
#maboite {
  background: linear-gradient(to bottom, blue, cyan);
}

#maboite:-moz-window-inactive {
  background: cyan;
}
```

### HTML


```html
<div id="maboite" style="width:200px; height:200px;">
  <p>Une boîte :)</p>
</div>
```

### Résultat

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

Cette pseudo-classe est une pseudo-classe propriétaire liée à 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.
:future
=======

Le sélecteur de pseudo-classe CSS **`:future`** est une pseudo-classe agissant dans la dimension temporelle qui cible n'importe quel élément apparaissant entièrement après un élément correspondant à `:current`. Ce sélecteur peut par exemple servir dans le cas d'une vidéo ayant des sous-titres affichés à l'aide du format WebVTT.


```css
:future(p, span) {
  display: none;
}
```

Syntaxe
-------

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

### CSS


```css
:future(p, span) {
  display: none;
}
```

### HTML


```html
<video controls preload="metadata">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <track
 label="Français"
 kind="subtitles"
 srclang="fr"
 src="subtitles.vtt"
 default />
</video>
```

### WebVTT
```

FICHIER WEBVTT

1
00:00:03.500 --> 00:00:05.000
Voici le premier sous-titre

2
00:00:06.000 --> 00:00:09.000
Voici le second sous-titre

3
00:00:11.000 --> 00:00:19.000
Voici le troisième sous-titre
```

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

| Specification |
| --- |
| Selectors Level 4 # the-future-pseudo |

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

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

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

* Web Video Text Tracks Format (WebVTT)
* `:current`
* `:past`
scroll-margin-block-start
=========================

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

/\* Valeurs globales \*/
scroll-margin-block-start: inherit;
scroll-margin-block-start: initial;
scroll-margin-block-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-block-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-border-source
==================

**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é CSS **`mask-border-source`** définit l'image à utiliser pour créer le masque de bordure d'un élément.

C'est la propriété `mask-border-slice` qui est utilisée afin de découper l'image en tranches/régions ensuite appliquées dynamiquement pour créer le masque final.

Syntaxe
-------


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

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

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

### Valeurs

`none`

Aucun masque de bordure n'est utilisé.

`<image>`

Une référence vers une image qu'on utilise pour le masque de la bordure.

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-border-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 `mask-border`.

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border-source |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
border-right-style
==================

La propriété **`border-right-style`** définit le style de ligne utilisé pour mettre en forme la bordure sur le côté droit d'une boîte.

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

**Note :** La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
border-right-style: none;
border-right-style: hidden;
border-right-style: dotted;
border-right-style: dashed;
border-right-style: solid;
border-right-style: double;
border-right-style: groove;
border-right-style: ridge;
border-right-style: inset;
border-right-style: outset;

/\* Valeurs globales \*/
border-right-style: inherit;
border-right-style: initial;
border-right-style: revert;
border-right-style: unset;
```


La propriété `border-right-style` se définit avec l'un des mots-clés utilisés par la propriété `border-style`.

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

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

### Syntaxe formelle
```

border-right-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Exemples
--------

### HTML


```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">petits points</td>
    <td class="b4">tirets</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```

### CSS


```css
/\* On applique un style sur le tableau \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* Des exemples pour border-right-style \*/
.b1 {
  border-right-style: none;
}
.b2 {
  border-right-style: hidden;
}
.b3 {
  border-right-style: dotted;
}
.b4 {
  border-right-style: dashed;
}
.b5 {
  border-right-style: solid;
}
.b6 {
  border-right-style: double;
}
.b7 {
  border-right-style: groove;
}
.b8 {
  border-right-style: ridge;
}
.b9 {
  border-right-style: inset;
}
.b10 {
  border-right-style: outset;
}
```

### Résultat

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

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

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

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

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

* Les autres propriétés liées au style des bordures : `border-left-style`, `border-top-style`, `border-bottom-style`, `border-style`.
* Les autres propriétés liées à la bordure droite : `border-right`, `border-right-color`, `border-right-width`.
<display-listitem>
==================

Le mot-clé `list-item` permet à un élément de générer un pseudo-élément `::marker` dont le contenu est défini par les propriétés `list-style` (pour afficher une puce par exemple) avec une boîte principale du type indiquée pour organiser le contenu de l'élément.

Syntaxe
-------

Une valeur `list-item` indiquera à l'élément de se comporter comme un élément d'une liste. Cette valeur peut être utilisée avec les propriétés `list-style-type` et `list-style-position`.

**Note :** Pour les navigateurs qui prennent en charge la syntaxe avec deux valeurs, si aucune valeur pour le mode intérieur n'est indiquée, sa valeur par défaut sera `flow`. Si aucune valeur n'est fournie pour le mode extérieur, la boîte principale aura un mode extérieur `block`.

### Syntaxe formelle
```

<display-listitem> =   
  <display-outside>?     &&  
  [ flow | flow-root ]?  &&  
  list-item                
  
<display-outside> =   
  block   |  
  inline  |  
  run-in    
  
```

Exemples
--------

### CSS


```css
.fausse-liste {
  display: list-item;
  list-style-position: inside;
}
```

### HTML


```html
<div class="fausse-liste">Je vais m'afficher comme un élément de liste</div>
```

### Résultat

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

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

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

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`
mask-type
=========

La propriété **`mask-type`** définit si un masque sera utilisé comme un masque de *luminance* ou comme un masque de transparence (aussi appelé masque *alpha*). Cette propriété s'applique sur l'élément SVG `<mask>`. Le comportement de cette propriété peut être surchargée par la propriété `mask-mode` qui définit sur quel élément le masque est appliqué. De façon générale, les masques alpha sont appliqués plus rapidement que les masques de luminance.


```css
/\* Valeurs avec un mot-clé \*/
mask-type: luminance;
mask-type: alpha;

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

Syntaxe
-------

La propriété `mask-type` est définie avec un mot-clé parmi ceux définis ci-après.

### Valeurs

`luminance`

Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de luminance. Autrement dit, ce sont les valeurs de luminance relatives qui seront utilisées lorsque le masque sera appliqué.

`alpha`

Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de transparence. Autrement dit, ce sont les valeurs du canal alpha de l'image qui seront utilisées lorsque le masque sera appliqué.

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

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

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

mask-type =   
  luminance  |  
  alpha        
  
```

Exemples
--------

### Définir un masque alpha

#### HTML


```html
<div class="redsquare"></div>
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="0"
 height="0">
  <defs>
    <mask id="m" maskContentUnits="objectBoundingBox" style="mask-type:alpha">
      <rect
 x=".1"
 y=".1"
 width=".8"
 height=".8"
 fill="red"
 fill-opacity="0.7" />
    </mask>
  </defs>
</svg>
```


#### CSS


```css
.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128, 128, 128);
  border: solid 1px black;
  mask: url("#m");
}
```


#### Résultat

### Définir un masque de luminance

#### HTML


```html
<div class="redsquare"></div>
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="0"
 height="0">
  <defs>
    <mask
 id="m"
 maskContentUnits="objectBoundingBox"
 style="mask-type:luminance">
      <rect
 x=".1"
 y=".1"
 width=".8"
 height=".8"
 fill="red"
 fill-opacity="0.7" />
    </mask>
  </defs>
</svg>
```


#### CSS


```css
.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128, 128, 128);
  border: solid 1px black;
  mask: url("#m");
}
```


#### Résultat

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

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

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

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

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

* `mask`
* `mask-mode`