Le flexbox va nous permettre de créer des dispositions complexes pour nos documents HTML. Ce modèle se compose d’un conteneur flexible et d’éléments flexibles dont la principale caractéristique va d’être… flexibles, c’est-à-dire de posséder une taille qui va s’adapter en fonction de l’espace disponible.

La déclaration d’un conteneur flexible crée automatiquement un nouveau contexte d’empilement ce qui signifie que les descendants directs d’un élément définir comme conteneur flexibles deviendront immédiatement des éléments flexibles auxquels on va pouvoir appliquer les propriétés du flexbox.

Le flexbox est, à la différence du modèle des grilles, un modèle de disposition principalement unidimensionnel : nous allons devoir définir un axe principal et un axe secondaire et la majorité du positionnement et de l’alignement des éléments flexibles va se faire selon l’axe principal.

A noter : Les propriétés float, clear et vertical-align n’ont aucun effet sur les éléments flexibles.

Création d’un conteneur flexible

Pour utiliser les propriétés du flexbox, nous allons déjà devoir définir un conteneur flexible. On va pour cela appliquer un display : flex ou display : inline-flex à un élément.

Cela crée automatiquement un nouveau contexte de formatage pour les éléments descendants directs de l’élément conteneur flexible.

Notez que display : flex va créer un conteneur flexible de niveau bloc tandis que display : inline-flex va créer un conteneur flexible de niveau inline.

Un conteneur avec display : flex occupera donc tout l’espace disponible dans son parent et se placera sur sa propre ligne tandis qu’un conteneur avec display : inline-flex n’occupera que l’espace nécessaire à son contenu dans son parent et pourra se placer à côté d’autres éléments.

Vous pouvez voir la différence de comportement entre display : flex et display : inline-flex avec l’exemple suivant code HTML puis code CSS puis résultat) :

See the Pen
CSS Flexible Box Layout #1 : display: flex & display: inline-flex by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #1 : display: flex & display: inline-flex by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #1 : display: flex & display: inline-flex by Pierre (@pierregiraud)
on CodePen.

Ici, on utilise 4 éléments div class="container" et div class="inline-container" qu’on définit comme conteneurs flexibles. Les éléments à l’intérieur de ces conteneurs (les div class="item") deviennent de facto des éléments flexibles.

On voit bien que les deux premiers conteneurs flexibles, qui sont de type bloc, occupent toute la largeur dans leur élément conteneur (le body de la page) tandis que les deux derniers qui sont de niveau inline n’occupent que la place nécessaire à leur contenu et se placent côte-à-côte et non pas sur une nouvelle ligne.

&nbsp ;

Définir la direction du placement des éléments flexibles : flex-direction

Le flexbox est un modèle principalement unidimensionnel. Cela implique qu’on va devoir définir un axe principal selon lequel nos éléments flexibles vont venir s’écouler. En termes physiques, l’axe principal peut être soit horizontal, soit vertical.

On utilise la propriété flex-direction pour définir la direction et le sens de l’axe principal utilisé par le conteneur flexible pour placer les éléments flexibles.

Cette propriété accepte les valeurs suivantes :

• row (valeur par défaut) : L’axe principal aura la même orientation que l’axe en ligne tel qu’il a été défini par la propriété writing-mode. Le début de l’axe sera là où le texte commence et la fin sera là où il va (si le texte est horizontal et va de gauche à droite, le début de l’axe est physiquement le coin gauche et la fin le coin droit) ;
• row-reverse : L’axe principal aura la même orientation que l’axe en ligne tel qu’il a été défini par la propriété writing-mode ou direction. La fin de l’axe correspond au côté où le texte démarre et inversement ;
• column : L’axe principal aura la même orientation que l’axe de bloc tel qu’il a été défini par la propriété writing-mode. Le début de l’axe correspond au côté lié au début de l’axe de bloc et la fin de l’axe au côté lié à la fin de l’axe de bloc. Dans un mode où les blocs s’empilent verticalement et de haut vers le bas, le début de l’axe correspond physiquement au bord supérieur et la fin au bord inférieur ;
• column-reverse : L’axe principal aura la même orientation que l’axe de bloc tel qu’il a été défini par la propriété writing-mode. La fin de l’axe correspond au côté lié au début de l’axe de bloc et inversement.

Attention : retenez bien que le résultat produit par ces valeurs dépend des valeurs définies pour la propriété writing-mode.

La propriété writing-mode permet d’indiquer si les lignes de texte sont disposées horizontalement ou verticalement et la direction dans laquelle les blocs progressent.

Par défaut, les blocs vont s’empiler verticalement de haut en bas et le texte va s’écouler horizontalement, de gauche à droite. Dans ce cas-là, l’axe de bloc sera physiquement l’axe vertical et le début physique de l’axe sera le haut. L’axe en ligne sera physiquement l’axe horizontal et le début sera à gauche.

Pour en savoir plus à ce sujet, n’hésitez pas à consulter mon article sur les valeurs logiques et les modes d’écriture en CSS.

Prenons immédiatement un premier exemple d’utilisation de flex-direction avec writing-mode : horizontal-tb :

See the Pen
CSS Flexible Box Layout #2 : flex-direction by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #2 : flex-direction by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #2 : flex-direction by Pierre (@pierregiraud)
on CodePen.

Dans cet exemple, on crée trois conteneurs flexibles. Le mode d’écriture est défini par writing-mode qui va appliquer sa valeur par défaut qui est horizontal-tb. Cette valeur signifie que les blocs s’empilent verticalement, de haut en bas. Le mode d’écriture et le mode typographique sont horizontaux.

On passe un flex-direction : row à notre premier conteneur. L’axe principal du conteneur va avoir la même orientation que l’axe en ligne tel qu’il a été défini par la propriété writing-mode et le début de l’axe sera le côté ou commence le texte.

Avec writing-mode : horizontal-tb, les blocs s’empilent verticalement. L’axe de bloc est donc l’axe vertical et l’axe en ligne est l’axe horizontal. La direction de l’écriture est de gauche ) droite pour moi ; le début de l’axe se situe donc physiquement à gauche.

L’axe principal du conteneur sera donc physiquement l’axe horizontal et le début de l’axe sera ) gauche. Les éléments flexibles vont venir se placer selon cet axe, donc en ligne et de gauche à droite.

On passe un flex-direction : row-reverse à notre deuxième conteneur. L’axe principal sera donc également physiquement l’axe horizontal et le début de l’axe correspondra au côté où arrive la texte, c’est-à-dire physiquement à droite pour moi.

Finalement, on passe un flex-direction : column à notre troisième conteneur. L’axe principal du conteneur aura donc la même orientation que l’axe de bloc tel qu’il a été défini par la propriété writing-mode. Ce sera donc ici physiquement l’axe vertical. Le début de l’axe correspond au côté lié au début de l’axe de bloc, c’est-à-dire dans une disposition de haut en bas au côté supérieur.

Les éléments flexibles de ce conteneur vont donc être disposés en colonne, de haut en bas.

Changeons maintenant de mode d’écriture afin de voir l’impact sur les valeurs de flex-direction. On peut par exemple choisir des writing-mode : vertical-lr et writing-mode : sideways-lr.

Dans le cas d’un writing-mode : vertical-lr, les blocs s’empilent horizontalement, de droite à gauche et le mode d’écriture et le mode typographique sont verticaux. L’axe de bloc est donc physiquement l’axe horizontal.

Dans le cas d’un writing-mode : sideways-lr, les blocs s’empilent horizontalement, de gauche à droite. Le mode d’écriture est vertical, tandis que le mode typographique est horizontal. L’axe de bloc est donc physiquement l’axe horizontal.

See the Pen
CSS Flexible Box Layout #3 : flex-direction & writing-mode by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #3 : flex-direction & writing-mode by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #3 : flex-direction & writing-mode by Pierre (@pierregiraud)
on CodePen.

Contrôler le passage à la ligne des éléments flexibles : flex-wrap

La propriété flex-direction permet de définir quel axe est l’axe principal du conteneur flexible et la direction du placement des éléments flexibles dans cet axe.

La propriété flex-wrap permet d’indiquer si les éléments flexibles ont le droit de passer à la ligne ou pas (c’est-à-dire si le conteneur flexible peut être multilignes ou pas) ainsi que la direction des éléments dans laquelle les lignes doivent être empilées (c’est-à-dire la direction de l’axe secondaire).

A noter :

1. On entend par « ligne » une ligne dans la direction de l’axe principal : une « ligne » peut être une rangée si l’axe principal est horizontal ou une colonne si l’axe principal est l’axe vertical ;
2. L’axe secondaire est défini automatiquement lorsqu’on définit l’axe principal : si l’axe principal est l’axe horizontal, l’axe secondaire sera l’axe vertical et inversement.

Par défaut, il faut savoir que les conteneurs flexibles sont monoligne (les éléments flexibles n’ont pas le droit de passer à la ligne). Cela peut poser un problème lorsqu’un conteneur flexible possède beaucoup d’éléments flexibles (ou que ceux-ci possèdent des tailles explicites) puisqu’ils risquent alors de dépasser du conteneur.

La propriété flex-wrap va nous permettre de modifier ce comportement et de permettre aux éléments d’aller se placer sur la ligne (rangée ou colonne) suivante plutôt que de dépasser du conteneur flexible. Cette propriété supporte les valeurs suivantes :

• nowrap (valeur par défaut) : Les éléments n’ont pas le droit d’aller à la ligne ;
• wrap : Les éléments vont se placer à la ligne plutôt que de dépasser du conteneur. L’axe secondaire aura la même direction que l’axe en ligne ou l’axe de bloc (selon l’axe principal choisir) défini par writing-mode ;
• wrap-reverse : Les éléments vont se placer à la ligne plutôt que de dépasser du conteneur. La direction de l’axe secondaire sera inversée par rapport à celle de l’axe en ligne ou l’axe de bloc (selon l’axe principal choisir) définie par writing-mode.

Imaginons qu’on ait défini un writing-mode : horizontal-tb. Le texte va donc s’écouler physiquement de gauche à droite puis de haut en bas.

Si on a également défini un conteneur flexible avec flex-direction : row, alors l’axe principal est l’axe physique horizontal et le contenu s’écoule de gauche à droite. En ajoutant flex-wrap : wrap, les éléments qui dépassent vont venir se placer sous les premiers (les lignes vont s’empiler du haut vers le bas). En ajoutant flex-wrap : wrap-reverse, en revanche, les éléments qui dépassent vont venir se placer au-dessus des premiers (les lignes vont s’empiler du bas vers le haut).

Si on a plutôt défini un conteneur flexible avec flex-direction : column, alors l’axe principal est l’axe physique vertical et le contenu s’écoule de haut en bas. En ajoutant flex-wrap : wrap, les éléments qui dépassent vont venir se placer à droite des premiers (les lignes vont s’empiler de la gauche vers la droite). En ajoutant flex-wrap : wrap-reverse, en revanche, les éléments qui dépassent vont venir se placer à gauche des premiers (les lignes vont s’empiler de la droite vers la gauche).

Regardez plutôt l’exemple suivant :

See the Pen
CSS Flexible Box Layout #4 : flex-wrap by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #4 : flex-wrap by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #4 : flex-wrap by Pierre (@pierregiraud)
on CodePen.

Note : Dans cet exemple, j’ajoute des tailles explicites à mes éléments flexibles afin que la taille totale des éléments flexibles soit plus grande que celle du conteneur dans son axe principal (en largeur si l’axe principal est horizontal ou en hauteur si l’axe principal est vertical). Je fais cela plutôt que d’ajouter beaucoup d’éléments pour ne pas que mon code d’exemple soit trop long.

Si aucun passage à la ligne n’est autorisé, les éléments vont par défaut essayer de rétrécir pour rentrer dans le conteneur. C’est la raison pour laquelle vous ne voyez aucun élément dépasser. Cependant, si vous essayez d’ajouter des éléments dans le conteneur, vous allez voir qu’ils vont dépasser à partir du moment où la somme des largeurs des contenus sera plus importante que la taille du conteneur.

La propriété raccourcie flex-flow

La propriété flex-flow est une propriété raccourcie qui permet de définir les valeurs de flex-direction et de flex-wrap en une seule fois.

Contrôler la flexibilité des éléments flexibles avec flex

L’un des intérêts principaux du flexbox est de définir des éléments flexibles et de pouvoir contrôler leur flexibilité, c’est-à-dire leur capacité à rétrécir si le conteneur a besoin d’espace ou au contraire de s’étendre si il reste de l’espace dans le conteneur flex à distribuer.

Contrôler la faculté des éléments flexibles à s’étendre avec flex-grow

La propriété flex-grow permet de définir le facteur d’agrandissement d’un élément flexible.

Ce facteur d’agrandissement détermine la quantité d’espace disponible qui sera absorbée par cet élément flexible par rapport aux autres éléments flexibles. La valeur par défaut est flex-grow : 0 qui signifie que les éléments flexibles n’ont pas le droit de grandir.

Imaginons un conteneur flexible avec flex-direction : row qui fait 1000px de large et qui contient 3 éléments qui font chacun 200px de large. Il reste donc 1000 – (3 * 200) = 400px d’espace disponible en largeur.

On définit un flex-grow : 2 au premier élément flexible et un flex-grow : 1 aux deux autres. Le premier élément va grandir de manière à absorber deux fois plus d’espace que les autres. Il va donc absorber 200px sur les 400 restants tandis que les deux autres éléments vont absorber 100px chacun.

See the Pen
CSS Flexible Box Layout #5 : flex-grow by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #5 : flex-grow by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #5 : flex-grow by Pierre (@pierregiraud)
on CodePen.

Contrôler la faculté des éléments flexibles à rétrécir avec flex-shrink

La propriété flex-shrink permet de définir le facteur de rétrécissement d’un élément flexible.

Ce facteur de rétrécissement détermine la capacité des éléments à se compresser pour faire de la place dans le conteneur lorsque la taille de l’ensemble des éléments flexibles est supérieure à celle du conteneur.

La valeur par défaut est flex-shrink : 1, ce qui signifie que les éléments vont par défaut se compresser au besoin. C’est la raison pour laquelle ils ne dépassaient pas du conteneur dans l’exemple donné pour illustrer le comportement de la propriété flex-wrap.

See the Pen
CSS Flexible Box Layout #6 : flex-shrink by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #6 : flex-shrink by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #6 : flex-shrink by Pierre (@pierregiraud)
on CodePen.

Définir la taille de base des éléments flexibles avant distribution de l’espace restant

La propriété flex-basis permet de définir la taille de base des éléments flexibles avant distribution de l’espace restant ou rétrécissement. La taille définie sera la largeur si l’axe principal est horizontal ou la hauteur si l’axe principal est vertical.

La propriété flex-basis accepte des valeurs de type longueur absolue (px par exemple) ou relative (% par exemple) ainsi que les valeurs auto (valeur par défaut) et content.

La valeur auto indique que la propriété flex-basis devra se référer à la valeur définie par width ou height si elle a été définie (ou sera égale à content si rien n’a été défini).

La valeur content indique que la taille de l’élément flexible sera relative à celle de son contenu. Attention, cette valeur est encore peu supportée (elle n’est notamment pas supportée par Chrome ni par Safari).

See the Pen
CSS Flexible Box Layout #7 : flex-basis by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #7 : flex-basis by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #7 : flex-basis by Pierre (@pierregiraud)
on CodePen.

La propriété raccourcie flex

La propriété flex est une propriété raccourcie qui permet de définir les valeurs de flex-grow, flex-shrink et flex-basis d’un seul coup.

On peut soit passer les valeurs des propriétés flex-grow, flex-shrink et flex-basis à la suite à flex, soit lui passer les mots clefs suivants :

• flex : initial qui est l’équivalent de flex : 0 1 auto ;
• flex : auto qui est l’équivalent de flex : 1 1 auto ;
• flex : none qui est l’équivalent de flex : 0 0 auto.

Gérer l’alignement des éléments flexibles selon l’axe principal : justify-content

La propriété justify-content va nous permettre de gérer l’alignement des éléments flexibles selon l’axe principal choisi pour le conteneur flex. On va appliquer justify-content au conteneur flex.

Si l’axe principal est l’axe horizontal, on va par exemple pouvoir aligner (grouper) les éléments à gauche, à droite, au centre ou encore faire en sorte qu’ils soient répartis équitablement dans l’axe, etc.

La propriété justify-content supporte les valeurs suivantes :

