Blog

Guillaume Duverger

Développement & graphisme


Accueil» Développement» Apprendre CSS

Sommaire
  1. CSS c'est quoi ?
  2. A quoi sert CSS ?
  3. Commencer avec CSS
  4. Les commentaires CSS
  5. Règle CSS (ensemble de règles)
    1. Déclaration CSS
    2. Les raccourcis CSS
  6. L'héritage en CSS
  7. Modèle et disposition de boîte CSS
  8. Les principales propriétés CSS
  9. Règles @
  10. Les combinateurs CSS
  11. Pseudo-classes et pseudo-éléments CSS
    1. Pseudo-classes CSS
    2. Pseudo-éléments CSS
  12. Les post-processeurs CSS : c'est quoi ?
  13. Les pré-processeurs CSS : c'est quoi ?
  14. BEM, c'est quoi ?
  15. DOM-CSS = CSSOM
  16. CSS Houdini, le futur de CSS ?
  17. Ressources CSS
  18. Quiz sur CSS

CSS c'est quoi ?

Le langage CSS est utilisé avant tout dans le but de définir l'aspect général d'un site internet, comme par exemple la couleur du fond de la page, d'un cadre... ou de la couleur du texte.

Autrement dit, la CSS (ou feuille de style en cascade), est un petit fichier dans lequel on trouve toutes les informations relatives à l'aspect visuel d'un site web. Celui-ci se présente avec l'extension .css (ex : style.css) contrairement à une page internet de base qui se termine avec l'extension .html ou .htm (dans le plus courant des cas). Il existe des extensions telles que : .php, .asp, .xml...

A quoi sert CSS ?

La structure (HTML) et la présentation (CSS) sont normalement construites séparément. On peut trouver la CSS directement sur la page HTML, mais également, comme nous l'avons vu, dans un fichier externe. A noter qu'il est possible d'utiliser du JavaScript en lieu et place du CSS. Mais aussi passer par JavaScript pour styler en CSS (voir CSS Houdini plus bas).

Depuis l'augmentation de l'utilisation des appareils mobiles, il est préférable de mettre le code directement dans votre document HTML (en haut de page entre les balises <head> </head>) plutôt que de faire appel à un fichier externe. Pourquoi ? Pour une question de rapidité du chargement d'une page.

CSS sert donc à décorer : les couleurs, le texte, les images, les formulaires... Mais il est surtout utile à la disposition d'éléments reposant sur un modèle de boîte (voir plus bas).

Les feuilles de style simplifient le code HTML, allégeant ainsi la structure et par conséquent améliorent la vitesse de chargement de la page. Voir à ce sujet le projet AMP de Google.

Commencer avec CSS

