CSS 3 Flexbox

Plongez dans les CSS modernes

Raphaël Goetter

• Éditeur: Eyrolles
• Année: 2016
• Imprimer l'ISBN: 9782212143638
• ISBN de l'eBook: 9782212223767
• Édition: 1
• Sujet: Design
• Sujet: Web Design

Flexbox est en passe de révolutionner de manière profonde et pérenne notre façon de concevoir des designs et des composants en CSS. Pourquoi y consacrer un ouvrage ? Car, bien utilisé, Flexbox permet de faciliter la tâche de bon nombre de développeurs web.

Un ouvrage de référence pour les webdesigners et intégrateurs

"Flexible Box Layout Module", mieux connue sous le nom de "Flexbox", est une spécification CSS 3 du W3C qui définit un nouveau modèle de boîte et de positionnement jusqu'alors inédit. Il intègre une gestion naturelle de la fluidité des éléments et du Responsive, et rend caduc l'usage de grilles d'affichage complexes, voire de frameworks - véritables usines à gaz où l'on n'exploite qu'à peine 10% de l'outil. Oubliez donc tout ce que vous aviez appris sur CSS et, comme moi, tombez amoureux de Flexbox !

Outre la simplification des schémas de positionnement, Flexbox apporte des solutions parfaites à une problématique bien ancrée dans notre époque : le Responsive Webdesign. Le design d'éléments flexibles, la réorganisation des blocs ainsi que la faculté à basculer très aisément d'un mode d'affichage horizontal vers un mode vertical en font un allié formidable dans nos projets d'adaptation aux tablettes et smartphones.

Une spécification CSS 3 novatrice

Flexbox a été pensé et optimisé pour faire table rase de toutes les techniques bancales historiques de positionnement et des contournements de propriétés qui pullulent dans nos projets web. Les "anciennes" méthodes encore (mal) utilisées de nos jours pour aligner ou placer des éléments ne sont souvent rien d'autre que du bricolage empirique : "tiens, à quoi peut bien servir ce position : relative ?", "pas grave, je mets une classe .clearfix partout !", "oh ! mais pourquoi ça ne veut pas rentrer ?", etc.

Flexbox est conçu pour mettre de l'ordre dans tout ce maelström de bidouilles et revenir enfin aux bases d'un positionnement propre et adapté aux besoins actuels. Cet ouvrage vous permettra de découvrir et de tirer parti de toutes les nouveautés apportées par cette spécification CSS 3, notamment à travers six travaux pratiques...

À qui s'adresse cet ouvrage ?

• Aux webdesigners et intégrateurs avancés ou experts qui souhaitent appréhender et maîtriser en production ce nouveau modèle de positionnement excitant.
• Aux développeurs et chefs de projet web soucieux de découvrir les rouages d'une technologie qui facilitera assurément la vie de leurs projets.
• A quiconque est impatient de laisser tomber toutes les bidouilles ancestrales de CSS et d'ouvrir ses horizons à des modèles bien plus intuitifs.

1

Une brève histoire de Flexbox

Plongez dans l’historique palpitant de Flexbox, rempli de trésors enfouis, de monstres poilus, de dragons et de trolls.

Les origines de Flexbox remontent à l’année 2003 lorsque Safari, le navigateur d’Apple sur Mac, alors en version 1.1, implémente son lointain ancêtre.

Mozilla Firefox 2.0 lui emboîte le pas dès 2006 (Flexbox est d’ailleurs basé sur XUL de Mozilla), puis Chrome et Android dès les premières ébauches de spécifications. Il a cependant fallu attendre Microsoft et sa version Internet Explorer 10, ainsi que les premiers véritables smartphones, pour voir ce module enfin démocratisé et véritablement employé en production.

Depuis son premier brouillon officiel au W3C en 2009 par David Baron de Mozilla, la spécification Flexible Layout Module est actuellement principalement maintenue par des éditeurs des sociétés Google, Mozilla et Microsoft.

Le document de spécification a été élevé au rang de Candidate Recommandation (quasi finalisé) en 2012, puis rétrogradé au stade de Last Call Working Draft (brouillon stable) deux années plus tard, étape indispensable dans la procédure W3C si l’on souhaite opérer des modifications d’implémentations, même minimes (ce qui fut le cas).

Figure 1–1
Le document de spécification Flexbox en 2015

