CSS Grid Layout arrive, préparez-vous !

raphael

La spécification CSS3 Grid Layout, annoncée comme le Saint Graal de la composition de gabarits web du futur risque d’arriver beaucoup plus vite qu’on ne le pensait. Il faut dire que ça fait si longtemps qu’on fantasmait dessus qu’on ne s’attendait même plus à en profiter avant notre retraite.

Comme en témoigne le site Caniuse, le tout premier navigateur à implémenter ce module révolutionnaire fut… Internet Explorer 10 ! Et pour cause, l’un des rédacteurs de la spécification est lui-même un représentant de Microsoft.
C’est forcément une bonne nouvelle puisque c’est généralement ce navigateur en particulier qui ralentit l’appropriation des nouveautés et que les développeurs doivent attendre avant de pouvoir se lâcher en production.

Aujourd’hui, Grid Layout est une spécification mature (stade de Candidate Recommendation) qui n’évoluera certainement pas, ou très peu dans sa mouture actuelle.

Le changement, c’est maintenant !

Ces derniers temps, les bonnes nouvelles du côté des navigateurs ont fusé :

Bref, tous les indicateurs sont au vert pour une adoption massive de Grid Layout dès l’année prochaine selon vos cibles et utilisateurs.

La différence avec Flexbox ?

Ah ben, c’est pas pareil.

En résumé :

  • Grid Layout est un module de positionnement parfait pour construire ses templates et ses grilles, bref l’architecture globale de la page
  • Flexbox est parfait pour les composants qui constituent l’intérieur de nos gabarits : navigations, sliders, fiches produits, etc.

Actuellement, Flexbox étant nettement plus compatible, il fait souvent tout le boulot quitte à s’approprier celui de Grid Layout.

OK j’en prends deux caisses !

Vous êtes bien motivé, dites-donc. C’est effectivement le bon moment pour se préparer à l’arrivée imminente de Grid Layout, par contre il ne faut pas se leurrer : tout ne sera pas parfait au début (vous imaginez bien que l’implémentation IE10 n’est actuellement plus complètement en phase avec les dernières évolutions de la spécification).

Sinon, si vous voulez un conseil quelque peu subjectif pour vous aider à vous préparer à cette révolution, je vous invite à plonger dans un article d’alsacréations dédié à Grid Layout, ou à suivre notre excellente formation « CSS3 techniques de pros! » 🙂

Bon OK sinon vous pouvez également vous renseigner du côté de l’experte mondiale dans ce domaine, Rachel Andrews : http://gridbyexample.com/

EDIT : il semble , après tests, qu’à la fois IE10, IE11 et la version actuelle de Edge reconnaissent tous l’ancienne version de Grid Layout et souffrent du manque de fonctionnalités importantes (gouttières, auto-placement, grid-areas, etc.).
Il va donc falloir soit bidouiller, soit attendre un peu, soit laisser tomber ces navigateurs, soit se pencher vers un polyfill JavaScript tel que https://github.com/FremyCompany/css-grid-polyfill

grid2

5 réflexions au sujet de « CSS Grid Layout arrive, préparez-vous ! »

    1. Avec IE10, oui ce sera galère. À partir de IE11 (sorti en 2013 après la grosse vague de nouveautés des specs de 2011), cela devrait beaucoup s’arranger.

Les commentaires sont fermés.