column-width |
Largeur des colonnes |
| CSS3 |
|
Syntaxe
|
column-width: longueur|auto|inherit|initial;
|
Paramètres
| Paramètre |
Description |
| longueur |
Ce paramètre permet d'indiquer la longueur de la largeur d'une colonne. |
| auto |
Ce paramètre permet d'indiquer que le navigateur Web doit l'ajuster automatiquement. C'est la valeur par défaut. |
| 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 la largeur optimale des colonnes.
Remarques
- Définition et fonction : La propriété column-width permet de définir la largeur des colonnes dans un layout multi-colonnes. Elle est particulièrement
utile pour créer des mises en page où le contenu est automatiquement réparti sur plusieurs colonnes, comme dans un journal ou un magazine.
- Valeurs acceptées : column-width accepte des valeurs en unités fixes (comme px, em, cm) ou en valeurs relatives (comme vw, rem). Cette flexibilité permet
de définir des colonnes adaptées à différents types de mises en page, des plus rigides aux plus fluides.
- Impact sur le layout : Lorsqu'on spécifie une valeur pour column-width, le navigateur calcule automatiquement le nombre de colonnes nécessaires en fonction
de la largeur disponible. Si l'espace est insuffisant pour contenir les colonnes, elles seront redimensionnées ou le texte sera réajusté pour s'adapter.
- Compatibilité avec column-count : column-width peut être combinée avec la propriété column-count. Si column-count est défini, le navigateur
priorise le nombre de colonnes, tandis que si column-width est défini, il ajuste le nombre de colonnes en fonction de la largeur spécifiée.
- Utilisation dynamique avec des unités relatives : L'utilisation d'unités comme em ou rem rend la propriété flexible et adaptative aux variations de taille de
police de caractères, ce qui permet de créer des mises en page plus réactives. Par exemple, les colonnes peuvent être redimensionnées de manière fluide selon la taille du
texte.
- Effet sur la lisibilité : La définition d'une largeur appropriée pour les colonnes améliore la lisibilité du texte, notamment dans des mises en page longues
ou à contenu dense. Des colonnes trop larges ou trop étroites peuvent rendre la lecture difficile, affectant ainsi l'expérience utilisateur.
- Compatibilité des navigateurs Web : column-width est bien supportée par la majorité des navigateurs modernes, y compris
Google Chrome, Firefox, et
Safari. Cependant, dans les versions plus anciennes
d'Internet Explorer (avant la version 11), cette propriété peut ne pas être correctement rendue, nécessitant des
préfixes ou des alternatives.
- Applications pratiques : Cette propriété est idéale pour des mises en page nécessitant une gestion automatique des colonnes, comme les info-lettres, les blogs, ou
les articles de presse. Elle permet de garantir que le contenu s'ajuste bien à l'espace disponible, créant ainsi des designs fluides et dynamiques.
Dernière mise à jour : Dimanche, le 20 décembre 2015