• flex-start (valeur par défaut) : Les éléments sont groupés au début de l’axe principal ;
• flex-end : Les éléments sont groupés à la fin de l’axe principal ;
• center : Les éléments sont groupés au centre de l’axe principal ;
• space-between : Les éléments sont distribués régulièrement dans l’axe, ce qui signifie qu’il y aura le même espace entre chaque élément. Le début du premier élément est collé contre le début du conteneur et la fin du dernier élément est collée contre la fin du conteneur ;
• space-around : Les éléments sont distribués régulièrement dans l’axe, ce qui signifie qu’il y aura le même espace entre chaque élément. L’espace entre le début du premier élément et le début du conteneur et entre la fin du dernier élément et la fin du conteneur est égal à la moitié de l’espace entre deux éléments.

See the Pen
CSS Flexible Box Layout #8 : justify-content by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #8 : justify-content by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #8 : justify-content by Pierre (@pierregiraud)
on CodePen.

Dans cet exemple, on crée cinq conteneurs flexibles avec un axe principal horizontal et trois conteneurs flexibles avec un axe principal vertical qui contiennent chacun trois éléments flexibles. Chacun des éléments flexibles possède un flex : 0 0 20% afin de s’assurer qu’il reste de l’espace dans l’axe principal du conteneur (condition nécessaire pour observer l’effet de justify-content). On applique ensuite la propriété justify-content avec des valeurs différentes à chaque conteneur.

Gérer l’alignement des éléments flexibles selon l’axe secondaire : align-items et align-self

La propriété justify-content permet d’aligner les éléments flexibles selon l’axe principal du conteneur flex. La propriété align-items permet elle d’aligner les éléments flexibles selon l’axe secondaire du conteneur flex.

Si l’axe principal est l’axe horizontal, la propriété align-items va donc gérer l’alignement des éléments dans l’axe vertical et inversement.

La propriété align-self permet quant à elle de régler l’alignement des éléments flexibles de manière individuelle.

Nous allons appliquer align-items au conteneur et align-self aux différents éléments flexibles. Notez que si align-items et align-self sont définies pour un élément, la valeur retenue pour l’élément flexible sera celle de align-self.

Les propriétés align-items et align-self supportent les valeurs suivantes :

• auto (uniquement supportée par align-self) : L’alignement des éléments flexibles dans l’axe secondaire du conteneur est contrôlé par la valeur de align-items du parent de l’élément ;
• flex-start : Les éléments flexibles vont se grouper au début de l’axe secondaire ;
• flex-end : Les éléments flexibles vont se grouper à la fin de l’axe secondaire ;
• center : Les éléments flexibles vont se grouper au centre de l’axe secondaire ;
• baseline : Les éléments vont s’aligner dans l’axe secondaire de telle manière à ce que leur ligne de base soit alignée ;
• stretch : Les éléments flexibles vont s’étendre pour occuper toute la place dans l’axe secondaire du conteneur flex.

A noter que la valeur par défaut de align-items est stretch tandis que celle de align-self est auto.

See the Pen
CSS Flexible Box Layout #9 : align-items & align-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #9 : align-items & align-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #9 : align-items & align-self by Pierre (@pierregiraud)
on CodePen.

Les cinq premiers conteneurs flexibles de l’exemple précédent possèdent un axe principal physique horizontal. La propriété align-items va donc aligner les éléments dans l’axe secondaire. Le début physique de cet axe est le bord supérieur du conteneur et la fin le bord inférieur. align-items : flex-start va donc aligner les éléments en haut tandis que align-items : flex end alignera les éléments en bas.

Pour les conteneurs flex dont l’axe principal est l’axe vertical, la propriété align-items va aligner les éléments dans l’axe horizontal (à gauche, à droite, etc.).

Un élément du dernier conteneur possède également un align-self : center afin que vous puissiez bien observer que cette propriété applique sa valeur par-dessus align-items.

Gérer l’alignement des lignes selon l’axe secondaire : align-content

Dans certains cas, il peut arriver que le conteneur flexible soit plus grand que l’ensemble des éléments qu’il contient dans son axe secondaire et qu’il reste donc de l’espace à distribuer.

Dans ce cas-là, on peut utiliser la propriété align-content qui va servir à aligner les différentes lignes selon l’axe secondaire du conteneur, c’est-à-dire qui va nous permettre de répartir l’espace restant selon l’axe secondaire du conteneur en plaçant cet espace avant, après ou entre les lignes.

Notez que la propriété align-content n’a aucun effet si le conteneur flexible ne possède qu’une seule ligne.

La propriété align-content supporte les valeurs suivantes :

• flex-start : Les lignes d’éléments flexibles vont se grouper au début du conteneur flexible selon son axe secondaire ;
• flex-end : Les lignes d’éléments flexibles vont se grouper à la fin du conteneur flexible selon son axe secondaire ;
• center : Les lignes d’éléments flexibles vont se grouper au centre du conteneur flexible selon son axe secondaire ;
• space-between : L’espace restant dans le conteneur va être réparti équitablement entre les lignes selon l’axe secondaire. Il n’y a pas d’espace entre le départ du conteneur et la première ligne ni entre la fin du conteneur et la dernière ligne ;
• space-around : L’espace restant dans le conteneur va être réparti équitablement entre les lignes selon l’axe secondaire. L’écart entre le début du conteneur et la première ligne et entre la dernière ligne et la fin du conteneur est égal à la moitié de l’espace entre deux lignes ;
• stretch (valeur par défaut) : Les lignes vont s’étendre afin d’occuper tout l’espace selon l’axe secondaire du conteneur.

See the Pen
CSS Flexible Box Layout #10 : align-content by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #10 : align-content by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Flexible Box Layout #10 : align-content by Pierre (@pierregiraud)
on CodePen.

Ici, on définit plusieurs conteneurs flexibles et on fait en sorte que ces conteneurs soient plus grands que l’ensemble des lignes qu’ils contiennent afin qu’il reste de l’espace à distribuer selon leur axe secondaire. On distribue ensuite cet espace avec align-content.

Tableau récapitulatif des propriétés du flexbox CSS

C’est un modèle totalement bidimensionnel, ce qui signifie qu’on va avoir accès à des propriétés similaires pour disposer nos éléments selon l’axe horizontal ou l’axe vertical (à la différence du modèle des boites flexibles dans lequel on doit définir un axe principal et un axe secondaire de disposition).

Le modèle des grilles va donc s’avérer très précieux pour aligner les contenus selon les deux dimensions horizontale et verticale.

Pour définir un modèle de disposition en ligne, on va déjà devoir définir un conteneur de grille puis allons ensuite pouvoir appliquer différentes propriétés au conteneur ou aux éléments de grille.

Notes préalables utiles pour la lecture de ce guide :

• L’axe de bloc est l’axe selon lequel sont disposés les éléments de type bloc, c’est-à-dire l’axe vertical si writing-mode possède la valeur horizontal-tb (valeur par défaut) car les blocs se placent les uns en dessous des autres, dans la hauteur de la page ;
• L’axe en ligne est l’axe selon lequel s’écoule le contenu inline c’est-à-dire l’axe horizontal si writing-mode possède la valeur horizontal-tb (valeur par défaut) ;
• La définition des axes de bloc et en ligne, de leur « début » et de leur « fin » peuvent être modifiés grâce à certaines propriétés CSS et notamment la propriété direction : si on choisit une direction horizontale et un sens d’écriture de droite à gauche par exemple, le « début » de l’axe en ligne sera à droite et non pas à gauche, etc.
• Les propriétés et valeurs display : inline-block, display : table-cell, float, vertical-align et column-* n’ont aucun effet sur les éléments de grille.

Définir un conteneur de grille

La première chose à faire va être de définir un conteneur de grille. On va pour cela appliquer un display : grid ou display : inline-grid à un élément de niveau bloc.

Cela va automatiquement créer un nouveau contexte de formatage pour les éléments contenus dans notre conteneur de grilles. Cela signifie que les éléments enfants vont devenir des éléments de grille et qu’on va pouvoir leur appliquer les propriétés liées aux éléments de grille.

Notez que display : grid va créer une grille de niveau bloc tandis que display : inline-grid va créer une grille de niveau inline.

Un conteneur avec display : grid occupera donc tout l’espace disponible dans son parent et se placera sur sa propre ligne tandis qu’un conteneur avec display : inline-grid n’occupera que l’espace nécessaire à son contenu dans son parent et pourra se placer à côté d’autres éléments.

Regardez plutôt le code suivant pour bien identifier la différence (code HTML puis code CSS puis résultat) :

See the Pen
CSS Grid Layout #1 : Grid Container by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #1 : Grid Container by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #1 : Grid Container by Pierre (@pierregiraud)
on CodePen.

Ici, on utilise 4 éléments div class="container" et div class="inline-container" qu’on définit comme conteneurs de grille. Les éléments à l’intérieur de ces conteneurs (les div class="item") deviennent de facto des éléments de grille.

On voit bien que les deux premiers conteneurs de grilles, qui sont de type bloc, occupent toute la largeur dans leur élément conteneur (le body de la page) tandis que les deux derniers qui sont de niveau inline n’occupent que la place nécessaire à leur contenu et se placent côte-à-côte et non pas sur une nouvelle ligne.

Le vocabulaire des grilles : colonnes, rangées, lignes, pistes et zones de grille

Avant d’aller plus loin, il me semble important de définir certains éléments de langage liés aux grilles afin de démarrer avec des bases solides et stables.

Une grille est composée de colonnes et de rangées. On va pouvoir disposer les éléments de grille selon ces colonnes et rangées.

Les colonnes et les rangées des grilles sont séparées par des lignes imaginaires qui servent à définir les « cellules » de la grille.

Une grille possédant 3 colonnes et 2 rangées va donc posséder 4 lignes verticales et 3 lignes horizontales, une grille possédant 4 colonnes et 4 rangées va posséder 5 lignes verticales et 5 lignes horizontales et etc.

Ci-dessous, vous pouvez retrouver une représentation visuelle des lignes d’une grille. Ma grille contient ici 3 colonnes et 2 rangées. Les lignes verticales ont été dessinées en bleu et les lignes horizontales ont été dessinées en rouge.

L’espace entre deux lignes adjacentes est ce qu’on appelle une piste de grille. Le terme piste sert donc tout simplement à désigner indifféremment une colonne ou une rangée dans une grille.

Ci-dessus, j’ai créé deux grilles composées de 3 colonnes et de 2 rangées. En jaune, j’ai colorié une piste pour chacune des deux grilles.

Finalement, une zone de grille correspond à l’espace délimité par deux lignes de colonnes et deux lignes de rangées qui ne sont pas nécessairement adjacentes. Ci-dessous, j’ai dessiné une zone dans chacune de mes deux grilles (la première couvre 2 cellules et la deuxième couvre 4 cellules).

Définir explicitement des colonnes et des rangées dans une grille CSS : grid-template-columns et grid-template-rows

Une grille est formée de colonnes et de rangées. On peut définir le nombre et la taille de chacune de ces colonnes et rangées grâce aux propriétés grid-template-columns et grid-template-rows qu’on appliquera au conteneur de grille.

On va pouvoir passer des valeurs de type longueur (en px par exemple), pourcentage %, fraction fr ou la valeur auto aux propriétés grid-template-columns et grid-template-rows.

Cela va nous permettre de créer des colonnes et des rangées de tailles fixes ou variables. Notez que l’unité fr permet à une colonne ou à une rangée de calculer sa taille en fonction des autres.

Regardez plutôt l’exemple ci-dessous (code HTML puis CSS puis résultat) :

See the Pen
CSS Grid Layout #2 : grid-template-columns & grid-template-rows by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #2 : grid-template-columns & grid-template-rows by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #2 : grid-template-columns & grid-template-rows by Pierre (@pierregiraud)
on CodePen.

On définit trois conteneurs de grille avec display : grid. Chaque conteneur contient trois éléments de grille.

Les colonnes et rangées de notre première grille sont définies par grid-template-columns: 100px auto et grid-template-rows: 50px 50px.

On va passer autant de valeurs à grid-template-columns ou grid-template-rows qu’on souhaite définir de colonnes et de rangées dans notre grille.

Les valeurs passées à grid-template-columns définissent la largeur des colonnes tandis que les valeurs passées à grid-template-rows définissent la hauteur des rangées.

Dans ce premier cas, notre grille possède deux colonnes d’une largeur de 100px et auto (ce qui dans ce cas fait que la deuxième colonne occupe toute la largeur restante) et deux rangées d’une hauteur de 50px chacune.

Notre deuxième grille possède 3 colonnes de largeurs 1fr, 2fr et 1fr et une seule rangées d’une hauteur auto. Cela signifie que l’espace va être partagé entre les colonnes de telle manière à ce que la première et troisième colonne occupent la même largeur et que la deuxième colonne occupe une largeur deux fois plus importante. Ici, cela est l’équivalent d’écrire 25% 50% 25%.

Notre troisième grille possède trois colonnes et deux rangées. Les colonnes sont définies avec grid-template-columns : 1fr 50% 2fr. Dans ce cas, la largeur de la deuxième colonne va être calculée en premier et les deux autres colonnes dont la largeur est exprimée en fraction de l’espace vont se partager le reste de l’espace (les 50% restants donc) avec la troisième colonne qui va récupérer deux fois plus d’espace que la première.

Dans ce cas, la deuxième colonne prend donc 50% de la largeur de la grille puis les 50% restants sont partagés entre les première et troisième colonnes.

Notez qu’on va également pouvoir utiliser la fonction CSS repeat() pour définir des colonnes et des rangées de grille. Cette fonction va s’avérer utile dans le cas où on souhaite créer une grille avec beaucoup de colonnes ou de rangées semblables puisqu’elle va nous permettre de répéter un certain schéma un certain nombre de fois.

Écrire grid-template-columns : repeat(3, 1fr) est équivalent à écrire grid-template-columns : 1fr 1fr 1fr par exemple.

Enfin, notez qu’on va également pouvoir passer des valeurs de type nom aux propriétés grid-template-columns et grid-template-rows qui vont nous permettre de nommer les lignes précédant la colonne ou la rangée en question.

Cela va pouvoir être utile pour pouvoir y faire référence plus facilement lorsqu’on voudra positionner nos éléments de grille dans la grille par la suite.

On va passer ces noms entre crochets comme ceci :

See the Pen
CSS Grid Layout #3 : Grid Lines name by Pierre (@pierregiraud)
on CodePen.

Positionner les éléments de grille dans une grille CSS

Le modèle des grilles est un modèle de positionnement bidimensionnel, ce qui signifie qu’on va pouvoir positionner puis aligner les éléments selon l’axe horizontal et selon l’axe vertical.

Par défaut, les éléments de grille n’occupent qu’une colonne et qu’une ligne et se placent dans l’ordre de leur écriture.

Positionner les éléments à partir des colonnes et des rangées

Pour positionner les éléments dans une grille, nous allons pouvoir utiliser les propriétés grid-column-start, grid-column-end, grid-row-start et grid-row-end ou leurs versions raccourcies grid-column et grid-row.

Ces propriétés vont nous permettre de spécifier les lignes de départ et de fin pour l’axe vertical (column) et l’axe horizontal (row) pour chaque élément de la grille.

Les versions raccourcies vont prendre deux valeurs : la valeur de la ligne de départ et celle de la ligne de fin pour l’axe concerné. Ces deux valeurs vont être séparées par un slash.

Définissons immédiatement une nouvelle grille composée de 5 colonnes et 3 rangées régulières et possédant 3 éléments et essayons de placer ces éléments dans la grille.

Code HTML :

See the Pen
CSS Grid Layout 4 : grid-column & grid-row by Pierre (@pierregiraud)
on CodePen.

Code CSS :

See the Pen
CSS Grid Layout 4 : grid-column & grid-row by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
CSS Grid Layout 4 : grid-column & grid-row by Pierre (@pierregiraud)
on CodePen.

Notre premier élément est positionné en utilisant les 4 propriétés grid-column-start, grid-column-end, grid-row-start et grid-row-end.

On indique ici que le début de notre premier élément doit se placer contre la première ligne verticale (ligne des colonnes ; c’est-à-dire tout à gauche) et contre la première ligne horizontale (ligne des rangées ; c’est-à-dire tout en haut) et qu’il doit couvrir la surface jusqu’à la troisième ligne verticale (c’est-à-dire couvrir l’espace relatif aux deux première colonnes) et jusqu’à la quatrième ligne horizontale (c’est-à-dire tout l’espace en hauteur).

Pour notre deuxième élément, on ne précise que les propriétés grid-column-start et grid-column-end et on lui demande de commencer au niveau de la troisième ligne verticale et de couvrir l’espace jusqu’à la sixième ligne verticale. Sa « hauteur » (le nombre de rangées de la grille qu’il devra occuper) sera celle par défaut c’est-à-dire une rangée.

Notre troisième élément est positionné grâce aux propriétés raccourcies grid-column et grid-row. On indique deux valeurs à chaque fois pour ces deux propriétés séparées par un slash : la première valeur correspond à la ligne de départ et la deuxième à la ligne d’arrivée.

