Traduction
Tutoriel CSS3 - sommaire
Tutoriel CSS3 - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
On pouvait reprocher au CSS de ne pas être assez ergonomique. La maintenance d'une feuille de style peut s'avérer chronophage.
Aussi des préprocesseurs CSS sont proposés aux développeurs web.
Un préprocesseur CSS est un programme qui permet de générer du CSS ; un préprocessur dispose de quelques fonctionnalités qui
n'existaient pas encore en CSS telles que variables, sélecteur d'imbrication, etc.
Le plus célèbre est SASS. Le développeur écrit un pseudo code CSS simplifié et structuré (règles de style imbriquées, variables, etc. )
puis procède à la compilation de ce fichier (extension .scss) pour obtenir la feuille de style interprétable par le navigateur (fichier css).
Mais avec les innovations que je vais évoquées dans ce chapitre et qui sont désormais implémentées par les navigateurs récents, le recours
à des préprocesseur CSS est-il encore nécessaire ???
Si vous utilisez currentColor pour définir la couleur d'une bordure, d'un arrière-plan ou d'une ombre,
cette propriété adoptera automatiquement la même couleur que le texte de cet élément.
Le mot clé 'currentColor' fait donc fonction de variable.
Il y a homogénéité dans la présentation : texte, bordure & ombrage en indigo.
Survolez la boite : tout passe en rouge !
Cliquez dans la boite : tout passe en vert olive !
Le CSS :
.maboite {color: indigo; border: 5px solid currentColor;
box-shadow: 5px 5px 5px currentColor; text-align : center;}
.maboite:hover {color : red; }
.maboite:active {color : olive;}
La couleur de l'ombre et de la bordure sera toujours identique à la couleur du texte pour le même élément.
Le HTLM :
Si je n'avais pas utilisé le mot clé 'currentColor' j'aurais du écrire :
.maboite {color: indigo; border: 5px solid indigo;
box-shadow: 5px 5px 5px indigo;text-align : center;}
.maboite:hover {color : red; border: 5px solid red;
box-shadow: 5px 5px 5px red;}
.maboite:active {color : olive; border: 5px solid olive;
box-shadow: 5px 5px 5px olive;}
Admettez que c'est pratique ; l'écriture des règles de style dérivées de la principale est beaucoup plus simple.
Vous pouvez désormais créer et manipuler des variables dans votre feuille de style comme nous allons le voir dans l'exemple qui suit.
On parle officiellement de "custom properties" (propriétés personnalisées).
Trois grandes divisions : HEADER, MAIN, FOOTER
Le conteneur MAIN contient les boites ARTICLE & ASIDE.
Il s'agit d'une feuille de style classique ; les valeurs des propriétés sont des constantes.
* {box-sizing : border-box; font-size : 12px; }
html {margin : 0 ; padding : 0 ; }
body {width : 90%; margin : auto ; }
h1,h2{background : darkblue ; color : red ;
text-align : center; margin-top : 10px; }
h3 {background : lime ; color : navy ;
text-align : center; font-size : 120%; }
h1 {font-size : 200%; line-height : 50px; }
h2 {font-size : 150%; line-height : 40px;}
button {background : lime ; color : navy ;
line-height : 30px; width : 20% ;
margin : 1%; font-size : 110%; }
p {background : pink ; color : purple; padding : 5px ;
margin : 5px ; font-size : 110%; }
table {background : lime ; color : navy;
width : 50% ; margin : auto; }
a {display : inline-block ; background : pink ;
color : purple; font-size : 120%; }
img.grand {width : 50%; display : block; margin : auto; }
main {width : 100% ; margin: auto;
display : flex; flex-direction : row ; }
article {width : 70% ; }
aside {width : 30%; }
Notez que les "enfants" de la boite MAIN (ARTICLE & ASIDE) sont disposés avec la méthode "flexbox".
Notez aussi que les boites seront "border-box".
Je suis d'accord avec vous. Les couleurs sont moches mais c'est volontaire ...
Nous allons créer et manipuler des variables CSS dans la feuille.
* {box-sizing : border-box; font-size : 12px; }
/* création et initialisation de variables */
html { --largeur1 : 90% ;--largeur2 : 100%;--largeur3 : 50%;
--fond1 : darkblue; --texte1 : red ;
--fond2 : pink ; --texte2 : purple ;
--fond3 : lime ; --texte3 : navy;
--marge1 : 10px; --marge2 : 5px; }
/* règles de style avec utilisation des variables définies */
body {width : var(--largeur1); margin : auto ; }
h1,h2{background : var(--fond1) ;
color : var(--texte1) ; text-align : center;
line-height : 40px ;
margin-top : var(--marge1); font-size : 150%; }
h3 {background : var(--fond3) ;
color : var(--texte3) ; text-align : center;
line-height : 20px ; font-size : 120%; }
h1 {font-size : 200%; line-height : 50px; }
h2 {font-size : 150%; line-height : 40px;}
button {background : var(--fond3) ;
color : var(--texte3) ; line-height : 30px;
width : 20% ;
margin : 1%; font-size : 110%; }
table {background : var(--fond3) ; color : var(--texte3);
width : var(--largeur3);
width : var(--largeur3;); margin : auto; }
a {display : inline-block ; background : var(--fond3) ;
color :var(--texte3); font-size : 110%; }
img.grand {width : var(--largeur3); display : block; margin : auto; }
p {background : var(--fond2) ; color : var(--texte2);
padding : var(--marge2) ;
margin : var(--marge2); font-size : 120%; }
main {width : var(--largeur2); margin: auto;
display : flex; flex-direction : row ; }
article {width : 70% ; }
aside {width : 30%; }
Via le sélecteur html on définit des variables qui seront utilisables pour toute la page.
Le nom d'une variable CSS doit toujours commencer par deux tirets. Le nom d'une variable ne peut comporter le caractère "espace".
Exemple de création et initialisation de variables :
--fond1 : darkblue; --texte1 : red ;
Pour utiliser une variable comme valeur d'une propriété il faut l'entourer de la fonction var().
Exemple :
background : var(--fond3) ; color : var(--texte3) ;
Et si on manipule une variable qui n'a pas été définie ?
La fonction var() admet un deuxième paramètre :
background : var(--fond3, lime) ; color : var(--texte3,navy) ;
La couleur "lime" ou "navy" sera utilisée par le navigateur s'il ne trouve pas les variables "--fond3" ou "--texte3"
Pour modifier l'apparence de la page il suffit de changer les valeurs initiales des variables. Donc il suffit de modifier que la deuxième règle de style ; celle qui débute avec le sélecteur "html". La maintenance de la feuille de style devient très rapide.
--fond1 : skyblue; --texte1 : navy ; --fond2 : blue ; --texte2 : white ; --fond3 : lavender ; --texte3 : purple;
Il suffit donc de modifier la règle de style ayant pour sélecteur html.
C'est beaucoup plus joli dans le choix des couleurs.
La mise à jour de la feuille de style a été simple et très rapide !
Un site propose au visiteur deux styles de page : mode clair (par défaut) ou mode sombre.
* {font-size : 20px ; box-sizing : border-box; }
body {width : 90vw ; margin : 0 auto; }
main {width : 80vw ; height : 80vh ;
margin : 2vh auto;
background : var(--fond);
border : 1px solid red; }
h1,h2 {color : var(--titre); width : 60vw ;
margin : 1vh auto; text-align : center; }
h1 {font-size : 2rem; }
h2 {font-size : 1.5rem; }
p {font-size : 1rem; color : var(--texte);
margin : 1vh 1vw; }
button {margin : 1vh 1vw ; color : var(--texte); }
.clair {--fond : white; --titre : gray ;
--texte : black ; }
.sombre {--fond : black ; --titre : pink ;
--texte : white ; }
Notez les deux classes "clair" et "sombre".
Dans ces classes on attribue une couleur à chaque variable.
Dans les règles de style et pour les propriétés color & background on fait référence aux variables.
Si vous ne savez pas le sens de box-sizing : border-box alors visitez la page
Les éléments 'block'
Notez l'instruction : <main class ="clair" >
Donc par défaut application du mode clair.
var main = document.querySelector('main');
document.querySelector('#bouton1').onclick = function()
{main.classList.remove('clair'); main.classList.add('sombre'); }
document.querySelector('#bouton2').onclick = function()
{main.classList.remove('sombre');main.classList.add('clair'); }
Emploi de la méthode classList() introduite récemment dans le langage JS.
JS - modifier le DOM
Le changement de mode ne s'applique qu'au conteneur MAIN et ses descendants.
Je vous propose de manipuler une quatrième variable "bordure" (couleur de bordure).
La variable "bordure" vaut "navy" en mode clair et "red" en mode sombre.
Sont bordurés les titres et bien sûr le conteneur MAIN.
La syntaxe border : 1px solid var(--bordure) est autorisée !
Le rendu de cette version plus complexe :
L’imbrication est l’un des principes fondamentaux du HTML mais que n’offrait pas encore CSS (mais que proposait les préprocesseurs CSS).
Cependant le W3C y travaillait et une norme a été établie : CSS nesting module.
Outre la suppression des doublons, l'imbrication des sélecteurs améliore la lisibilité du code et facilite donc la maintenance.
table.tableau1 {width : 60% ;border-spacing :5px;
border-collapse : collapse ; ...}
table.tableau1 caption {height : 30px;
text-transform : uppercase;}
table.tableau1 th, table.tableau1 td {border : 2px solid orange;}
table.tableau2 {width : 80% ; border-collapse : separate; ... }
table.tableau2 caption {height : 30px ; text-transform : capitalize; }
table.tableau2 th, table.tableau2 td {border : 1px solid black;}
Il y a énormément de redondances dans les sélecteurs : 4 fois "table.tableau1" et 4 fois "table.tableau2". Cette redondance serait encore plus importante si nous avions prévu une mise en forme pour les sous-parties d'un tableau : sélecteurs thead, tbody,tfoot.
Dans la feuille de style je factorise "table.tableau1" et "table.tableau2".
/* nouvelle syntaxe avec CSS nesting module */
* {font-size : 14px ; font-family : arial; }
table.tableau1 {width : 60% ; border-spacing :5px;
border-collapse : collapse ;
background : skyblue; margin : 10px auto;
& caption {height : 30px; text-transform : uppercase;}
& th, td {border : 2px solid navy;}
}
table.tableau2 {width : 80% ; border-collapse : separate;
background : pink; margin : 10px auto;
& caption {height : 30px ; text-transform : capitalize; }
& th, td {border : 1px solid black;}
}
Observez bien la feuille de style !
Il n'y a plus que deux règles de style seulement au lieu de 6.
Attention ne suffit pas d'utiliser le symbole &, il faut aussi imbriquer les accolades.
Comme vous pouvez le constater le module CSS nesting est désormais implémenté par les navigateurs Chrome, Firefox et Edge.
Le recours à l'imbrication est particulièrement pratique avec les pseudo-classes.
On économise avec la nouvelle syntaxe de nombreuses règles de style. La lisibilité de la feuille de style
est grandement améliorée !
Survolez puis activez (clic) chaque rond !
Sur survol le rond devient une ellipse violette ; sur clic le rond double de taille et se remplit de noir.
Les DIV stylisés par la classe "circle".
.circle {width : 100px ; height : 100px;
border-radius : 50px;
margin : 10px ; background: pink;
&:hover {background: purple; transform : scaleX(2); }
&:active {background: black; transform : scale(2,2); }
}
Une seule règle de style au lieu de 3 avec une syntaxe classique qui auraient été :
.circle{} ; .circle:hover{} ; .circle:active{}.
Pour en savoir davantage sur la propriété transform
Cette propriété peut prendre entre autres les valeurs "none" et "all".
Cette propriété est intéressante pour protéger votre site du plagiat même s'il existe
une solution JS.
Un document HTML dans un Iframe :
Un simple clic dans la première boite et tout son texte est sélectionné.
Impossible de sélectionner le texte de la deuxième boite.
Le premier texte est contenu dans un DIV donc user-select : all.
Le deuxième texte est contenu dans un ASIDE donc user-select : none.