Blog
Aller au contenu

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 sélecteurs CSS
  11. Les combinateurs CSS
  12. Pseudo-classes et pseudo-éléments CSS
    1. Pseudo-classes CSS
    2. Pseudo-éléments CSS
  13. Les post-processeurs CSS : c'est quoi ?
  14. Les pré-processeurs CSS : c'est quoi ?
  15. BEM, c'est quoi ?
  16. DOM-CSS = CSSOM
  17. Les transformations CSS
  18. Animations et transitions CSS
  19. CSS Houdini, le futur de CSS ?
  20. Ressources CSS
  21. Quiz sur CSS
Télécharger ce cours en pdf

CSS c'est quoi ?

Le langage CSS est utilisé avant tout dans le but de définir l'aspect graphique 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, le CSS (ou feuille de style en cascade en français), 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 (exemple : style.css) contrairement à une page internet de base qui se termine avec l'extension .html. Il existe d'autres extensions telles que : .php, .asp, .xml...

👉 A quoi sert CSS ?

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, comme nous l'avons vu dans l'introduction, 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'un document web.

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 (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 (voir plus bas).

👉 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 (les différentes versions du navigateur Internet Explorer jusqu'à la version 9) 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 (c'est-à-dire dans le document web) 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*/

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

  • Le sélecteur (voir plus bas) : il peut s'agir d'un élément HTML, d'une classe, d'un identifiant... qui va être mis en forme.
  • La propriété : elle suit le sélecteur.
  • 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

}

A ce sujet, voir la pseudo-classe :matches().


✂️ 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(image) 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.

Dans le code ci-dessous, 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.



html{

font-size:12px

}


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. Ici la pseudo-classe :hover hérite des propriétés de l'élément a.



a {

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

}

a:hover{

text-decoration: none;
color: red;

}    


👉 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 modèles de boîte 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

A noter que vous pouvez faire cohabiter dans un projet tous ces modèles de boîte sans qu'il n'apparaisse de conflits.

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

  • @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 (FR) pour certaines propriétés CSS (avec par exemple la propriété content et les pseudo-éléments ::before et ::after).
  • @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. Pourtant son utilisation est déconseillée pour des questions de performances.
  • @namespace (EN) : cette règle va permettre d'appliquer du 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é).

Les règles @ imbriquées :

@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 (EN).



/* 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 (FR) : 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 (EN) : 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). Vous ne devriez utiliser que deux voire trois polices au maximum sur votre site.

@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 (EN) : 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 partiel Firefox seulement) :

Exemple @counter-style

Le code de l'exemple :



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

Je vous invite à aller plus loin en lisant cet article sur les règles @ (EN).

👉 Les sélecteurs CSS

Il existe plusieurs types de sélecteurs dits "simples" (apparus dans la spécification CSS 2.1) :

  • sélecteurs de type
  • sélecteurs de classe
  • sélecteurs d'identifiant
  • sélecteurs universels
  • sélecteurs d'attribut

Le sélecteur de type est utilisé seul. Il cible un élément du même type dans un document. Dans le code ci-dessous, on indique que tous les éléments de type h1 dans le document auront la couleur rouge.



h1{

color:red

}




Le sélecteur de classe cible chaque élément d'un document portant le même nom via l'attribut class.



.maclasse{

color: red

}

/*peut s'écrire aussi avec l'attribut class */

[class="maclasse"]{

color: red

}



Le sélecteur d'identifiant permet de cibler un élément via le nom de l'attribut id. Celui-ci doit être le même que celui de l'élément visé dans le document.



/*ici on vise l'élément p dans le document qui possède un identifiant qui se nomme monID*/

p#monID {

color:red

}

/* on peut également utiliser l'attribut id*/


p[id=monID] { 

color:red

}



Représenté par un astérisque (*), le sélecteur universel correspond à un élément de n'importe quel type. Dans le troisième niveau, il a été étendu pour être combiné avec des espaces de noms.



* {

  color: red
  
}



Le sélecteur d'attribut permet de cibler un élément ayant un attribut avec ou sans valeur. Il existe plusieurs types de sélecteurs d'attribut :

