recursal/MDN huggingface dataset:
text-align-last
===============

La propriété **`text-align-last`** définit la façon dont la dernière ligne d'un bloc, ou une ligne avant un retour à la ligne forcé, doit être alignée.

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

Syntaxe
-------


```css
/\* Valeurs utilisant un mot-clé \*/
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;

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

### Valeurs

`auto`

La ligne concernée est alignée selon la valeur de `text-align` sauf si `text-align` vaut `justify`, auquel cas, cela aura le même effet que d'utiliser la valeur `start` pour `text-align-last`.

`start`

Cette valeur a le même effet que la valeur `left` si la direction du texte va de gauche à droite ou le même effet que `right` si la direction du texte va de droite à gauche.

`end`

Cette valeur a le même effet que la valeur `right` si la direction du texte va de gauche à droite ou le même effet que `left` si la direction du texte va de droite à gauche.

`left`

Les contenus en ligne (*inline*) sont alignés sur le bord gauche de la boîte contenant la ligne.

`right`

Les contenus en ligne (*inline*) sont alignés sur le bord droit de la boîte contenant la ligne.

`center`

Les contenus en ligne (*inline*) sont horizontalement centrés par rapport à la boîte contenant la ligne.

`justify`

Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe.

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

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | conteneurs de type bloc |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

text-align-last =   
  auto          |  
  start         |  
  end           |  
  left          |  
  right         |  
  center        |  
  justify       |  
  match-parent    
  
```

Exemples
--------

### HTML


```html
<p class="exemple">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
```

### CSS


```css
.exemple {
  text-align: justify;
  text-align-last: center;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Text Module Level 3 # text-align-last-property |

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

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

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

* `text-align`
initial-letter
==============

**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é **`initial-letter`** permet de définir la mise en forme pour les lettrines (qu'elles soient abaissées, surélevées ou autre).


```css
/\* Valeurs avec un mot-clé \*/
initial-letter: normal;

/\* Valeurs numériques \*/
/\* Types <number> puis <integer> \*/
initial-letter: 1.5; /\* La première lettre occupe 1.5 lignes \*/
initial-letter: 3; /\* La première lettre occupe 3 lignes \*/
initial-letter: 3 2; /\* La première lettre occupe 3 lignes et
 s'enfonce de deux lignes vers le bas \*/

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

Syntaxe
-------

La valeur de cette propriété peut être le mot-clé `normal` ou un nombre (`<number>`) éventuellement suivi d'un entier (`<integer>`).

### Valeurs

`normal`

Le texte se comporte de façon normale et on n'a pas de lettrines.

`<number>`

Cet argument définit le facteur de taille appliqué pour calculer la taille de la première lettre par rapport à la taille de la ligne du texte. Les valeurs négatives ne sont pas autorisées.

`<integer>`

Cet argument définit le nombre de lignes dont s'enfoncera la lettrine vers le bas. La valeur utilisée doit être supérieure à 0. Si cet argument est absent, on dupliquera la valeur du premier argument, arrondi vers le bas à l'entier positif le plus proche.

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

|  |  |
| --- | --- |
| Valeur initiale | `normal` |
| Applicabilité | pseudo-éléments `::first-letter` et le premier fils, en ligne (*inline*) d'un conteneur de bloc |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |

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

initial-letter =   
  normal                               |  
  <number [1,∞]> <integer [1,∞]>       |  
  <number [1,∞]> && [ drop | raise ]?    
  
```

Exemples
--------

### CSS


```css
.exemple {
  -webkit-initial-letter: 3 2;
  initial-letter: 3 2;
}
```

### HTML


```html
<p class="exemple">
  Un grand rosier se trouvait à l’entrée du jardin&nbsp;; les roses qu’il
  portait étaient blanches, mais trois jardiniers étaient en train de les
  peindre en rouge.
</p>
```

### Résultat

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

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # sizing-drop-initials |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
border-start-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-start-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-start-end-radius: 10px;
border-start-end-radius: 1em;

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

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


Ainsi, avec un mode d'écriture `horizontal-tb`, cette propriété logique correspondra à la propriété physique `border-bottom-left-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-start-end-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### CSS


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