N’hésitez pas à faire une pause ici et à modifier les valeurs de votre côté afin de bien assimiler les mécanismes de positionnement !

Note : on peut également passer des noms de lignes aux propriétés ci-dessus plutôt que des numéros dans le cas où on a nommé les lignes de notre grille.

Positionner les éléments à partir d’une zone prédéfinie

La deuxième manière de positionner des éléments dans une grille est de définir des zones de grille et d’attribuer les zones aux différents éléments de grille.

Pour faire cela, nous allons utiliser la propriété grid-area avec nos éléments de grille. Cette propriété va pouvoir être utilisée de deux façons différentes :

• En propriété ultra raccourcie des précédentes ; en lui passant 4 valeurs qui correspondent aux valeurs de row-start, column-start, row-end et column-end. Cela permet de définir immédiatement une zone de grille dans laquelle sera positionné l’élément ;
• En lui passant un nom de zone qui va pouvoir être utilisé par la propriété grid-template-areas.

La propriété grid-template-areas va utiliser les noms définis avec grid-area et indiquer la place dans la grille qui va être liée à chaque nom. Grosso-modo, cette propriété va nous permettre de construire visuellement une grille à partir des noms de zones définis avec grid-area.

Les grilles vont être construites rangée par rangée. Chaque répétition d’un nom de grid-area indique que la zone doit englober une cellule de plus. Les zones non rectangulaires ne sont pour le moment pas autorisées. Un point indique une cellule vide (sans zone attribuée).

Regardez plutôt l’exemple ci-dessous. Cette propriété se comprend beaucoup mieux visuellement.

Code HTML :

See the Pen
CSS Grid Layout 5 : grid-area & grid-template-areas by Pierre (@pierregiraud)
on CodePen.

Code CSS :

See the Pen
CSS Grid Layout 5 : grid-area & grid-template-areas by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
CSS Grid Layout 5 : grid-area & grid-template-areas by Pierre (@pierregiraud)
on CodePen.

Ici, nous possédons une grille à 3 colonnes, 3 rangées, et possédant 3 éléments. On commence par définir une zone pour chaque élément avec grid-area.

Ensuite, on utilise grid-template-areas sur le conteneur afin d’indiquer quelles cellules de grille ces zones doivent couvrir. Chaque paire de guillemets droits indique une nouvelle ligne dans la grille. Chaque répétition de nom indique une nouvelle cellule que la zone doit couvrir.

Ici, par exemple, on commence par écrire "zone1 zone1 zone1". Cela signifie que la zone « zone1 » devra couvrir la première, la deuxième et la troisième cellule de la première rangée.

Ensuite, on a ". . zone3". Cela signifie que les deux premières cellules de la deuxième rangée ne sont pas liées à des noms de zone tandis que la zone « zone3 » devra couvrir la troisième.

Enfin, on écrit ". zone2 zone3". La première cellule de la troisième rangée n’est liée à aucune zone, la zone « zone2 » couvrira la deuxième tandis que la zone « zone3 » couvrira la troisième.

Notez qu’on peut également utiliser la propriété raccourcie grid-template qui permet de définir en une seule fois les valeurs des propriétés grid-template-rows, grid-template-columns et grid-template-areas.

Aligner les éléments de grille dans une grille CSS

Une fois les éléments positionnées dans la grille, on va encore pouvoir les aligner dans la zone qui leur a été attribuée.

L’alignement des éléments va pouvoir se faire dans le sens vertical et dans le sens horizontal par rapport aux pistes de la grille ; c’est l’un des atouts principaux du modèle des grilles.

De plus, l’alignement des éléments va pouvoir se faire au niveau du conteneur (pour aligner tous les éléments selon un même modèle) ou au niveau des éléments, de manière individuelle.

Aligner les éléments par rapport à l’axe de ligne : justify-items et justify-self

Les propriétés justify-items et justify-self vont nous permettre d’ aligner les éléments le long de l’axe inline du document.

Pour les langages latins, l’axe de ligne est l’axe horizontal (l’axe des rangées). Le « début » de cet axe sera pour nous le coin gauche et la « fin » sera le coin droit.

Cela peut être différent pour d’autres langages et peut être changé en modifiant les valeurs de la propriété writing-mode notamment.

Ces propriétés supportent les valeurs suivantes :

• stretch : L’élément ou les éléments vont s’étendre pour occuper toute leur zone. C’est la valeur par défaut ;
• start : L’élément ou les éléments seront alignés contre le « début » de leur zone ;
• end : L’élément ou les éléments seront alignés contre la fin de leur zone ;
• center : L’élément ou les éléments seront centrés dans leur zone.

See the Pen
CSS Grid Layout 6 : justify-items & justify-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout 6 : justify-items & justify-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout 6 : justify-items & justify-self by Pierre (@pierregiraud)
on CodePen.

On définit ici deux grilles. On ne précise pas de justify-items ni de justify-self pour la première grille ; les valeurs par défaut (stretch) vont donc être utilisées.

On applique un justify-items : start à notre deuxième grille. Cela va faire en sorte que les éléments se placent au début de la zone qui leur est réservée (et n’occupent que la place nécessaire plutôt que de « stretch » c’est-à-dire s’étendre par défaut).

On définit également un justify-self : end pour le dernier élément de notre deuxième grille. Comme la propriété justify-self cible plus précisément que justify-items, elle sera traitée prioritairement et c’est la raison pour laquelle le dernier élément de la grille est aligné contre la fin de sa zone selon l’axe horizontal (c’est-à-dire à droite).

Aligner les éléments par rapport à l’axe de bloc : align-items et align-self

On va de la même façon pouvoir aligner les éléments de grille selon l’axe de bloc ou axe des colonnes qui sera pour nous l’axe vertical grâce aux propriétés align-items et align-self.

Ces propriétés vont s’utiliser exactement comme les précédentes et on va pouvoir leur passer les mêmes valeurs start, end, center et stretch (valeur par défaut). Le « début » de l’axe sera pour nous le bord supérieur tandis que la fin sera le bord inférieur.

See the Pen
CSS Grid Layout 7 : align-items & align-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout 7 : align-items & align-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout 7 : align-items & align-self by Pierre (@pierregiraud)
on CodePen.

Notez bien ici que les éléments sont toujours alignés au sein de la zone qui leur est réservée. Ainsi, si nos éléments n’occupent qu’une seule rangée de la grille par exemple, ils seront alignés dans l’espace de cette rangée et de même pour les colonnes.

Dans notre exemple, nous ne donnons aucune consigne de positionnement à nos éléments (positionnement qui dépend des propriétés grid-column et grid-row, etc.). Chaque élément occupe donc une cellule de grille par défaut (un espace d’une colonne * une rangée).

C’est la raison pour laquelle le troisième élément de notre deuxième grille qui possède un align-self : end n’est pas collé contre le bord inférieur de la grille mais simplement contre le bord inférieur de la rangée à laquelle il appartient.

Aligner les éléments de grille par rapport aux axes de bloc et en ligne : place-items et place-self

Le modèle des grilles nous fournit également des propriétés raccourcies qui nous permettent d’aligner un ou les éléments de grille par rapport aux deux axes d’un coup.

Ces propriétés sont les propriétés CSS place-items et place-self.On va pouvoir leur passer une première valeur qui va définir le comportement de align-{items | self} et une deuxième qui définira le comportement de justify-{items | self}. On peut également ne préciser qu’une valeur qui sera alors utilisée pour l’alignement sur les deux axes.

See the Pen
CSS Grid Layout 8 : place-items & place-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout 8 : place-items & place-self by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout 8 : place-items & place-self by Pierre (@pierregiraud)
on CodePen.

On utilise ici place-items pour réaliser très simplement un centrage parfait des éléments de grille par rapport à leur zone. Notez qu’on utilise cette fois-ci une grille qui possède 3 colonnes et une seule rangée.

Le troisième élément possède un place-self : start end. Il sera aligné au début de sa zone selon l’axe vertical (= en haut) et à la fin selon l’axe horizontal (= à droite).

Aligner le contenu de la grille par rapport au conteneur de grille : justify-content & align-content

Il arrive parfois que l’ensemble des éléments qui constituent une grille ait une taille inférieure à celle du conteneur de grille.

Cela peut se produire notamment dans le cas où on aurait défini des valeurs de taille fixes pour les pistes de grille.

Imaginez par exemple que l’on crée une grille avec display : grid de trois colonnes et une rangée en indiquant que chaque colonne doit faire 150px de large et chaque rangée 100px de haut.

Dans ce cas, notre grille aura une taille de 450px * 100px. Cependant, le conteneur de grille va lui occuper tout l’espace disponible dans son élément parent et va donc pouvoir être plus grand que ce qu’il contient. De même, l’unique rangée de la grille va faire 100px de hauteur mais le conteneur peut avoir une hauteur plus grande.

Dans ces cas-là, on va pouvoir aligner l’ensemble de la grille dans le conteneur de grille avec les propriétés justify-content et align-content.

La propriété justify-content permet un alignement selon l’axe de ligne ou axe des rangées qui est pour nous l’axe horizontal tandis que align-content permet un alignement selon l’axe de bloc ou axe des colonnes qui correspond pour nous à l’axe vertical.

Ces deux propriétés supportent les mêmes valeurs qui sont les suivantes :

• start : la grille sera alignée contre le début de son conteneur selon l’axe correspondant ;
• end : la grille sera alignée contre la fin de son conteneur selon l’axe correspondant ;
• center : la grille sera centrée dans son conteneur selon l’axe correspondant ;
• stretch : redimensionne les pistes de grille afin qu’elles occupent tout l’espace dans le conteneur dans l’axe correspondant ;
• space-around : répartit équitablement l’espace disponible entre les différentes pistes dans l’axe correspondant. L’espace entre les bords du conteneur et la première et la dernière piste sera deux fois moins important qu’entre deux pistes ;
• space-between : répartit équitablement l’espace disponible entre les différentes pistes dans l’axe correspondant mais ne laisse pas d’espace entre les bords du conteneur et la première / dernière piste ;
• space-evenly : répartit équitablement l’espace disponible entre les différentes pistes dans l’axe correspondant ;

See the Pen
CSS Grid Layout #9 : justify-content &align-content by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #9 : justify-content &align-content by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #9 : justify-content &align-content by Pierre (@pierregiraud)
on CodePen.

Ici, on crée 3 grilles de 3 colonnes, 2 rangées et on définit des tailles fixes pour nos colonnes (150px de large) et nos rangées (25px de haut). Pour cet exemple, on définit également des tailles fixes minimales de 500px * 100px pour le conteneur.

Notre première grille est notre grille témoin. On ne lui applique aucune propriété.

On applique un justify-content : center et align-content : end à notre deuxième grille. Cela signifie que la grille va venir se centrer dans son conteneur selon l’axe de ligne (l’axe horizontal) et va venir se coller à la fin du conteneur selon l’axe de bloc (l’axe vertical). Elle sera donc au milieu en largeur, et en bas dans la hauteur.

On applique un justify-content : space-between et align-content : space-evenly à notre troisième grille.

La valeur justify-content : space-between va répartir équitablement l’espace restant selon l’axe de ligne (horizontal) entre les colonnes en ne laissant aucun espace entre la première / dernière colonne et le bord du conteneur.

La valeur align-content : space-evenly va répartir équitablement l’espace restant selon l’axe de bloc (vertical) entre les rangées de la grille.

Notez qu’on peut également utiliser la propriété raccourcie place-content pour définir les valeurs de align-content et justify-content d’un coup.

&nbsp ;

Définir la largeur de l’espace entre deux colonnes ou entre deux rangées de grille : row-gap et column-gap

Précédemment, nous avons vu comme créer des grilles, définir des colonnes et des rangées, positionner et aligner des éléments de grille et comment aligner une grille dans son conteneur.

Souvent, lorsqu’on crée une page, on voudra ajouter de l’espace entre différentes colonnes ou rangées d’une grille pour aérer la grille et faire en sorte que les éléments ne soient pas forcément tous collés les uns aux autres.

On va pouvoir pour cela utiliser les propriétés row-gap et column-gap qui permettent de définir la taille des « gouttières » de la grille c’est-à-dire la taille des espaces entre les rangées et entre les colonnes.

See the Pen
CSS Grid Layout #10 : row-gap & column-gap by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #10 : row-gap & column-gap by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #10 : row-gap & column-gap by Pierre (@pierregiraud)
on CodePen.

Notez qu’on peut également utiliser la propriété raccourcie gap pour définir les valeurs de row-gap et column-gap d’un coup.

Gestion des éléments implicites des grilles

Gérer la taille des colonnes et des rangées implicites : grid-auto-columns et grid-auto-rows

Si un élément de grille est positionné dans une rangée ou une colonne qui n’est pas dimensionnée de manière explicite avec grid-template-rows ou grid-template-columns, des pistes de grille implicites sont créées pour le contenir.

Les pistes implicites sont créées lorsqu’il y a plus d’éléments de grille que de cellules dans la grille (auquel cas un algorithme de placement automatique va créer des rangées ou des colonnes supplémentaires) ou lorsqu’un élément de grille est placé en dehors de la grille explicite.

On va pouvoir définir des tailles souhaitées pour ces pistes implicites grâce aux propriétés grid-auto-columns et grid-auto-rows.

Notez que si plusieurs tailles de piste sont données, le modèle est répété autant de fois que nécessaire pour déterminer la taille des pistes implicites. La première piste de grille implicite reçoit la première taille spécifiée, et ainsi de suite.

See the Pen
CSS Grid Layout #11 : grid-auto-columns & grid-auto-rows by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #11 : grid-auto-columns & grid-auto-rows by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #11 : grid-auto-columns & grid-auto-rows by Pierre (@pierregiraud)
on CodePen.

Dans cet exemple, on crée deux grilles possédant deux colonnes et deux rangées définies de manière explicite. Nos deux grilles contiennent six éléments, c’est-à-dire deux éléments de plus que de cellules. Des pistes implicites vont donc être créées.

Dans notre première grille, nous ne donnons pas d’instruction de placement des éléments. Chaque élément va occuper une cellule et une troisième rangée va être créée implicitement pour accueillir les deux éléments « en trop ».

Dans notre deuxième grille, en revanche, nous plaçons des éléments en dehors des pistes explicites de la grille. Des pistes vont donc être créées implicitement selon le modèle fourni par grid-auto-columns dans ce cas puisque nous avons placé nos éléments dans des colonnes qui n’ont pas été définies explicitement.

Gérer le positionnement des éléments positionnés automatiquement : grid-auto-flow

Les éléments de grille qui ne sont pas explicitement placés sont automatiquement placés dans un espace inoccupé du conteneur de grille par un algorithme de placement automatique.

La propriété grid-auto-flow nous permet de contrôler le fonctionnement de l’algorithme de placement automatique, en spécifiant exactement comment les éléments placés automatiquement sont transférés dans la grille. Elles accepte les valeurs suivantes :

• row (valeur par défaut) : indique à l’algorithme de placement automatique de remplir les rangées les unes après les autres en créant de nouvelles rangées au besoin ;
• column : indique à l’algorithme de placement automatique de remplir les colonnes les unes après les autres en créant de nouvelles colonnes au besoin ;
• dense : indique à l’algorithme de placement automatique de tenter de combler les trous déjà présents dans la grille si des éléments plus petits apparaissent plus tard.

See the Pen
CSS Grid Layout #12 : grid-auto-flow by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #12 : grid-auto-flow by Pierre (@pierregiraud)
on CodePen.

See the Pen
CSS Grid Layout #12 : grid-auto-flow by Pierre (@pierregiraud)
on CodePen.

Notation raccourcie : la propriété grid

La propriété grid est une propriété raccourcie qui permet de définir les valeurs pour grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, et grid-auto-flow dans une seule déclaration.

Attention : on ne pourra spécifier que des propriétés liés aux éléments explicites ou que des propriétés liées aux éléments implicites au sein d’une seule déclaration grid.

Résumé : liste des propriétés des grilles CSS

Méthode utilisée pour créer cette liste de référence des propriétés CSS

Définition des niveaux de stabilité et de support des propriétés CSS

L’évolution du CSS se fait aujourd’hui par modules. Chaque module aborde une partie du CSS (module lié à la couleur, module lié à la police, module lié au texte, aux sélecteurs, aux bordures et au fond, etc.). Cela divise la spécification en morceaux et permet une amélioration plus rapide des différentes fonctionnalités du CSS.

Le W3C, groupe qui gère l’évolution du CSS, définit trois niveaux de stabilité qui correspondent à autant de phases que chaque module doit valider avant que le W3C indique que les fonctionnalités présentes dans le modules peuvent être utilisées par tous.

Lorsqu’un module atteint le dernier niveau de stabilité, les navigateurs doivent à priori fournir un support complet pour les fonctionnalités qu’il contient. Ces niveaux de stabilité sont les suivants :

