Elementor : la flexbox arrive enfin !

Les versions bêta du constructeur de page pour WordPress défilent actuellement et la prochaine mouture (gratuite) verra enfin arriver un changement important pour la construction du contenu : la FlexBox.

C’est une demande récurrente depuis plus d’un an dans les forums et sur le Github, la Flexbox marque un tournant important car elle délivre un code bien plus léger pour des contenus à base de colonnes ou de sections. Plus besoin d’imbriquer une multitudes de <div> pour gérer les alignement horizontaux et verticaux. Ceci pour différents widgets dans la même colonne ou section. cela va révolutionner la façon de construire les pages avec Elementor et c’est génial !

FlexBox : une lente maturation au sein du groupe de travail CSS

Le groupe de travail CSS a discuté de l’idée du modèle de boîte flexible avant 2008. Le premier projet de travail de Flexbox a été publié le 23 juillet 2009. La spécification originale est basée sur XUL, la technologie que Firefox utilise pour produire son UI (interface utilisateur).

La spécification incluait des primitives de mise en page plus faciles à utiliser que le simple HTML pour la conception d’interfaces. La capacité de mise en page de Flexbox était également considérée comme utile pour les pages Web.

Le contenu de base de XUL Flex a été traduit en une spécification CSS qui est visible dans le brouillon de travail de 2009. Il y avait plusieurs problèmes avec le premier projet de travail. L’algorithme de mise en page était lent, la spécification était vague et entre les deux implémentations Webkit et Firefox, il y avait des détails divergents. La spécification fonctionnait différemment entre Webkit et Firefox, même avec des composants de base.

En 2011, Tab Atkins prend le relais en tant qu’éditeur de la spécification Flexbox. Il fait une révision importante de la syntaxe et publie deux ébauches de travail dans l’année. La syntaxe non officielle de 2011 est appelée syntaxe “Tweener”, qui est prise en charge dans Chrome, Opera et IE 10. L’affichage de la syntaxe 2009 à 2011 est passé de Box à Flexbox.

La version 2012 de la spécification Flexbox est dans la recommandation du candidat W3C. Lorsqu’une spécification est dans la recommandation d’un candidat, c’est un instant dans la vie d’une la spécification dans le W3C. Cela signifie que la spécification est stable, prise en charge dans les navigateurs, que des tests sont en cours d’écriture et qu’il ne devrait pas y avoir de changement significatif par rapport à cette version.

Encore une fois, la syntaxe 2012 est modifiée par rapport à sa version précédente et Opéra publie un support sans préfixe. Mozilla est sur le point de publier un support sans préfixe pour le moment. Atkins a rédigé un brouillon de l’éditeur en 2013. La nouvelle version de la spécification (version 2012 / brouillon de l’éditeur 2013) a mieux pris en compte la capacité de Flexbox, a resserré l’algorithme et augmenté l’efficacité de Flexbox.

C’est en 2015 que la Flexbox devient mature mais Elementor n’existe pas encore

Aujourd’hui, la dernière version de Flexbox est une recommandation candidate du W3C. Le dernier projet de travail de Flexbox a été publié le 14 mai 2015. Le statut de ce document est qu’il s’agit d’un projet de document, ce qui signifie qu’il « peut être mis à jour, remplacé ou obsolète, par d’autres documents à tout moment » (W3C).

Fondamentalement, le projet est toujours un travail en cours. Ce brouillon a été révisé jusqu’au 11 juin 2015. Le brouillon actuel de l’éditeur date du 3 décembre 2015, ce qui signifie que Flexbox est en train de se mettre à jour en ce moment. Le brouillon de l’éditeur est public et est fourni par le W3C comme moyen de discussion.

Afin de créer le type de changement technologique décrit par Haas, Flexbox doit continuer à mettre à jour son contenu jusqu’à ce qu’il puisse obtenir la meilleure optimisation de la conception de l’interface utilisateur au sein du module.

Ça donne quoi dans l’éditeur d’Elementor la Flexbox ?

Jusqu’à présent pour créer des colonnes et section on empile des élément “conteneurs” (<div>) dans le code HTML de la page, plus il y a de colonnes et plus on retrouve une suite complexe de ces éléments (certains servent au positionnement vertical dans la section) cela rend la page plus lourde que si elle utilisait la Flexbox.

Elementor à intégré une gestion Flexbox depuis 2 versions mais cette gestion restait incomplète pour la gestion globale des sous-éléments. Avec la future v3.6 on disposera de toutes les fonctionnalités de FlexBox dans le widget Conteneur.

Aujourd’hui la structure d’une section multi-colonnes donne ceci :

Avec le widget conteneur et Flexbox ça donne ceci :

FlexBox : construire des pages avec Elementor devient vraiment Flexible !

Il suffit de regarder les réglages proposés par le widget Conteneur d’Elementor 5.6 pour comprendre qu’il regroupe en une seule interface les réglages dévolus aujourd’hui à la Section et la Colonne :

Elementor 5.6 sera plus productif, plus intuitif et plus efficace dans les compositions complexes !

Notez bien que le widget Conteneur est disponible dans la version gratuite d’Elementor.

Des réglages d’alignement disponibles aussi dans chaque widget Elementor

Les possibilités Flexbox sont aussi présentent dans chaque widget d’Elementor (onglet Avancé) pour aligner verticalement le widget et ordonner sa position dans la suite des éléments du conteneur, puissant et simple à utiliser.

Autre avantage de la Flexbox : cela va alléger le code généré par Elementor

Ce ne sera pas très sensible sur des mise en page simples mais par contre très important sur les mises en pages complexes. La simplification de la gestion de la structure supprime pas mal de code de mise en page produisant, à terme, des pages plus rapides à charger.

Autre nouveauté secondaire d’Elementor 5.6 : l’enregistrement des widgets pour servir de base par la suite

Lors de la création d’un site il n’est pas rare d’utiliser à plusieurs emplacements et pages un widget avec des réglages spécifiques. On peut aussi avoir des réglages personnel pour chaque widget, il est donc intéressant de pouvoir définir les widgets avec des réglages personnalisés.

Elementor 5.6 va apporter cette fonctionnalité très pratique. Un autre gain de temps en perspective pour les webdesigners !

Sources : w3schools.com, la FlexBox, historique de la Flexbox, CSS3 Flexbox Tutorial.