Passer au contenu principal

Bootstrap 5, les nouveautés du framework HTML, CSS, et JavaScript

Bootstrap 5, la nouvelle version de l’un des frameworks les plus populaires est maintenant disponible depuis le 5 mai 2021. Cette bibliothèque d’outils fournit de nombreux composants prédéfinis CSS et HTML pour le développement front-end (ou intégration web) pour la conception de l’architecture et du visuel d’un site internet ou d’une application avec du code HTML et CSS à partir de maquettes des designers pour différents appareils qui ont des formats de tailles variés.

Bootstrap 5 – les nouveautés

Cette version finale apporte plusieurs centaines de changements, dont la majorité sont mineurs. On peut aussi retrouver d’importantes évolutions dans cette nouvelle version du framework open-source.

Fin du support pour Internet Explorer

À l’arrivée de la version 4, le framework avait abandonné Microsoft Internet Explorer 9 mais supportait encore Internet Explorer 10 (IE 10) et 11 (IE 11).

Face à Chrome, Firefox ou Microsoft Edge basé sur Chromium, et ne prenant plus en compte de nombreuses propriétés CSS et JS moderne, lE a perdu énormément de part de marché. L’année dernière, Microsoft a annoncé la fin du support d’Internet Explorer et des premières versions de Microsoft Edge au cours de l’année 2021.

Timeline IE & Edge

Fin du support d’IE11

Avec l’évolution et l’incompatibilité du CSS et du JS, IE est devenu un cauchemar pour les développeurs. L’équipe de Bootstrap a alors décidé de ne plus prendre en compte IE et toutes les versions de Microsoft Edge en dessous de 79 (donc à partir de janvier 2020) dans cette nouvelle version du framework.

Abandon de jQuery

Pendant plusieurs années, jQuery a été une formidable bibliothèque JavaScript qui a permis de faire évoluer le développement front-end. Cet outil est utilisé depuis Bootstrap 2 dans de nombreux composants comme les fenêtres modales, les menus déroulants, les tooltips,…

Aujourd’hui, grâce aux progrès réalisés des outils de développement front-end, de l’évolution du JavaScript et de l’amélioration des navigateurs, l’équipe de Bootstrap a décidé d’abandonner jQuery en tant que dépendance. C’est un changement majeur qui apporte des avantages, en permettant de réduire significativement la taille et le poids du framework.

Amélioration de la documentation

Pour cette nouvelle version, l’équipe de Bootstrap a décidé de changer de générateur de site statique pour la documentation du framework en passant de Jekyll à Hugo. Ce changement  permet de simplifier la mise à jour et de faciliter le déploiement du site. De plus, l’équipe a fait un grand nettoyage dans la documentation pour qu’elle soit la plus claire et la plus lisible pour les utilisateurs.

Nouvelle bibliothèque d’icônes SVG

Depuis Bootstrap 4, la police d’icônes du framework avait été supprimée (une police qui existait dans la troisième version). L’équipe Bootstrap préconisait d’utiliser d’autres bibliothèques d’icônes comme Font Awesome.

Maintenant, Bootstrap 5 introduit une toute nouvelle bibliothèque d’icône SVG qui peut  être utilisée en SVG ou webfont.

Optimisation des composants

Au cœur de cette nouvelle version de Bootstrap, les composants ont été actualisés et de nouvelles fonctionnalités ont été introduites. Ces changements sont des outils qui intéressent les développeurs front-end.

Une liste non-exhaustive de certaines de ses nouveautés :

On peut retrouver toutes ses améliorations dans la documentation de Bootstrap et dans le blog qui retrace l’évolution de cette nouvelle version.

Bootstrap 5, l’évolution logique du framework

Pour cette nouvelle version de Bootstrap, l’équipement de développement a énormément travaillé afin d’améliorer et d’actualiser le framework. Au travers de dizaines de corrections de bugs, des nouvelles fonctionnalités, quelques changements et de l’abandon de jQuery, les fondateurs du projet, Mark Otto et Jacob Thornton et la communauté de Bootstrap ont fait évoluer le framework. Tout cela afin que la transition entre la version 4 à la version 5 soit la plus facile que possible. Tous ses changements permettent un processus de travail plus simple avec un code plus léger et plus rapide, dont l’objectif est de faciliter et améliorer le développement front-end.

Comme pour les précédentes versions, au fur et à mesure des mois à venir, l’équipe de Bootstrap effectuera des corrections et des évolutions pour améliorer le framework par rapport à l’évolution de l’HTML et du CSS ainsi que des navigateurs web.

Kernix et Bootstrap

Depuis 2014, l’agence web Kernix utilise Bootstrap pour développer la partie front-end sur la majorité des projets avec les différents CMS ou frameworks PHP (Symfony, Drupal, WordPress,…) :

  • Utilisation des composants strictement nécessaires au projet (ex : système de grille pour le responsive), permettant ainsi d’optimiser le poids du CSS ainsi que du JS
  • Mise à jour rapide de correctifs de bugs à travers Bootstrap. Cela permet d’avoir des corrections mineurs sur l’interface du site afin d’offrir la meilleure expérience pour l’utilisateur
  • Utilisation d’une base saine avec Bootstrap pour développer rapidement et simplement, car par défaut, le code HTML et CSS ont par nature « des artefacts » qui ne sont pas nécessaires pour un site qui commence à avoir un design un peu plus élaboré. Cette base permet d’éviter de perdre du temps sur des éléments récurrents qui ne sont pas pertinents ou conflictuels avec le code final du projet

C’est grâce à l’utilisation experte de Bootstrap que l’équipe de développement a pu créer et faire évoluer continuellement ses outils internes de développement front-end. Tout en prenant en compte les autres innovations du CSS, l’agence de développement web Kernix rassemble les meilleurs outils disponibles afin d’améliorer et d’optimiser les outils internes d’intégration web, tout en s’adaptant à la typologie et aux contraintes des projets de nos clients.

Haut de page
Haut de page