5 nouveautés CSS qui vont tout changer à la mise en forme…

Mathieu Chartier Programmation 7 commentaires

CSS 4 et la progression du langage CSS

Pour fêter le 1000e article du blog, rien de mieux qu'un article complet et détaillé sur l'avenir de CSS. Bonne lecture !

Le langage CSS (Cascading style sheets) permet de gérer la mise en forme des pages web intégrées en HTML, souvent accompagné par son acolyte Javascript pour certaines animations complexes. Facile à prendre en main avec sa syntaxe très abordable et sa liste de propriétés relativement limitée, CSS offre un confort de programmation qui lui offre l'appréciation de bon nombre de débutants ou de profanes. Mais CSS arrive à l'âge de la maturité, et tout pourrait changer...

Nous allons découvrir dans la suite de cet article 5 nouveautés du langage CSS qui le rapproche de plus en plus des langages de programmation classiques, avec des possibilités accrues et utiles pour aller plus loin dans les techniques de mise en forme et d'animation. S'il sera toujours possible de faire du CSS "à l'ancienne", il ne fait aucun doute que le CSS de demain est alléchant et risque de satisfaire aussi bien les développeurs que les néophytes du design web. Avec des nouveautés typiques des préprocesseurs CSS comme Less, Sass ou encore Stylus, le CSS va pouvoir offrir de possibilités au moins équivalentes nativement, donc sans risquer d'aller à l'encontre des standards du langage. Une aubaine ! :-)

Nouveautés d'aujourd'hui ou de demain ?

À l'heure d'écrire ces lignes, la majorité des fonctionnalités CSS présentées ci-après ne fonctionnent pas correctement sur l'ensemble des navigateurs. Contrairement à certains de mes confrères, j'estime aussi que le monde du web n'a pas encore totalement abandonné IE 9 à IE 11, bien que le nombre d'usagers se réduit comme peau de chagrin. Par conséquent, vous pourriez considérer que certaines nouveautés sont déjà utilisables aujourd'hui, mais dans mon esprit, la pleine compatibilité est pour demain, d'où la nuance dans mes propos...

1. Les variables CSS (custom properties)

L'utilisation de variables est la base immuable de tout langage de programmation. CSS s'en dote enfin et va permettre d'offrir un confort de gestion non négligeable, notamment pour les projets contenant des centaines voire milliers de lignes en CSS.

L'intérêt des variables CSS est d'enregistrer une valeur quelconque au sein d'un élément réutilisable partout dans le code (la fameuse variable), sans avoir à répéter sa valeur. Prenons un exemple simple : votre site web possède deux couleurs principales, une pour les fonds et une pour les textes. Ces couleurs devant être utilisées un peu partout dans le code, il sera plus simple de les enregistrer dans des variables puis d'appeler ces variables partout où les couleurs sont à insérer. Ainsi, si vous voulez tester d'autres couleurs, vous n'aurez plus qu'une ligne à changer...

Les variables CSS fonctionnent sur le principe des propriétés personnalisées (custom properties) et doivent être précédées de deux tirets lors de leur déclaration. Comme ce sont en réalité des propriétés personnalisées, il faut les déclarer dans un bloc d'instruction. Pour cela, on utilise le bloc d'instruction de premier niveau, appelé :root { ... }. Enfin, on appelle et utilise les variables avec la méthode var() au sein des propriétés qui en ont besoin. L'exemple suivant résume tout cela...

:root {
  --couleur-fond: #007db7;
  --couleur-texte: #f1f1f1;
}

#entete {
  color: var(--couleur-texte);
  background-color: var(--couleur-fond);
  padding: 1em;
}

#pieddepage {
  color: var(--couleur-texte);
  background-color: var(--couleur-fond);
  padding: 1em 5em;
  border-top: 1px solid #242424;
}

Hormis Internet Explorer (jusqu'au 11) et Opera Mini, les variables CSS sont utilisables sans problème. Il existe quelques polyfills pour améliorer la compatibilité des variables sur IE notamment, alors foncez ! ;-)

2. Les features queries (@supports)

En programmation classique, il faut des variables et des structures conditionnelles pour commencer à s'amuser un peu, et CSS l'a bien compris. C'est pour cette raison que les features queries (règle @supports { ... }) entrent en jeu. Il ne s'agit pas à proprement parler de if/else comme dans la programmation habituelle, mais le résultat en est presque identique malgré tout. En effet, @supports permet de détecter si une propriété ou une fonctionnalité existe et fonctionne dans le navigateur en cours d'utilisation. Ainsi, nous pouvons prévoir des comportements différents selon les cas, voire offrir des variantes d'intégration selon la compatibilité avec les propriétés. Si nous prenons l'exemple du display:flex; (flexbox), on pourrait s'assurer d'une mise en forme différente en cas d'incompatibilité, avec un display:inline-block; à la place ou une autre méthode.

Le fonctionnement est très simple, il faut indiquer la règle, le mot clé not ou non (cela permet de faire un "if "ou un "if not"), puis la condition à tester entre parenthèse, comme dans l'exemple suivant :

@supports (display: flex) {
  #entete {
    display: flex;
  }
}

