Disposition de plusieurs colonnes (Magazine-alike) avec CSS3
En général, les gens perdent la piste en lisant un contenu extrêmement long. C'est pourquoi, dans les médias imprimés tels que les magazines et les journaux, le contenu est divisé en plusieurs colonnes pour une lecture facile..
Créer une colonne sur le Web est une histoire totalement différente. C'est assez difficile. En fait, il n’ya pas si longtemps, vous devrez peut-être diviser le contenu manuellement en plusieurs divs et faites-le flotter à droite ou à gauche, puis spécifiez la largeur, le remplissage, la marge, les bordures, etc..
Mais, les choses sont maintenant beaucoup simplifiées avec le Module multi-colonnes CSS3. Comme son nom l'indique clairement, ce module nous permet de diviser le contenu dans la présentation en colonnes que nous voyons dans les journaux ou les magazines..
Prise en charge du navigateur
Plusieurs colonnes sont actuellement prises en charge par tous les navigateurs - Firefox 2+, Chrome 4+, Safari 3.1+ et Opera 11.1 - à l’exception, comme prévu, d’Internet Explorer, mais la prochaine version, IE10, semble avoir commencé à prendre en charge ce module..
Pour le reste des navigateurs, pour que cela fonctionne, Firefox a toujours besoin de la -moz- préfixe, alors que Chrome et Safari ont besoin du -webkit- préfixe. Opera ne nécessite aucun préfixe, nous pouvons donc utiliser les propriétés officielles.
La source: Quand puis-je utiliser CSS3 Disposition en plusieurs colonnes?
Créer plusieurs colonnes
Avant de créer les colonnes, nous avons préparé des paragraphes de texte pour la démonstration, intégrés au format HTML5. tag, comme suit;
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum en augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, assis en position orchestrale. Integer vitae conséquat augue. //etc
… Et spécifiez la largeur pour 600px de la feuille de style, c'est tout.
Maintenant, commençons à créer les colonnes.
Dans l'exemple ci-dessous, nous allons diviser le contenu en deux colonnes avec le nombre de colonnes propriété. Cette propriété indique au navigateur de rendre le contenu en colonnes avec le nombre spécifié et laisse le navigateur décider de la largeur appropriée pour chaque colonne..
article -webkit-column-count: 2; -moz-column-count: 2; nombre de colonnes: 2;
En plus d’être définies par le nombre, des colonnes peuvent être créées en spécifiant la largeur à l’aide des touches largeur de colonne propriété et en laissant le navigateur pour décider combien de colonnes doivent être générées à la place.
Dans cet exemple, nous spécifions la largeur de colonne pour 150px, ce qui a eu pour résultat que le contenu a été divisé en trois colonnes.
article -moz-column-width: 150px; -webkit-column-width: 150px; largeur de colonne: 150px;
Comme indiqué dans les spécifications. la largeur réelle de la colonne peut être plus large ou plus étroite que la largeur de colonne spécifiée en fonction de l'espace disponible. De plus, si la valeur de la largeur n’est pas explicitement spécifiée, le “auto” sera pris comme valeur par défaut, ce qui pourrait aussi signifier “pas de colonne”.
Écart de colonne
Écart de colonne définir les espaces qui séparent chaque colonne. La valeur de l’écart peut être indiquée dans em ou px, mais comme indiqué dans la spécification la valeur ne peut pas être négative. Dans l’exemple ci-dessous, nous spécifions l’écart pour 30px, de sorte que les espaces entre les colonnes sont un peu plus larges.
article -webkit-column-gap: 30px; -moz-colonne-gap: 30px; écart de colonne: 30px;
Règle de colonne
Si vous souhaitez ajouter des bordures entre les colonnes, vous pouvez utiliser le règle de colonne propriété, qui fonctionne très similaire à la frontière propriété. Donc, disons, si nous voulons mettre une bordure en pointillé entre la colonne, nous pouvons écrire;
article -moz-column-rule: 1px en pointillé #ccc; -webkit-column-rule: 1px en pointillé #ccc; règle de colonne: 1px pointillé #ccc;
Colonne
Cette propriété fonctionne assez semblable à la colspan dans table étiquette. L'implémentation commune de cette propriété consiste à étendre le titre du contenu sur toutes les colonnes. Voici un exemple.
article h1 -webkit-column-span: tous; colonne-envergure: tous;
Dans l'exemple ci-dessus, nous avons défini le h1 pour couvrir toutes les colonnes, et si l'étendue de colonne est spécifiée, 1 sera pris par défaut. Malheureusement, cette propriété, au moment d'écrire ces lignes, ne fonctionne qu'avec Opera et Chrome..
Mots finaux
C’est tout pour l’instant, nous avons abordé tous les éléments essentiels pour créer plusieurs colonnes avec CSS3 et, comme nous l’avons mentionné au début, ce module fonctionne très bien dans les navigateurs modernes, mais il ne fonctionne pas encore dans Internet Explorer..
En fin de compte, nous espérons que vous avez maintenant une assez bonne compréhension de la création de colonnes avec CSS3. Si vous avez le temps de faire des expériences, n'hésitez pas à partager vos méthodes et vos résultats dans la zone de commentaire ci-dessous. Merci d'avoir lu ce post et amusez-vous.
- Démo
- Source de téléchargement