Votre première action sera de trouver un logiciel de traitement de texte tels que Notepad++ ("parfait" pour les débutants si vous êtes sur Windows) ou TextWrangler pour les utilisateurs de Mac, Brackets, Sublime Text ou encore Atom (pas le super-héros, mais l'éditeur de texte libre développé par GitHub).

Le mieux étant de vous forger votre propre opinion en essayant plusieurs logiciels et de travailler avec celui qui vous paraît le plus adapté.

NB : Pour plus d'efficacité (ou pas), vous pouvez vous procurer des outils tels que les post-processeurs ou les pré-processeurs.

Les commentaires CSS

Comme pour tout langage de programmation (quoique CSS n'en est pas vraiment un, il s'agit plutôt d'un langage de feuille de style ou encore d'un langage déclaratif), il est possible d'ajouter des commentaires dans le code CSS.

Un commentaire ne s'affichera pas sur la page. Il sert avant tout à donner des indications soit au développeur du code afin qu'il puisse se repérer, soit à ses collègues qui travaillent sur le même projet ou encore pour empêcher les navigateurs d'interpréter une partie du code. Dans tous les cas, celui-ci doit être pertinent.

Les commentaires peuvent s'insérer à n'importe quel endroit de la feuille de style ou dans le cas d'un code en ligne entre les balises <style> et </style>.

Un commentaire CSS s'écrit sur une ou plusieurs lignes comme dans l'exemple ci-dessous :



/*ceci est un commentaire CSS*/

.votre_class{

propriete: valeur

}

/*ceci est un second commentaire CSS 
on peut écrire sur plusieurs lignes*/

.votre_class{

propriete: valeur

}


Règle CSS

On désigne par règle (ou ensemble de règles) la structure CSS incluant :

  1. Le sélecteur : il peut s'agir d'un élément HTML, d'une class, d'un identifiant... qui va être mis en forme.
  2. La propriété : elle suit le sélecteur.
  3. La valeur : elle succède la propriété.

sélecteur 👉 propriété 👉 valeur = ✔️



body{

background:black

}

/* body = sélecteur */

/* background = propriété */

/* black = valeur */



Déclaration CSS

La propriété suivie de sa valeur entre des accolades s'appelle une déclaration. On peut ajouter au bloc de déclaration plusieurs paires propriétés/valeurs :



body{

background-color: black;
font-size: 1rem;
color: white

}

Sachez qu'il est possible de regrouper vos sélecteurs pour leur appliquer les mêmes propriétes/valeurs :


h1,h2,h3{ 

propriete: valeur

}


Les raccourcis CSS

Les raccourcis permettent avant tout de gagner en place mais surtout en lisibilité. Elles peuvent concerner les couleurs, les dimensions, les marges et les espacements, les arrières-plan, les polices...


.exemple1{

border: 1px solid #000

}

/*correspond à */

.exemple1{

border-width: 1px;
border-style: solid;
border-color: #000000;

}


.exemple2{

background: #fff url() no-repeat fixed

}

/*correspond à */
.exemple2{

background-color: #ffffff;
background-image: url(image);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;

}


L'héritage en CSS

L'héritage fait partie intégrante du langage CSS. D'où la notion de cascade (Cascading Style Sheets). On parle aussi du modèle parent-enfant.

Ainsi, l'élément <html> est le parent de l'élément <body> ainsi que tous les enfants dans le reste du document. A noter que l'héritage ne fonctionne pas sur toutes les propriétés, notamment les propriétés de boîte.

L'héritage sert avant tout à éviter les redondances.


html{

font-size:12px

}


Dans le code ci-dessus, on indique que tous les éléments de type font du document auront une taille de police de 12 pixels, à moins de changer la taille pour un élément en particulier. Dans ce cas, la priorité et l'ordre ont leur importance.

En effet, lorsqu'on applique à un élément plusieurs fois une même propriété avec une valeur différente, le style prioritaire va être celui qui sera le plus proche de l'élément. Nous allons utiliser la propriété color comme exemple :



body{

color:red

}

p{

color:blue

}

article p{

color:green

}


Nous avons donc défini trois valeurs à la propriété color. La couleur prioritaire de l'élément <p> sera la dernière, à savoir green.

Voyons un autre exemple d'héritage avec un lien hypertexte :



a {

font-size: 1rem;
text-decoration: underline;
color: blue;

}

a:hover{

text-decoration: none;
color: red;

}    


Ici la pseudo-classe :hover hérite des propriétés de la balise <a>.

Modèle et disposition de boîte CSS

Le langage CSS repose sur un modèle de boîte (box model). En effet, un document HTML étant un ensemble d'éléments composé pour chacun d'une forme rectangulaire, CSS va donc permettre de définir la position ainsi que la taille de ces formes grâce à des propriétés définies.

Ainsi, pourra t-on définir la hauteur et la largeur, les marges, l'espacement, la bordure, les dépassements, le type, la disposition, la position...

Un exemple de base d'une boîte :

Un exemple de base d'une boîte

Ceci vous montre le fonctionnement du modèle de boîte CSS. Ici on gère le type, la largeur, la hauteur, le dépassement, l'espacement, la marge, la bordure et l'arrière-plan.



div{

width: 50%;
max-height: 150px;
overflow-y: auto;
border: .5rem solid blue;
padding: 1rem;
margin: 2rem auto;
background: #7A5FFF;
color: white
 
 }
 

CSS va donc servir à la disposition (box layout) d'un élément dans le flux d'un document.

La version stable CSS 2.1 a définit quatre modèles de disposition, à savoir :

  • - Block layout pour la disposition des éléments dans un document.
  • - Inline layout pour la mise en page du texte.
  • - Table layout pour la disposition des données 2D dans un format tabulaire.
  • - Positioned layout pour une disposition ne tenant pas compte des éléments dans le flux du document.

Depuis, d'autres dispositions ont vu le jour comme flex layout, Grid layout, Multi-column Layout ou encore CSS Regions.

Exemple Flexible Box Layout mise en page avec flexbox mise en page avec CSS grid mise en page avec CSS grid mise en page avec CSS grid mise en page avec CSS multi-column

Les principales propriétés CSS

Nous allons voir ici les principales propriétés CSS. Pourquoi pas toutes ? Cela serait inutile et fastidieux. En effet, il existe près de trois cent propriétés, et beaucoup ne sont jamais ou rarement utilisées.

On ne va pas se contenter de faire une liste de ces propriétés (sans intérêt) mais les présenter au travers d'exemples avec le code que vous pourrez reprendre et mettre en pratique.

Dans la mesure du possible, on évitera les termes trop abstraits. En un mot, nous allons faire dans la simplicité. Je vous déconseille d'apprendre par coeur toutes les propriétés, mais de les appréhender au fur et à mesure après avoir bien compris l'intérêt de chacune.

Voir les propriétés

Règles @

Une règle @ est une expression CSS. Chaque règle @ possède sa propre syntaxe.

  1. @charset : cette règle permet de définir le jeu de caractères utilisé dans une feuille de style. Surtout utile dans le cas des caractères qui ne sont pas codés en ASCII pour certaines propriétés CSS (avec par exemple la propriété content et les pseudo-éléments ::before et ::after).
  2. @import : cette règle permet d'importer une feuille de style externe. Très utile si l'on veut inclure des ressources pour un média en particulier.
  3. @namespace : cette règle va permettre d'appliquer CSS à des éléments xHTML. Ceux-ci vont devenir en quelque sorte des sélecteurs CSS. Voici un exemple :


@namespace svg "http://www.w3.org/2000/svg";	

svg|a { fill: blue }  /* le lien du svg sera de couleur bleue */

svg|path { fill: red} /* les chemins du svg auront la couleur rouge */


Voici l'ordre dans lequel ces régles doivent être déclarées :



@charset "utf-8"; /*toujours en première position*/

@import "feuille_de_style.css";/*toujours après la règle ci-dessus*/


@namespace svg "http://www.w3.org/2000/svg";/*doit toujours se positionner après les deux règles ci-dessus*/


Il existe un sous-ensemble de règles (on parle alors de règles @ imbriquées). Contrairement aux règles @ citées ci-dessus qu'il faut insérer au début de la feuille de style, il est possible de les inclure à n'importe quel endroit (d'où le terme imbriqué).

@media : cette règle de groupe conditionnelle permet d'inclure des blocs d'instruction selon le type de média (écrans, impression papier ou encore synthétiseurs vocaux). Certains types ont été abandonnés (tv, projection, braille...), d'autres vont voir le jour dans le quatrième niveau du module des media queries avec son lot de caractéristiques.



/* on vise la version papier*/

@media print {
  body { 
  
  font-size: 15pt
  
  }
}

/* on applique une requête pour les écrans en couleurs */
@media screen {

  body { 
  
  font-size: 1rem 
  
  }
}

/* on vise les écrans en couleurs ainsi que la version papier*/
@media screen, print {
  body { 
  
  line-height: 1.2
  
  }
}

/* ici on vise les médias dont la largeur est au minimum de 1004px */
@media (min-width:62.75rem){

body {

   font-size:1.25rem
   
 }
}

/* ici on vise les écrans en couleurs et dont la largeur est au minimum de 1004px */
@media screen and (min-width:62.75rem){

body {

  font-size:1.5rem
  
 }
}

@supports : cette règle de groupe conditionnelle permet de vérifier si un navigateur prend en charge une propriété CSS.



/*les navigateurs ne supportant pas cette propriété vont ignorer cette règle*/

@supports (display:grid) {

 div {display: grid}
 
}

/*on peut déclarer plusieurs valeurs*/

@supports (display: flex) and (filter:drop-shadow(0 0 5px #000)) {

...

}

/*on peut tester le support d’une propriété préfixée*/

@supports (background-clip:text) or (-webkit-background-clip:text) {

...

}

/*si les navigateurs ne supportent pas cette propriété alors ceux-ci vont appliquer l'autre règle*/

@supports not (display: flex) {

div {float: left}
  
}

@document : cette règle, qui fera partie du quatrième niveau, permet de spécifier des règles qui s'appliquent uniquement à certaines pages d'un document.



/* vise une page spécifique */

@document url(http://votre_site.com) {
   ...   
}

/* pour les pages commencant par cette url */
@document url-prefix(http://votre_site.com/dossier/) {
   ...   
}

/* toutes les pages appartenant au nom de domaine */
@document domain(votre_site.com) {
   ...
}

/*toute page commencant par https*/
@document regexp("https:.*") {
    
}

/* il est possible d'associer plusieurs règles */

@document url-prefix(..), domain(..) {

...

}

@page : cette règle permet de créer la mise en page d'un document qui doit être imprimé et/ou paginé.

@font-face : cette règle permet de charger une police personnalisée dans un document HTML. Attention toutefois à ne pas en abuser (pour des raisons de performance mais aussi visuelles).

@keyframes : cette règle permet de définir les différentes étapes, plus ou moins avec précision, qui constituent une animation CSS.

@viewport : cette règle (au stade de brouillon de travail) permet de définir des règles selon la zone d'affichage.

@counter-style : cette règle permet de définir des styles de compteur spécifiques qui ne font pas partie des styles prédéfinis.

Ci-dessous un exemple (support actuel Firefox seulement) :

Exemple @counter-style


@counter-style chiffre-romain {

system: additive;
range: 1 5;
additive-symbols: 5 V, 4 IV, 1 I;

}

/*on met le nom donné à la règle après la propriété*/
.exemple_count{

  list-style: chiffre-romain
  
}


@font-feature-values

Article sur les règles @ (EN)

Les combinateurs CSS (ou sélecteurs relationnels)

Comme son nom l'indique, le combinateur va permettre d'associer plusieurs sélecteurs afin d'appliquer une valeur spécifique sur un élément précis.

On distingue quatre types de combinateurs :

  1. descendant : représenté par un espace entre deux sélecteurs. Bientôt remplacé par deux chevrons dans le quatrième niveau de CSS.
  2. enfant : sépare deux sélecteurs. Ne sélectionne que les enfants directs du premier sélecteur.
  3. voisin direct : permet de sélectionner un élément immédiatement précédé par un autre élément.
  4. voisin général : Même fonction que le voisin direct mais sélectionne tous les éléments frères.

Exemple combinateur descendant :

Exemple combinateur descendant


.exemple p{

propriété: valeur

}


Exemple combinateur enfant :

Exemple combinateur enfant


.exemple > p{

propriété: valeur

}


Exemple combinateur direct :

Exemple combinateur direct


p+p {

propriété: valeur

}


Exemple combinateur voisin général :

Exemple combinateur voisin général


h2~p {

propriété: valeur

}


NB : Il existe de nombreux types de sélecteurs, entre autres, les pseudo-classes et pseudo-éléments que nous allons voir ci-dessous.

Pseudo-classes et pseudo-éléments CSS

Pseudo-classes

Une pseudo-classe est un mot-clé qui, ajouté à un sélecteur, va définir l'état d'un élément.

Voir les pseudo-classes
Pseudo-éléments

Contrairement à la pseudo-classe qui cible un élément existant réellement, le pseudo-élément permet, quant à lui, de cibler des éléments indépendants du DOM.

Voir les pseudo-éléments

Les post-processeurs CSS : c'est quoi ?

Le principe des post-processeurs est de pouvoir écrire du code CSS sans préfixes, maintenable et compatible tous navigateurs. (Sachant que la majorité des navigateurs actuels n'ont plus besoin de préfixes).

Ainsi, est-il possible de réaliser ces différentes tâches :

  • -Ajout automatique des préfixes CSS3 (ex : -webkit-animation)
  • -Minification CSS et JavaScript
  • -Concaténation (regroupement) de plusieurs fichiers CSS et JS
  • -Réorganisation des règles CSS et corrections éventuelles (CSSlint)
  • -Ajout d'alternatives à certaines propriétés non reconnues par certains navigateurs.

Pour faire simple, les post-processeurs CSS vont servir à rendre votre CSS compatible avec tous les navigateurs. Plus besoin, entre autres, d'ajouter des préfixes (exemple : -webkit-). Votre code gagnera en lisiblité et sera plus propre...

L'un des post-processeurs les plus connus est Autoprefixer, dont l'utilité consiste à ajouter les préfixes constructeurs : -moz-,-webkit-,-ms-,-o-.

Ce plugin analyse la syntaxe de vos fichiers CSS et ajoute, si besoin est, des préfixes vendeurs (FR) aux règles CSS, ceci en s'appuyant sur la base de données de Can I Use.

Complément d'infos, mise en place d'Autoprefixer (FR)

Vous pouvez d'autre part vous tourner vers un projet ambitieux et intéressant, en l'occurence cssnext (FR).

Les pré-processeurs CSS : c'est quoi ?

Contrairement aux post-processeurs qui permettent l'optimisation du code CSS une fois votre projet fini, les préprocesseurs vous seront utiles (ou pas) au commencement du projet.

L'intérêt d'utiliser ces outils est d'ajouter des fonctionnalités à votre code CSS. Ainsi vous pouvez créer des variables, des mixins, des boucles... (ce que fait CSS aussi en ce qui concerne les variables)

Les préprocesseurs les plus connus sont : Sass, LESS, et Stylus. Vous ne savez pas lequel choisir ? Voici un début de réponse.

Pour ou contre l'utilisation des pré-processeurs :

Pour l'utilisation des pré-processeurs

Contre l'utilisation des pré-processeurs

BEM c'est quoi ?

Signifiant "Block, Element, Modifier", BEM se veut une méthodologie de nommage des classes CSS visant à créer une arborescence dans une page web.

De ce concept, on peut tirer ces observations :

  1. Block : représente un bloc indépendant qui va englober en son sein une partie ("element") et sa variante ("modifier")
  2. Element : est donc une partie d'un bloc. Si l'on veut un exemple simple et concret, prenons le cas d'un menu. On va créer un bloc qui contiendra le menu. A l'intérieur de ce dernier, nous allons naturellement insérer des items (rubriques) sous forme d'onglets ou de simples liens hypertexte.
  3. Modifier : permet de créer des variantes. Reprenons l'exemple du menu. Si l'on souhaite rendre actif un lien en changeant sa couleur, on va alors créer une variante à l'élement.

La méthodologie se présente sous cette forme :


.block{...}
.block__element{...}
.block--modifier{...}

Exemple BEM menu

Ce constat posé, il est impératif d'observer trois règles qui constituent le concept :

  1. Nom unique pour chaque bloc et son élément. Pas d'utilisation d'attributs id, le but étant de pouvoir réutiliser les classes. (un identifiant est unique)
  2. Les sélecteurs CSS ne doivent pas correspondre à des noms d'éléments HTML (au risque d'affecter cesdits éléments).
  3. Il faut oublier la notion de cascade (EN) (sauf cas exceptionnel).
  • ✔️ Avantages :
  • - Maintenabilité
  • - Lisibilité
  • - Indépendance par rapport aux éléments HTML
  • - Pas de conflits de nommage
  • ❌ Inconvénients :
  • - Augmentation de la taille du fichier
  • - Code peu esthétique et complexe
  • - On peut se retrouver avec des classes très loooongues.

Vous pouvez également vous familiariser avec ABEM en lisant cet article (EN)

Aller plus loin :

Article complet sur OOCSS et BEM (FR)

Documentation officielle (EN)

Sachez qu'il existe d'autres méthodes :

CSSOM

CSSOM pour Modèle d'Objet CSS. C'est en quelque sorte l'équivalent du DOM HTML. Les deux combinés permettent l'affichage d'une page web par un navigateur.

CSSOM va indiquer au navigateur où restituer l'ensemble des règles CSS au bon endroit dans la page web.

Voici un exemple utilisant CSSOM.

Aller plus loin avec CSSOM :

Article de Divya Manian (EN)

Article de Patrick Sexton (EN)

Construire le modèle d'objet (FR)

CSS Houdini, le futur de CSS ?

Parce que de nouvelles fonctionnalités apparaissent de plus en plus vite, les navigateurs prenant trop de temps à les intégrer, le groupe de travail W3C a pensé à un moyen de manipuler le rendu CSS dans les navigateurs.

Tout comme il existe des polyfill pour JavaScript, CSS Houdini se veut être quelque chose d'équivalent, permettant l'utilisation plus rapide de nouvelles fonctions.

Autant il est aisé de manipuler le DOM, autant il est quasi impossible de le faire avec CSSOM. Mais ça c'était avant. Vous pouvez lire le manifeste pour l'implantation de cette nouvelle technologie.

Houdini task force est un ensemble d'API composé pour l'instant :

  1. Box Tree API
  2. Layout API
  3. Painting API
  4. Parser API
  5. Typed Object Model
  6. Font Metrics API
  7. Properties and Values API

Vous trouverez ici quelques exemples.

Lire un article complet (EN) sur Smashing Magazine et/ou regardez ce slide (EN) ou celui-ci (FR) pour mieux comprendre CSS Houdini.

Un petit mot sur Worklets :

Similaires aux web workers, les worklets permettent d'importer des scripts. Le moteur de rendu va ensuite exécuter le code JavaScript à l'endroit souhaité, indépendamment du fil principal, sans intéragir avec le DOM.

CSS Animation Worklet API

Anciennement Compositor Worklet (EN), l'API Animation Worklet est compatible avec les animations web (WAAPI) et va permettre de créer des scripts personnalisés dont l'intérêt principal, comme dit plus haut, est le rendu indépendant du document, signifiant gain en performance.

Le support étant pour l'heure très pauvre, il existe un polyfill.

Voyez plutôt ce qu'il est possible de réaliser avec l'API Animation Worklet :

Ressources CSS

Outil en ligne pour minifier votre code CSS.

Parce que l'accessibilité de votre site est primordiale.

Testez la rapidité de votre site :

-Soit avec Google page speed

-Soit avec GTmetrix

-Soit avec Dareboost

Liste des modules CSS

Les développeurs à suivre (liste pêle-mêle et non exhautive sinon celle-ci serait interminable) :

Quiz sur CSS

Question : Que signifie CSS ?


Question : A quel type de langage CSS fait-il partie ?


Question : Qu'est-ce BEM ?


Question : Quel mot-clé permet de déclarer une animation CSS ?


Question : Qu'est-ce que Houdini task force ?