Salut, le multi-colonne en css logo css3

Retour sur le CSS3 mais cette fois avec des propriétés avancées.  Ces propriétés vont nous permettre de réaliser plusieurs choses assez amusantes! La première n’est pas la plus « fun », mais vos utilisateurs vous remercieront de l’avoir employée, puisqu’il s’agit du multi-colonne. Cette propriété va nous permettre de répartir comme sur un journal, notre contenu sur plusieurs colonnes sans avoir besoin de coder quelque chose de compliqué avec des blocs distincts, qu’il va falloir positionner, etc.

Vos lecteurs ne s’en porteront donc que mieux puisqu’il est plus simple de lire sur des lignes courtes que sur des pages trop larges.

C’est parti pour la première partie des propriétés avancées en CSS!

Les propriétés

Pour que notre texte, nos paragraphes se répartissent automatiquement sur plusieurs colonnes, il faut utiliser de nouvelles propriétés CSS:

  • column-count: indique le nombre de colonnes que l’on souhaite pour répartir notre texte. Par exemple: 5. Il n’y a pas d’unité à préciser comme px ou em, il s’agit juste d’une quantité.
  • column-width: indique la largeur que l’on souhaite donner à chaque colonne. Cette valeur peut être exprimée en px ou en em mais PAS en pourcentage!
  • columns: est une propriété qui regroupe les 2 précédentes, elle permet de limiter les lignes de code, et c’est bienvenue, parce que du code on va devoir en saisir un peu ensuite… Alors attention la propriété c’est COLUMNS avec un S!!! Je commençais à me dire p#*!@ ça marche pas!!! en fait c’est au pluriel… -_-‘

Notre code ressemble pour le moment à ça:

section{
	column-width: 50px;
	column-count:5;
}

/* on peut aussi écrire le code suivant pour le même résultat*/ 

section{
	columns: 5 50px;
}

Il faut juste avoir à l’esprit que l’on donne 2 valeurs qui n’ont pas forcément d’emprise l’une sur l’autre. Le navigateur partagera en autant de colonnes que l’on veut et il essaiera de faire en sorte que la largeur des colonnes fasse environs la largeur demandée. Essai de faire varier la largeur de ton écran pour voir ce qu’il se passe. Le nombre de colonnes ne varie pas.

Donc c’est super simple à comprendre et il n’y a pas beaucoup de code à saisir mais, oui…. il y a un mais…

La compatibilité

Et oui, c’est le deuxième effet kisscool, tous les navigateurs ne gèrent pas ces propriétés de la même façon. Pour la suite de cette phrase assis toi bien, parce que le seul qui les a implémentées le mieux c’est Internet Explorer!!! Pour une fois…

Il va donc falloir écrire plusieurs fois le code avec des préfixes devant le nom de la propriété, comme ce que l’on avait fait pour les dégradés. Petit rappel des préfixes:

  • -moz- : préfixe pour Firefox,
  • -webkit-: préfixe pour Google Chrome, Safari et Opera

Nous allons donc devoir écrire le code suivant pour que nos colonnes puissent s’afficher correctement sur les écrans de nos visiteurs:

.block{

	-moz-column-width: 50px; /* firefox */
	-moz-column-count:5;/* firefox */
	-webkit-column-width: 50px;/* Chrome, Safari, Opera*/
	-webkit-column-count:5;/* Chrome, Safari, Opera*/
	column-width: 50px;/* Internet Explorer*/
	column-count:5;/* Internet Explorer*/
}

/* On peut aussi utiliser la pripriété columns qui permets d'écrire moins de code*/

.block{
	-moz-columns: 5 50px;/* firefox */
	-webkit-columns: 5 50px;/* Chrome, Safari, Opera*/
	columns: 5 50px;/* Internet Explorer*/

}

Pour quelques choses de simple, il faut tout de même écrire 3 fois le code… Attention lors des modifications, bien penser à changer les 3 lignes!