.texteExemple {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-start-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-left-radius`
* `writing-mode`, `direction`, `text-orientation`
:enabled
========

La pseudo-classe **`:enabled`** permet de cibler un élément activé. Un élément est activé s'il peut être sélectionné, si on peut cliquer dessus ou si on peut y saisir du texte ou y passer le focus (un élément peut également être dans un état désactivé).


```css
/\* Cible n'importe quel élément <input> actif \*/
input:enabled {
  color: #22aa22;
}
```

Syntaxe
-------

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

Dans cet exemple, les textes des éléments activés seront verts alors que ceux des éléments désactivés seront gris. L'utilisateur peut ainsi reconnaître les éléments avec lesquels interagir.

### HTML


```html
<form action="url\_of\_form">
  <label for="PremierChamp">Premier champ (activé) :</label>
  <input type="text" id="PremierChamp" value="Titi" /><br />

  <label for="DeuxiemeChamp">Deuxième champ (désactivé) :</label>
  <input
 type="text"
 id="DeuxiemeChamp"
 value="Toto"
 disabled="disabled" /><br />

  <input type="button" value="Envoyer" />
</form>
```

### CSS


```css
input:enabled {
  color: #22aa22;
}

input:disabled {
  color: #d9d9d9;
}
```

### Résultat

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

| Specification |
| --- |
| HTML Standard # selector-enabled |
| Selectors Level 4 # enableddisabled |

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

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

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

* `:disabled`
@page
=====

La règle @ **`@page`** est utilisée afin de modifier certaines propriétés CSS lorsqu'on imprime un document. La règle `@page` ne permet pas de modifier toutes les propriétés mais uniquement celles qui portent sur les marges, les lignes orphelines et veuves ainsi que les sauts de page du document. Si on utilise cette règle @ pour modifier une autre propriété, ce changement sera ignoré.


```css
@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}
```


La règle @ `@page` peut être manipulée via le CSSOM, notamment avec l'interface `CSSPageRule` (en-US).

**Note :** Le W3C est en train de discuter de la gestion des unités de longueur (`<length>`) relative à la zone d'affichage (*viewport*) : `vh`, `vw`, `vmin` et `vmax`. En attendant, il est conseillé de ne pas les utiliser au sein d'une règle `@page`.

Syntaxe
-------

### Descripteurs

`size`

Définit la taille et l'orientation du bloc englobant la boîte de la page. En général, lorsqu'une boîte correspondant à une page est rendu sur une feuille, cela indique la taille de la page utilisée.


`marks`

Ajoute des marques pour la découpe ou l'alignement des pages du document.


`bleed`

Définit la limite au-delà de la boîte de la page au-delà de laquelle le contenu affiché est rogné.

### Syntaxe formelle
```

@page =   
  @page <page-selector-list>? { <declaration-rule-list> }    
  
<page-selector-list> =   
  <page-selector>#    
  
<page-selector> =   
  [ <ident-token>? <pseudo-page>\* ]!    
  
<pseudo-page> =   
  ':' [ left | right | first | blank ]    
  
```

Exemples
--------


```css
@page :first {
  margin: 2cm 3cm;
}
```


Pour d'autres exemples, voir les pages qui concernent les pseudo-classes liées à `@page` :

* `:blank`
* `:first`
* `:left`
* `:right`
* `:recto` 
Expérimental
* `:verso` 
Expérimental
Spécifications
--------------

| Specification |
| --- |
| CSS Paged Media Module Level 3 # at-page-rule |
| CSS Logical Properties and Values Level 1 # page |

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

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

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

* Le bug de suivi Mozilla pour l'ensemble des fonctionnalités associées aux médias paginés.
border-bottom-color
===================

La propriété **`border-bottom-color`** permet de définir la couleur utilisée pour la bordure basse d'un élément.

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

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

Syntaxe
-------


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

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

### Valeurs

`<color>`

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

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

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

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

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

Exemples
--------

### CSS


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

.texterouge {
  color: red;
}
```

