Twitter
Partagez cette démonstration : Twitter

Les exlusions et les formes en CSS

Dernière mise à jour : juillet 2022

Introduction

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.


Exclusions CSS

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.

Les propriétés des exclusions CSS

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.
  • - start
  • - end
  • - both
  • - maximum
  • - clear

Voyons ci-dessous comment ces valeurs fonctionnent au travers d'une image :

propriétés des exclusions CSS

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).

Exclusions CSS et Grid Layout : un couple fait pour s'entendre

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 :

Exemple CSS exclusions


<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

}
    
}


Exclusions CSS et CSS Regions

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.


CSS shapes

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.

Propriété 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 :

  • - none
  • - margin-box
  • - content-box
  • - border-box
  • - padding-box

Il existe également des fonctions (ou types de chemins) :

  • - Fonction circle()
  • - Fonction ellipse()
  • - Fonction inset()
  • - Fonction polygon()

Exemple 1 : image en ligne (inline)

exemple shape-outside inline


<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()

}


Exemple 2 : en arrière-plan

exemple shape-outside background




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%)

}


Un autre exemple pleine page :

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).

Exemple propriété shape-image-threshold


<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

}


Propriété 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.

CSS masking et CSS shapes

Voici un exemple combinant les masques CSS et les formes CSS :

CSS masking et CSS shapes


.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)

}



Source, inspiration, ressources :

CSS exclusions :

Informations sur le module d'exclusions CSS .

La documentation Microsoft sur les exclusions CSS

CSS shapes :

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 :

Documentation Microsoft .

Tutoriel CSS regions (EN) .

CSS regions et CSS exclusions(EN) .

Article complet (EN) .

Exemple exclusions CSS et CSS grid .

Polyfill .

Vous rencontrez un problème avec cet article ?

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.

haut page