ATTENTION: toutes les propriétés que nous voyons dans cet article ne sont pas toutes supportées pas les navigateurs correctement. Je te conseille de jeter un oeil sur Can I Use pour voir si tout peux fonctionner. Il ne sert à rien de s’acharner à vouloir faire fonctionner quelques choses qui de toutes façon n’est pas supporté…

IMPORTANT: J’ai lu il ce week end, qu’il fallait écrire les propriétés avec les préfixes (moz, webkit, etc) avant la propriété seule. Ces préfixes indiquent que la propriété est en phase de test. Ces navigateurs vont donc utiliser la déclaration qui les intéresses et n’iront donc pas voir la dernière déclaration sans préfixe, qu’ils ne comprendront pas. A terme, quand cette propriété sera validée, les navigateurs n’auront plus besoin du préfixe, ils ne le liront plus  et prendront donc la déclaration « standard ». J’ai lu cela dans un livre de Dan Cederholm, « CSS3 pour les Web Designers ». Si les préfixes se trouvent après la déclaration « standard », les navigateurs risquent de se satisfaire d’un affichage partiel avec une déclaration juste mais qu’ils ne peuvent pas comprendre sans préfixe.

Les séparations de colonnes

Jusqu’à présent tu as du texte qui se réparti sur des colonnes mais visuellement ça n’est pas parfait. Quand tu ouvres un journal, les colonnes sont régulièrement espacées, parfois il y a même des barres qui les séparent. On peut faire tout ça avec du CSS à l’aide des  propriétés suivantes:

  • column-gap: permet de régler l’espace entre deux colonnes. Cette valeur peut être exprimée en px ou en em seulement,
  • column-rule-width: permet de définir l’épaisseur du trait tracé entre 2 colonnes. Peut être exprimé en px, em ou avec les valeurs par mot clé thin, medium(valeur par défaut), thick,
  • column-rule-color: permet de définir l’épaisseur du trait tracé entre 2 colonnes,
  • column-rule-style: permet de définir le style de tracé de la ligne de séparation. Cette propriété peut prendre les valeurs suivantes:
    • none,
    • hidden,
    • dotted,
    • dashed,
    • solid,
    • double,
    • groove,
    • ridge
    • inset,
    • outset.

Ces  3 propriétés fonctionnent comme les propriétés border: border-color, border-style, border-width. Elles sont d’ailleurs souvent comprises dans ce que l’on appelle une super propriété, la propriété border qui englobe les 3.

Pour les 3 propriétés column, c’est le même principe! On peut les rassembler,  width, color et style, dans une super propriété qui s’appelle: column-rule.

Ne pas oublier les histoires de compatibilité et voilà le code qui s’allonge, attention aux erreurs lors de modifications….

article{
	
	-moz-columns: 50px 5;	
	-webkit-columns: 50px 5;
	columns: 50px 5;

	
	-moz-column-rule: dotted blue 1px;
	-webkit-column-rule: dotted blue 1px;
	column-rule: dotted blue 1px;


	-moz-column-gap:5px;
	-webkit-column-gap:5px;
	column-gap:5px;

}
/* Je passe le code ou on utlise pas la super propriété column-rule, ça ferais vraiment beaucoup de code!! */

Précision, dans la propriété column-rule, il n’y a pas d’ordre pour saisir les valeurs, on s’en fou en fait, donc n’ai pas peur et sois créatif! Comme pour border d’ailleurs…

Du texte sur plusieurs colonnes

Toujours comme dans les journaux ou les magazines, il est possible de travailler la mise en page et d’avoir par exemple un titre qui sépare plusieurs colonnes.

Le principe revient à formater des cellules dans Excel en gros. On va donc se servir d’une nouvelle propriété: column-span.

Cette propriété peut prendre les valeurs suivantes:

  • un nombre indiquant le nombre de colonne qui seront « interrompue » par le titre,
  • all: indique que toutes les colonnes seront interrompues par le titre,
  • none: si dans une media-queries on souhaites revenir à quelques choses de moins découpé, pour un affichage pour mobile par exemple. (je n’ai pas testé ce point mais j’imagine que ça peut servir à ça…)

Voici donc le code avec les 3 lignes comprenant chacune un prefixe:

