Créons, ensemble, des sites qui feront le bonheur de vos utilisateurs
(Expérimental)

Résultats trouvés

Commencez à taper quelque chose, la recherche se déclanchera toute seule !

Layout css

CSS3 s’est enrichie au cours du temps de normes qui peuvent s'avérer très utiles pour mieux contrôler la mise en page du texte. Dans cet article je vous propose de découvrir les bases de trois nouvelles normes pour gérer des colonnes, des zones de débordement et donner forme à votre contenu.

Mettre en page des journaux sur le web

Les trois normes que je traite dans cet article sont fortement poussées par Adobe. Ces derniers ont une problématique simple : permettre aux éditeurs d'obtenir une mise en page similaire à celle des journaux et magazines sur leurs sites web.

Leur cible finale étant probablement de pouvoir exporter un contenu depuis InDesign, leur produit de publication, vers le web.

Le texte sur plusieurs colonnes

La première de ces normes, et aussi la plus répandue, est celle permettant de répartir son texte en plusieurs colonnes. Elle nécessite tout de même d’utiliser des préfixes dans chaque navigateur et évidemment n'est disponible qu'à partir de IE10 uniquement.

Fonctionnalité de base dans le monde de l’impression papier, il était jusqu’à présent difficile de reproduire une mise en page similaire aux journaux et magazines sur le web.

Le passage en colonnes se fait à l’aide des propriétés column-count qui permet de définir le nombre de colonnes et column-width qui fixe la largeur de chaque colonne. Il est également possible de les regrouper avec la propriété *columns.

Par exemple :

<div class="columns">
	Lorem ipsum dolor...
</div>	
.columns {
	column-count: 4;
	column-width: 100px;
    /* ou columns: 4 100px; */
}

Nous donne un rendu plus sympathique de notre très long texte d’exemple :

Utilisation simple des colonnes

Vous pouvez bien évidemment personnaliser vos colonnes en ajoutant des gouttières (l’espace entre chaque colonne) avec la propriété column-gap, un liseret pour séparer les colonnes en utilisant column-rule de manière similaire à une bordure classique, de forcer ou d'empêcher des sauts de colonnes avec break-before, break-inside et break-after et même d’avoir du contenu qui s’étale sur plusieurs colonnes grâce à column-span.

Le code suivant :

<div class="columns">
	<h1>Lorem ipsum !</h1>
	Lorem ipsum dolor sit amet…

    <blockquote>
    Aenean ut massa...
    </blockquote>
    …
</div>
columns {
	column-count: 4;
	column-width: 100px;
	column-gap: 50px;
	column-rule: 3px dashed lightgrey;
}
	
.columns h1 {
	column-span: all;
	text-align: center;
}
	
.columns blockquote {
	column-break-before: always;
	font-style: italic;
}

Nous donne ainsi ce rendu :

Utilisation avancée des colonnes

Le titre h1 est bien réparti sur toutes les colonnes, nous avons un trait de séparation ainsi qu’une gouttière et notre bloc de citation commence sur sa propre colonne.

A l’aide de ces quelques propriétés CSS vous allez pouvoir rendre vos textes potentiellement plus lisibles pour vos utilisateurs.

Pour en savoir davantage :

Répartir votre texte sur plusieurs blocs à l’aide des régions CSS

Cette norme est actuellement encore controversée étant donné que Google a décidé de la retirer de Chrome pour des raisons de performances. Mais pour le moment elle n’est pas encore abandonnée loin de là. Elle reste disponible sur IE10+ et safari 6.1+, avec l'implémentation IE qui nécessite une iframe. Nous sommes donc bien sur une fonctionnalité encore hautement expérimentale.

L’objectif est de définir des zones de “débordement” pour votre contenu lorsque celui-ci est plus grand que son conteneur. Peu utile sur un site classique dont on maîtrise toutes les dimensions, cette spécification peut s'avérer très utile pour les sites qui s’adaptent en fonction de la taille de l’écran.

Imaginons une page ressemblant à ceci sur ordinateurs de bureaux :