@supports not (display: flex) {
  #entete {
    display: inline-block;
  }
}

Nous pouvons aussi cumuler des vérifications avec les mots clés and ou or. Ainsi, il est très simple de vérifier l'existence de plusieurs propriétés sur lesquelles nous avons des doutes, comme ceci :

@supports ((display:-webkit-flex) or (display:-moz-flex) or (display:flex)) and (-color:blue) {
  #entete {
    display:flex;
    color:blue;
  }
}

Sachez qu'il est également possible de tester une syntaxe de sélecteur avec selector() par exemple (fonctionne seulement avec Firefox pour le moment), afin de vérifier que le sélecteur peut fonctionner dans le navigateur. On peut aussi vérifier l'existence d'une variable CSS, etc. L'exemple par le code :

@supports selector(:is(a, b)) {
  ul > li,
  ol > li {
    list-style: none;
  }
}

@supports (--margeType: 1em) {
  #contenus {
    margin: var(--margeType);
  }
}

Comme d'habitude, seul notre ami Internet Explorer est incompatible avec @supports en CSS, il faut donc passer par un polyfill pour s'offrir un support total...

3. Les grilles (CSS Grid)

Les positionnements flexibles avec Flexbox (display:flex; et display:inline-flex;) ont révolutionné le monde de la mise en forme/page tant cela était attendue depuis des années par les webdesigners. CSS ne s'arrête pas en si bon chemin et fait déjà fonctionner dans tous les navigateurs actuels (sauf IE...) les CSS Grid, à savoir les grilles CSS.

CSS Grid est un élément qu'il faut utiliser en complément des Flexbox, car son rôle est davantage de placer les éléments principaux que de faire les petits éléments de positionnement (là où Flexbox est idéal). Pour une structure de page web, on peut donc facilement créer la structure avec Grid CSS, et la modifier comme bon nous semble.

Mozilla fournit un exemple en ligne qui résume tout l'intérêt des grilles CSS. Je propose ici un exemple simple pour une structure de base en HTML :

<div class="wrapper">
	<header id="header">Entête</header>
	<main id="contenu">Contenu</main>
	<aside id="colonne">Colonne</aside>
	<footer id="footer">Pied de page</footer>
</div>

Et voici le CSS correspondant :

.wrapper {
	display:grid;
	grid-template-columns:auto 5% 20%;
	grid-template-rows:auto;
	grid-template-areas: 
		"header header header"
		"main . sidebar"
		"footer footer footer";
	}
#header {
	grid-area:header;
	background-color:#DBA723;
	padding:1em;
}
#contenu { 
	grid-area:main;
	background-color:#FFFFFF;
	padding:1em;
}
#colonne { 
	grid-area:sidebar;
	background-color:#E0E7EA;
	padding:1em;
}
#footer {
	grid-area:footer;
	background-color:#5D5048;
	padding:1em;
}

Et le rendu final de la structure :

Rendu CSS Grid

4. Quelques nouvelles propriétés visuelles

CSS se dote d'une multitude de nouvelles propriétés qui vont offrir des effets visuels en tout genre. Il est impossible de toutes les notifier ici mais voici quelques propriétés sympa à retenir ou à étudier de près :

  • shape-outside : permet de positionner du contenu proprement autour d'une forme géométrique choisie. Ainsi, lorsqu'une image est arrondie, nous pourrons avoir un texte en arrondi qui épouse la forme du cercle, ce qui n'était pas possible jusqu'à présent. La propriété shape-outside prend plusieurs valeurs de forme (circle, ellipse, inset pour les rectangles, polygon et url).
  • overflow-anchor : permet de faire de l'ancrage du défilement (scroll anchoring), à savoir d'éviter qu'une page en cours de chargement vous décale le défilement au fur et à mesure que les images se chargent (par exemple...). La propriété prend la valeur "auto" par défaut (donc décale brutalement si nécessaire) mais peut prendre "none" (position figée là où l'utilisateur le souhaite). C'est extrêmement intéressant si vous faites du lazy loading par exemple, bien que ce soit la propriété la moins compatible de la liste présentée ici...
  • position "sticky" : permet de créer un effet "sticky" (souvent utilisé pour les menus qui suivent le défilement de la page) en CSS, avec la nouvelle valeur "sticky" à la propriété position. Cela fonctionne partout sauf sur IE (cela surprend encore quelqu'un ? ^^) et permet d'effectuer des sticky menus en toute simplicité, et sans Javascript ! :-)
  • background-blend-mode : permet de superposer une couleur et un arrière-plan par exemple, afin que les deux éléments se "mélangent" naturellement.
  • filtres CSS : permet d'offrir des effets visuels en toute simplicité, à l'instar des filtres Instagram. Les CSS Filters s'utilisent avec les propriétés historiques filter. Plusieurs effets ont été ajoutés comme saturate() pour la saturation des couleurs, grayscale() pour des effets de noir et blanc, blur() pour des effets de flou ou encore hue-rotate() pour changer la balance des couleurs. Seul IE est incompatible...
  • object-fit : permet qu'une image remplisse le contenu d'un bloc par exemple, même si elle ne provient pas d'un background-image (dans ce cas on utilise plutôt background-size:cover;). Ainsi, nous pourrons aisément appliquer un effet de remplissage responsive à nos images insérées via l'HTML, avec des valeurs comme object-fit:cover (ou contain, fill, scale-down et none). IE ne connait pas la propriété et Edge ne fonctionne qu'avec des images (alors que tous les types de blocs sont supposés être compatibles).

