Editions ENI Livres | Vidéos | e-Formations
Des modules CSS3 en devenir
L’évolution des modules CSS
Nous l’avons vu précédemment, les CSS évoluent très régulièrement et le nombre de modules est important. Parmi tous ces modules, certains sont encore en Working Draft, d’autres sont déjà en Candidate Recommendation, donc presque finalisés.
Dans ce dernier chapitre, nous n’allons pas étudier tous les modules déjà exploitables pour les designers, mais nous allons en survoler quelques-uns très prometteurs.
La mise en page avec une grille
Le module CSS Grid Layout Module Level 1 est en Candidate Recommendation, au 14 décembre 2017 : https://www.w3.org/TR/css-grid-1/.
Sur le site de Can I Use, nous pouvons voir qu’il est très bien reconnu par les navigateurs modernes :
L’objectif de ce module est la création de mises en page à l’aide d’une grille adaptative. Cette grille va contenir des lignes et des colonnes délimitant ainsi des cellules. Chaque cellule peut contenir n’importe quel type de contenu.
Voici un exemple très simple :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>La grille</title>
<meta charset="UTF-8" />
<style>
#grille {
display: grid;
grid-template-columns: 200px 400px 200px;
grid-gap: 10px;
background-color: #fff;
}
.bloc {
background-color: #eee;
padding: 20px;
}
</style>
</head>
<body>
<div id="grille">
<div class="bloc">Sed posuere consectetur...</div>
<div...Utiliser des masques
Les masques permettent de masquer une partie d’une illustration, d’une image ou d’une photo, par un élément graphique. Les masques font partie du module Masking Module Level 1. Ce module est en voie d’achèvement, puisqu’il est en Candidate Recommendation, au 26 août 2014 : https://www.w3.org/TR/css-masking-1/.
Voici le tableau de compatibilité des navigateurs, sur le site de Can I Use :
Nous voyons que la reconnaissance des navigateurs est encore très partielle, en décembre 2018, au moment de l’écriture de ce livre. En dehors de Mozilla Firefox, les autres navigateurs nécessitent des préfixes vendeurs.
Dans un premier temps, nous devons créer le masque en lui-même. Dans cet exemple, nous allons utiliser une image au format PNG, ce qui permet de gérer 256 niveaux de transparence. Pour cet exemple, il s’agit juste d’un rond avec une bordure floue et transparente.
Voici l’image initiale utilisée :
Voici l’insertion de l’image à masquer dans le code HTML :
<p><img src="loutre.jpg" class="masque"></p> Cette image utilise la classe .masque.
Pour définir la règle CSS du sélecteur .masque, nous n’allons utiliser que certaines propriétés des masques :
-
mask-image indique l’URL du fichier du masque à...
Créer un habillage de texte
L’habillage d’un texte par une image est une technique de PAO très classique depuis déjà de nombreuses années. Cela va permettre de faire passer le texte autour d’une forme graphique. C’est le module CSS Shapes Module Level 1 qui permet de créer ce type de mise en page. Ce module est presque achevé, il est en Candidate Recommendation, depuis le 20 mars 2014 : http://www.w3.org/TR/css-shapes-1/
Voici le tableau de compatibilité des navigateurs, sur le site de Can I Use :
Ce module est bien reconnu par les navigateurs modernes.
Pour créer un habillage, nous avons besoin d’une image qui sera contournée par le texte. Dans cet exemple, nous utilisons un simple triangle :
Ce triangle sera utilisé deux fois, pour un habillage à gauche et à droite du texte.
Voici la structure HTML :
<div id="habillage">
<img src="triangle.gif" class="triangle-gauche">
<img src="triangle.gif" class="triangle-droite">
<p id="texte-habille">Morbi leo risus, porta ac consectetur ac...</p>
</div> Le conteneur est une boîte <div> ayant l’identifiant id="habillage". Nous avons ensuite deux éléments <img> pour insérer les deux triangles. Chaque image...