### HTML


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

### Résultat

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

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

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

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

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

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

Le *flux normal* ou « disposition en flux » (*Flow Layout*) correspond à la façon dont les éléments de bloc et les éléments en ligne sont disposés avant tout changement apporté à leur disposition. Lorsqu'un élément est retiré du *flux*, il est traité indépendamment.

Avec un flux normal, les **éléments en ligne (*inline elements*)** sont affichés dans la direction « en incise », c'est-à-dire dans le sens dans lequel les mots sont écrits selon le mode d'écriture du document. Les **éléments de bloc (*block elements*)** sont affichés les uns après les autres, à la façon des paragraphes selon le mode d'écriture du document.

Par exemple, pour un document français, les éléments en ligne sont affichés les uns à la suite des autres de gauche à droite et les éléments de bloc sont affichés les uns en dessous des autres.

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

Dans l'exemple suivant, on peut voir des boîtes de bloc et des boîtes en ligne. Les deux éléments correspondants aux paragraphes avec des bordures vertes sont des éléments de bloc. Ces deux éléments s'affichent l'un en dessous de l'autre.

La première phrase contient également un élément `<span>` avec un arrière-plan bleu. C'est un élément en ligne qui s'affiche donc en incise de la phrase.

Guides
------

* Les dispositions de bloc et en ligne dans le flux normal
* La disposition en flux et les dépassements
* La disposition en flux et les modes d'écriture
* Explications sur les contextes de formatage
* Être ou non dans le flux
Référence
---------

### Termes du glossaire

* Bloc (CSS)
border-left-color
=================

La propriété **`border-left-color`** permet de définir la couleur utilisée pour la bordure gauche d'un élément.

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

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

Syntaxe
-------


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

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

### Valeurs

`<color>`

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

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

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

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

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

Exemples
--------

### CSS


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

.texterouge {
  color: red;
}
```

### HTML


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

### Résultat

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

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

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

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

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

* Les propriétés raccourcies liées aux bordures
    + `border`,
    + `border-left`,
    + `border-color`.
* Les propriétés de couleur pour les autres bordures :
    + `border-top-color`,
    + `border-bottom-color`,
    + `border-right-color`.
* Les autres propriétés liées à la bordure gauche :
    + `border-left-style`,
    + `border-left-width`.
path()
======

La fonction (en-US) CSS **`path()`** accepte comme paramètre une chaîne représentant un tracé SVG. Elle est utilisée dans les formes CSS et les animations de tracés CSS pour permettre de dessiner une forme.

Syntaxe
-------


```css
path( [[<'fill-rule'>,]?<string>)
```

### Paramètres

`<'fill-rule'>`

La règle de remplissage de l'intérieur du tracé. Les valeurs possibles sont `nonzero` ou `evenodd`. La valeur par défaut est `nonzero`. Voir fill-rule pour plus de détails.

`<string>`

Doit être une chaîne représentant les données d'un chemin SVG.

Exemples
--------

### Exemples de valeurs correctes pour path()


```css
path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
```

### Utilisation en tant que valeur de offset-path

La fonction `path()` est utilisée pour créer un tracé à suivre pour l'élément. La modification de l'une de ces valeurs conduira celui-ci à ne pas pouvoir suivre le tracé de façon nette lors de l'animation.

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

| Specification |
| --- |
| CSS Shapes Module Level 1 # funcdef-basic-shape-path |

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

* `<shape-outside>`
* Formes CSS
* Vue d'ensemble des formes CSS
* *SVG Path Syntax Illustrated Guide*
*SVG Path Syntax Illustrated Guide* (en anglais)
border-block-end-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-end-color`** définit la couleur de la bordure pour le côté de la fin 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-start-color`,
* `border-inline-end-color`,
* `border-inline-start-color`.
Syntaxe
-------


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

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

### Valeurs

`<'border-color'>`

La couleur utilisée pour la bordure, 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-end-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-end-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`
* bug Firefox 1297097