Au commencement, il y avait CSS Level 1. De cette première mouture, il s'agit simplement de permettre de définir l'aspect graphique d'une page xHTML, comme par exemple la couleur du fond de la page ou du rendu typographique du texte mais aussi de l'espacement, des bordures... Il ressort tout de même de ce premier niveau la notion de cascade.
Le deuxième niveau intégre le premier et ajoute de nouvelles fonctionnalités (dont un système de positionnement plus avancé, le box model). Cependant, faute de compatibilité des navigateurs, CSS2 est un échec. S'ensuit alors une révision : CSS2.1.
La structure (avec le langage HTML) et la présentation (avec le langage CSS) sont normalement construites séparément. On peut trouver le CSS directement sur la page HTML, mais également dans un fichier externe (avec l'extension .css).
<!DOCTYPE html>
<head>
<style>
/* votre CSS ici */
</style>
/* votre CSS ici via une ressource externe, plus long à charger selon les cas*/
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
...
</body>
</html>
Le langage 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.
Il existe un débat entre développeurs autour de la nature du langage CSS. Alors que certaines personnes pensent que CSS est un langage de programmation, d'autres préfèrent dire qu'il s'agit plutôt d'un langage de feuille de style ou encore d'un langage déclaratif.
Les modules CSS
Contrairement à CSS1 et CSS2 qui se présentaient en un seul document, le troisième niveau de CSS se compose en une série de modules. Certains sont terminés, d'autres en cours ou en train d'être révisés.
L'avantage de ces modules est de permettre de répartir des fonctionnalités. Plus besoin d'attendre la sortie d'une version entière pour pouvoir utiliser ces fonctionnalités. De plus, le niveau dans lequel se trouve un module ne correspond en rien avec une quelconque version de CSS.
CSS3 (au même titre que CSS4) n'est pas un langage à proprement parler. Le CSS actuel que nous utilisons repose sur le deuxième niveau.
Pour donner quelques exemples, la propriété wrap-flow fait partie de CSS Exclusions Level 1. La propriété background-blend-mode, quant à elle, est intégrée dans le module Compositing and Blending Level 1, la propriété offset dans le module motion path... ou encore la désormais très célèbre valeur grid qui est apparue dans le module CSS Grid Layout Level 1.
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é.
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 d'autres langages, 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, un commentaire 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 (c'est-à-dire directement dans le document web) entre les balises <style> et </style>.
Un commentaire CSS s'écrit sur une ou plusieurs lignes.
/*ceci est un commentaire CSS*/
.class{
propriete: valeur
}
/*ceci est un second commentaire CSS
on peut écrire sur plusieurs lignes*/
.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 classe, 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é.
body{
background-color: black
}
/* body = sélecteur */
/* background-color = 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 :
Sachez qu'il est possible de regrouper vos sélecteurs pour leur appliquer les mêmes propriétes/valeurs :
h1,
h2,
h3{
propriete: valeur
}
Voici une déclaration au travers d'un graphique :
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, ainsi que les arrières-plan, les polices...
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 :
-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 vendeurs : -moz-,-webkit-,-ms-,-o-.
Ce plugin analyse la syntaxe de vos fichiers CSS et ajoute, si besoin est, des préfixes vendeurs aux règles CSS, ceci en s'appuyant sur la base de données de Can I Use.
Vous pouvez d'autre part vous tourner vers un projet ambitieux et intéressant, en l'occurrence cssnext (FR).
Les pré-processeurs CSS
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 :
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 relever ces observations :
Block : représente un bloc indépendant qui va englober en son sein une partie ("element") et sa variante ("modifier")
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.
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.
Ce constat posé, il est impératif d'observer trois règles qui constituent le concept :
- 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)
- Les sélecteurs CSS ne doivent pas correspondre à des noms d'éléments HTML (au risque d'affecter cesdits éléments).
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.
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 HTML, 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 :
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 :