Site avec une zone latérale

Si l’on réduit la taille de l’écran, logiquement le bandeau de publicité passera au-dessus ou en dessous du texte. Ce qui signifie que, soit l’utilisateur ne verra que de la publicité, soit il ne la verra probablement jamais. Dans les deux cas ce n’est pas l’objectif visé.

Avec les régions il est possible de fixer la hauteur du bloc contenant le texte dans une média query et lui dire dans quelle zone le débordement se fera avec les propriétés flow-into et flow-from.

Par exemple :

<div class="content">Lorem ipsum dolor sit amet…</div>
<div class="intro"></div>
<div class="ads">Publicités !</div>
<div class="region"></div>
.content {
	flow-into: myContent;
}
		
.intro {
	height: 100px;
	flow-from: myContent;
}
		
.region {
	flow-from: myContent;
}

Nous donnera un rendu de ce type :

Cet exemple reste très simple mais imaginez les possibilités que cette norme ouvre en la couplant aux média queries en terme de mise en page flexible avec votre texte remplissant les différentes cases de votre grille qui se ré-agencent en fonction de la taille de l’écran.

Sachez qu’il existe également des fonctions et évènements javascript qui permettent de contrôle plus finement le comportement des débordements.

Pour en savoir davantage :

Détourez vos images avec CSS shape

Dernière norme de cet article, les CSS shapes permettent de définir une zone autour de votre texte afin qu’il suive une forme imposée.

Cette norme se diffuse assez rapidement dans les navigateurs, notamment dans les dernières versions de Chrome et de Safari.

Son fonctionnement de base est très simple : vous disposez des propriétés shape-inside et shape-outside qui permettent de définir respectivement une forme qui englobe le texte et une forme qui décalera le texte.

Ainsi shape-inside se défini sur un bloc contenant du texte et shape-outside sur un bloc qui sera entouré de texte (une image par exemple).

Vous pouvez passer à ces propriétés des formes géométriques telles qu’un groupe de polygone, un cercle, une ellipse ou même une image vectorielle.

Attention, pour fonctionner il faut que vos blocs soient flottants et dimensionnés sinon la propriété sera ignorée.

Un exemple avec une forme interne :

<div class="content">
a a a a a a a a a a a a a a a a a a a a a a a …
</div>
.content {
	shape-inside: circle();
	float: left;
	height: 10em;
	width: 15em;
	overflow: hidden;
}

Nous donnera le rendu suivant :

Texte circulaire

Tandis qu’une forme externe :

<div class="shape"></div>
<div class="content">
a a a a a a a a a a a a a a a a a a a a a a a …
</div>
.shape {
	shape-outside: circle();
	float: left;
	height: 10em;
	width: 15em;
	background-color:lightgrey;
}

Nous donnera le résultat suivant :

Texte autour d'un cercle

On voit en gris la taille réelle du bloc avec le texte qui déborde en prenant une forme arrondie.

Il est bien sur possible de jouer avec les marges internes et externes et les tailles ou les formes pour que le texte colle parfaitement à votre image.

Par exemple, une démo technologique réalisée par Adobe sur le thème d’Alice au pays des merveilles (http://adobe-webplatform.github.io/Demo-for-Alice-s-Adventures-in-Wonderland/) où le texte prend la forme des dessins l’entourant quand l’utilisateur défile la page.

Capture d'écran du site Alice au Pays des merveilles

Capture d'écran du site Alice au Pays des merveilles

Pour en savoir davantage :

Conclusion

CSS est une norme qui, dans le sillon de HTML5, bouge beaucoup. Elle s’enrichie de nombreuses fonctionnalités progressivement au fil du support par les navigateurs. Nous verrons dans d'autres articles des normes plus complexes telles que Flexbox ou CSSgrid.

Reste aux webmasters de se saisir de ces possibilités et de laisser libre court à leur imagination pour se démarquer et rendre leurs sites encore meilleurs pour les utilisateurs sans faire augmenter drastiquement les coûts de développement et de maintenance.