Dernière mise à jour : juillet 2022
De prime abord, on pourrait penser que les formes CSS et les exclusions CSS ont la même fonction, à savoir envelopper du contenu autour d'un élément.
D'ailleurs, au départ, ces deux spécifications faisaient partie du même module, puis ont été séparées en deux modules différents.
Nous verrons dans cet article les spécificités de ces deux concepts.
Le module Exclusions CSS est spécifiquement conçu pour permettre à un contenu d'envelopper un élément sans que celui-ci ne soit retiré du flux (avec la propriété float), et indépendamment de la façon dont l'élément est positionné : absolu, collant, relatif ou fixe.
La propriété -ms-wrap-flow permet d'indiquer comment les exclusions agissent sur le contenu en ligne (inline) au sein des éléments de bloc. Elle comprend les valeurs suivantes :
auto : par défaut.startendbothmaximumclearVoyons ci-dessous comment ces valeurs fonctionnent au travers d'une image :
La propriété -ms-wrap-through spécifie comment le contenu doit entourer un élément d’exclusion. Vous pouvez utiliser cette propriété pour déterminer l’effet des exclusions avec les valeurs wrap et none.
La propriété -ms-wrap-margin permet de définir la marge de la zone d'exclusion. La valeur de la marge doit être positive.
Pour l'heure (et visiblement il n'y a aucun avancement depuis 2015 !), ce module n'est supporté que par les navigateurs Microsoft (Internet Explorer 10+, ainsi que Edge jusqu'à la version 18, d'où le préfixe -ms).
A la base, le module CSS Grid layout a été lancé par Microsoft, c'est pourquoi vous trouverez dans le code de l'exemple ci-dessous les préfixes propres aux navigateurs de la marque. Depuis, le module a évolué.
Il est désormais possible de l'utiliser en production puisque la majorité des navigateurs est compatible. Ce qui n'est pas le cas du premier module CSS exclusions comme nous l'avons vu plus haut dans l'article. C'est ballot.
Exemple ci-dessous :
<div class="exclu_grid">
<div class="cadre_exclu">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere quam non enim commodo, ac pellentesque tortor lacinia. Aenean iaculis interdum tempor. Nullam porttitor lectus eget mollis egestas. Cras posuere velit id vehicula tempor. Mauris id ex id nisi sagittis ornare vitae a erat. Aliquam nisi risus, gravida sit amet augue id, feugiat tempor dui. Vestibulum tincidunt iaculis tellus, eget finibus odio. Quisque ac dapibus massa. Donec placerat nisi velit, quis sagittis turpis lobortis ac. Praesent ornare malesuada velit, id placerat enim imperdiet sit amet. Vestibulum consequat ligula tellus, quis lacinia mauris porta in. Praesent sit amet faucibus purus. Integer vel sagittis augue.</p>
<p>Aliquam tempor interdum volutpat. Suspendisse potenti. Nunc nibh elit, sagittis nec libero a, pretium fermentum sapien. Aliquam eu risus eu dui varius elementum. Curabitur ut ex luctus, egestas dui sit amet, malesuada lectus. Cras a nibh in velit mattis feugiat at at eros. Etiam et leo arcu. Maecenas egestas enim purus, at ornare velit laoreet a. Etiam egestas pharetra diam, non accumsan sapien posuere ornare. Ut sed velit porttitor dolor tincidunt tincidunt. Pellentesque sit amet pulvinar diam. Cras et purus vulputate, consequat dui vel, cursus risus. Quisque pulvinar convallis tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Sed mollis fermentum lorem, vel vulputate lectus lacinia sit amet. Praesent pulvinar ante id consequat cursus. Quisque faucibus dui et massa suscipit, nec hendrerit nulla ornare. Donec accumsan eros a dictum tempor. Vestibulum a metus id quam eleifend ornare. Fusce sit amet lacus ut nisi viverra volutpat ultrices a ipsum. Ut lacus leo, dictum sit amet nulla ac, volutpat tempor nunc. Donec ut enim eget massa luctus finibus ac ac lorem. Vestibulum pretium lacus a orci molestie volutpat quis eget mi. Aenean lacus erat, dignissim eget mollis auctor, vehicula a dolor. Curabitur id mollis eros, at auctor ipsum.</p>
</div>
<div class="exclu_grid1"><img src="image.jpg" alt></div>
<div class="exclu_grid2"><img src="image.jpg" alt></div>
</div>
.exclu_grid {
margin: 2rem auto;
padding-bottom: 100vh;
display: -ms-grid;
-ms-grid-columns: 1fr;
text-align: justify;
-ms-grid-rows: 10rem auto 30rem auto auto}/*position images + texte*/
.cadre_exclu{
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 5
}
.exclu_grid1{
-ms-grid-row: 2;
-ms-grid-column: 1;
-ms-wrap-flow: both;/*retour à la ligne du texte sous l'image*/}
.exclu_grid2 {
-ms-grid-row: 4;
-ms-wrap-flow: both;/*retour à la ligne du texte sous l'image*/}
.exclu_grid img{
padding:5px 10px
}
@media screen and (min-width: 30rem) {
.exclu_grid{
padding-bottom: 50vh;
-ms-grid-columns: 1fr 2fr 2fr 1fr
}
.cadre_exclu{
-ms-grid-column: 2;
-ms-grid-column-span: 2
}
.exclu_grid1 {
-ms-grid-row:2;
-ms-grid-column:3;
-ms-grid-column-span:1
}
.exclu_grid2 {
-ms-grid-row: 4;
-ms-grid-column: 2;
-ms-grid-column-span:1
}
}
@media screen and (min-width: 62.75rem) {
.exclu_grid{
padding-bottom: 0;
-ms-grid-columns:1fr 2fr 3fr 1fr
}
}
Les régions CSS sont des zones définies de la page où le contenu peut circuler.
Le module CSS regions est idéal pour les éditeurs tels que les magazines, les sites de nouvelles, les articles en ligne ou même les livres électroniques dans l'avenir. Ils sont également utiles pour les mises en page réactives car le contenu suit l'orientation du périphérique.
Tout comme le module Exclusions CSS, CSS Regions ne bénéficie que d'un support très pauvre.
Les deux modules pourront peut-être, à l'avenir, cohabiter.
Contrairement aux exclusions CSS, les formes CSS, dont le support est en voie de standardisation , permettent d'encapsuler un contenu autour de chemins. Le module CSS shapes est basé sur le modèle de boîte CSS et suit par conséquent le flux du document.
Ainsi, pour appliquer une propriété de forme CSS à un élément, celui-ci devra t-il être impérativement flottant.
Il existe deux types de propriétés que nous allons voir ci-dessous.
shape-outside :Cette propriété permet de faire "couler" le texte autour d'une forme. Elle s'associe avec la propriété shape-margin.
Les valeurs possibles sont :
nonemargin-boxcontent-boxborder-boxpadding-boxIl existe également des fonctions (ou types de chemins) :
circle()ellipse()inset()polygon()
<div>
<img src="images.jpg" alt>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at tincidunt risus, nec varius risus. Pellentesque a nisl dolor. Sed cursus, turpis nec tincidunt pharetra, risus lorem vestibulum velit, sit amet dictum lacus urna quis nunc. Maecenas euismod ultricies odio, eget convallis lorem viverra id. In hac habitasse platea dictumst. Suspendisse tincidunt volutpat elit id posuere. Donec maximus tristique viverra. Pellentesque pretium, est at tempor sodales, orci eros sollicitudin mauris, vitae sollicitudin nulla augue a nisi. Proin porta venenatis est vitae interdum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at tincidunt risus, nec varius risus. Pellentesque a nisl dolor. Sed cursus, turpis nec tincidunt pharetra, risus lorem vestibulum velit, sit amet dictum lacus urna quis nunc. Maecenas euismod ultricies odio, eget convallis lorem viverra id. In hac habitasse platea dictumst. Suspendisse tincidunt volutpat elit id posuere. Donec maximus tristique viverra. Pellentesque pretium, est at tempor sodales, orci eros sollicitudin mauris, vitae sollicitudin nulla augue a nisi. Proin porta venenatis est vitae interdum.</p>
</div>
div img{
padding: 10px;
float: left;
margin-right: 1.5rem;
border-radius: 50%;
border: 3px solid #666;
shape-outside: circle()
}
div {
background: url(image.jpg) no-repeat 32% 50%;
box-shadow: inset 0 0 5px rgba(0,0,0,.4),0 0 5px rgba(0,0,0,.4);
border-radius: 50%;
border: 5px solid #ddd;
width: 500px;
height: 500px;
float: right;
margin-left: 2rem;
shape-outside: circle(250px at 50% 50%)
}
Vous pouvez également extraire une forme à partir d'images avec un canal alpha en utilisant la propriété shape-image-threshold conjointement à la propriété shape-outside. Cela ne fonctionne que sur des images transparentes (.gif, .png, .svg).
<p>
<img class="shape-image-threshold" src="image.png">
blablabla...
</p>
.shape-image-threshold {
shape-outside: url("image.png");
shape-image-threshold: 0.5;
shape-margin: 10px;
float: left
}
shape-inside :La propriété shape-inside fera partie du deuxième niveau du module. Elle s'associe avec la propriété shape-padding. Tandis que la propriété shape-outside permet de faire circuler un texte autour d'une image, la propriété shape-inside permet d'envelopper du texte à l'intérieur d'une forme.
Voici un exemple combinant les masques CSS et les formes CSS :
.class {
float: left;
width: 512px;
height: 512px;
shape-outside: url(image.png);
shape-margin: 15px;
shape-image-threshold: 0.5;
background: #000 url(image.jpg) no-repeat center center/cover;
mask-image: url(image.png);
-webkit-mask-image: url(image.png)
}
Informations sur le module d'exclusions CSS .
La documentation Microsoft sur les exclusions CSS
Informations sur le module CSS shapes .
Tutoriel sur CSS shapes (EN) .
Introduction CSS shapes (FR) .
Autre article sur CSS shapes (EN) .
Modèle de boîte CSS Shapes (EN) .
Séries d'articles sur le sujet (EN) .
Polyfill .
CSS regions et CSS exclusions(EN) .
Exemple exclusions CSS et CSS grid .
Polyfill .
Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis de l'article ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux.