Column-span - Propriété CSS
Résumé des caractéristiques de la propriété column-span
none | allnonecolumn-span passe d'une valeur à l'autre sans transition.Schéma syntaxique de column-span.
column-spanLes liens du schéma donnent accès à plus de détails
Description de la propriété column-span.
column-span définit si un élément s'étend sur l'ensemble des colonnes, ou bien s'il est contenu dans une
seule des colonnes. Cette propriété s'applique dans le cas d'une mise en page en colonnes. Elle ne s'applique pas
aux grilles ni aux tableaux.
Voici le genre de mise en page qu'il est possible d'obtenir avec la propriété column-span, appliquée ici
à un titre. On notera que, si des lignes de séparation de colonnes sont affichées, elles seront interrompues à
l'endroit de l'élément étendu sur toutes les colonnes.
column-span doit être appliquée à une balise de type block.
On ne peut donc pas l'appliquer directement à une image, mais il est facile d'insérer cette image dans un paragraphe
ou un autre élément bloc.
Il n'est pas possible d'étendre un élément sur certaines colonnes seulement : l'élément sera soit dans une colonne seulement, soit s'étendra sur toutes les colonnes.
Si un élément s'étend sur toutes les colonnes, le contenu qui précède et celui qui suit sont répartis entre les colonnes de la façon la plus équilibrée possible.
Syntaxes pour column-span.
- column-span: none;
Valeur par défaut. L'élément reste sur la largeur d'une seule colonne.
- column-span: all;
L'élément s'élargit jusqu'à couvrir la largeur de toutes les colonnes.
Valeurs communes à toutes les propriétés :
column-span: initial (none)
column-span: inherit
column-span: revert
column-span: revertLayer
column-span: unset
Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.
Animation de column-span.
Exemple d'animation pour la propriété column-span.
L'animation est appliquée au titre h3 ci-dessus (Exemple d'animation...).
Sa largeur doit donc osciller entre la largeur d'une colonne, et la largeur totale des trois colonnes.
On voit que l'animation de la propriété column-span n'est pas très intéressante, l'effet visuel produit
étant peu satisfaisant.
Simulateur.
Le simulateur ci-dessous applique la propriété column-span, avec la valeur choisie, aux deux
titres en gras, et au paragraphe contenant l'image (le bandeau étoilé).
Prise en charge par les navigateurs (compatibilité).
column-span.
multi colonnes
column-spanNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Historique de la propriété column-span.
-
Module CSS - Mise en page multi-colonnes - Niveau 1
Première spécification concernant la mise en page multi-colonnes.
Introduction des propriétés correspondantes, dontcolumn-span.
23 Juin 1999Document de travail.
17 Décembre 2009Candidat à la recommandation.
Voir aussi, à propos des mises en page multi-colonnes.
La propriété column-span est référencée dans la spécification CSS Multi-column Layout Module (Module CSS - Mise en page multi-colonnes), qui décrit tout ce qui
concerne les mises en page multi-colonnes.
Les termes ci-dessous sont également décrits dans cette même spécification :