columns

Syntaxe

Paramètres

Description

Cette propriété permet d'indiquer les ajustements de largeur et de nombre de colonnes dans un étendue.

Remarques

• Fonctionnalité principale : La propriété columns est une propriété raccourcie permettant de définir simultanément le nombre de colonnes (column-count) et leur largeur (column-width) pour un élément. Elle est utilisée pour créer des mises en page en colonnes, comme dans les journaux, sans nécessiter de conteneurs ou de tableaux supplémentaires.
• Syntaxe combinée : La propriété accepte deux valeurs : la largeur des colonnes et le nombre de colonnes. Par exemple, columns: 200px 3; crée un élément avec trois colonnes, chacune ayant une largeur d'environ 200 pixels. Si une des valeurs est omise, le navigateur ajuste automatiquement l'autre en fonction de l'espace disponible.
• Comportement adaptatif : Lorsqu'une seule valeur est définie, comme columns: 200px;, le navigateur calcule automatiquement le nombre de colonnes pouvant tenir dans l'espace disponible. Cela permet une mise en page fluide et adaptable aux différentes tailles d'écran.
• Précédence avec column-count et column-width : Bien que columns combine deux propriétés, il est possible de définir column-count et column-width séparément. Si elles sont définies en même temps que columns, les valeurs spécifiques des propriétés individuelles prennent le dessus.
• Effet sur le contenu : L'utilisation de columns divise le contenu en colonnes visuellement, mais pas dans le DOM. Cela signifie que l'ordre du contenu reste linéaire, ce qui est important pour l'accessibilité et les technologies d'assistance.
• Compatibilité des navigateurs : La propriété columns est bien supportée dans les navigateurs modernes, mais peut nécessiter des préfixes (comme -webkit-columns) dans certaines versions plus anciennes, notamment pour Safari et d'anciens Chrome. Vérifiez toujours la compatibilité si vous ciblez des environnements variés.
• Limitations pour les colonnes fixes : Lorsque les colonnes ont une largeur ou un nombre fixe (par exemple, columns: 3;), le contenu peut être coupé ou compressé si l'espace est insuffisant. Cela peut entraîner des chevauchements ou des problèmes de lisibilité dans des mises en page restreintes.
• Application à des éléments spécifiques : La propriété columns est particulièrement adaptée aux blocs de texte ou aux listes, où le contenu est naturellement séquentiel. Elle est moins utile pour des éléments complexes comme des images ou des tableaux, car le rendu peut devenir imprévisible si le contenu dépasse les limites des colonnes.