Revisiter la disposition CSS multi-colonnes

Près de deux décennies se sont écoulées depuis que mon premier livre, transcendant CSS , a exploré le module de mise en page multi-colonnes alors-novel. Une version en ligne mise à jour et disponible librement, transcendant CSS Revisited , offre une perspective contemporaine. Mon arrière-plan en imprimé a probablement alimenté mon enthousiasme initial pour cette fonction CSS, permettant un contenu en colonnes sans balisage superflu. Malgré son utilisation cohérente dans mon travail, les colonnes CSS restent étonnamment sous-utilisées. Pourquoi?

lacunes de spécification

La disposition multi-colonnes souffre depuis longtemps et continue d'avoir des limitations importantes. Comme Rachel Andrew (maintenant un éditeur de spécifications) l'a souligné il y a cinq ans: le style direct des boîtes de colonnes individuelles n'est pas possible; La manipulation JavaScript ou les ajustements de l'arrière-plan, du rembourrage et des marges ne sont pas disponibles; et toutes les colonnes restent uniformément de taille. Seules les règles de colonne offrent des options de style.

Cela reste vrai. Le style sélectif, comme les couleurs d'arrière-plan alternant à l'aide de :nth-column(), est impossible. Alors que les règles de colonne permettent des variations border-style (pointillées, pointillées, solides, rainures, crête), l'absence de support border-image est déroutante, étant donné leur introduction presque simultanée. Ces imperfections existent, mais elles n'expliquent pas pleinement la négligence généralisée de cet outil précieux.

Incohérences historiques du navigateur

Les navigateurs plus anciens ignoraient souvent les propriétés de colonne non soutenues. Cependant, l'adoption précoce de la mise en page multi-colonnes a coïncidé avec une période où la cohérence entre les navigateurs croisés n'était pas une préoccupation primordiale pour de nombreux développeurs. Alors que le support initial du navigateur était incohérent, en particulier en ce qui concerne les ruptures de contenu, les navigateurs modernes offrent désormais une compatibilité généralisée. Pourtant, la perception des colonnes CSS comme "brisée" persiste parmi les développeurs avec lesquels j'ai parlé. Bien que des améliorations soient nécessaires, cela ne devrait pas entraver l'utilisation de ses aspects actuellement fonctionnels.

Préoccupations de lisibilité et de défilement

La sous-utilisation de la disposition multi-colonnes peut provenir non pas de défauts de spécification ou de problèmes de mise en œuvre, mais sur les défis de l'utilisabilité. Rachel Andrew a correctement souligné le potentiel de mauvaise lisibilité en raison d'un défilement vertical excessif dans la teneur en forme longue. C'est indéniablement une expérience de lecture négative.

Une considération attentive est cruciale, mais cela ne devrait pas être dissuasif. De mauvais choix de conception, tels que l'application de colonnes de manière inappropriée à de grandes quantités de texte sans éléments structurels, sont les vrais coupables. Les titres, les images et les citations peuvent s'étendre efficacement aux colonnes, améliorant la lisibilité. Combiné avec des requêtes de conteneurs et des unités de dimensionnement de texte modernes, il y a peu de raisons d'éviter la disposition multi-colonnes.

Une revue rapide des propriétés et des valeurs

Deux méthodes principales existent pour créer des colonnes: spécifiant le column-count ou définissant le column-width, permettant au navigateur de déterminer le nombre de colonnes. Je préfère column-width, en réglant une largeur (par exemple, 18rem) et en laissant le navigateur optimiser le nombre de colonnes.

le column-gap (gouttière) contrôle l'espacement entre les colonnes, utilisant idéalement des unités rem pour la proportionnalité de la taille du texte. Le column-rule ajoute une séparation visuelle avec une épaisseur personnalisable et border-style. Cette syntaxe simple contribue à sa facilité d'utilisation.

Pertenance accrue dans le CSS moderne

Au moment de transcendant CSS , de nombreuses fonctionnalités CSS modernes étaient absentes: rem et des unités de la fenêtre, des sélecteurs avancés comme :has(), des requêtes de conteneur, des requêtes multimédias pour la conception réactive, calc(), clamp(), la grille CSS et le flexion. Ces progrès améliorent les capacités de la disposition multi-colonnes.

rem et les unités de la fenêtre, associées à calc() et clamp(), activent le dimensionnement de texte réactif dans les colonnes. :has() permet la création de colonnes conditionnelle en fonction du contenu. Les requêtes de conteneurs activent la mise en œuvre de la colonne uniquement lorsque des espaces de conteneurs suffisants sont disponibles. L'intégration avec CSS Grid ou Flexbox débloque encore plus de dispositions créatives.

Application pratique: une mise en page réactive de l'article

Mon défi a été de créer une disposition d'article flexible et sans requête en média s'adaptant à la taille de l'écran et à la présence / absence de A <figure></figure>. Le texte en colonnes améliore la lisibilité, avec la taille du texte ajustant la largeur du conteneur, pas la largeur de la fenêtre.

Le HTML est simple: un élément <main></main> contenant un titre et des paragraphes, et éventuellement un <figure></figure>.

<main><h1 id="About-Patty">About Patty</h1>
<p>…</p></main><img  alt="Revisiter la disposition CSS multi-colonnes" >

Les styles de mise en page multicolonne sont appliqués à <main></main> en utilisant column-width (40ch), max-width (100ch) et des marges automatiques pour le centrage:

main {
  margin-inline: auto;
  max-width: 100ch;
  column-width: 40ch;
  column-gap: 3rem;
  column-rule: .5px solid #98838F;
}

flexbox est appliqué à <section></section> uniquement s'il contient un <figure></figure>:

section:has(> figure) {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3rem;
}

min-width: min(100%, 30rem) assure la réactivité pour les deux <main></main> et <figure></figure>:

section:has(> figure) main {
  flex: 1;
  margin-inline: 0;
  min-width: min(100%, 30rem);
}

section:has(> figure) figure {
  flex: 4;
  min-width: min(100%, 30rem);
}

Cela élimine le besoin de requêtes multimédias. La taille du texte s'adapte à l'aide de requêtes de conteneur (container-type: inline-size;) et clamp() pour la mise à l'échelle réactive:

h1 { font-size: clamp(5.6526rem, 5.4068rem + 1.2288cqi, 6.3592rem); }
h2 { font-size: clamp(1.9994rem, 1.9125rem + 0.4347cqi, 2.2493rem); }
p { font-size: clamp(1rem, 0.9565rem + 0.2174cqi, 1.125rem); }

Le résultat est une disposition flexible s'adaptant à la taille et au contenu de l'écran, en utilisant efficacement la disposition multi-colonnes.

aborder les limitations passées

De nombreux articles mettent en évidence les défauts de la disposition multi-colonnes, en particulier les problèmes de défilement. La propriété column-span (pour les titres, les images, les citations pour courir les colonnes) l'atténute considérablement, ainsi qu'une conception de contenu minutieuse pour minimiser le défilement excessif.

Les titres et les chiffres orphelins sont traités en utilisant break-after: column;.

Une perspective renouvelée sur la mise en page multi-colonnes

Malgré ses limites d'âge et de passé, la disposition multi-colonnes reste sous-utilisée. Bien qu'il existe des défis, sa valeur et sa capacité à améliorer la conception restent. Il est temps pour un nouveau regard sur cet outil CSS puissant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!