1. Working Draft (WD – Brouillon de travail) :
   Le premier brouillon officiel est désigné comme le «premier brouillon public» (First Public Working Draft ou FPWD). La publication de FPWD au sein du CSSWG indique que le CSSWG a accepté de travailler sur le module tel qu’il a été proposé.

   Une fois que tous les problèmes connus ont été résolus, un dernier appel à commentaires est fait pour signaler tout problème en suspens. Si le Directeur accepte le module à l’issue de cette phase, on peut passer à la phase suivante qui est une phase de test en conditions réelles.

2. Candidate Recommendation (CR – Candidat à la recommandation) :
   Cette phase consiste notamment à utiliser des tests et des implémentations pour tester la spécification. Ce processus révèle souvent de nouveaux problèmes qui vont devoir être fixés progressivement.

   La démonstration de deux implémentations correctes et indépendantes de chaque fonctionnalité est nécessaire pour quitter la phase de Candidat à la Recommandation. Dès que cette condition est remplie, le module passe du statut Candidat à la Recommandation au statut Recommandation Proposée. Le Comité consultatif du W3C doit approuver la transition vers le statut Recommandation.

3. Recommendation (REC – Recommandation) :
   Il s’agit de l’état terminé d’une spécification W3C et représente une phase de maintenance. À ce stade, le groupe de travail ne gère qu’un document d’errata et publie occasionnellement une édition mise à jour qui intègre les errata dans la spécification.

Ce processus est un modèle théorique. En pratique, certaines fonctionnalités du CSS sont tellement attendues ou apparaissent comme tellement utiles que bien souvent la plupart des navigateurs proposent un support de ces fonctionnalités avant même que le W3C -qui est un groupe réputé pour être très long à décider des choses- ne les valide.

D’un autre côté, certaines fonctionnalités approuvées par le W3C mais finalement très peu utiles aux utilisateurs ou considérées comme mauvaises par les navigateurs peuvent ne pas être implémentées par ces derniers même si c’est rare (cas du module “Speech” par exemple).

Les différents statuts (FPWD, WDS, CR, PR et REC) ne sont donc pas un gage absolu de support ou de non support. Ils sont mentionnés ci-dessous à titre indicatif. Vous pouvez cependant considérer qu’on peut utiliser la plupart des propriétés taguées REC, PR et CR tandis que la plupart des propriétés taguées FPWD et WD ne sont pas implémentables en l’état.

J’ai essayé dans ce document d’indiquer le plus possible les décalages, lorsqu’ils existent, entre le niveau de stabilité du W3C et le support des navigateurs. En cas de doute sur une propriété, je vous invite à toujours consulter le site caniuse.com qui indique le niveau de support de chaque propriété pour les dernières versions des navigateurs couramment utilisés.

Critères d’organisation de cette liste de propriétés CSS

Le W3C dispose aujourd’hui de plus de 60 modules différents relatifs au CSS. Certains s’entrecoupent et le statut “réel” d’autres n’est pas celui mentionné. Cela rend la tâche de créer une liste complète des propriétés CSS très complexe.

J’ai essayé de fournir le meilleur travail de classement et de tri mais ne peut pas promettre que cette liste est 100% exhaustive ni que le support de certaines rares propriétés CSS n’ait pas été abandonné à l’heure où certains liront ce document. Elle devrait cependant être fidèle aux spécifications à 99%.

Concernant l’organisation des propriétés CSS, j’ai dans l’ensemble repris les modules officiels mais en ai fusionné quelques uns notamment lorsque deux niveaux de spécification d’un même module coexistent.

Support : liste intégrale des propriétés CSS à télécharger au format PDF

Vous pouvez télécharger gratuitement le support PDF de la liste des propriétés CSS en cliquant sur le lien suivant : Liste des propriétés CSS à télécharger.

Merci de faire un lien vers cet article si vous utilisez le contenu de celui-ci

Les propriétés CSS relatives à la taille des boites

Ces propriétés permettent de spécifier des dimensions (largeur et hauteur) pour les boites des éléments.

width REC

La propriété width permet de spécifier explicitement la largeur préférée de la boîte d’un élément.

min-width REC

La propriété min-width permet de spécifier la largeur minimale de la boîte d’un élément.

max-width REC

La propriété max-width permet de spécifier la largeur maximale de la boîte d’un élément.

height REC

La propriété height permet de spécifier explicitement la hauteur préférée de la boîte d’un élément.

min-height REC

La propriété min-height permet de spécifier la hauteur minimale de la boîte d’un élément.

max-height REC

La propriété max-height permet de spécifier la hauteur maximale de la boîte d’un élément.

box-sizing REC

La propriété box-sizing définit la boite de référence utilisée pour calculer la hauteur et la largeur totale d’un élément.

min-block-size WD

La propriété min-block-size définit la taille minimale horizontale ou verticale (en fonction de la valeur de writing-mode) d’un élément de niveau bloc.

max-block-size WD

La propriété max-block-size définit la taille maximale horizontale ou verticale (en fonction de la valeur de writing-mode) d’un élément de niveau bloc.

block-size WD

La propriété block-size est une propriété raccourcie qui permet de définir les valeurs de min-block-size et de max-block-size.

min-inline-inline WD

La propriété min-inline-size définit la taille minimale horizontale ou verticale (en fonction de la valeur de writing-mode) d’un élément de niveau inline.

max-inline-size WD

La propriété max-inline-size définit la taille maximale horizontale ou verticale (en fonction de la valeur de writing-mode) d’un élément de niveau inline.

inline-size WD

La propriété inline-size est une propriété raccourcie qui permet de définir les valeurs de min-inline-size et de max-inline-size.

Les propriétés CSS relatives aux marges

Ces propriétés permettent de définir des marges intérieures et extérieures.

padding-top REC

La propriété padding-top permet de régler la taille de la marge intérieure haute d’un élément.

padding-right REC

La propriété padding-right permet de régler la taille de la marge intérieure droite d’un élément.

padding-bottom REC

La propriété padding-bottom permet de régler la taille de la marge intérieure basse d’un élément.

padding-left REC

La propriété padding-left permet de régler la taille de la marge intérieure gauche d’un élément.

padding REC

La propriété padding est une propriété raccourcie qui permet de définir les marges intérieures haute, droite, basse et gauche d’un élément.

padding-block-start WD

La propriété padding-block-start permet de régler la taille de la marge intérieure au début d’un axe de bloc; le « début de l’axe de bloc » étant déterminé par les propriétés writing-mode, direction et text-orientation.

padding-block-end WD

La propriété padding-block-end permet de régler la taille de la marge intérieure à la fin d’un axe de bloc; la « fin de l’axe de bloc » étant déterminée par les propriétés writing-mode, direction et text-orientation.

padding-block WD

La propriété padding-block est une propriété raccourcie qui permet de définir les valeurs de padding-block-start et padding-block-end.

padding-inline-start WD

La propriété padding-inline-start permet de régler la taille de la marge intérieure au début d’un axe en ligne; le « début de l’axe en ligne » étant déterminé par les propriétés writing-mode, direction et text-orientation.

padding-inline-end WD

La propriété padding-inline-end permet de régler la taille de la marge intérieure à la fin d’un axe en ligne; la « fin de l’axe en ligne » étant déterminée par les propriétés writing-mode, direction et text-orientation.

padding-inline WD

La propriété padding-inline est une propriété raccourcie qui permet de définir les valeurs de padding-inline-start et padding-inline-end.

margin-top REC

La propriété margin-top permet de régler la taille de la marge extérieure haute d’un élément.

margin-right REC

La propriété margin-right permet de régler la taille de la marge extérieure droite d’un élément.

margin-bottom REC

La propriété margin-bottom permet de régler la taille de la marge extérieure basse d’un élément.

margin-left REC

La propriété margin-left permet de régler la taille de la marge extérieure gauche d’un élément.

margin REC

La propriété margin est une propriété raccourcie qui permet de définir les marges extérieure haute, droite, basse et gauche d’un élément.

margin-block-start WD

La propriété margin-block-start permet de régler la taille de la marge extérieure au début d’un axe de bloc; le « début de l’axe de bloc » étant déterminé par les propriétés writing-mode, direction et text-orientation.

margin-block-end WD

La propriété margin-block-end permet de régler la taille de la marge extérieure à la fin d’un axe de bloc; la « fin de l’axe de bloc » étant déterminée par les propriétés writing-mode, direction et text-orientation.

margin-block WD

La propriété margin-block est une propriété raccourcie qui permet de définir les valeurs de margin-block-start et margin-block-end.

margin-inline-start WD

La propriété margin-inline-start permet de régler la taille de la marge extérieure au début d’un axe en ligne; le « début de l’axe en ligne » étant déterminé par les propriétés writing-mode, direction et text-orientation.

margin-inline-end WD

La propriété margin-inline-end permet de régler la taille de la marge extérieure à la fin d’un axe en ligne; la « fin de l’axe en ligne » étant déterminée par les propriétés writing-mode, direction et text-orientation.

margin-inline WD

La propriété margin-inline est une propriété raccourcie qui permet de définir les valeurs de margin-inline-start et margin-inline-end.

Les propriétés CSS relatives aux bordures

Ces propriétés permettent de définir des bordures droites ou arrondies de différents styles et textures.

border REC

La propriété border est une propriété raccourcie qui permet de définir les propriétés des bordures pour un élément.

border-width REC

La propriété border-width permet de définir la largeur des bordures d’un élément.

border-style REC

La propriété border-style permet de définir le style des bordures d’un élément (bordure solide, en pointillés, avec effet 3D, etc.).

border-color REC

La propriété border-color permet de définir la couleur des bordures d’un élément.

border-bottom REC

La propriété border-bottom permet de définir les propriétés de la bordure basse d’un élément.

border-left REC

La propriété border-left permet de définir les propriétés de la bordure gauche d’un élément.

border-top REC

La propriété border-top permet de définir les propriétés de la bordure haute d’un élément.

border-right REC

La propriété border-right permet de définir les propriétés de la bordure droite d’un élément.

border-{top|right|bottom|left}-width REC

Les propriétés border-{top|right|bottom|left}-width permettent de définir la largeur de la bordure {haute|droite|basse|gauche} d’un élément.

border-{top|right|bottom|left}-style REC

Les propriétés border-{top|right|bottom|left}-width permettent de définir le style de la bordure {haute|droite|basse|gauche} d’un élément.

border-{top|right|bottom|left}-color REC

Les propriétés border-{top|right|bottom|left}-width permettent de définir la couleur de la bordure {haute|droite|basse|gauche} d’un élément.

border-block WD

La propriété border-block permet de définir les propriétés des bordures de l’axe de bloc qui est l’axe vertical par défaut (qui correspond donc aux bordures gauche et droite). L’effet de cette propriété dépend des valeurs de writing-mode, direction et de text-orientation appliquées à l’élément.

border-inline WD

La propriété border-inline permet de définir les propriétés des bordures de l’axe en ligne qui est l’axe horizontal par défaut (qui correspond donc aux bordures haute et basse). L’effet de cette propriété dépend des valeurs de writing-mode, direction et de text-orientation appliquées à l’élément.

border-{block|inline}-width WD

Les propriétés border-{block|inline}-width permettent de définir la largeur des bordures pour {l’axe de bloc|l’axe en ligne} de l’élément.

border-{block|inline}-style WD

Les propriétés border-{block|inline}-style permettent de définir le style des bordures pour {l’axe de bloc|l’axe en ligne} de l’élément.

border-{block|inline}-color WD

Les propriétés border-{block|inline}-color permettent de définir la couleur des bordures pour {l’axe de bloc|l’axe en ligne} de l’élément.

border-block-start WD

La propriété border-block-start permet de définir les propriétés de la bordure relative au début de l’axe de bloc de l’élément (bordure haute par défaut).

border-block-end WD

La propriété border-block-end permet de définir les propriétés de la bordure relative à la fin de l’axe de bloc de l’élément (bordure basse par défaut).

border-inline-start WD

La propriété border-inline-start permet de définir les propriétés de la bordure relative au début de l’axe en ligne de l’élément (bordure gauche par défaut).

border-inline-end WD

La propriété border-inline-end permet de définir les propriétés de la bordure relative à la fin de l’axe en ligne de l’élément (bordure droite par défaut).

border-{block-start|block-end|inline-start|inline-end}-width WD

