Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

display-outside

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété display-outside définit le type d'affichage (display type) à l'extérieur de la boîte générée par un élément et indique la façon dont l'élément s'inscrit dans le contexte de formatage de l'élément parent.

Valeur initialeinline-level
Applicabilitétous les éléments
Héritéenon
Médiatous
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Valeurs avec un mot-clé */
display-outside: block-level;
display-outside: inline-level;
display-outside: run-in;
display-outside: contents;
display-outside: none;
display-outside: table-row-group;
display-outside: table-header-group;
display-outside: table-footer-group;
display-outside: table-row;
display-outside: table-cell;
display-outside: table-column-group;
display-outside: table-column;
display-outside: table-caption;
display-outside: ruby-base;
display-outside: ruby-text;
display-outside: ruby-base-container;
display-outside: ruby-text-container;

/* Valeurs globales */
display-outside: inherit;
display-outside: initial;
display-outside: unset;

Valeurs

block-level
L'élément génère une boîte en bloc (block-level) et s'inscrit dans un contexte de formatage en bloc. D'autres contextes de mise en forme (comme les contextes flexibles) peuvent fonctionner avec les éléments en bloc.
inline-level
L'élément génère une boîte de type inline-level et s'inscrit dans un contexte de mise en forme en ligne (inline).
run-in
L'élément génère une boîte de type run-in. Les éléments de ce type agissent comme des éléments en ligne ou comme des éléments en bloc selon les éléments qui les entourent.
contents
L'élément dispose son contenu grâce à la disposition flexible.
none
L'élément ne génère aucune boîte et ne s'inscrit dans aucun contexte de mise en forme.
table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, table-caption
L'élément est un élément interne à un tableau et s'inscrit dans un contexte de mise en forme au sein d'un tableau.

table-cell et table-caption sont des dispositions spécifiques de feuille (leaf type) et les autres sont des types de disposition spécifiques internes (cf. ci-après).
ruby-base, ruby-text, ruby-base-container, ruby-text-container
L'élément est un élément ruby interne et s'inscrit dans un contexte de disposition ruby.

ruby-base et ruby-text sont des types de disposition de feuilles et ruby-base-container et ruby-text-container sont des types de disposition spécifiques internes (cf. ci-après).
Types de disposition spécifiques internes
Pour ces types d'affichage, il est nécessaire que l'élément parent et les éléments fils soient d'un type d'affichage particulier. Ainsi, pour une boîte table-row, il faudra que l'élément parent soit un groupe de ligne d'un tableau et il faudra que ses éléments fils soient des boîtes table-cell.
Types de disposition de feuille
Pour ces types d'affichage, il est nécessaire que l'élément parent soit d'un type d'affichage donné mais ils peuvent accepter n'importe quelle valeur pour display-inside. Ainsi, pour une boîte table-caption, il faut que le parent soit table mais l'élément peut établir n'importe quel type de contexte de mise en forme pour ses fils.

Syntaxe formelle

block-level | inline-level | run-in | contents | none | table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container

Spécifications

Spécification État Commentaires
CSS Display Module Level 3
La définition de 'display-outside' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple Pas de support Pas de support Pas de support Pas de support Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple Pas de support Pas de support Pas de support Pas de support Pas de support

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,