Voilà pour ce tour d'horizon extrêmement rapide... ;-)

5. Le sélecteur parent en CSS

Quel intégrateur CSS n'a pas rêvé de pouvoir remonter jusqu'au parent dans un sélecteur CSS ? Jusqu'à présent, tout le principe du langage repose sur les sélecteurs descendants, allant donc des parents vers les enfants. Mais parfois, il serait absolument nécessaire de pouvoir faire le cheminement inverse, et CSS semble avoir enfin répondu à ce besoin...

En réalité, il ne s'agit pas vraiment d'un sélecteur parent, mais d'une méthode qui permet d'indiquer un parent contenant un enfant en particulier. Dans les précédentes spécifications CSS (notamment celle de 2011), le signe "$" puis "!" était utilisé pour indiquer le "sujet" du sélecteur, c'est-à-dire l'élément qui allait appliquer le style déterminé. Depuis la spécification de 2013, CSS utilise la pseudo-class :has() pour indiquer un parent contenant un enfant en particulier, comme ceci :

/* Style appliqué à ul, et non aux li... */
ul:has(li) {
  list-style:none;
}

Pour le moment, :has() est incompatible quasiment partout, mais je vous conseille de suivre de près cette fonctionnalité avancée...

Je vais vous laisser sur votre faim mais sachez qu'il existe de nombreux nouveaux sélecteurs intéressants, comme :any-link, :focus-within, :scope, :target ou encore :current (liste non exhaustive). Lisez la documentation du W3C si vous voulez en savoir plus...

7 commentaires

  • Emmanuel Béziat dit :

    Bonjour,

    Toutes ces features ne sont pas "le futur" et sont déjà utilisées en production, certaines depuis déjà quelques années (notamment les variables).

    Leur implémentation est aujourd'hui assez bonne dans les navigateurs depuis environs 4-5 ans.

    Aussi, "CSS 4" n'existera pas, le langage n'est plus versionné de la sorte, mais découpé en modules qui évolueront indépendamment les uns des autres.

    • Merci pour ton commentaire !
      Pour le coup, j'ai mis dans ma "note" du début d'article que certaines fonctionnalités sont déjà utilisées en production mais que je fais partie des gens qui ne le font pas car ce n'est pas encore entièrement compatible sans polyfill (souvent pour IE). J'ai donc bien nuancé dans la note du début, comme tu le fais ici.
      Pour ce qui est du "CSS 4", le versioning est en effet abandonné depuis longtemps côté CSS, mais paradoxalement, la documentation se découpe encore en CSS 3, CSS 4, etc. C'est pour cette unique raison que je maintiens l'appellation CSS 4 pour "situer" les évolutions dans le temps. Tu noteras d'ailleurs que je ne l'ai pas précise dans le titre car je ne souhaitais justement pas porter à confusion.
      En tant que formateur, je sais parfaitement ce que tu évoques en commentaire, mais il était bon de préciser, et je te remercie pour ça ! :-)

      • Guillaume dit :

        Le découpage en niveau existe toujours, mais il est assigné à chaque élément.
        Flexbox et Grid sont des éléments de niveau 1 car ils sont nouveaux.
        Il y a un article en anglais qui explique ça très bien : https://www.xanthir.com/b4Ko0

      • Pour le coup cet article est top et explique bien tout en détail. Il existe des confusions pouvant laisser croire qu'un "CSS 4" existerait, mais en soi ce ne sont que des confusions dues au nom des modules CSS attribués par CSSWG. Bien vu, et merci pour l'info !

  • Qexat dit :

    Salut !

    Moi, j'attends le support général de backdrop-filter, pour notamment faire un flou d'arrière-plan, un peu à la iOS ?

    • Gloire NKOUNKOU dit :

      Quand un truc n'est pas encore à porter de main, je trouve qu'il faut improviser.
      perso: je mets le flou en utilisant le blend-mode.

  • santellitcho dit :

    Perso j'attend l’implémentation parent qui est deja utilisé dans Sass du style :
    ul {
    display:block;
    li {
    display:inline-block;
    }
    }
    Quelqu'un sait si c'est quelque chose de prévu ?

  • Déposer un commentaire

    L'adresse de messagerie ne sera pas publiée.* Champs obligatoires