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!

Outils d'IA chauds

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

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

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

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 !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds

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.

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

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.

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.

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

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

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

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 ...