Les propriétés border-{block-start|block-end|inline-start|inline-end-width permettent de définir la largeur des bordures relatives au {début de l’axe de bloc|fin de l’axe de bloc|début de l’axe en ligne|fin de l’axe en ligne} de l’élément.

border-{block-start|block-end|inline-start|inline-end}-style WD

Les propriétés border-{block-start|block-end|inline-start|inline-end-style permettent de définir le style des bordures relatives au {début de l’axe de bloc|fin de l’axe de bloc|début de l’axe en ligne|fin de l’axe en ligne} de l’élément.

border-{block-start|block-end|inline-start|inline-end}-color WD

Les propriétés border-{block-start|block-end|inline-start|inline-end}-color permettent de définir la couleur des bordures relatives au {début de l’axe de bloc|fin de l’axe de bloc|début de l’axe en ligne|fin de l’axe en ligne} de l’élément.

border-radius CR

La propriété border-radius permet de définir le niveau de l’arrondi (rayon de courbure) des bordures d’un élément.

border-top-left-radius CR

La propriété border-top-left-radius permet de définir le niveau d’arrondi du coin formé par les bordures gauche et haute d’un élément.

border-top-right-radius CR

La propriété border-top-right-radius permet de définir le niveau d’arrondi des bordures du coin supérieur droit d’un élément.

border-bottom-right-radius CR

La propriété border-bottom-right-radius permet de définir le niveau d’arrondi des bordures du coin inférieur droit d’un élément.

border-bottom-left-radius CR

La propriété border-bottom-left-radius permet de définir le niveau d’arrondi des bordures du coin inférieur gauche d’un élément.

border-start-start-radius WD

La propriété border-start-start-radius permet de définir l’arrondi des bordures relatives au coin représentant le début des axes en ligne et de bloc (border-top-left-radius par défaut)

border-start-end-radius WD

La propriété border-start-end-radius permet de définir l’arrondi des bordures relatives au coin représentant le début de l’axe en ligne et la fin de l’axe de bloc (border-bottom-left-radius par défaut)

border-end-start-radius WD

La propriété border-end-start-radius permet de définir l’arrondi des bordures relatives au coin représentant la fin de l’axe en ligne et le début de l’axe de bloc (border-top-right-radius par défaut)

border-end-end-radius WD

La propriété border-end-end-radius permet de définir l’arrondi des bordures relatives au coin représentant la fin des axes en ligne et de bloc (border-bottom-right-radius par défaut)

border-image CR

La propriété border-image propriété raccourcie qui permet de définir une ou plusieurs images comme style de bordures (hors coin) et d’en déterminer les propriétés.

border{bottom|left|top|right}-image WD

Les propriétés border{bottom|left|top|right}-image sont identiques à border-image mais sont utilisées pour définir une ou plusieurs images pour chaque bordure de l’élément (hors coins).

border-image-source CR

La propriété border-image-source permet de spécifier une image à utiliser à la place du rendu spécifié par la propriété border-style.

border-image-slice CR

La propriété border-image-slice permet de spécifier les décalages vers l’intérieur à partir des bords supérieur, droit, inférieur et gauche de l’image, en la divisant en neuf régions: quatre coins, quatre bords et un milieu. La partie centrale de l’image est enlevée.

border-image-width CR

La propriété border-image-width permet de définir les décalages utilisés pour diviser la zone d’image de la bordure en neuf parties.

border-image-outset CR

La propriété border-image-outset permet d’indiquer dans quelle ampleur la zone d’image de bordure doit s’étendre au delà de la boite de bordure.

border-image-repeat CR

La propriété border-image-repeat permet de définir le comportement de répétition d’une image de bordure.

border-corner-image WD

La propriété border-corner-image est une propriété raccourcie permettant d’utiliser une ou plusieurs images comme style pour les coins de bordures.

border-{top-left|top-right|bottom-right|bottom-left}-image WD

Les propriétés border-{top-left|top-right|bottom-right|bottom-left}-image sont identiques à border-corner-image mais pour chaque coin de bordure.

border-fit WD

La propriété border-fit permet de déterminer si et comment les images de bordure seront insérées.

border-fit-length WD

La propriété border-fit-length détermine le traitement de l’image dans la dimension de la longueur de la bordure, c’est-à-dire horizontalement pour les bordures supérieure et inférieure et verticalement pour les bordures gauche et droite.

border-fit-width WD

La propriété border-fit-width détermine le traitement de l’image dans la dimension de la largeur de la bordure, c’est-à-dire verticalement pour les bordures supérieure et inférieure et horizontalement pour les bordures gauche et droite.

border-{bottom|left|top|right}-fit-length WD

Les propriétés border-{bottom|left|top|right}-fit-length sont identiques à border-fit-length mais pour chaque bordure.

border-{bottom|left|top|right}-fit-width WD

Les propriétés border-{bottom|left|top|right}-fit-width sont identiques à border-fit-width mais pour chaque bordure.

border-corner-fit WD

La propriété border-corner-fit est une propriété raccourcie permettant permet de définir la façon dont doit être gérée une image de bordure au niveau des coins de celle-ci.

border-{top-left|top-right|bottom-right|bottom-left}-fit-length WD

La propriété -{top-left|top-right|bottom-right|bottom-left}-fit-length permet de définir la façon dont doit être gérée une image de bordure au niveau des coins de celle-ci dans la dimension de la longueur.

border-{top-left|top-right|bottom-right|bottom-left}-fit-width WD

La propriété -{top-left|top-right|bottom-right|bottom-left}-fit-width permet de définir la façon dont doit être gérée une image de bordure au niveau des coins de celle-ci dans la dimension de la largeur.

border-image-transform WD

La propriété border-image-transform permet d’indiquer que les images sur les bords doivent être des transformations de l’image définie en border-top-image.

border-corner-image-transform WD

La propriété border-corner-image-transform permet d’indiquer que l’image située sur les coins de la bordure doit être une transformation de l’image définie en border-top-left-image.

border-boundary WD

La propriété border-boundary permet de définir une contrainte de limite qui affecte les bordures d’un élément.

border-break WD

La propriété border-break permet de gérer le style de la bordure d’un élément qui serait coupé par un page break ou un colonne break ou un line break pour les éléments inline.

Les propriétés CSS liées au positionnement

Ces propriétés permettent de gérer le positionnement et la façon dont s’empilent les éléments.

position REC

La propriété position permet d’indiquer quel algorithme de positionnement doit être utilisé pour calculer la position d’une boîte.

top REC

La propriété top permet d’indiquer dans quelle mesure le bord de la marge supérieure d’une boîte positionnée doit être décalé par rapport au bord supérieur du bloc qui la contient. Le décalage est calculé différement en fonction du type de positionnement.

right REC

La propriété right permet d’indiquer dans quelle mesure le bord de la marge droite d’une boîte positionnée doit être décalé par rapport au bord droit du bloc qui la contient. Le décalage est calculé différement en fonction du type de positionnement.

bottom REC

La propriété bottom permet d’indiquer dans quelle mesure le bord de la marge inférieure d’une boîte positionnée doit être décalé par rapport au bord inférieur du bloc qui la contient. Le décalage est calculé différement en fonction du type de positionnement.

left REC

La propriété left permet d’indiquer dans quelle mesure le bord de la marge gauche d’une boîte positionnée doit être décalé par rapport au bord gauche du bloc qui la contient. Le décalage est calculé différement en fonction du type de positionnement.

z-index REC

La propriété z-index permet d’indiquer le niveau d’empilement d’un élément positionné dans le contexte d’empilement courant et de déterminer si l’élément doit établir un contexte d’empilement.

offset-end WD

La propriété offset-end indique dans quelle mesure le bord d’une marge de l’élément est décalé par rapport au bord de référence physique correspondant du bloc conteneur de la boîte. Le bord de référence physique particulier utilisé lors du décalage est basé sur les propriétés writing-mode et direction. Pour writing-mode : horizontal-tb et direction: ltr, cela correspond au bord droit.

offset-before WD

La propriété offset-before indique dans quelle mesure le bord d’une marge de l’élément est décalé par rapport au bord de référence physique correspondant du bloc conteneur de la boîte. Le bord de référence physique particulier utilisé lors du décalage est basé sur les propriétés writing-mode et direction. Pour writing-mode : horizontal-tb et direction: ltr, cela correspond au bord supérieur.

offset-after WD

La propriété offset-after indique dans quelle mesure le bord d’une marge de l’élément est décalé par rapport au bord de référence physique correspondant du bloc conteneur de la boîte. Le bord de référence physique particulier utilisé lors du décalage est basé sur les propriétés writing-mode et direction. Pour writing-mode : horizontal-tb et direction: ltr, cela correspond au bord inférieur.

offset-start WD

La propriété offset-start indique dans quelle mesure le bord d’une marge de l’élément est décalé par rapport au bord de référence physique correspondant du bloc conteneur de la boîte. Le bord de référence physique particulier utilisé lors du décalage est basé sur les propriétés writing-mode et direction. Pour writing-mode : horizontal-tb et direction: ltr, cela correspond au bord gauche.

inset-block-start WD

La propriété inset-block-start permet de définir un décalage au niveau du début d’un axe de bloc, le « début de l’axe de bloc » étant défini par les valeurs des propriétés writing-mode, direction et text-orientation.

inset-block-end WD

La propriété inset-block-end permet de définir un décalage au niveau de la fin d’un axe de bloc, la « fin de l’axe de bloc » étant définie par les valeurs des propriétés writing-mode, direction et text-orientation.

inset-block WD

La propriété inst-block permet de définir les valeurs des propriétés inset-block-start et inset-block-end.

inset-inline-start WD

La propriété inset-inline-start permet de définir un décalage au niveau du début d’un axe en ligne, le « début de l’axe en ligne » étant défini par les valeurs des propriétés writing-mode, direction et text-orientation.

inset-inline-end WD

La propriété inset-inline-end permet de définir un décalage au niveau de la fin d’un axe en ligne, la « fin de l’axe en ligne » étant définie par les valeurs des propriétés writing-mode, direction et text-orientation.

inset-inline WD

La propriété inst-inline permet de définir les valeurs des propriétés inset-inline-start et inset-inline-end.

Les propriétés CSS liées aux flottants

Ces propriétés permettent d’indiquer si un élément doit flotter pour s’aligner sur une boîte en ligne, une colonne, une région ou une page.

float REC

La propriété float permet de retirer un élément du flux normal du document pour le faire flotter à côté de con conteneur. Le texte et les autres éléments en ligne vont venir entourer l’élément flottant.

clear REC

La propriété clear permet d’indiquer si un élément peut être situé à côté d’éléments flottants qui le précèdent ou si il doit se placer à la ligne.

float-defer FPWD

La définition de la propriété float-defer n’est pas définitive pour le moment (la propriété vient tout juste d’être proposée).

float-offset FPWD

La définition de la propriété float-offset n’est pas définitive pour le moment (la propriété vient tout juste d’être proposée).

float-reference FPWD

La définition de la propriété float-reference n’est pas définitive pour le moment (la propriété vient tout juste d’être proposée).

La visibilité en CSS

Cette propriété permet de modifier l’état de visiiblité d’un élément.

visibility REC

La propriété visibility peut être utilisée afin de cacher un élément tout en conservant occupé l’espace dans lequel il aurait été visible.

L’affichage en CSS

Cette propriété permet de définir le type d’affichage des éléments.

display REC

La propriété display permet de définir le type d’affichage utilisé pour le rendu d’un élément. Le display d’un élément se compose d’un outer display et d’un inner display. L’outer display (affichage extérieur) définit comment la boîte participe au flux tandis que l’inner display (affichage intérieur) définit l’organisation des éléments enfants.

Les propriétés liées à l’alignement des boîtes

Ces propriétés CSS permettent de définir l’alignement des blocs dans leurs conteneurs selon les différents modèles de disposition de blocs CSS : disposition en blocs, disposition tableau, disposition flex et disposition grille. Les propriétés de ce module sont bien supportées et stables même si certaines sont toujours en « Working Draft » sur la spécification officielle.

align-content CR

La propriété align-content permet d’aligner le contenu d’une boite élément par rapport à la boite le long de l’axe secondaire / l’axe en colonne (axe de bloc).

justify-content CR

La propriété justify-content permet d’aligner le contenu d’une boite élément par rapport à la boite le long de l’axe principal / l’axe en ligne.

place-content WD

La propriété place-content est une propriété raccourcie qui permet de définir les valeurs pour align-content et justify-content.

align-self CR

La propriété align-self permet d’aligner une boite au sein de son conteneur sur l’axe secondaire ou axe en colonne.

justify-self WD

La propriété justify-self permet de définir comment une boite élément sera alignée au sein de son conteneur sur l’axe principal ou axe en ligne.

place-self WD

La propriété place-self est une propriété raccourcie qui permet de définir les valeurs pour align-self et justify-self.

align-items CR

La propriété align-items permet de définir la valeur de align-self pour l’ensemble des éléments descendants directs.

justify-items WD

La propriété justify-items permet de définir la valeur de justify-self pour l’ensemble des éléments descendants directs.

place-items WD

La propriété place-items est une propriété raccourcie qui permet de définir les valeurs pour align-items et justify-items.

row-gap WD

La propriété row-gap permet de définir la taille des gouttières (l’espacement) entre les rangées en séparant les boites dans l’axe de bloc du conteneur.

column-gap WD

La propriété column-gap permet de définir la taille des gouttières (l’espacement) entre les colonnes en séparant les boites dans l’axe en ligne du conteneur.

gap WD

La propriété gap est une propriété raccourcie qui permet de définir les valeurs de row-gap et de column-gap.

order CR

La propriété order contrôle l’ordre dans lequel les éléments flexibles apparaissent dans le conteneur flex.

Les propriétés CSS liées au modèle des boites flexibles ou flexbox

Ces propriétés définissent un modèle de boîte CSS optimisé pour la conception d’interface utilisateur. Dans le modèle de disposition flex, les enfants d’un conteneur flex peuvent être disposés dans n’importe quelle direction et possèdent une taille flexible : ils peuvent grandir pour remplir l’espace inutilisé ou se rétrécir pour éviter de déborder de leur parent.

flex-grow CR

La propriété flex-grow définit la capacité d’une élément flexible à s’étendre pour occuper l’espace disponible.

flex-shrink CR

La propriété flex-shrink définit la capacité d’une élément flexible à rétrécir pour ne pas déborder de son conteneur.

flex-basis CR

La propriété flex-basis détermine la taille de base d’un élément flexible avant que tout espace soit redistribué.

flex CR

La propriété flex est une propriété raccourcie qui permet de définir les valeurs pour flex-grow, flex-shrink et flex-basis.

flex-direction CR

La propriété flex-direction permet de définir la direction de l’axe principal du conteneur flex, déterminant ainsi la direction selon laquelle les éléments flexibles sont disposés.

flex-wrap CR

La propriété flex-wrap détermine si le conteneur flex est monoligne ou multiligne (i.e si les éléments flexibles peuvent aller à la ligne ou pas), ainsi que la direction de l’axe transversal, qui détermine la direction dans laquelle les nouvelles lignes sont empilées.

flex-flow CR

La propriété flex-flow est une propriété raccourcie qui permet de définir les valeurs pour flex-direction et flex-wrap.

Les propriétés CSS liées au modèle des grilles

Ces propriétés permettent de définir un système de présentation bidimensionnel basé sur une grille. Dans le modèle de présentation en grille, les enfants d’un conteneur de grille peuvent être positionnés dans des emplacements arbitraires d’une grille de présentation prédéfinie flexible ou de taille fixe.

grid-template-columns CR

La propriété grid-template-columns spécifie la liste des pistes (nom et taille) pour les colonnes de la grille.

grid-template-rows CR

La propriété grid-template-rows spécifie la liste des pistes (nom et taille) pour les lignes de la grille.

grid-template-areas CR

La propriété grid-template-areas permet de définir des zones de grille nommées.

grid-template CR

La propriété grid-template est une propriété raccourcie qui permet de définir les valeurs de grid-template-columns, grid-template-rows et grid-template-areas.

grid-auto-rows CR

La propriété grid-auto-rows permet de définir la taille des pistes créées de façon implicite pour les lignes d’une grille.

grid-auto-columns CR

La propriété grid-auto-columns permet de définir la taille des pistes créées de façon implicite pour les colonnes d’une grille.

grid-auto-flow CR

La propriété grid-auto-flow contrôle le fonctionnement de l’algorithme de placement automatique, en spécifiant exactement comment les éléments placés automatiquement sont transférés dans la grille.

grid CR

La propriété grid est une propriété raccourcie qui permet de définir toutes les valeurs relatives aux propriétés des grilles CSS explicites (grid-template-rows, grid-template-columns et grid-template-areas) et implicites (grid-auto-rows, grid-auto-columns et grid-auto-flow).

grid-row-start CR

La propriété grid-row-start permet de définir la ligne de départ d’un élément de grille.

grid-row-end CR

La propriété grid-row-end permet de définir la ligne de fin d’un élément de grille.

grid-row CR

La propriété grid-row est une propriété raccourcie qui permet de définir les valeurs pour grid-row-start et grid-row-end.

grid-column-start CR

La propriété grid-column-start permet de définir la colonne de départ d’un élément de grille.

grid-column-end CR

La propriété grid-column-end permet de définir la colonne de fin d’un élément de grille.

grid-column CR

La propriété grid-column est une propriété raccourcie qui permet de définir les valeurs pour grid-column-start et grid-column-end.

grid-area CR

La propriété grid-area est une propriété raccourcie qui permet de définir les valeurs pour grid-row-start, grid-column-start, grid-row-end et grid-column-end.

Les propriétés CSS liées à la fragmentation du contenu

Ces propriétés définissent un modèle de fragmentation qui partitionne le flux de contenu en différentes pages, colonnes ou régions.

break-before CR

La propriété break-before permet de spécifier un comportement de rupture de page / colonne / région précédant la boite élément.

break-after CR

La propriété break-after permet de spécifier un comportement de rupture de page / colonne / région suivant la boite élément.

break-inside CR

La propriété break-inside permet de spécifier un comportement de rupture de page / colonne / région au sein de la boite élément.

orphans CR

La propriété orphans spécifie le nombre minimum de lignes dans un conteneur bloc qui doit être laissé dans un fragment avant fragmentation (cassure).

widows CR

La propriété widows spécifie le nombre maximum de lignes dans un conteneur bloc qui doit être laissé dans un fragment avant fragmentation.

page-break-before REC

La propriété page-break-before est une propriété héritée du CSS 2.1. On lui préfère la propriété break-before aujourd’hui.

page-break-after REC

La propriété page-break-after est une propriété héritée du CSS 2.1. On lui préfère la propriété break-after aujourd’hui.

page-break-inside REC

La propriété page-break-inside est une propriété héritée du CSS 2.1. On lui préfère la propriété break-inside aujourd’hui.

margin-break FPWD

La propriété margin-break détermine si les marges de l’axe de bloc de la boîte sont supprimées ou conservées à une rupture de fragmentation.

box-decoration-break CR

La propriété box-decoration-break détermine si les marges, les bordures et les autres décorations de la boîte enveloppent les bords brisés des fragments de la boîte et comment la zone de positionnement d’arrière-plan est dérivée à partir de / dupliquée à travers les fragments de la boîte et comment l’arrière-plan de l’élément est dessiné pour chacun d’eux.

Les propriétés CSS liées à la mise en page en régions

Ces propriétés permettent au contenu d’un ou de plusieurs éléments de circuler dans une ou plusieurs zones fragmentées appelées « régions ».

flow-from WD

La propriété flow-from transforme un conteneur de type bloc en une région et l’associe à un flux nommé.

flow-into WD

La propriété flow-into peut placer un élément ou son contenu dans un flux nommé. Le contenu appartenant au même flux est présenté dans la chaîne de régions associée à ce flux.

region-fragment WD

La propriété region-fragment contrôle le comportement de la dernière région associée à un flux nommé.

Les propriétés CSS liées à la mise en page multi-colonnes

Ces propriétés permettent de définir des mises en page multi-colonnes.

column-width WD

La propriété column-width permet de définir la largeur des colonnes dans un conteneur multi-colonnes.

column-count WD

La propriété column-count permet de définir le nombre de colonnes dans un conteneur multi-colonnes.

columns WD

La propriété columns est une propriété raccourcie qui permet de définir les valeurs de column-width et column-count.

column-rule-width WD

La propriété column-rule-width définit une règle de taille pour les colonnes d’un élément.

column-rule-style WD

La propriété column-rule-style définit une règle de style pour les colonnes d’un élément.

column-rule-color WD

La propriété column-rule-color définit une règle de couleur pour les colonnes d’un élément.

column-rule WD

La propriété column-rule est une propriété raccourcie qui permet de définir les valeurs de column-rule-width, column-rule-style et column-rule-color.

column-span WD

La propriété column-span définit le nombre de colonnes qu’un élément doit occuper.

column-fill WD

La propriété column-fill permet d’indiquer si les colonnes doivent être remplies équitablement ou de manière séquentielle.

Les propriétés CSS liées à la police

Ces propriétés permettent de définir des familles de police à utiliser et la façon dont chaque police doit être chargée.

font-family REC

La propriété font-family spécifie une liste hiérarchisée de noms de familles de polices ou de noms de familles génériques.

font-weight REC

La propriété font-weight spécifie le poids des glyphes dans la police, leur degré de noirceur ou l’épaisseur du trait.

font-stretch REC

La propriété font-stretch sélectionne une forme normale, condensée ou étendue dans une famille de polices.

font-style REC

La propriété font-style permet de sélectionner une forme italique ou oblique pour une police.

font-size REC

La propriété font-size indique la hauteur souhaitée des glyphes à partir de la police.

font-size-adjust REC

La propriété font-size-adjust permet de préserver la lisibilité d’une police de repli en uniformisant la valeur d’aspect des différentes polices.

font REC

La propriété font est une propriété raccourcie qui permet de définir les valeurs de font-style, font-variant, font-weight, font-stretch, font-size, font-height et font-family.

font-synthesis-weight WD

La propriété font-synthesis-weight détermine si les agents utilisateurs sont autorisés à synthétiser des formes de polices grasses lorsqu’une famille de polices n’en a pas.

font-synthesis-style WD

La propriété font-synthesis-style détermine si les agents utilisateurs sont autorisés à synthétiser des formes de police obliques lorsqu’une famille de polices n’en a pas.

font-synthesis REC

La propriété font-synthesis est une proprété raccourcie qui permet de définir les valeurs pour font-synthesis-weight et font-synthesis-style.

font-synthesis-small-caps WD

La propriété font-synthesis-small-caps détermine si les agents utilisateurs sont autorisés à synthétiser des minusucles pour des polices qui ne possèdent pas de fgrme minuscule.

font-kerning REC

Le crénage (kerning) est l’ajustement contextuel de l’espacement entre les glyphes. La propriété font-kerning contrôle le crénage métrique, le crénage qui utilise les données de réglage contenues dans la police.

font-variant-ligatures REC

La propriété font-variant-ligatures permet d’harmoniser l’affichage du texte en contrôlant quelles ligatures et formes contextuelles sont utilisées dans les éléments textuels auxquels elle s’applique.

font-variant-caps REC

La propriété font-variant-caps permet de contrôler les glyphes utilisés pour représenter les lettres en capitales.

font-variant-numeric REC

La propriété font-variant-numeric permet de contrôler la forme des caractères numériques (nombres, fractions, etc.).

font-variant-alternates WD

La propriété font-variant-alternates contrôle l’utilisation de glyphes alternatifs.

font-variant-east-asian REC

La propriété font-variant-east-asian contrôle l’utilisation des glyphes alternatifs pour les scripts japonais, chinois et d’Asie orientale.

font-variant-position REC

La propriété font-variant-position permet d’utiliser des glyphes de plus petite taille positionnés en exposant ou en indice.

font-variant REC

La propriété font-variant est une propriété raccourcie qui permet de définir les valeurs de font-variant-ligatures, font-variant-caps, font-variant-alternates, font-variant-numeric, font-variant-east-asian et font-variant-position.

font-feature-settings REC

La propriété font-feature-settings fournit un contrôle de bas niveau sur les fonctionnalités de police OpenType.

font-language-override WD

La propriété font-language-override permet de spécifier explicitement le système de langage de la police, en remplaçant le système de langage impliqué par la langue du contenu.

font-optical-sizing WD

La propriété font-optical-sizing détermine si les agents utilisateurs sont autorisés à modifier la forme des glyphes en fonction de la taille de la police et de la densité de pixels de l’écran.

font-variation-settings WD

La propriété font-variation-settings fournit un contrôle de bas niveau sur les variations de police OpenType ou TrueType.

font-palette WD

La propriété font-palette permet de définir la palette de couleur utilisée au sein de certains glyphes.

font-variant-emoji WD

La propriété font-variant-emoji permet de choisir si la présentation emoji ou la présentation texte est utilisée pour certains points de code emoji.

Les propriétés CSS liées au texte

Ces propriétés permettent de manipuler le texte, d’indiquer comment il doit être traité et de le décorer.

text-transform REC

La propriété text-transform permet de transformer le texte pour le styliser.

word-boundary-detection WD

La propriété word-boundary-detection permet de décider si et comment l’agent d’utilisateur doit analyser le contenu pour déterminer où se trouvent les limites des mots et pour insérer les limites virtuelles des mots en conséquence.

word-boundary-expansion WD

La propriété word-boundary-expansion permet de de transformer certains caractères de séparation de mots en d’autres caractères de séparation de mots, afin de s’adapter à des variantes de styles de composition.

text-space-collapse WD

La propriété text-space-collapse indique si et comment l’espace blanc à l’intérieur de l’élément est réduit.

text-wrap WD

La propriété text-wrap spécifie le mode d’habillage du texte.

text-space-trim WD

La propriété text-space-trim permet de spécifier le comportement de rognage au début et à la fin d’une boite.

white-space REC

La propriété white-space est une propriété raccourcie qui permet de définir les valeurs de text-space-collapse, text-wrap et text-space-trim.

wrap-before WD

La propriété wrap-before permet de définir un comportement à adopter par rapport aux opportunités de rupture de ligne avant la boite.

wrap-after WD

La propriété wrap-after permet de définir un comportement à adopter par rapport aux opportunités de rupture de ligne après la boite.

wrap-inside WD

La propriété wrap-inside permet de définir un comportement à adopter par rapport aux opportunités de rupture de ligne à l’intérieur de la boite.

tab-size WD

La propriété tab-size détermine la taille de la tabulation utilisée pour le rendu des caractères de tabulation préservés.

hyphenate-character WD

La propriété hyphenate-character spécifie la chaîne affichée entre les parties de mots avec un trait d’union.

hyphenate-limit-zone WD

La propriété hyphenate-limit-zone spécifie la quantité maximale d’espace non rempli (avant justification) pouvant être laissée dans la zone de ligne avant que la césure ne soit déclenchée pour extraire une partie d’un mot de la ligne suivante dans la ligne actuelle.

hyphenate-limit-chars WD

La propriété hyphenate-limit-chars spécifie le nombre minimum de caractères dans un mot composé. Si le mot ne correspond pas au nombre minimum de caractères requis dans le mot / avant le trait d’union / après le trait d’union, il ne doit pas être coupé.

hyphenate-limit-lines WD

La propriété hyphenate-limit-lines indique le nombre maximum de lignes successives avec des tirets dans un élément.

hyphenate-limit-last WD

La propriété hyphenate-limit-last indique le comportement de césure à la fin des éléments, des colonnes, des pages et des écarts.

text-align-all WD

La propriété text-align-all spécifie l’alignement en ligne de toutes les lignes de contenu en ligne, à l’exception des dernières lignes surchargées par une valeur non text-align-last qui n’est pas auto.

text-align-last WD

La propriété text-align-last décrit comment la dernière ligne d’un bloc ou une ligne juste avant un saut de ligne forcé est alignée.

text-align REC

La propriété text-align est une propriété raccourcie qui permet de définir les valeurs de test-align-all et text-align-last et qui décrit la façon dont le contenu en ligne d’un bloc est aligné le long de l’axe en ligne dans le cas où le contenu de remplit pas totalement la ligne de la boite.

text-justify WD

La propriété text-justify sélectionne la méthode de justification utilisée lorsque l’élément possède un text-align: justify.

text-group-align WD

La propriété text-group-align aligne le contenu des boites de lignes en tant que groupe tout en maintenant leur alignement de texte.

line-padding WD

La propriété line-padding ajuste l’espacement uniquement au début / à la fin d’une ligne.

text-spacing WD

La propriété text-spacing contrôle l’espacement entre les caractères adjacents sur la même ligne.

word-break WD

La propriété word-break spécifie où il est «normal» et autorisé de rompre les lignes de texte.

line-break WD

La propriété line-break spécifie le degré de rigueur des règles de rupture de ligne appliquées dans un élément.

hyphens WD

La propriété hyphens permet de contrôler les possibilités de césure.

overflow-wrap WD

La propriété overflow-wrap permet de définir si l’agent utilisateur peut effectuer une césure à des endroits normalement non autorisés dans une ligne pour éviter qu’une chaine ne dépasse de son conteneur.

word-wrap WD

La propriété word-wrap est un alias de overflow-wrap.

word-spacing REC

La propriété word-spacing permet d’ajouter de l’espace supplémentaire entre les mots.

letter-spacing WD

La propriété letter-spacing permet d’ajouter de l’espace supplémentaire entre les lettres.

text-indent REC

La propriété text-indent spécifie l’indentation appliquée aux lignes du contenu en ligne d’un bloc.

hanging-punctuation WD

La propriété hanging-punctuation indique si un signe de ponctuation se situant au début ou à la fin d’une ligne de texte doit rester sur cette ligne, quitte à sortir de la boîte qui représente la ligne.

text-decoration-line CR

La propriété text-decoration-line permet de définir les décorations de lignes à ajouter à l’élément.

text-decoration-style CR

La propriété text-decoration-style permet de définir le style des lignes dessinées pour décorer le texte

text-decoration-color CR

La propriété text-decoration-color permet de définir le couleur des lignes dessinées pour décorer le texte.

text-decoration CR

La propriété text-decoration est une propriété raccourcie qui permet de définir les valeurs de text-decoration-line, text-decoration-style et text-decoration-color.

text-decoration-width FPWD

La propriété text-decoration-width définit l’épaisseur du trait des soulignements, des surlignages et des lignes.

text-underline-position CR

La propriété text-underline-position définit la position d’un soulignement spécifié sur l’élément.

text-emphasis-style CR

La propriété text-emphasis-style définit le type des marques d’emphase utilisée.

text-emphasis-color CR

La propriété text-emphasis-color définit la couleur des marques d’emphase utilisée.

text-emphasis CR

La propriété text-emphasis est une propriété raccourcie qui permet de définir les valeurs de text-emphasis-style et text-emphasis-color.

text-emphasis-position CR

La propriété text-emphasis-position permet de définir l’emplacement des marques d’emphase.

text-emphasis-skip FPWD

La propriété text-emphasis-skip permet de définir pour quels caractères les marques d’emphase doivent être dessinées.

text-shadow CR

La propriété text-shadow permet d’ajouter des ombres autour des textes.

text-underline-offset FPWD

La propriété text-underline-offset définit le décalage des soulignements par rapport à leur position initiale.

text-decoration-skip FPWD

La propriété text-decoration-skip spécifie les parties du contenu de l’élément que toute décoration de texte affectant l’élément doit ignorer.

text-decoration-skip-ink FPWD

La propriété text-decoration-skip-ink contrôle la manière dont les surlignages et les soulignements sont dessinés lorsqu’ils croisent un glyphe.

Les propriétés CSS relatives au positionnement des lignes

Ces propriétés permettent de gérer le positionnement dans le sens de progression du bloc des éléments et du texte dans les lignes et des lignes elles-mêmes.

line-height REC

La propriété line-height permet de définir permet de définir la hauteur de la boîte d’une ligne.

dominant-baseline WD

La propriété dominant-baseline permet de définir la ligne de base dominante, qui est la ligne de base utilisée pour aligner le texte et le contenu de niveau inline d’un élément.

baseline-shift WD

La propriété baseline-shift permet de repositionner la ligne de base dominante par rapport à la ligne de base dominante du contenu textuel du parent.

alignment-baseline WD

La propriété alignment-baseline permet de définir quel point d’une boite de niveau inline va être aligné sur tel point du parent.

vertical-align WD

La propriété vertical-align est une propriété raccourcie qui permet de définir les valeurs de baseline-shift et de alignment-baseline. Elle spécifie la façon dont une boite de niveau inline va être aligné dans la ligne.

inline-sizing WD

La propriété inline-sizing spécifie comment la hauteur logique de la zone de contenu d’une boîte en ligne est mesurée et comment elle est alignée par rapport à son contenu.

initial-letters WD

La propriété initial-letters permet de définir le style des lettrines (lettres initiales) qu’elles soient rabaissées ou surélevées.

initial-letters-align WD

La propriété initial-letters-align spécifie les points d’alignement utilisés pour dimensionner et positionner une lettre initiale.

initial-letters-wrap WD

La propriété initial-letters-wrap spécifie si les lignes affectées par une lettre initiale sont raccourcies pour s’ajuster à la forme rectangulaire de la boîte de la lettre initiale ou suivre le contour de son contour de glyphe.

Les propriétés CSS relatives au débordement

Ces propriétés permettent de gérer les débordements.

overflow-x WD

La propriété overflow-x permet de définir la façon dont on souhaite gérer les débordements dans la direction horizontale.

overflow-y WD

La propriété overflow-y permet de définir la façon dont on souhaite gérer les débordements dans la direction verticale.

overflow REC

La propriété overflow est une propriété raccourcie qui permet de définir les valeurs de overflow-x et overflow-y.

overflow-block WD

La propriété overflow-block permet de définir la façon dont on souhaite gérer les débordements dans une direction déterminée par la valeur du writing-mode de l’élément.

overflow-inline WD

La propriété overflow-inline permet de définir la façon dont on souhaite gérer les débordements dans une direction déterminée par la valeur du writing-mode de l’élément.

text-overflow REC

La propriété text-overflow spécifie le rendu lorsque le contenu en ligne déborde de son bord de boîte de fin de ligne dans la direction de progression en ligne de son élément conteneur (« le bloc ») dont overflow est autre que visible.

max-lines WD

La propriété max-lines limite le contenu d’un bloc à un nombre maximal de lignes avant d’être coupée.

block-overflow WD

La propriété block-overflow permet d’insérer du contenu dans la dernière ligne avant un saut de région (forcé ou non forcé) afin d’indiquer la continuité du contenu tronqué / interrompu.

continue WD

La propriété continue permet de de transformer une boîte en conteneur de fragmentation et de spécifier que le contenu après la rupture de fragmentation doit être ignoré.

line-clamp WD

La propriété line-clamp est une propriété raccourcie qui permet de définir les valeurs de max-lines, block-overflow et continue.

scrollbar-gutter FPWD

La propriété scrollbar-gutter permet de gérer la présence de la gouttière de la barre de défilement

Les propriétés CSS relatives aux listes

Ces propriétés permettent de gérer les puces des listes : styles, positionnement et manipulation des valeurs.

list-style-image REC

La propriété list-style-image permet de définir l’image utilisée comme puce devant les éléments de listes.

list-style-type REC

La propriété list-style-type permet de définir le type de puce d’un élément de liste (cercle, caractère, etc.)

list-style-position REC

La propriété list-style-position permet de définir la position du marqueur (::marker) de liste par rapport à la boîte principale.

list-style REC

La propriété list-style est une propriété raccourcie qui permet de définir le type, l’image et la position de la puce devant un élément de liste.

marker-side WD

La propriété marker-side spécifie si le marqueur (::marker) est positionné en fonction de la directionnalité de l’élément de liste lui-même (c’est-à-dire de son élément d’origine) ou de la directionnalité du conteneur de liste

counter-reset REC

La propriété counter-reset instancie les nouveaux compteurs sur un élément et les définit sur les valeurs entières spécifiées.

counter-increment REC

La propriété counter-increment permet de manipuler la valeur des compteurs existants ou d’instancier un nouveau compteur si aucun compteur avec le nom spécifié n’existe pour l’élément.

counter-set WD

La propriété counter-set permet de manipuler la valeur des compteurs existants ou d’instancier un nouveau compteur si aucun compteur avec le nom spécifié n’existe pour l’élément.

Les propriétés CSS relatives aux tableaux

L’objectif de ces propriétés est de est de définir le comportement attendu des agents utilisateurs prenant en charge les tables HTML et CSS.

table-layout REC

La propriété permet de définir l’algorithme utilisé pour disposer les cellules, lignes et colonnes d’un tableau.

border-collapse REC

La propriété permet d’indiquer si les bordures des celllules adjacentes d’un tableau doivent être fusionnées ou non.

border-spacing REC

La propriété permet de définir la taille de l’espace entre les bordures des celllules adjacentes d’un tableau.

caption-side REC

La propriété permet de définir la position de la légende d’un tableau.

empty-cells REC

La propriété permet de définir si les bordures et arrière plan des cellules vides d’un tableau doivent être affichés ou non.

Les propriétés CSS relatives aux images et aux autres contenus remplacés

Ces propriétés définissent les fonctionnalités relatives aux images et aux autres éléments remplacés.

object-fit CR

La propriété object-fit spécifie comment le contenu d’un élément remplacé doit être adapté à la boîte établie en fonction de sa hauteur et de sa largeur utilisées.

object-position CR

La propriété object-position détermine l’alignement de l’élément remplacé dans sa boîte.

image-orientation CR

La propriété image-orientation est dans les dernières spécifications CSS considérée comme dépréciée.

image-rendering CR

La propriété image-rendering indique à l’agent utilisateur quels aspects d’une image sont les plus importants à préserver lors de la mise à l’échelle de l’image afin qu’il puisse choisir un algorithme de mise à l’échelle approprié.

image-resolution WD

La propriété image-resolution permet de définir une résolution d’image différente de la résolution assumée par défaut par le CSS.

Les propriétés CSS relatives aux transitions

Ces propriétés permettent de créer des transitions c’est-à-dire de modifier progressivement la valeur d’autres propriétés CSS. Les propriétés de ce module sont stables et bien supportées même si elles sont marquées en « Working Draft » dans la spécification officielle.

transition-property WD

La propriété transition-property spécifie le nom de la propriété CSS à laquelle la transition est appliquée.

transition-duration WD

La propriété transition-duration définit la durée d’une transition.

transition-timing-function WD

La propriété transition-timing-function décrit comment les valeurs intermédiaires utilisées lors d’une transition seront calculées.

transition-delay WD

La propriété transition-delay permet de définir un délai avant le démarrage d’une transition.

transition WD

La propriété transition est une propriété raccourcie qui permet de définir une transition en précisant le nom, la durée, le timing et le délai de celle-ci.

Les propriétés CSS liées aux animations

Ces propriétés permettent d’animer les valeurs des propriétés CSS au fil du temps en utilisant des keyframes. Les propriétés de ce module sont stables et bien supportées même si elles sont marquées en « Working Draft » dans la spécification officielle.

animation WD

La propriété animation est une propriété raccourcie qui permet de créer des animations.

animation-name WD

La propriété animation-name permet de définir un nom pour une animation.

animation-duration WD

La propriété animation-duration permet de définir la durée d’une animation.

animation-timing-function WD

La propriété animation-timing-function permet de définir la façon dont une animation CSS doit se dérouler au cours de chaque cycle.

animation-delay WD

La propriété animation-delay permet de définir un délai avant le début d’une animation.

animation-iteration-count WD

La propriété animation-iteration-count permet d’indiquer le nombre de cycles pendant lesquels une animation doit être jouée.

animation-direction WD

La propriété animation-direction permet de définir dans quelle direction les cycles d’une animation doivent être joués (début -> fin, fin -> début, alterné…).

animation-fill-modeWD

La propriété animation-fill-mode permet d’iniquer si les styles de l’animation doivent être appliqués avant le début et après la fin de celle-ci à l’élément.

animation-play-stateWD

La propriété animation-play-state permet d’indiquer si une animation est en pause ou est en train d’être jouée.

Les propriétés CSS liées aux transformations

Ces propriétés permettent aux éléments stylisés grâce au CSS d’être transformés dans un espace à deux dimensions.

transform CR

La propriété transform permet de définir une transformation 2D ou 3D à appliquer à un élément via une liste de fonctions de transformation.

transform-origin CR

La propriété transform-origin permet d’établir l’origine de la transformation pour un élément.

transform-box CR

La propriété transform-box permet de déterminer la boite de référence de l’élément à utiliser pour appliquer une transformation.

transform-style WD

La propriété transform-style définit le mode de rendu des éléments imbriqués dans un espace 3D.

perspective WD

La propriété perspective applique la même transformation que la fonction de transformation perspective mais elle s’applique uniquement aux enfants positionnés ou transformés de l’élément.

perspective-origin WD

La propriété perspective-origin permet de définir le point d’origine pour la propriété perspective.

backface-visibility WD

La propriété backface-visibility détermine si le « dos » d’un élément transformé est visible ou non par l’utilisateur. Avec une transformation de typer identité, la face avant d’un élément fait face à l’utilisateur.

Les propriétés CSS relatives à l’alignement du contenu selon une grille

Ces propriétés permettent d’aligner des lignes et des blocs sur des grilles invisibles qui servent de ligne de base.

line-grid WD

La propriété line-grid spécifie si une boite doit créer une nouvelle grille qui servira de ligne de base pour ses descendants ou si elle doit utiliser la même que son élément parent.

line-snap WD

La propriété line-snap permet d’aligner les lignes des éléments contenus dans l’élément possédant un line-grid sur la grille servant de ligne de base définie par line-grid.

box-snap WD

La propriété box-snap spécifie comment un bloc est accroché / aligné par rapport à la grille servant de ligne de base.

Les propriétés CSS relatives au fond (background)

Ces propriétés permettent de gérer les propriétés liées au fond des éléments.

background REC

La propriété background est une propriété raccourcie qui permet de définir le fond où arrière plan d’un élément.

background-color REC

La propriété background-color permet de définir une couleur de fond pour un élément.

background-image REC

La propriété background-image permet de définir une image de fond pour un élément.

background-origin CR

La propriété background-origin permet de définir le point d’origine de l’image de fond (qui peut être au niveau de la boite de contenu, de la boite de padding ou de la boite de bordure).

background-position REC

La propriété background-position permet de définir la position de l’image par rapport à l’origine définie avec background-origin.

background-size CR

La propriété background-size permet de définir la taille des images de fond.

background-repeat REC

La propriété background-repeat permet de définir le comportement de répétition d’une image de fond.

background-attachment REC

La propriété background-attachment permet de définir si la position de l’image d’arrière-plan doit être fixée dans le viewport ou si elle doit défiler.

background-clip CR

La propriété background-clip permet d’indiquer si le fond (image ou couleur) doit être visible derrière les bordures, derrière le padding ou uniquement derrière la boite de contenu.

box-shadow CR

La propriété box-shadow permet de définir des ombres derrière (et autour) de la boite d’un élément.

Les propriétés CSS relatives à l’interface utilisateur

Ces propriétés permettent de définir les fonctionnalités et le rendu relatifs à l’interface utilisateur.

outline-width REC

La propriété outline-width permet de définir définir l’épaisseur de la « bordure externe » (outline) d’un élément. La bordure externe, à la différence des bordures classiques, ne va jamais consommer d’espace pour l’élément puisqu’elle va toujours être ajoutée autour de la boite.

outline-style REC

La propriété outline-style permet de définir la mise en forme utilisée pour dessiner l’outline d’un élément.

outline-color REC

La propriété outline-color permet de définir la couleur utilisée pour dessiner l’outline d’un élément.

outline REC

La propriété outline est une propriété raccourcie qui permet de définir les valeurs de outline-width, outline-style et outline-color.

outline-offset REC

La propriété outline-offset permet de définir l’espace à ajouter entre le bord de la boite de bordure d’un élément et l’outline.

resize REC

La propriété resize permet de spécifier si un élément est redimensionnable par l’utilisateur et, le cas, échéant, selon quel(s) axe(s).

cursor REC

La propriété cursor permet de définir la forme du curseur qui doit être affichée lorsque le pointeur se situe au dessus d’un élément particulier.

caret-color REC

La propriété caret-color permet de définir la couleur du curseur au sein des éléments dans lesquels l’utilisateur peut écrire (éléments de type input principalement).

caret-shape WD

La propriété caret-shape permet de définir la forme du curseur au sein des éléments dans lesquels l’utilisateur peut écrire.

caret WD

La propriété caret est une propriété raccourcie qui permet de définir les valeurs de caret-color et de caret-shape.

nav-up WD

La propriété nav-up permet de déterminer l’emplacement du focus (l’élément sur lequel le focus doit être dirigé) lorsque l’utilisateur navigue avec la flèche haut de son clavier.

nav-right WD

La propriété nav-right permet de déterminer l’emplacement du focus (l’élément sur lequel le focus doit être dirigé) lorsque l’utilisateur navigue avec la flèche droite de son clavier.

nav-down WD

La propriété nav-down permet de déterminer l’emplacement du focus (l’élément sur lequel le focus doit être dirigé) lorsque l’utilisateur navigue avec la flèche bas de son clavier.

nav-left WD

La propriété nav-left permet de déterminer l’emplacement du focus (l’élément sur lequel le focus doit être dirigé) lorsque l’utilisateur navigue avec la flèche gauche de son clavier.

user-select WD

La propriété user-select permet de contrôler l’opération de sélection.

Les propriétés CSS relatives au masquage

Ces propriétés permettent de définir des techniques le masquage (masking) et le découpage (clipping) pour masquer partiellement ou totalement des parties d’éléments visuels.

clip-path CR

La propriété clip-path spécifie une forme de base ou fait référence à un élément clipPath pour créer un tracé de détourage. Cette propriété remplace l’ancienne propriété clip qui est aujourd’hui dépréciée.

clip-rule CR

La propriété clip-rule indique l’algorithme à utiliser pour déterminer si un point donné se trouve à l’intérieur d’une forme pour une région de découpage créée avec un élément graphique.

mask-image CR

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

mask-mode CR

La propriété mask-mode détermine si le masque défini par mask-image> est considéré comme un masque de luminance ou un masque alpha

mask-repeat CR

La propriété mask-repeat définit la façon dont les images de masque sont répétées après que leur taille définitive soit fixée et qu’elles aient été positionnées.

mask-position CR

La propriété mask-position indique la position initiale pour chaque image de masque utilisée relativement à l’origine définie avec mask-origin.

mask-clip CR

La propriété mask-clip définit la zone qui est modifiée par un masque.

mask-origin CR

La propriété mask-origin permet de définir le point d’origine à partir duquel placer le masque.

mask-size CR

La propriété mask-size permet de définir les dimensions des images utilisées comme masques.

mask-composite CR

La propriété mask-composite permet d’effectuer une opération de composition entre le masque situé sur la couche de l’élément et le masque présent en dessous.

mask CR

La propriété mask est une propriété raccourcie qui permet de définir les valeurs de mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size et mask-composite.

mask-border-source CR

La propriété mask-border-source permet de définir l’image à utiliser pour créer le masque de bordure d’un élément.

mask-border-mode CR

La propriété mask-border-mode indique le mode de fusion utilisé pour le masque de bordure.

mask-border-slice CR

La propriété mask-border-slice permet de découper l’image source fournie par mask-border-source en différentes régions.

mask-border-width CR

La propriété mask-border-width définit la largeur du masque de bordure d’un élément.

mask-border-outset CR

La propriété mask-border-outset indique la distance entre le masque de la bordure et la boîte de la bordure.

mask-border-repeat CR

La propriété mask-border-repeat permet de définir la façon dont les régions du bord du masque doivent être ajustées pour correspondre aux dimensions de la bordure de l’élément.

mask-border CR

La propriété mask-border est une propriété raccourcie qui permet de définir les valeurs de mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat et mask-border-mode.

mask-type CR

La propriété mask-type permet de définir si un masque sera utilisé comme un masque de luminance ou comme un masque alpha.

Les propriétés CSS relatives aux barres de défilement

Ces propriétés permettent de définir des points d’accroche qui permettent de garantir la position sur laquelle on arrive après avoir fait défiler du contenu et de mettre en forme et modifier le comportement de la ou des barres de défilement.

scroll-snap-type CR

La propriété scroll-snap-type permet de définir si un conteneur avec barre de défilement doit posséder des points d’accroche, l’axe de ces points d’accorche et leur degré d’adhérence.

scroll-padding-top CR

La propriété scroll-padding-top permet de définir un décalage sur le bord supérieur par rapport à la zone de défilement ou « scrollport » de l’élément.

scroll-padding-right CR

La propriété scroll-padding-right permet de définir un décalage sur le côté droit par rapport à la zone de défilement ou « scrollport » de l’élément.

scroll-padding-bottom CR

La propriété scroll-padding-bottom permet de définir un décalage sur le bord inférieur par rapport à la zone de défilement ou « scrollport » de l’élément.

scroll-padding-left CR

La propriété scroll-padding-left permet de définir un décalage sur le côté gauche par rapport à la zone de défilement ou « scrollport » de l’élément.

scroll-padding CR

La propriété scroll-padding est une propriété raccourcie qui permet de définir les valeurs de scroll-padding-top, scroll-padding-right, scroll-padding-bottom et scroll-padding-left.

scroll-padding-block-start CR

La propriété scroll-padding-block-start permet de définir le décalage entre l’élément et la zone de défilement au début de l’axe de bloc.

scroll-padding-block-end CR

La propriété scroll-padding-block-end permet de définir le décalage entre l’élément et la zone de défilement à la fin de l’axe de bloc.

scroll-padding-block CR

La propriété scroll-padding-block est une propriété raccourcie qui permet de définir les valeurs de scroll-padding-block-start et scroll-padding-block-end.

scroll-padding-inline-start CR

La propriété scroll-padding-inline-start permet de définir le décalage entre l’élément et la zone de défilement au début de l’axe en ligne.

scroll-padding-inline-end CR

La propriété scroll-padding-inline-end permet de définir le décalage entre l’élément et la zone de défilement à la fin de l’axe en ligne.

scroll-padding-inline CR

La propriété scroll-padding-inline est une propriété raccourcie qui permet de définir les valeurs de scroll-padding-inline-start et scroll-padding-inline-end.

scroll-margin-top CR

La propriété scroll-margin-top permet de définir la marge de défilement de l’élément sur le bord supérieur.

scroll-margin-right CR

La propriété scroll-margin-right permet de définir la marge de défilement de l’élément sur le côté droit.

scroll-margin-bottom CR

La propriété scroll-margin-bottom permet de définir la marge de défilement de l’élément sur le bord inférieur.

scroll-margin-left CR

La propriété scroll-margin-left permet de définir la marge de défilement de l’élément sur le côté gauche.

scroll-margin-block-start CR

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.

scroll-margin-block-end CR

La propriété scroll-margin-block-end définit la marge de défilement de l’élément sur la fin de l’axe de bloc.

scroll-margin-block CR

La propriété scroll-margin-block est une propriété raccourcie qui permet de définir les valeurs de scroll-margin-block-start et scroll-margin-block-end.

scroll-margin-inline-start CR

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.

scroll-margin-inline-end CR

La propriété scroll-margin-inline-end définit la marge de défilement de l’élément sur la fin de l’axe en ligne.

scroll-margin-inline CR

La propriété scroll-margin-inline est une propriété raccourcie qui permet de définir les valeurs de scroll-margin-inline-start et scroll-margin-inline-end.

scroll-snap-align CR

La propriété scroll-snap-align définit la position de la boîte d’accroche (snap positions) comme un alignement entre la zone d’accroche et le conteneur (la boîte de défilement de l’élément).

scroll-snap-stop CR

La propriété scroll-snap-stop définit la façon dont un conteneur de défilement peut « passer outre » certaines positions d’accroche.

scrollbar-color FPWD

La propriété scrollbar-color permet de définir les couleurs des barres de défilement d’un élément.

scrollbar-width FPWD

La propriété scrollbar-width permet de définir l’épaisseur maximale des barres de défilement d’un élément lorsqu’elles sont affichées.

overscroll-behavior-x FPWD

La propriété overscroll-behavior-x spécifie le comportement de à adopter lors d’un dépassement de la limite de défilement sur l’axe horizontal.

overscroll-behavior-y FPWD

La propriété overscroll-behavior-y spécifie le comportement de à adopter lors d’un dépassement de la limite de défilement sur l’axe vertical.

overscroll-behavior FPWD

La propriété overscroll-behavior est une propriété raccourcie qui permet de définir les valeurs de overscroll-behavior-x et overscroll-behavior-y.

overscroll-behavior-block FPWD

La propriété overscroll-behavior-block spécifie le comportement de à adopter lors d’un dépassement de la limite de défilement sur l’axe de bloc. L’axe de bloc est déterminé par la valeur de la propriété writing-mode.

overscroll-behavior-inline FPWD

La propriété overscroll-behavior-inline spécifie le comportement de à adopter lors d’un dépassement de la limite de défilement sur l’axe en ligne. L’axe de ligne est déterminé par la valeur de la propriété writing-mode.

scroll-behavior FPWD

La propriété scroll-behavior définit le comportement du défilement pour une boîte de défilement lorsque celui-ci provient de la navigation ou des API CSSOM.

Les propriétés CSS relatives au mode d’écriture

Ces propriétés permettent de définir différents modes d’écriture et de modifier notamment l’orientation du texte.

direction REC

La propriété direction spécifie l’orientation du texte dans une ligne (de gauche à droite ou de droite à gauche). Cette propriété ne devrait pas être utilisée dans des documents HTML (on lui préférera l’attribut HTML dir).

unicode-bide REC

La propriété unicode-bidi permet aux boites inline de remplacer la directionnalité intrinsèque du texte. Elle ne devrait pas être utilisée dans les documents HTML.

writing-mode CR

La propriété writing-mode permet de spécifier si les lignes de texte doivent être disposées horizontalement ou verticalement et la direction dans laquelle les blocs progressent.

text-orientation CR

La propriété text-orientation permet de définir l’orientation du texte dans une ligne. Elle n’a d’effet que dans les modes typographiques verticaux.

text-combine-upright CR

La propriété text-combine-upright définit comment intégrer une combinaison de plusieurs caractères dans l’espace normalement alloué à un seul caractère.

Les propriétés CSS de création de formes

Ces propriétés permettent de définir des formes géométriques utilisables et appliables aux éléments en CSS.

shape-outside CR

La propriété shape-outside définit une forme (qui peut ne pas être un rectangle) autour de laquelle le contenu en ligne devra « s’écouler ».

shape-image-threshold CR

La propriété shape-image-threshold définit le seuil en terme de canal alpha à utiliser pour extraire la forme d’une image.

shape-margin CR

La propriété shape-margin permet de définir la marge autour d’une forme CSS créée avec shape-outside.

shape-inside WD

La propriété shape-inside permet d’aligner le contenu autour du bord d’une zone qui n’est pas nécessairement rectangulaire.

Les propriétés CSS de définition de chemins d’animation

Ces propriétés permettent de positionner n’importe quel objet graphique et de l’animer le long d’un chemin.

offset-path WD

La propriété permet de définir le chemin géométrique sur lequel la boite est positionnée relativement au conteneur parent ou au système de coordonnées SVG.

offset-distance WD

La propriété définit une position le long d’un chemin défini avec offset-path.

offset-position WD

La propriété permet de définir la position initiale du chemin défini avec offset-path.

offset-anchor WD

La propriété offset-anchor permet de définir un opint d’ancrage pour pour une boite positionnée le long d’un chemin défini avec offset-path.

offset-rotate WD

La propriété permet de définir l’orientation de la boîte lors du positionnement le long du chemin défini avec offset-path.

offset WD

La propriété est une propriété raccourcie qui permet de définir les valeurs pour offset-position, offset-path, offset-distance, offset-rotate et offset-anchor.

Les propriétés CSS de composition et de mélange

Ces propriétés définissent la façon dont les formes de différents éléments sont combinés afin de former une seule image.

mix-blend-mode CR

La propriété mix-blend-mode permet de définir la façon dont le contenu d’un élément doit se mélanger avec le contenu de l’élément parent et avec son arrière-plan.

isolation CR

La propriété isolation indique que l’élément crée un nouveau contexte d’empilement.

background-blend-mode CR

La propriété background-blend-mode définit la façon dont les images d’arrière-plan doivent être fusionnées entre elles et avec la couleur d’arrière-plan.

Les propriétés CSS relatives à la couleur et à l’ajustement automatique des couleurs

Ces propriétés permettent de gérer la couleur des éléments et de contrôler le réglage automatique des couleurs effectué par l’agent utilisateur afin de gérer les préférences de l’utilisateur.

color REC

La propriété color permet de définir la couleur des textes.

opacity REC

La propriété opacity permet de définir le niveau d’opacité (et donc de transparence) d’un élément.

color-scheme WD

La propriété color-scheme permet à un élément d’indiquer les combinaisons de couleurs avec lesquelles il devrait être rendu.

forced-color-adjust WD

La propriété forcer-color-adjust permet de sortir des éléments du mode de couleurs forcées afin de contrôler totalement les couleurs.

color-adjust WD

La propriété color-adjust indique à l’agent utilisateur comment traiter les choix de couleurs et de styles susceptibles d’être coûteux ou généralement déconseillés sur un périphérique donné, tels que l’utilisation de texte clair sur un fond sombre dans un document imprimé.

Les propriétés CSS inclassables

Ces propriétés ne rentrent dans aucun module

--* CR

Les noms des propriétés préfixés par  -- représentent des propriétés personnalisées (custom properties) qui peuvent contenir une valeur qui pourra être réutilisée dans le document grâce à la fonction var().

all CR

La propriété all permet de réinitialiser toutes les propriétés, à l’exception de unicode-bidi et direction, avec leurs valeurs initiales, héritées ou qui proviennent d’une autre feuille de style.

contain REC

La propriété contain permet d’indiquer qu’un élément, ainsi que son contenu, sont, autant que possible, indépendants du reste de l’arbre du document.

will-change CR

La propriété will-change fournit une indication au navigateur sur la propension d’un élément à changer.

Les propriétés relatives aux contenus générés

Ces propriétés permettent de définir le comportement des contenus générés.

content REC

La propriété content détermine ce qui est rendu à l’intérieur d’un élément ou d’un pseudo-élément.

quote REC

La propriété quote spécifie la forme des guillemets pour un nombre illimité de citations incorporées.

Les propriétés CSS liées aux médias paginés

Ces propriétés contrôlent la présentation du contenu imprimable ou de tout autre média dont le contenu est divisé en pages individuelles ainsi que les propriétés du contenu généré pour certains médias paginés.

page WD

La propriété page est utilisée pour spécifier un type de page particulier (appelé page nommée) sur lequel un élément doit être affiché.

size WD

La propriété size permet de définir la taille et l’orientation cibles du bloc conteneur de la page.

marks WD

La propriété marks ajoute des repères de coupe et / ou d’enregistrement au document.

bleed WD

La propriété bleed permet de définir la taille de l’espace en dehors de la page avant que le contenu ne soit tronqué.

string-set WD

La propriété string-set contient une ou plusieurs paires, chacune consistant en un identifiant personnalisé (le nom de la chaîne nommée) suivi d’une liste de contenus décrivant comment construire la valeur de la chaîne nommée.

footnote-display WD

La propriété footnote-display détermine si une note de bas de page est affichée sous forme d’élément bloc ou en ligne.

footnote-policy WD

La propriété footnote-policy donne aux auteurs une certaine influence sur le rendu des pages difficiles.

bookmark-level WD

La propriété bookmark-level permet de définir le niveau de signet d’un document.

bookmark-label WD

La propriété bookmark-label permet de définir une étiquette pour un signet.

bookmark-state WD

La propriété bookmark-state permet de définir si les signets descendants doivent être affichés ou non.

Les propriétés CSS relatives aux annotations Ruby

Ces propriétés permettent de contrôler le rendu et la mise en forme des annotations Ruby qui sont particulièrement utilisées dans les documents d’Asie orientale.

ruby-align WD

La propriété ruby-align définit la façon dont les éléments ruby sont distribués autour du texte de base.

ruby-merge WD

La propriété ruby-merge contrôle le rendu des zones d’annotation ruby lorsqu’il en existe plusieurs dans un conteneur ruby.

ruby-position WD

La propriété ruby-position définit la position d’un élément ruby par rapport à son élément de base.

Les propriétés CSS liées aux effets de filtre

Ces propriétés permettent de traiter le rendu d’un élément avant son affichage dans le document.

filter WD

La propriété filter permet d’appliquer des filtres afin d’obtenir des effets graphiques de flou ou de saturation.

color-interpretation-filters WD

La propriété color-interpretation-filters spécifie l’espace colorimétrique pour les opérations de création d’image effectuées via les effets de filtre.

flood-color WD

La propriété flood-color indique la couleur à utiliser pour submerger la sous-région primitive de filtre actuelle.

flood-opacity WD

La propriété flood-opacity définit la valeur d’opacité à utiliser dans toute la sous-région de filtre primitive.

lighting-color WD

La propriété lighting-color définit la couleur de la source de lumière pour les primitives de filtrage feDiffuseLighting et feSpecularLighting.

Les propriétés CSS relatives au remplissage et aux contours

Ces propriétés permettent de gérer le remplissage et le contour du texte et des formes SVG.

fill-rule FPWD

La propriété fill-rule permet de définir la règle utilisée pour déterminer quelles parties de la zone de dessin sont incluses dans la forme.

fill-break FPWD

La propriété fill-break spécifie comment la géométrie d’une boite fragmentée est traitée lors de remplissages.

fill-color FPWD

La propriété fill-color permet de définir la couleur de remplissage pour un élément. On lui préfèrera la propriété color pour remplir du texte.

fill-image FPWD

La propriété fill-image permet de définir l’image à utiliser comme remplissage pour un élément.

fill-origin FPWD

La propriété fill-origin spécifie des coordonnées de la zone de remplissage.

fill-position FPWD

La propriété fill-position spécifie la position initiale d’une image de remplissage (après tout redimensionnement) dans la zone de remplissage.

fill-size FPWD

La propriété fill-size permet de définir la taille des images de remplissage.

fill-repeat FPWD

La propriété fill-repeat permet de définir le comportement de répétition des images de remplissage après redimensionnement et positionnement.

fill FPWD

La propriété fill est une propriété raccourcie qui permet de définir les valeurs de fill-color, fill-image, fill-origin, fill-position, fill-size et fill-repeat.

fill-opacity FPWD

La propriété fill-opacity permet de définir le niveau d’opacité du remplissage utilisé.

stroke-width FPWD

La propriété stroke-width permet de définir la largeur du contour côté externe.

stroke-align FPWD

La propriété stroke-align permet d’aligner un conour le long de l’outline (bordure externe).

stroke-linecap FPWD

La propriété stroke-linecap permet de définir la forme à la fin d’une ligne ouverte.

stroke-linejoin FPWD

La propriété stroke-linejoin spécifie la forme à utiliser aux coins des tracés ou des formes de base lorsqu’elles possèdent des contours.

stroke-miterlimit FPWD

La propriété stroke-miterlimit définit la limite du rapport entre la longueur du coin et la valeur de stroke-width utilisée pour dessiner la liaison entre deux segments de ligne.

stroke-break FPWD

La propriété stroke-break permet de définir le traitement à apporter aux contours d’une boite fragmentée.

stroke-dasharray FPWD

La propriété stroke-dasharray contrôle le motif et l’espacement entre les segments utilisés pour tracer le contour d’un élément.

stroke-dashoffset FPWD

La propriété stroke-dashoffset permet de définir le décalage initial des pointillés (sur les lignes SVG notamment).

stroke-dash-corner FPWD

La propriété stroke-dash-corner détermine si un tiret est toujours peint aux sommets d’une forme possédant un contour.

stroke-dash-justify FPWD

La propriété stroke-dash-justify spécifie si et comment le motif en tirets d’un contour sera ajusté afin qu’il soit répété un nombre entier de fois le long de chacun des sous-chemins d’un élément.

stroke-color FPWD

La propriété stroke-color permet de définir le couleur d’un contour.

stroke-image FPWD

La propriété stroke-image permet de définir une image à utiliser comme contour d’un élément.

stroke-origin FPWD

La propriété stroke-origin permet de définir les coordonnées d’un contour en définissant la zone de contour.

stroke-position FPWD

La propriété stroke-position spécifie la position initiale d’une image de contour (après tout redimensionnement) dans la zone de remplissage.

stroke-size FPWD

La propriété stroke-size permet de définir le taille des images utilisées comme contour.

stroke-repeat FPWD

La propriété stroke-repeat permet de définir le comportement de répétition des images utilisées comme contour.

stroke FPWD

La propriété stroke est une propriété raccourcie qui permet de définir les valeurs de stroke-color, stroke-image, stroke-origin, stroke-position, stroke-size et stroke-repeat.

stroke-opacity FPWD

La propriété stroke-opacity permet de définir le niveau d’opacité d’un contour.

Contours et marqueurs SVG

Ces propriétés permettent de définir et de mettre en forme des contours et marqueurs pour des formes SVG spécifiquement

stroke-alignment FPWD

La propriété stroke-alignment permet d’aligner un contour le long de l’outline (bordure côté extérieur) de l’objet courant.

stroke-dashadjust FPWD

La propriété stroke-dashadjust spécifie si et comment le motif en tirets d’un contour sera ajusté afin qu’il soit répété un nombre entier de fois le long des sous-chemins d’un élément.

stroke-dashcorner FPWD

La propriété stroke-dashcorner détermine si un tiret est toujours peint aux sommets d’une forme avec contour et contrôle également la façon dont le motif de tiret donné par stroke-dasharray est répété.

marker-start FPWD

La propriété marker-start indique le marqueur qui sera dessiné au niveau du premier sommet de l’élément.

marker-mid FPWD

La propriété marker-mid indique le marqueur qui sera dessiné au niveau de tous les sommets de l’élément à l’exception du premier et du dernier.

marker-end FPWD

La propriété marker-end indique le marqueur qui sera dessiné au niveau du dernier sommet de l’élément.

marker-segment FPWD

La propriété marker-segment est utilisée pour spécifier le marqueur qui sera tracé au centre de chaque segment du chemin.

marker-pattern FPWD

La propriété marker-pattern est utilisée pour spécifier un motif de marqueurs et d’espaces à répéter le long de l’élément marquable.

marker FPWD

La propriété marker est une propriété raccourcie qui permet de définir les valeurs de marker-start, marker-mid, marker-end, marker-segment et marker-pattern.

marker-knockout-left FPWD

La propriété marker-knockout-left permet de tronquer une partie d’un contour lorsqu’un marqueur est placé sur un tracé.

marker-knockout-right FPWD

La propriété marker-knockout-right permet de tronquer une partie d’un contour lorsqu’un marqueur est placé sur un tracé.

Le module CSS Exclusions

Les exclusions CSS définissent des zones arbitraires autour desquelles un contenu inline peut se placer. Elles peuvent être définies sur n’importe quel élément de niveau bloc CSS et étendent la notion d’entourage du contenu auparavant limité aux flottants.

wrap-flow WD

La propriété wrap-flow permet de définir la façon dont le contenu inline va pouvoir se placer autour de l’exclusion.

wrap-through WD

La propriété wrap-through permet d’indiquer si un élément doit hériter du contexte d’entourage de son parent ou pas.

Le module CSS Rhythmic sizing

Ce module contient des fonctionnalités CSS permettant d’ajuster la taille du contenu en fonction d’une unité arbitraire de façon à ce que cette taille soit exprimée en un multiple de cette unité.

line-height-step FPWD

La propriété line-height-step permet de définir l’unité de base à utiliser pour le calcul de la hauteur de ligne d’une boite.

block-step-size FPWD

La propriété block-step-size permet de définir l’unité de base pour le calcul de la hauteur logique d’une boite de niveau bloc.

block-step-insert FPWD

La propriété block-step-insert permet de définir si l’espace supplémentaire introduit par block-step-size doit être inséré à l’intérieur ou à l’extérieur de la boite de bordure de l’élément.

block-step-align FPWD

La propriété block-step-align permet de définir si l’espace supplémentaire introduit par block-step-size doit être inséré avant, après, ou réparti de chaque côté de la boite.

block-step-round FPWD

La propriété block-step-round permet de spécifier si l’ajustement causé par block-step-size doit ajouter ou enlever de l’espace.

block-step FPWD

La propriété block-step est une propriété raccourcie qui permet de définir les valeurs de block-step-size, block-step-insert, block-step-align et block-step-round.

Le module CSS Spatial Navigation

Ce module définit un modèle général de déplacement à travers les éléments qui peuvent obtenir le focus notamment à l’aide des touches fléchées.

spatial-navigation-contain FPWD

La propriété spatial-navigation-contain permet d’établir un conteneur de navigation spatiale c’est-à-dire un groupement d’éléments qui peuvent être focus.

spatial-navigation-action FPWD

La propriété spatial-navigation-action permet de définir si les flèches directionnelles doivent contrôler le défilement ou le changement de focus lorsqu’un élément possédant le focus se situe dans un conteneur avec barre de défilement.

Le module CSS Speech

Le module CSS Speech est aujourd’hui officiellement indiqué comme obsolète. Ce module devait définir des propriétés CSS auditives permettant de contrôler le rendu du document par synthèse vocale. Il était composé des propriétés suivantes :

• La propriété voice-volume ;
• La propriété voice-balance ;
• La propriété speak ;
• La propriété speak-as ;
• La propriété pause-before ;
• La propriété pause-after ;
• La propriété pause ;
• La propriété rest-before ;
• La propriété rest-after ;
• La propriété rest ;
• La propriété cue-before ;
• La propriété cue-after ;
• La propriété cue ;
• La propriété voice-family ;
• La propriété voice-rate ;
• La propriété voice-pitch ;
• La propriété voice-range ;
• La propriété voice-stress ;
• La propriété voice-duration.

Tableau officiel brut des propriétés CSS

La liste des propriétés ci-dessous est la liste “officielle” telle que proposée sur le site du W3C à l’adresse https://www.w3.org/Style/CSS/all-properties.en.html.

Certaines propriétés CSS apparaissent plusieurs fois dans le tableau suivant. Cela est dû au fait que certains modules sont en cours de travail et que certaines propriétés de certains modules stables ont vocation à être recatégorisées dans ces nouveaux modules qui ne sont pas encore au statut de recommandation.

Ce tableau ne vous est fourni que pour que vous puissiez avoir un coup d’oeil rapide à l’ensemble des propriétés. Je vous conseille cependant plutôt d’utiliser ma catégorisation précédente. Vous pouvez réordonner ce tableau selon l’ordre alphabétique en cliquant sur les cellules d’en-tête.