L’adolescence de Flexbox a été pour le moins tumultueuse : avant de se stabiliser en 2012, il a connu trois grandes étapes importantes au cours de son existence ayant chacune conduit à des spécifications totalement différentes, du moins en termes de nommage des propriétés et des valeurs :

• le premier brouillon de juillet 2009, alors pris en charge par Firefox et Safari (également sur iPhone dès son origine) ;

• un second brouillon en mars 2012 (nommé parfois 2011 tweener syntax), qu’Internet Explorer 10 a décidé d’implémenter ;

• la syntaxe en Candidate Recommandation de septembre 2012, remaniée ensuite en Last Call Working Draft en mars 2014.

Voilà pourquoi, aujourd’hui encore, nous risquons de rencontrer certaines valeurs historiques et désuètes dans nos feuilles de styles, ou dans celles que vous récupérerez au détour de recherches sur Internet, par exemple display: -ms-flexbox pour Internet Explorer 10, en lieu et place du standard display: flex.

J’en profite pour ajouter qu’à l’heure où cet ouvrage est rédigé, Flexbox est une spécification CSS… Level 1. Hein, quoi, on m’aurait menti ? ! Du vulgaire CSS 1 ? C’est un peu plus compliqué que cela : après la finalisation de CSS 2.1, devenu Recommandation Officielle en 2011, les nouvelles fonctionnalités de CSS étaient tellement nombreuses, grouillantes et expérimentales qu’elles ont mené à un nouveau processus de normalisation du W3C. Il n’était plus question de raisonner en termes de version globale ; au contraire, chaque module spécifique progresse dorénavant à son propre rythme et se voit associé à un niveau (level).

Cela signifie que CSS 3 (et encore moins CSS 4) n’existe pas, ou plutôt tout est CSS 3 depuis la finalisation de CSS 2.1. Une nouvelle fonctionnalité, comme c’est le cas pour Flexbox ou Grid Layout, sera associée au level 1, tandis que les anciennes spécifications peuvent se situer au level 3 (polices, modèle de boîte). Enfin, certains modules tels que les sélecteurs ont déjà atteint le level 4 car le niveau précédent était finalisé.

Bref, Flexbox a un bon goût de CSS 3 mais son stade officiel est aujourd’hui CSS level 1 et un brouillon de level 2 est déjà en cours d’écriture.

Une popularité grandissante

L’avènement d’Internet Explorer 10 ainsi que les smartphones récents, plutôt à l’aise avec Flexbox, lui ont conféré une popularité indéniable depuis quelques années. Preuve en est, les innombrables démonstrations publiques d’astuces Flexbox sur le site CodePen : chaque jour, de nouvelles prouesses techniques y sont répertoriées.

http://codepen.io/​search?q=​flexbox&​limit=​all&order=​popularity&​depth=everything&show_forks=false

Par ailleurs, même si cela est plus anecdotique car purement honorifique, apprenez que Flexbox Layout Module a été promu « Technologie web de l’année 2013 » par le magazine .net.

http://​www.glazman.​org/weblog/​dotclear​/index.php?post​/2013/06/​10/CSS-​Flexible-​Box-is-​Best-​New-Web-​Technology-2013!

Figure 1–2
Flexbox récompensé en 2013 par .net

Un usage en production

Le module Flexbox n’est pas seulement une vitrine de démonstration ou un jouet à la mode. ...

Table des matières

• Couverture
• Le résumé et la biographie auteur
• Page de titre
• Copyright
• Table des matières
• Avant-propos
• Chapitre 1 : Une brève histoire de Flexbox
• Chapitre 2 : Les bases du design avec Flexbox
• Chapitre 3 : TP : réordonner des éléments
• Chapitre 4 : Trois astuces utiles
• Chapitre 5 : TP : une navigation Responsive
• Chapitre 6 : TP : un gabarit simple
• Chapitre 7 : TP : une galerie d’images
• Chapitre 8 : Les principes fondamentaux
• Chapitre 9 : TP : un formulaire fluide
• Chapitre 10 : La propriété flex en détail
• Chapitre 11 : Modèles de design
• Chapitre 12 : TP : construction de grilles
• Chapitre 13 : Encore plus loin avec Flexbox
• Chapitre 14 : Performances et compatibilité
• Chapitre 15 : Flexbox contre Grid Layout ?
• Chapitre 16 : Ressources utiles
• Annexe : Mémo des propriétés
• Index