Table des matières
lacunes de spécification
Incohérences historiques du navigateur
Préoccupations de lisibilité et de défilement
Une revue rapide des propriétés et des valeurs
Pertenance accrue dans le CSS moderne
Application pratique: une mise en page réactive de l'article
About Patty
aborder les limitations passées
Une perspective renouvelée sur la mise en page multi-colonnes
Maison interface Web tutoriel CSS Revisiter la disposition CSS multi-colonnes

Revisiter la disposition CSS multi-colonnes

Mar 07, 2025 pm 04:58 PM

Revisiting CSS Multi-Column Layout

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" >
Copier après la connexion

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;
}
Copier après la connexion

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

section:has(> figure) {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3rem;
}
Copier après la connexion

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);
}
Copier après la connexion

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); }
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.

Construire une application Ethereum à l'aide de Redwood.js et de la faune Construire une application Ethereum à l'aide de Redwood.js et de la faune Mar 28, 2025 am 09:18 AM

Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum

Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur? Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur? Apr 02, 2025 pm 06:17 PM

J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.

Cartes empilées avec un positionnement collant et une pincée de sass Cartes empilées avec un positionnement collant et une pincée de sass Apr 03, 2025 am 10:30 AM

L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.

Un peu sur CI / CD Un peu sur CI / CD Apr 02, 2025 pm 06:21 PM

Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:

Comparaison des navigateurs pour une conception réactive Comparaison des navigateurs pour une conception réactive Apr 02, 2025 pm 06:25 PM

Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire

Utilisation de Markdown et de la localisation dans l'éditeur de blocs WordPress Utilisation de Markdown et de la localisation dans l'éditeur de blocs WordPress Apr 02, 2025 am 04:27 AM

Si nous devons afficher la documentation à l'utilisateur directement dans l'éditeur WordPress, quelle est la meilleure façon de le faire?

Pourquoi les zones réduites pourpre dans la disposition Flex sont-elles considérées à tort «espace de débordement»? Pourquoi les zones réduites pourpre dans la disposition Flex sont-elles considérées à tort «espace de débordement»? Apr 05, 2025 pm 05:51 PM

Questions sur les zones de slash violet dans les dispositions flexibles Lorsque vous utilisez des dispositions flexibles, vous pouvez rencontrer des phénomènes déroutants, comme dans les outils du développeur (D ...

See all articles