column-span |
Envergure de la colonne |
| CSS3 |
|
Syntaxe
|
column-span: 1|all|inherit|initial;
|
Paramètres
| Paramètre |
Description |
| 1 |
Ce paramètre permet d'indiquer qu'une seule colonne doit s'afficher dans l'étendue. C'est la valeur par défaut. |
| all |
Ce paramètre permet d'indiquer que toutes les colonnes doivent s'afficher dans l'étendue. |
| inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
| initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
Description
Cette propriété permet d'indiquer le nombre de colonnes pouvant s'afficher dans l'étendue.
Remarques
- Définition et fonction : La propriété column-span permet de spécifier si un élément doit occuper plusieurs colonnes dans une mise en page
multi-colonnes. Par exemple, un titre ou une image peut être étendu sur l'ensemble des colonnes d'un conteneur sans être limité à une seule.
- Valeurs acceptées : Elle accepte deux valeurs : none (par défaut) et all. none signifie que l'élément occupe une seule colonne, tandis que all indique que
l'élément doit s'étendre sur toutes les colonnes du conteneur.
- Utilisation courante : Cette propriété est souvent utilisée pour des éléments comme des titres ou des images devant être affichés au-dessus de plusieurs colonnes,
offrant ainsi une flexibilité dans la présentation des contenus dans des mises en page de type magazine.
- Compatibilité avec column-count : column-span fonctionne principalement avec des éléments contenus dans des structures utilisant column-count
ou column-width. Cela permet de gérer l'étendue des éléments sur un ensemble de colonnes tout en maintenant une structure de mise en page fluide.
- Impact sur le layout : Lorsqu'un élément est étendu sur plusieurs colonnes avec column-span: all;, cela peut affecter le flux des autres éléments du layout.
Ceux-ci devront s'adapter en fonction de l'espace disponible dans les colonnes restantes.
- Problèmes de compatibilité : Bien que largement supportée par les navigateurs modernes, la propriété column-span n'est pas compatible avec certains anciens
navigateurs Web ou certains environnements CSS plus restrictifs. Il peut être nécessaire de vérifier la compatibilité avec des préfixes ou des solutions alternatives
pour les anciens navigateurs Web.
- Utilisation avec column-width : Si la propriété column-width est utilisée, column-span permet à un élément de s'étendre au-delà de la largeur d'une
seule colonne. Cela peut être particulièrement utile dans des designs où l'espace est limité et où une utilisation optimisée de l'espace est nécessaire.
- Accessibilité et lisibilité : L'utilisation de column-span peut améliorer l'accessibilité d'une page en permettant à des éléments importants (comme des titres
ou des images) de ressortir clairement au-dessus du flux de texte. Cela facilite la lecture, surtout dans des mises en page de type magazine ou journal.
Dernière mise à jour : Dimanche, le 20 décembre 2015
