Propriété briser à l'intérieur définit comment les sauts de page et de colonne doivent être placés dans l'élément actuel. Par défaut, les sauts de page ou de colonne sont définis automatiquement et ne sont pas hérités des éléments parents. La valeur d'évitement de page n'est utilisée que lors du formatage de documents paginés, comme lors de l'impression, et est ignorée pour les vues non fractionnées, comme lorsqu'elles sont affichées dans un navigateur. La valeur d'évitement de colonne est utilisée pour le texte multi-colonnes.
Valeurs valides
- CSS2 CSS3 auto- saut de page ou de colonne automatique avant l'élément courant (par défaut)
- CSS2 CSS3 éviter
- CSS3 éviter la page- annuler le saut de page à l'intérieur de l'élément courant
- CSS3 éviter-colonne- annuler le saut de colonne à l'intérieur de l'élément actuel
Exemples d'utilisation
pause à l'intérieur : automatique ; - distribution uniforme
Répartition uniforme du contenu entre les colonnes, dans laquelle les sauts sont placés automatiquement aux endroits les plus appropriés à l'intérieur ou entre les éléments. Avec une distribution uniforme, la hauteur des colonnes est approximativement la même avec une densité de texte plus ou moins uniforme.
Style (nombre de colonnes : 3 ; écart de colonne : 2 em ; règle de colonne : 1px solid #666 ; )
Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte
effraction : colonne à éviter ; - annuler le saut de colonne
Style (nombre de colonnes : 3 ; écart de colonne : 2 em ; règle de colonne : 1px solid #666 ; )
1er bloc texte texte texte texte texte texte texte texte texte
2ème bloc texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte
3ème bloc texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte
La propriété break-inside est définie dans la spécification du module CSS 3 Multi-column Layout, s'applique aux éléments de bloc et est valide sur tous les supports de page, sa valeur n'est pas héritée de l'élément parent dans la hiérarchie du document et la valeur par défaut est auto. La propriété est actuellement prise en charge dans tous les principaux navigateurs.
Voir également:
- break-after - règles pour définir un saut de colonne ou de page après un élément
- break-before - règles pour définir un saut de colonne ou de page avant un élément
- -webkit-column-break-after - règles pour définir un saut de colonne après un élément
- -webkit-column-break-before - règles pour définir un saut de colonne avant un élément
- -webkit-column-break-inside - règles pour définir un saut de colonne à l'intérieur d'un élément
Module Colonnes CSS3 décrit une mise en page à plusieurs colonnes qui permet d'organiser le contenu de manière à ce qu'il s'étende sur plusieurs conteneurs verticaux, comme un journal ou un magazine. Les colonnes peuvent contenir des en-têtes, du texte, des tableaux, des images et tout autre élément en ligne.
Modèle multi-colonnes
Prise en charge du navigateur
C'EST À DIRE: 10
bord: 12
Firefox : 52, 2 mois
Chrome: 50, 4 -kit web-
safari: 9, 3.1 -kit web-
opéra: 37, 11.5 -kit web-
iOS Safari : 9, 3.2 -webkit-
Navigateur UC pour Android : 11.8
Google Chrome pour Android : 73
Internet Samsung : 5, 4 -kit web-
L'ancien poste
24 novembre 2012
15 petites villes les plus charmantes d'Angleterre
1. Berwick-upon-Tweed
Berwick a été fondée en tant que colonie anglo-saxonne à l'époque du royaume de Northumbrie, qui a été annexé par l'Angleterre au 10ème siècle. La région a été pendant plus de 400 ans au cœur des guerres frontalières historiques entre les royaumes d'Angleterre et d'Écosse, et plusieurs fois la possession de Berwick a changé de mains entre les deux royaumes. La dernière fois qu'il a changé de mains, c'est lorsque Richard de Gloucester l'a repris pour l'Angleterre en 1482. À ce jour, de nombreux habitants de Berwick ressentent une affinité étroite avec l'Écosse.
De nos jours, Berwick-upon-Tweed est très visitée pour son histoire très visible : les murs de la ville médiévale, les remparts élisabéthains, les ruines du château du XIIIe siècle, son "vieux pont" du XVIIe siècle, l'hôtel de ville, la première caserne de l'armée britannique, l'hôtel le plus au nord de l'Angleterre, entre autres. .
2. Seigle
Ancient Rye est composé de rues pavées et de rangées de maisons en ruine au bord de la mer. Faisant à l'origine partie de la Confédération des Cinque Ports, cinq villes stratégiques importantes à des fins commerciales et militaires à l'époque médiévale, Rye est aujourd'hui pratiquement un musée vivant. Le château de Rye, populairement connu sous le nom de tour d'Ypres, a été construit en 1249 par Henri III pour se protéger contre les raids fréquents des Français ; encore plus ancienne, l'époque normande St. L'église Sainte-Marie domine la ville. Rye est également à quelques minutes de l'une des plages les plus célèbres d'Angleterre, Camber Sands, un terrain de jeu de deux milles pour les kitesurfeurs et les amoureux de la plage.
Figure 1. Exemple de mise en page multi-colonnes
1. Nombre et largeur des colonnes
Déterminer le nombre et la largeur des colonnes est fondamental lors de la construction d'une mise en page à plusieurs colonnes. Les propriétés column-count et column-width sont utilisées pour définir le nombre et la largeur des colonnes.
La troisième propriété, columns , est une propriété abrégée qui définit la largeur et le nombre de colonnes en même temps.
D'autres facteurs tels que les sauts de colonne explicites, le contenu et les contraintes de hauteur peuvent affecter le nombre et la largeur réels des colonnes.
1.1. Largeur de colonne : propriété de largeur de colonne
La propriété column-width spécifie la largeur minimale que chaque colonne doit occuper.
La propriété n'est pas héritée.
Syntaxe
Largeur de colonne : automatique ; largeur de colonne : 100px largeur de colonne : 10 em largeur de colonne : 3,3 vw ; largeur de colonne : hériter ; largeur de colonne : initiale ;
1.2. Nombre de colonnes : propriété column-count
La propriété column-count décrit le nombre de colonnes et leur largeur sera calculée en fonction de la largeur de l'espace disponible. Si column-width est spécifié en même temps que column-count , alors la valeur de column-count sera considérée comme le nombre maximum de colonnes.
La propriété n'est pas héritée.
Syntaxe
Nombre de colonnes : automatique ; nombre de colonnes : 2 ; nombre de colonnes : hériter ; nombre de colonnes : initial ;
1.3. Définition de colonnes avec une seule propriété de colonnes
La propriété columns est une propriété raccourcie pour définir column-width et column-count . Les valeurs omises sont définies sur leurs valeurs initiales.
La propriété n'est pas héritée.
Syntaxe
Colonnes : 12 em ; /* largeur de colonne : 12em ; nombre de colonnes : auto */ colonnes : auto 12em ; /* largeur de colonne : 12em ; nombre de colonnes : auto */ colonnes : 2 ; /* largeur de colonne : auto ; nombre de colonnes : 2 */ colonnes : 2 auto ; /* largeur de colonne : auto ; nombre de colonnes : 2 */ colonnes : auto ; /* largeur de colonne : auto ; nombre de colonnes : auto */ colonnes : auto auto ; /* largeur de colonne : auto ; nombre de colonnes : auto */ colonnes : héritage ; colonnes : initiale ;
2. Espacement des colonnes et lignes de division
L'espacement des colonnes et les lignes de séparation sont placés entre les colonnes dans un seul conteneur multi-colonnes. La longueur des espaces et des séparateurs est égale à la hauteur de la colonne. Les espaces entre les colonnes occupent de l'espace, c'est-à-dire qu'ils écartent le contenu des colonnes adjacentes.
La ligne de séparation est tracée au milieu de l'espace entre les colonnes sans occuper d'espace. C'est-à-dire que la présence ou l'épaisseur de la ligne de séparation ne changera pas le placement de quoi que ce soit d'autre.
Les lignes sont remplies juste au-dessus de la bordure de l'élément multi-colonnes. Si l'élément a une zone de défilement, les lignes de séparation défilent avec les colonnes. Les lignes de séparation ne sont affichées qu'entre deux colonnes qui ont du contenu.
2.1. Espace entre les colonnes : propriété column-gap
La propriété column-gap définit l'écart entre les colonnes. Si les colonnes ont une ligne de séparation définie à l'aide de la propriété column-rule, cette ligne sera située au milieu de l'espace et sa largeur ne changera pas la largeur globale.
La propriété n'est pas héritée.
Syntaxe
Écart de colonne : normal ; écart de colonne : 3 px ; écart de colonne : 2,5 em ; écart de colonne : 3 % écart de colonne : hériter ; écart de colonne : initiale ;
2.2. Couleur de la ligne de séparation : propriété column-rule-color
La propriété column-rule-color spécifie la couleur de la ligne de séparation.
La propriété n'est pas héritée.
Syntaxe
Colonne-règle-couleur : rose ; colonne-règle-couleur : #D71C3B ; colonne-règle-couleur : rgb (192, 56, 78) ; colonne-règle-couleur : transparent ; colonne-règle-couleur : hsla(0, 100 %, 50 %, 0,6) ; colonne-règle-couleur : hériter ; colonne-règle-couleur : initiale ;
2.3. Style de ligne de séparation : propriété de style de règle de colonne
La propriété column-rule-style définit le style de la ligne de séparation.
La propriété n'est pas héritée.
| style de règle de colonne | |
|---|---|
| Valeurs: | |
| aucun | La valeur est évaluée à 0 . Valeur par défaut. |
| caché | De même avec une valeur de none , la ligne est masquée. |
| pointé | Affiche une ligne sous la forme d'un ensemble de points carrés. |
| pointillé | Affiche une ligne sous la forme d'une série de tirets. |
| solide | Ligne normale. |
| double | Affiche la ligne de séparation sous la forme de deux lignes fines parallèles espacées. La largeur de la ligne de séparation n'est pas spécifiée, mais la somme des lignes et l'espacement entre elles est égal à la valeur de column-rule-width . |
| rainure | Affiche une ligne 3D enfoncée dans le canevas. Ceci est réalisé en créant une ombre avec deux couleurs, une plus foncée et une plus claire. |
| crête | Affiche la ligne de division du volume, c'est-à-dire l'effet inverse de la rainure. |
| encart | Affiche une ligne continue plus foncée que la couleur de ligne spécifiée. |
| début | Affiche une ligne continue dans la couleur spécifiée par la propriété column-rule-color. |
| initial | Définit la valeur d'une propriété à sa valeur par défaut. |
| hériter | Hérite de la valeur de la propriété de l'élément parent. |
Syntaxe
Style de règle de colonne : aucun ; style de règle de colonne : masqué ; style de règle de colonne : pointillé ; style de règle de colonne : tirets ; style de règle de colonne : solide ; style de règle de colonne : double ; style de règle de colonne : rainure ; style de règle de colonne : crête ; style de règle de colonne : encart ; style de règle de colonne : début ; style de règle de colonne : hériter ; style de règle de colonne : initiale ;
2.4. Largeur de la ligne de séparation : propriété column-rule-width
La propriété column-rule-width définit la largeur de la ligne de séparation. Les valeurs négatives ne sont pas autorisées. Ne fonctionne pas sans la propriété column-rule-style.
La propriété n'est pas héritée.
Syntaxe
Largeur de règle de colonne : mince ; largeur de règle de colonne : moyenne ; largeur de la règle de colonne : épaisse ; largeur de règle de colonne : 1 px ; largeur de règle de colonne : 2,5 em colonne-rule-width : hériter ; colonne-rule-width : initiale ;
2.5. Raccourci des propriétés de la ligne de séparation : propriété de règle de colonne
La propriété column-rule est un raccourci pour les propriétés column-rule-width column-rule-style column-rule-color .
La propriété n'est pas héritée.
Syntaxe
Colonne-règle : pointillé ; colonne-règle : solide 8px ; colonne-règle : bleu uni ; colonne-règle : encart bleu épais ; colonne-règle : hériter ; colonne-règle : initiale ;
3. Saut de colonne
Lorsque le contenu est placé dans plusieurs colonnes, le navigateur doit déterminer où les sauts de colonne sont placés. Le problème du fractionnement du contenu en colonnes est similaire au fractionnement du contenu en pages. Pour résoudre ce problème, trois nouvelles propriétés ont été introduites qui permettent de décrire les sauts de colonne dans les mêmes propriétés que les sauts de page : break-before , break-after et break-inside .
4. Étendue de la colonne : propriété de l'étendue de la colonne
La propriété column-span permet à un élément de s'étendre sur plusieurs colonnes. Il n'est pas spécifié pour le bloc conteneur, mais pour un élément spécifique à l'intérieur, par exemple, pour l'en-tête.
À l'avenir, il sera possible de spécifier le nombre de colonnes à couvrir, similaire à l'attribut colspan qui peut être appliqué à une cellule de tableau, mais dans la spécification CSS3, il n'y a que deux valeurs possibles : none et all .
La propriété ne fonctionne pas par défaut dans Firefox. L'utilisateur doit explicitement activer la fonctionnalité, layout.css.column-span.enabled doit être défini sur true . Pour modifier les paramètres de Firefox, accédez à about:config .
La propriété n'est pas héritée.
Syntaxe
Étendue de la colonne : aucune colonne-étendue : tout ; colonne-étendue : hériter ; colonne-étendue : initiale ;
5. Remplir les colonnes avec du contenu : la propriété column-fill
La propriété column-fill contrôle la manière dont les colonnes sont remplies de contenu. Il existe deux stratégies pour remplir les colonnes : les colonnes peuvent être alignées en hauteur ou non. Si les colonnes sont alignées, les navigateurs doivent essayer de minimiser les changements de hauteur de colonne tout en tenant compte des sauts forcés, des veuves, des orphelins et d'autres propriétés qui peuvent affecter les hauteurs de colonne. Si les colonnes ne sont pas alignées, elles sont remplies séquentiellement, certaines d'entre elles peuvent être partiellement remplies ou pas remplies du tout.
La propriété n'est pas héritée.
Syntaxe
Remplissage de colonne : automatique ; remplissage de colonne : solde ; colonne-remplir : balance-all ; remplissage de colonne : hériter ; remplissage de colonne : initiale ;
6. Débordement
6.1. Débordement à l'intérieur des conteneurs multicolonnes
Sauf si cela entraînerait la rupture de la colonne, le contenu qui s'étend au-delà des limites de la colonne s'étend au-delà des limites de la colonne et n'est pas tronqué. Cela s'applique principalement aux images. Pour résoudre ce problème, vous devez définir les propriétés suivantes pour les images :
Img ( display: block; /* supprimer le rembourrage inférieur sous l'image */ width: 100%; /* étirer l'image sur toute la largeur du bloc conteneur */ )
6.2. Pagination et débordement en dehors des conteneurs multicolonnes
Les lignes de contenu et de séparation qui s'étendent au-delà des colonnes sur les bords d'un conteneur multi-colonnes sont coupées en fonction de la propriété overflow.
Un conteneur multi-colonnes peut avoir plus de colonnes qu'il n'en a de place, en raison des contraintes de hauteur de colonne (par exemple via la hauteur ou la hauteur maximale) et des sauts de colonne explicites. Dans ce cas, des colonnes supplémentaires sont créées dans le sens de la ligne, passant aux pages suivantes.
Le Module de mise en page CSS multi-colonnes prolonge la mode de mise en page des blocs pour permettre la définition facile de plusieurs colonnes de texte. les gens ont du mal à lire le texte si les lignes sont trop longues ; s'il faut trop de temps aux yeux pour se déplacer de la fin d'une ligne au début de la suivante, ils perdent la trace de la ligne sur laquelle ils se trouvaient. Par conséquent, pour tirer le meilleur parti d'un grand écran, les auteurs doivent avoir des colonnes de texte de largeur limitée placées côte à côte, tout comme le font les journaux.
Malheureusement, cela est impossible à faire avec CSS et HTML sans forcer les sauts de colonne à des positions fixes, ou restreindre sévèrement le balisage autorisé dans le texte, ou utiliser des scripts héroïques. Cette limitation est résolue en ajoutant de nouvelles propriétés CSS pour étendre le mode de mise en page de bloc traditionnel.
Utiliser des colonnes
Nombre et largeur de colonne
Deux propriétés CSS contrôlent si et combien de colonnes apparaîtront : column-count et column-width .
La propriété column-count définit le nombre de colonnes sur un nombre particulier. Par exemple.,
Exemple 1
HTML
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CSS
#col ( nombre de colonnes : 2 ; )résultat
Affichera le contenu dans deux colonnes (si vous utilisez un navigateur compatible multi-colonnes) :
La propriété column-width définit la largeur de colonne minimale souhaitée. Si le nombre de colonnes n'est pas également défini, le navigateur créera automatiquement autant de colonnes que possible dans la largeur disponible.
Exemple 2
HTML
CSS
#wid (largeur de colonne : 100px ; )résultat
Dans un bloc multi-colonnes, le contenu est automatiquement transféré d'une colonne à la suivante selon les besoins. Toutes les fonctionnalités HTML, CSS et DOM sont prises en charge dans les colonnes, tout comme l'édition et l'impression.
La sténographie des colonnes
La plupart du temps, un concepteur Web utilisera l'une des deux propriétés CSS : column-count ou column-width . Comme les valeurs de ces propriétés ne se chevauchent pas, il est souvent pratique d'utiliser les colonnes raccourcies . Par exemple.
La déclaration CSS column-width: 12em peut être remplacée par columns: 12em .
Exemple 3
HTML
CSS
#col_short ( colonnes : 12em; )La déclaration CSS column-count: 4 peut être remplacée par columns: 4 .
Exemple 4
HTML
CSS
#columns_4 ( colonnes : 4; )résultat
Les deux déclarations CSS column-width: 8em et column-count: 12 peuvent être remplacées par columns: 12 8em .
Exemple 5
HTML
CSS
#columns_12 ( colonnes : 12 8em; )résultat
Équilibrage de la hauteur
La spécification CSS3 Column exige que les hauteurs de colonne soient équilibrées : c'est-à-dire que le navigateur définit automatiquement la hauteur de colonne maximale afin que les hauteurs du contenu de chaque colonne soient approximativement égales. Firefox le fait.
Cependant, dans certaines situations, il est également utile de définir explicitement la hauteur maximale des colonnes, puis de disposer le contenu en commençant par la première colonne et en créant autant de colonnes que nécessaire, en débordant éventuellement vers la droite. Par conséquent, si la hauteur est contrainte, en définissant les propriétés CSS height ou max-height sur un bloc multi-colonnes, chaque colonne est autorisée à atteindre cette hauteur et pas plus loin avant d'ajouter une nouvelle colonne. Ce mode est également beaucoup plus efficace pour la mise en page.
Espacements de colonne
Il y a un espace entre les colonnes. La valeur par défaut recommandée est 1em . Cette taille peut être modifiée en appliquant la propriété column-gap au bloc multi-colonnes :
Exemple 6
HTML
CSS
#column_gap (nombre de colonnes : 5 ; espacement de colonnes : 2em ; )résultat
dégradation progressive
Les propriétés de la colonne seront simplement ignorées par les navigateurs ne prenant pas en charge les colonnes. Par conséquent, il est relativement facile de créer une mise en page qui s'affichera dans une seule colonne dans ces navigateurs et d'utiliser plusieurs colonnes dans les navigateurs compatibles.
Conclusion
Les colonnes CSS3 sont une primitive de mise en page qui aidera les développeurs Web à tirer le meilleur parti de l'espace de l'écran. Les développeurs imaginatifs peuvent leur trouver de nombreuses utilisations, en particulier avec la fonction d'équilibrage automatique de la hauteur.
Comment organiser le texte d'une page en plusieurs colonnes ? Et peut-il être fait automatiquement? Il est certain que beaucoup d'entre vous qui sont ou ont été impliqués dans le développement Web ont été confrontés à une telle tâche - et se sont souvent heurtés à des solutions complexes qui nécessitent des styles délicats ou l'utilisation de bibliothèques JavaScript supplémentaires (voir, par exemple, le plugin Columnizer pour jQuery).
La mise en page de contenu multi-colonnes (à ne pas confondre avec la tâche de mise en page générale multi-colonnes, qui est plus proche du problème de placer des blocs sur une grille) a fait son chemin dans le monde des standards du web depuis longtemps et , enfin, n'a pas seulement atteint le statut de recommandation candidate sous la forme de la mise en page CSS3 Multi module -column correspondante , mais a également reçu un support assez large dans les navigateurs : quelque part avec des préfixes (-moz- ou -webkit-) et quelque part dans le courant (Opera 11.1+) et les versions prévues (IE10+), et immédiatement sans préfixes.
Commentaire
Dans le cas d'Internet Explorer 10, cela signifie automatiquement que vous pouvez utiliser CSS3 Multi-column lors du développement d'applications de style Windows 8 Metro à l'aide de HTML/CSS/JS.
Pour les besoins de cet article, je n'utiliserai pas de préfixes de navigateur pour confondre le code, mais en utilisation réelle, n'oubliez pas d'ajouter la prise en charge des préfixes pour Firefox, Safari et Chrome.
Je noterai tout de suite deux détails plus importants.
Premièrement, dans la plupart des cas, l'utilisation de la mise en page multi-colonnes pour le texte peut être considérée comme le développement de l'affichage du contenu du site le long du chemin d'amélioration progressive, au sein duquel les utilisateurs de sites plus modernes recevront plus de goodies :
Deuxièmement, l'affichage multi-colonnes fonctionne bien avec les fonctionnalités de Media Queries (et les idées de conception réactives), par exemple, à différentes tailles d'écran, vous pouvez formater le texte dans un nombre différent de colonnes :
Et la dernière chose que je voudrais noter dans l'introduction, afin de ne pas m'attarder davantage sur ce sujet et de passer en toute conscience aux détails techniques : lors de l'utilisation d'une disposition de texte multicolonne, il faut se rappeler qu'une telle disposition implique également un certain ordre de lecture (pour les langues européennes de gauche à droite). Par conséquent, il est important que pour transférer le regard d'une colonne à l'autre, il soit nécessaire d'effectuer le moins d'actions supplémentaires possible, en particulier pour les défilements verticaux :
En ce sens, la nature horizontale des colonnes est mieux combinée avec le défilement horizontal (comme il est utilisé dans de nombreuses applications pour Win8 - par exemple, cela se voit clairement dans l'application USA Today) :
En général, les haut-parleurs sont excellents, mais n'oubliez pas la commodité des utilisateurs. Et maintenant à combattre !
haut-parleurs
Donc, nous avons du texte (contenu) que nous voulons placer dans plusieurs colonnes. Où commencer?
Pour transformer un tel élément en élément multi-colonnes, vous devez définir l'une des propriétés suivantes via les styles CSS : largeur de colonne ou nombre de colonnesà une valeur autre que auto. Par exemple,
Pour diviser le texte en deux colonnes, procédez comme suit :
Article (nombre de colonnes : 2 ; )
Le navigateur fera le reste : 
Propriété alternative − largeur de colonne- permet de définir la largeur optimale des colonnes :
Article (largeur de colonne : 150 px ; )
Dans le même temps, le navigateur lui-même répartit le contenu dans le nombre requis de colonnes pour remplir le conteneur externe, en s'ajustant à la largeur de colonne spécifiée. Le point important est que la largeur réelle peut différer de la largeur spécifiée vers le haut ou vers le bas : dans l'image ci-dessus, la barre grise mesure exactement 150 pixels de large - et comme vous pouvez le voir, elle est plus petite que la largeur réelle de la colonne.
Ce comportement est défini par la spécification et permet (automatiquement) plus de flexibilité lors du développement d'un balisage réactif :
Par exemple, si vous avez un conteneur de 100 pixels de large et que vous définissez les colonnes sur 45 pixels de large, le navigateur considérera que seules deux colonnes conviendront, et pour remplir tout l'espace, il augmentera la taille de chacune à 50 pixels. (Cela tient également compte de l'espacement entre les colonnes, qui sera abordé dans la section suivante.)
En un sens, cela peut être considéré comme une alternative à la spécification d'un nombre différent de colonnes à l'aide de Media Queries en fonction de la taille de la fenêtre et au calcul automatique des largeurs de colonne :
@media (min-width:400px) ( article ( column-count: 2; ) ) @media (min-width:600px) ( article ( column-count: 3; ) ) ...
C'est la deuxième fois que je parle de l'alternative - et voici pourquoi.
compter contre largeur
Comme il ressort clairement de la description ci-dessus, la spécification propose deux manières de définir le nombre et la largeur des colonnes (au fait, c'est la même chose pour toutes les colonnes !) :- nombre de colonnes vous permet de spécifier le nombre de colonnes dans lesquelles vous souhaitez diviser le contenu, tandis que la largeur des colonnes est déterminée par le navigateur, en tenant compte de l'espace disponible.
- largeur de colonne vient de l'arrière : indique ce que devraient être approximativement les colonnes, cependant laisse le calcul de leur nombre à la discrétion du navigateur.
Colonnes : 12 em ; /* largeur de colonne : 12em ; nombre de colonnes : automatique ; */ colonnes : 2 ; /* largeur de colonne : auto ; nombre de colonnes : 2 ; */colonnes : automatique ; /* largeur de colonne : auto ; nombre de colonnes : automatique ; */ colonnes : auto 12em ; /* largeur de colonne : 12em ; nombre de colonnes : automatique ; */colonnes : 2 auto ; /* largeur de colonne : auto ; nombre de colonnes : 2 ; */
Que se passe-t-il si vous spécifiez à la fois le nombre de colonnes et la largeur optimale ? Selon le cahier des charges, dans ce cas nombre de colonnes définit le nombre maximum de colonnes :
Article ( colonnes : 150px 3 ; /* largeur de colonne : 150px ; nombre de colonnes : 3 ; */ )
En effet, suite à l'évolution des standards du web, dont certains de mes articles sur CSS3 (voir par exemple), j'espère que vous regarderez les possibilités qui s'ouvrent aux développeurs web avec non moins d'inspiration. Des outils de gestion de contenu réactifs, flexibles et puissants se rapprochent de plus en plus. Et résoudre des problèmes complexes devient plus facile.
interactif
Vous pouvez jouer avec CSS3 Multi-column sur ietestdrive.com :
Essayez, expérimentez. Signalez les bogues aux développeurs de navigateurs. Et n'oubliez pas de penser à ce que verront les utilisateurs de navigateurs plus anciens (et apparemment modernes, mais pas encore entièrement conformes aux normes) - par exemple, vous pouvez utiliser le plugin jQuery Columnizer. Gardez à l'esprit l'adaptabilité et les téléspectateurs de petits et grands écrans.
Comment organiser le texte d'une page en plusieurs colonnes ? Et peut-il être fait automatiquement? Il est certain que beaucoup d'entre vous qui sont ou ont été impliqués dans le développement Web ont été confrontés à une telle tâche - et se sont souvent heurtés à des solutions complexes qui nécessitent des styles délicats ou l'utilisation de bibliothèques JavaScript supplémentaires (voir, par exemple, le plugin Columnizer pour jQuery).
La mise en page de contenu multi-colonnes (à ne pas confondre avec la tâche de mise en page générale multi-colonnes, qui est plus proche du problème de placer des blocs sur une grille) a fait son chemin dans le monde des standards du web depuis longtemps et , enfin, n'a pas seulement atteint le statut de recommandation candidate sous la forme de la mise en page CSS3 Multi module -column correspondante , mais a également reçu un support assez large dans les navigateurs : quelque part avec des préfixes (-moz- ou -webkit-) et quelque part dans le courant (Opera 11.1+) et les versions prévues (IE10+), et immédiatement sans préfixes.
Commentaire
Dans le cas d'Internet Explorer 10, cela signifie automatiquement que vous pouvez utiliser CSS3 Multi-column lors du développement d'applications de style Windows 8 Metro à l'aide de HTML/CSS/JS.
Pour les besoins de cet article, je n'utiliserai pas de préfixes de navigateur pour confondre le code, mais en utilisation réelle, n'oubliez pas d'ajouter la prise en charge des préfixes pour Firefox, Safari et Chrome.
Je noterai tout de suite deux détails plus importants.
Premièrement, dans la plupart des cas, l'utilisation de la mise en page multi-colonnes pour le texte peut être considérée comme le développement de l'affichage du contenu du site le long du chemin d'amélioration progressive, au sein duquel les utilisateurs de sites plus modernes recevront plus de goodies :
Deuxièmement, l'affichage multi-colonnes fonctionne bien avec les fonctionnalités de Media Queries (et les idées de conception réactives), par exemple, à différentes tailles d'écran, vous pouvez formater le texte dans un nombre différent de colonnes :
Et la dernière chose que je voudrais noter dans l'introduction, afin de ne pas m'attarder davantage sur ce sujet et de passer en toute conscience aux détails techniques : lors de l'utilisation d'une disposition de texte multicolonne, il faut se rappeler qu'une telle disposition implique également un certain ordre de lecture (pour les langues européennes de gauche à droite). Par conséquent, il est important que pour transférer le regard d'une colonne à l'autre, il soit nécessaire d'effectuer le moins d'actions supplémentaires possible, en particulier pour les défilements verticaux :
En ce sens, la nature horizontale des colonnes est mieux combinée avec le défilement horizontal (comme il est utilisé dans de nombreuses applications pour Win8 - par exemple, cela se voit clairement dans l'application USA Today) :
En général, les haut-parleurs sont excellents, mais n'oubliez pas la commodité des utilisateurs. Et maintenant à combattre !
haut-parleurs
Donc, nous avons du texte (contenu) que nous voulons placer dans plusieurs colonnes. Où commencer?
Pour transformer un tel élément en élément multi-colonnes, vous devez définir l'une des propriétés suivantes via les styles CSS : largeur de colonne ou nombre de colonnesà une valeur autre que auto. Par exemple,
Pour diviser le texte en deux colonnes, procédez comme suit :
Article (nombre de colonnes : 2 ; )
Le navigateur fera le reste :
Propriété alternative − largeur de colonne- permet de définir la largeur optimale des colonnes :
Article (largeur de colonne : 150 px ; )
Dans le même temps, le navigateur lui-même répartit le contenu dans le nombre requis de colonnes pour remplir le conteneur externe, en s'ajustant à la largeur de colonne spécifiée. Le point important est que la largeur réelle peut différer de la largeur spécifiée vers le haut ou vers le bas : dans l'image ci-dessus, la barre grise mesure exactement 150 pixels de large - et comme vous pouvez le voir, elle est plus petite que la largeur réelle de la colonne.
Ce comportement est défini par la spécification et permet (automatiquement) plus de flexibilité lors du développement d'un balisage réactif :
Par exemple, si vous avez un conteneur de 100 pixels de large et que vous définissez les colonnes sur 45 pixels de large, le navigateur considérera que seules deux colonnes conviendront, et pour remplir tout l'espace, il augmentera la taille de chacune à 50 pixels. (Cela tient également compte de l'espacement entre les colonnes, qui sera abordé dans la section suivante.)
En un sens, cela peut être considéré comme une alternative à la spécification d'un nombre différent de colonnes à l'aide de Media Queries en fonction de la taille de la fenêtre et au calcul automatique des largeurs de colonne :
@media (min-width:400px) ( article ( column-count: 2; ) ) @media (min-width:600px) ( article ( column-count: 3; ) ) ...
C'est la deuxième fois que je parle de l'alternative - et voici pourquoi.
compter contre largeur
Comme il ressort clairement de la description ci-dessus, la spécification propose deux manières de définir le nombre et la largeur des colonnes (au fait, c'est la même chose pour toutes les colonnes !) :- nombre de colonnes vous permet de spécifier le nombre de colonnes dans lesquelles vous souhaitez diviser le contenu, tandis que la largeur des colonnes est déterminée par le navigateur, en tenant compte de l'espace disponible.
- largeur de colonne vient de l'arrière : indique ce que devraient être approximativement les colonnes, cependant laisse le calcul de leur nombre à la discrétion du navigateur.
Colonnes : 12 em ; /* largeur de colonne : 12em ; nombre de colonnes : automatique ; */ colonnes : 2 ; /* largeur de colonne : auto ; nombre de colonnes : 2 ; */colonnes : automatique ; /* largeur de colonne : auto ; nombre de colonnes : automatique ; */ colonnes : auto 12em ; /* largeur de colonne : 12em ; nombre de colonnes : automatique ; */colonnes : 2 auto ; /* largeur de colonne : auto ; nombre de colonnes : 2 ; */
Que se passe-t-il si vous spécifiez à la fois le nombre de colonnes et la largeur optimale ? Selon le cahier des charges, dans ce cas nombre de colonnes définit le nombre maximum de colonnes :
Article ( colonnes : 150px 3 ; /* largeur de colonne : 150px ; nombre de colonnes : 3 ; */ )
En effet, suite à l'évolution des standards du web, dont certains de mes articles sur CSS3 (voir par exemple), j'espère que vous regarderez les possibilités qui s'ouvrent aux développeurs web avec non moins d'inspiration. Des outils de gestion de contenu réactifs, flexibles et puissants se rapprochent de plus en plus. Et résoudre des problèmes complexes devient plus facile.
interactif
Vous pouvez jouer avec CSS3 Multi-column sur ietestdrive.com :
Essayez, expérimentez. Signalez les bogues aux développeurs de navigateurs. Et n'oubliez pas de penser à ce que verront les utilisateurs de navigateurs plus anciens (et apparemment modernes, mais pas encore entièrement conformes aux normes) - par exemple, vous pouvez utiliser le plugin jQuery Columnizer. Gardez à l'esprit l'adaptabilité et les téléspectateurs de petits et grands écrans.