CSS 3 et CSS 4 n’existent pas

Une masterclass par Victor Brito pendant la formation développeur web et web mobile à la Wild Code School (promotion remote février 2023)

Ceci n’est pas un complot facile pour briller en société

Planche humoristique mettant en scène la contestation du théorème de Pythagore énoncée par un professeur par ses élèves

#IlsCroiventNousSachons

Processus de standardisation au W3C

  1. Idée
  2. Editor’s Draft (ED)
  3. Working Draft (WD)
    • First Public Working Draft (FPWD)
    • Un ou plusieurs brouillons successifs possibles
    • Last Call Working Draft (LCWD)
  4. Candidate Recommendation (CR)
    • Plusieurs CR possibles
    • Possibilité de retour au stade WD
  5. Proposed Recommendation (PR)
    • Possibilité de retour au stade CR
  6. Recommendation (REC)

Histoire des CSS

Version majeure = niveau (level)

Version mineure = révision (revision)

Version corrective = document revu avec changements et erreurs listés (revised)

CSS, niveau 1

  • Idée : 10 octobre 1994
  • WD : 17 novembre 1995
  • WD : 23 novembre 1995
  • WD : 9 décembre 1995
  • WD : 22 décembre 1995
  • WD : 20 février 1996
  • WD : 18 avril 1996
  • WD : 5 mai 1996
  • WD : 26 juillet 1996
  • WD : 11 septembre 1996
  • PR : 12 novembre 1996
  • REC : 17 décembre 1996 (revue (revised) les 11 janvier 1999 et 11 avril 2008)
  • Spec remplacée (superseded) : 13 septembre 2018

CSS, niveau 1

							
display: block;
display: inline;
display: list-item;
display: none;

CSS, niveau 2

  • WD : 4 novembre 1997
  • WD : 28 janvier 1998
  • PR : 24 mars 1998
  • REC : 12 mai 1998 (revue (revised) le 11 avril 2008)
							
display: run-in;
display: compact;
display: marker;
display: table;
display: inline-table;
display: table-caption;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-row-group;
display: table-column;
display: table-column-group;
display: table-cell;
display: inherit;

CSS, niveau 2, révision 1

  • LCWD : 2 août 2002
  • WD : 28 janvier 2003
  • LCWD : 15 septembre 2003
  • CR : 25 février 2004
  • LCWD : 13 juin 2005
  • WD : 11 avril 2006
  • LCWD : 6 novembre 2006
  • CR : 19 juillet 2007
  • CR : 23 avril 2009
  • CR : 8 septembre 2009
  • LCWD : 7 décembre 2010
  • PR : 12 avril 2011
  • REC : 7 juin 2011 (éditée (edited in place) les 12 avril 2016 et 7 décembre 2021)

CSS, niveau 2, révision 1

							
color: orange;

CSS, niveau 2, révision 2

  • FPWD : 12 avril 2016

Points communs de CSS 1, 2, 2.1 et 2.2

  • Specs monolithiques
  • Toutes les fonctionnalités réunies dans un même document
  • Difficiles à maintenir
  • Rythme de développement lent

Évolution après CSS 2

  • Découpage de CSS en modules
  • Les modules évoluent indépendamment les uns des autres

Numérotation du niveau des modules

  • Modules couvrant des fonctionnalités existantes en CSS 2.1 (ex. : sélecteurs, media queries) : niveau 3
  • Modules couvrant des fonctionnalités complètement nouvelles (ex. : flexbox, grid layout) : niveau 1

Parler de CSS 3, et encore plus de CSS 4, est un abus de langage

Plutôt parler de CSS, tout court

Plutôt réserver les numéros aux niveaux des modules

Les modules évoluent chacun à leur propre rythme : difficile de leur donner un numéro les englobant tous

						
.reset {
	all: initial; /* CSS (tout court), niveau 5 du module Cascading and Inheritance */
}
.element {
	display: grid; /* CSS (tout court), niveau 3 du module Display */
	grid-template-columns: repeat(2, 1fr); /* CSS (tout court), niveau 2 du module Grid Layout */
	gap: 20px; /* CSS (tout court), niveau 3 du module Box Alignment */
}
@media (width >= 768px) { /* CSS (tout court), niveau 4 du module Media Queries */
	body {
		min-height: 100dvh; /* CSS (tout court), niveau 4 du module Values and Units */
	}
}
@scope (.dark-theme) { /* CSS (tout court), niveau 6 du module Cascading and Inheritance */
	a {
		color: plum;
	}
}

Merci

Des questions ?

Crédits