S’il est une librairie CSS qui a marqué le monde de développement c’est bien Bootstrap. Je lui ai d’ailleurs consacré plusieurs tutoriaux dont celui-ci consacré à la version 4. Mais on voit enfin arriver la version 5 qui est passé en phase alpha. Il est donc intéressant de faire un peu le point sur les évolutions déjà présentes et celles à venir.
Un fait notable est l’abandon de la prise en compte d’Internet Explorer, mais qui l’utilise encore ?
JQuery
Il me semble personnellement que JQuery fait désormais partie de l’histoire du développement et ne devrait plus être utilisé. j’ai consacré un article complet pour étayer ce point de vue.
J’avais apprécié que la dernière version de Materialize se passe de JQuery pour la partie Javascript. C’est maintenant au tour de Bootstrap de se libérer de cette dépendance avec cette cinquième version et c’est une bonne chose !
Il a fallu donc réécrire la partie Javascript qui du coup a gagné en qualité.
La documentation
La documentation de Bootstrap a favorablement évolué avec un nouveau look très lisible avec une navigation améliorée. On a aussi droit à un nouveau logo :
Personnellement j’aime bien mais bon, les goûts et les couleurs…
L’équipe de Bootstrap en a profité pour corriger pas mal de défauts de la documentation de Bootstrap 4 (ambiguïtés, manque d’explications, possibilité d’extension…).
En particulier il va devenir plus facile de changer l’aspect de Booststap pour le mettre à notre goût. On disposera par ailleurs d’un projet de démarrage avec npm. Pour le moment c’est encore en version 4, donc à suivre…
Les propriétés personnalisées CSS
Le CSS évolue et dispose désormais de la possibilité de créer des variables. On peut ainsi écrire :
--base-color: red;
Et ensuite utiliser cette variable partout dans le code :
color: var(--base-color);).
On en voit tout de suite l’intérêt : on peut placer une valeur à un seul endroit et l’utiliser ensuite de multiples fois. Donc en cas de changement on a bien moins de travail et de risque d’erreur !
Avant ces propriétés il fallait passer obligatoirement par un préprocesseur CSS comme Sass ou Less pour avoir cette fonctionnalité.
On va donc voir apparaître ces variables dans le code de Bootstrap en compagnie de celles de Sass, on va voir comment elles vont cohabiter.
Les formulaires
Les formulaires ont évolué et la documentation est bien plus lisible. Avec la version 4 on avait les contrôles classique mais on pouvait aussi utiliser des contrôles améliorés (custom forms). Avec la version 5 ces contrôles particuliers sont maintenant les contrôles de base.
La grille
Pas de révolution pour la grille mais une évolution avec l’arrivée du xxl avec une limite à 1400 px.
On dispose de l’utilitaire .g* pour régler facilement l’espacement horizontal des colonnes. On peut écrire par exemple :
<div class="row g-4">
Mais on pourra aussi régler l’espacement vertical :
<div class="row gy-5">
Les icônes
Après avoir utilisé des icônes tierces, puis plus d’icône, puis en conseillant d’utiliser Font Awesome, l’équipe s’est décidée à créer des icônes spécifiques pour Bootstrap ! Elles sont en SVG pour s’adapter à toutes les dimensions et open source (MIT).
On les utilise comme n’importe quelle image SVG. Il est possible qu’on dispose à terme d’une façon spécifique pour les utiliser.
RFS
RFS est un moteur de redimensionnement qui a été créé au départ pour adapter la taille du texte en fonction de la largeur de l’écran. Mais cette possibilité initiale a été élargie à n’importe quelle propriété CSS, ce qui laisse envisager pas mal de possibilités. Leur démonstration est éloquente :
A suivre…
Conclusion
Comme on en est encore à la version alpha il va y avoir évidemment encore pas mal de changement. J’ai l’impression que ce sera moins difficile de migrer de la version 4 à la 5 que cela l’a été pour passer de la 3 à la 4.