[attr] : cible un élément possédant un attribut.



/* Les éléments a avec l'attribut title */

a[title] {

  color: red
  
}


[attr=valeur] : cible un élément possédant un attribut avec une valeur.



/*tous les éléments p en langue française auront la couleur rouge*/

p[lang=fr] {

  color: red
  
}	

[attr~=valeur] : cible un élément possédant un attribut dont la valeur appartient à une liste de valeurs séparées par des espaces.



/*on vise tous les liens qui contiennent entre autres le mot exemple */

a[title~="exemple"] {

color: red

}


Sera visé l'élément a avec l'attribut title ayant pour mots-clé "mon exemple", "ceci est un exemple" ...

[attr|=valeur] : cible un élément possédant un attribut spécifié en commençant par la valeur nommée dans l'attribut. Celle-ci peut être seule ou suivie d'un tiret.



/*on vise la classe commencant par le mot exemple, vise également exemple-motclé ou exemple-autremotclé... */

[class|="exemple"] {

   color: red
   
}	
	

[attr^=valeur] : cible un élément possédant un attribut dont la première valeur commence par celle-ci. Elle peut aussi être suivie d'un tiret.



[class^="maclasse"] {
	
color: red
	
	
}		
	

[attr$=valeur] : cible un élément possédant un attribut dont la dernière valeur se termine par celle-ci. Elle peut être précédée d'un tiret.



[class$="maclasse"] {
	
color: red
	
	
}	
	

[attr*=valeur] : cible un élément possédant un attribut dont la valeur contient au moins une occurrence d'une chaîne de caractères correspondant à celle-ci.



/* vise tous les liens dont l'url contient "exemple" */

a[href*="exemple"] {


color:red


}

Ajouté dans le quatrième niveau, le sélecteur d'attribut case-sensitivity (voir compatibilité), insensible à la casse, qui peut s'écrire avec un i minuscule ou majuscule, provoque l'adaptation de la valeur de l'attribut d'une manière ASCII.



a[href="#exemple" i] {
color: #7A5FFF;
}    
    

Lien utilisant le sélecteur d'attribut case-sensitivity

Lien utilisant le sélecteur d'attribut case-sensitivity

Vous pouvez remarquer que les deux liens ont la même couleur (violet), pourtant l'identifiant n'est pas écrit de la même manière. Voir le code ci-dessous :



<a href="#eXeMple">Lien utilisant le sélecteur d'attribut case-sensitivity</a>
<a href="#exeMple">Lien utilisant le sélecteur d'attribut case-sensitivity</a>


👉 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 :

  • descendant : représenté par un espace entre deux sélecteurs. Bientôt remplacé par deux chevrons dans le quatrième niveau de CSS.
  • enfant : sépare deux sélecteurs. Ne sélectionne que les enfants directs du premier sélecteur.
  • voisin direct : permet de sélectionner un élément immédiatement précédé par un autre élément.
  • 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

}


👉 Pseudo-classes et pseudo-éléments CSS

NB : Les pseudo-classes et pseudo-éléments font partie des sélecteurs 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 au 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 vendeurs (FR).
  • 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 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.

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'occurrence 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 :

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

👉 Les transformations CSS

Les transformations CSS permettent, en modifiant l'espace des coordonnées, de changer la position d'un contenu sans altérer le flux du document, que ce soit dans un espace en deux ou en trois dimensions.

En savoir plus

👉 Animations et transitions CSS

Tandis qu'une transition CSS va permettre d’animer le changement de valeur d’une propriété de manière fluide, l'animation CSS, quant à elle, permet l'enchaînement de plusieurs transitions sur une propriété.

En savoir plus

👉 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 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 :

  • Box Tree API
  • Layout API
  • Painting API
  • Parser API
  • Typed Object Model
  • Font Metrics API
  • Properties and Values API

Vous trouverez ici quelques exemples.

Lire un article complet (EN) sur Smashing Magazine 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 : Quelle règle@ permet de déclarer un jeu de caractères ?


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