Le tournant des CSS vers le layout

Daniel Glazman a présenté les dernières nouveautés en matière de CSS, et le métier d’intégrateur va encore énormément évoluer dans les 2 années à venir. La plupart de ces nouveautés utilise une syntaxe incompréhensible pour les navigateurs actuels, il faudra donc soit attendre, soit prévoir un fallback, soit accepter un rendu totalement différent dans les navigateurs plus anciens.

Variables

Plutôt que d’adopter la syntaxe d’un préprocesseur CSS, le W3C a privilégié une approche adhérant aux principes fondamentaux des feuilles de styles : l’héritage et la cascade.

Les valeurs étant utilisables dans d’autres feuilles de style, on pourra définir les styles de base dans une CSS. Il sera plus simple de décliner la charte pour une section ou une page sans devoir surcharger la moitié des déclaration initiales. Et si les iframes pouvaient en profiter, ça permettrait d’adapter les widgets et badges intégrés depuis un autre site.

Flux de contenu et exclusions (habillage)

Ce module permet de définir la manière dont le contenu « coule » à l’intérieur du document, que ce soit dans des zones précises (colonnes, chapô, citations en exergue…) ou autour de formes (images, citations en exergue…).

Comme Daniel le rappelle, ce type de mise en page se faisait couramment sur des machines infiniment moins puissantes il y a 20 ans, dommage que le Web ait mis aussi longtemps pour en arriver là. Mieux vaut tard que jamais, surtout que c’est actuellement impossible à réaliser sans saccager la sémantique et la simplicité du code.

Flexbox

Là encore, il aura fallu des années pour arriver à un résultat concluant. Il est désormais possible de créer des blocs de même hauteur et de centrer verticalement du texte sans dégainer de tableaux, houra ! Cette spécification est la bienvenue pour les applications web et rendra obsolètes une bonne partie des frameworks CSS actuels. Plus besoin de ces béquilles, tant mieux !

C’est encore peu disponible dans les navigateurs, et 2 syntaxes cohabitent, mais il est utile de se familiariser avec, par exemple avec cette présentation du module flexbox sur OpenWeb.

Filtres, déformations et fusion

CSS inclut de plus en plus de fonctionnalités actuellement proposées par Photoshop. Je salue l’initiative car cela rend le Web plus intéressant, tout en mettant en danger le marché de la Creative Suite. A leur place je rachèterai les startups qui fournissent des outils d’export (CSS Hat, Slicy) et fusionnerai les différents outils de la série Edge pour créer un outil à l’ergonomie proche de Photoshop/Illustrator mais capable de produire du code HTML correct.

Disponibilité et rétrocompatibilité

Il sera possible j’imagine de passer une CSS utilisant les variables CSS à la moulinette préprocesseur, mais pour les propriétés touchant à la mise en page on s’éloigne tellement du fonctionnement actuel que je vois difficilement comment ça peut cohabiter avec les techniques et navigateurs d’aujourd’hui.

Intégrateurs et développeurs front-end, suivez ces évolutions de près car elles vont chambouler votre métier, et vous mettre en concurrence avec des professionnels venus du print quand les outils seront adaptés au Web. D’ailleurs c’est la même chose avec la 3D dans le navigateur, qui ouvrira les portes du Web à toute une catégorie de graphistes et développeurs aujourd’hui cantonnés aux applications bureau.

Publié le Catégories BlogMots-clés ,