article h1{
	-moz-column-span:all;
	-webkit-column-span:all;
	column-span:all;

}

J’ai essayé d’obtenir le même effet avec une image, mais ne n’y suis pas arrivé pour le moment. J’essaye de trouver un moyen de le faire simplement…

 

Soigner la mise en page

En travaillant avec ce multi-colonne on peut être confronté à avoir des choses parfois un peu moche à l’écran. Cela peut être le cas lorsqu’un paragraphe se termine presque en bas de page, que tu as ensuite un titre et une ligne de paragraphe et tu passes ensuite sur une autre colonne.

Il vaudrait mieux dans ce cas, pouvoir sauter de colonne avant le titre, et bien ça aussi c’est possible! On va encore se servir de nouvelles propriétés:

  • break-before: indique si on peut ou pas (suivant la valeur qu’on va donner) changer de colonne avant le texte,
  • break-inside: indique si on peut ou pas faire un saut de colonne dans le paragraphe,
  • break-after: indique si on peut ou pas changer de colonne après le texte (paragraphe ou titre).

Il y a de nombreuses valeurs pour ces propriétés, je t’invite d’ailleurs à lire la doc sur le MDN (Mozilla Developer Network), et à les essayer pour voir ce que ça donne.

On retrouve les valeurs suivantes en commun:

  • auto: valeur par défaut, n’interdit ni ne force un saut de colonne,
  • avoid: Empêche tout saut de colonne, de page, de région après le bloc concerné,
  • avoid-column: Interdit un saut de colonne dans le bloc concerné,
  • column: force un saut de colonne.

Comme d’habitude, tu peux aller voir quelques tests que j’ai fait sur Codepen. N’hésites pas à manipuler ces propriétés car c’est pas si simple à maîtriser, d’autant qu’il y a une liste de valeur assez longue. J’avouerai qu’il y a quelques trucs que je vais revoir car je ne suis pas sur d’avoir tout compris… C’est aussi ça l’apprentissage…

La justification du texte: les césures!

Là je suis tombé dans le piège, pour que mes colonnes soient plus nettes, j’ai appliqué un text-align: justify; à tous mes paragraphes, et en un seul coup mes rives de colonnes étaient parfaitement alignées. Le seul problème c’est que lorsqu’on justifie un texte, les espaces entre les mots sont étirés pour satisfaire la justification. C’est un peu dommage par fois d’avoir 3 mots par lignes et d’immenses blancs entre eux…

Il faut utiliser une nouvelle propriété qui  va permettre de limiter l’étirement du texte et de couper les mots en fin de ligne avec un tiret. C’est ce qu’on appelle des césures (ou hyphénations).

Nous allons donc utiliser la nouvelle propriété: hyphens. Note bien le S à la fin, ça évitera les problèmes en cas d’oublis…

Comme précédemment, nous allons utiliser les préfixes, voilà donc ce que ça donne:

article{
	
	text-align:justify;

	-moz-hyphens:auto;
	-webkit-hyphens:auto;
	hyphens:auto;
}

Il y a plusieurs valeurs possibles, voir sur le MDN, mais je pense que personnellement je vais très souvent utiliser auto! Avec cette valeur c’est le navigateur qui coupe les mots où il veut. Petit détail tout de même, il faut veiller à préciser la langue dans laquelle est écrit le contenu, pour éviter les problèmes de coupure bizarre…

Il faut donc ajouter dans la section head de ta page HTML, l’indication suivante:

<head>
	
	<html lang="fr"/> <!-- Indication pour du français -->
	
</head>

J’en ai terminé avec ce premier chapitre de CSS avancé, il y a 2-3 trucs qu’il faut que je retravaille un peu quand même. Tu peux toujours voir mes bricolages sur Codepen.

J’ai écrit cet article en suivant la formation de CSS Avancés d’Openclassrooms, donc c’est largement inspiré du cours, ainsi que les sources du MDN.

Dernier point important, penses à vérifier si les propriétés sont supportées!!

Je te dis à bientôt pour d’autres propriétés CSS!

Guillaume