Bootstrap 5 : les nouveautés les plus importantes

Bootstrap est l’un des frameworks les plus populaires pour le développement de sites Web. L’outil fournit des modèles pour CSS et HTML avec lesquels vous pouvez mettre en place une conception Web moderne de manière relativement simple. La mise en page, les polices, les boutons et les divers éléments de navigation peuvent être créés et positionnés très simplement.

Développé à l’origine pour Twitter, le framework est disponible depuis un certain temps déjà en open source gratuitement pour tous. La dernière version de Bootstrap 5 est maintenant disponible – tout du moins dans sa version alpha.

Depuis le 16 juin 2020, Bootstrap 5 est déjà disponible dans une version alpha, qui est toujours considérée comme expérimentale. Une grande partie des changements prévus ont déjà été mis en œuvre, mais le développement n’est pas encore terminé. En parallèle, des correctifs pour la version 4 du framework continueront à être publiés. L’équipe n’a pas communiqué de calendrier. Il n’est donc actuellement pas possible de dire quand une première version bêta et quand la version finale seront publiées. Précédemment, il s’était écoulé près de 2 ans et demi entre la version alpha et la version finale.

L’équipe de Bootstrap a annoncé plusieurs centaines de changements pour sa nouvelle version. Bon nombre d’entre elles sont des évolutions mineures. Mais il en existe aussi de nouvelles qui sont extrêmement importantes pour les utilisateurs du framework open-source.

Depuis longtemps déjà, les utilisateurs ont massivement abandonné le navigateur Internet Explorer de Microsoft. Le nombre d’utilisateurs est devenu si faible que Bootstrap 5 n’offre même plus de support pour ce navigateur. Comme Internet Explorer est devenu obsolète et n’est plus développé par Microsoft (au profit d’Edge), il était nécessaire d’ajouter beaucoup de code (en fait inutile) par le passé.

Avec l’arrêt du support Internet Explorer, les projets Bootstrap deviennent plus petits. La raison en est que le navigateur Microsoft, devenu obsolète, ne pouvait pas gérer les nouvelles méthodes JavaScript et des efforts nécessaires devaient donc être fournis. Cela se reflète dans la taille du fichier et dans le temps nécessaire à la conception des sites Web.

Pour simplifier le travail avec JavaScript, de nombreux concepteurs et développeurs Web utilisent la bibliothèque gratuite jQuery. Cette bibliothèque a également été incluse dans Bootstrap pendant des années. Dorénavant toutefois, il a été décidé de mettre fin au support avec la nouvelle version. Il est probable que les utilisateurs de Bootstrap 5 n’utilisaient plus cette bibliothèque. Même sans jQuery, les effets peuvent être générés très rapidement avec le framework : pour ce faire, soit on utilise un code JavaScript plus avancé, soit on passe à HTML et CSS.

Cet abandon permet de réduire considérablement le nombre de projets mis en œuvre avec Bootstrap. La taille des fichiers et donc les temps de chargement sont par conséquent plus petits, ce qui améliore l’expérience utilisateur.

Internet Explorer n’étant plus pris en charge, Bootstrap 5 peut désormais encore plus se concentrer sur les techniques modernes de conception de sites Web. Cela inclut les propriétés personnalisées CSS : cette technique était déjà bien utilisée depuis longtemps avec Sass et Less, mais elle a maintenant également trouvé sa place dans le CSS classique. Les propriétés (souvent appelées variables) rendent la conception avec le CSS beaucoup plus facile. En outre, elles permettent de réaliser des variantes de mises en page modernes.

Déjà dans la version 4 du framework frontend, vous pouviez créer vos mises en page à l’aide de grids CSS. Cela reste inchangé dans Bootstrap 5, mais des extensions ont été ajoutées. Avec xxl, l’équipe a introduit une dimension supplémentaire. En outre, davantage de classes ont été créées pour le vertical spacing.

Jusqu’à présent, Bootstrap était étroitement lié au générateur de site statique Jekyll. Néanmoins, l’outil présente l’inconvénient que Ruby doit être installé sur le concepteur pour pouvoir être utilisé. L’équipe de développement a donc décidé de passer à Hugo. Cet outil est écrit en langage Go et ne nécessite aucun logiciel additionnel en arrière-plan. De plus, Hugo promet d’être beaucoup plus rapide que ses concurrents.

Afin de bénéficier d’une plus grande flexibilité et de pousser encore plus loin le développement du framework, Bootstrap 5 offre une nouvelle façon d’inclure ses bibliothèques et toolkits. Alors qu’auparavant il n’était pas possible d’intégrer des bibliothèques et des outils externes dans un projet que par le biais de classes, une nouvelle interface a maintenant été développé avec Sass. Vous pouvez l’utiliser pour inclure vos propres utilitaires ainsi que pour supprimer ceux fournis par Bootstrap si vous ne voulez pas les utiliser pour votre projet.

Un projet qui s’est autant développé que Bootstrap se doit d’être correctement documenté. C’est la seule façon pour les nouveaux utilisateurs, mais aussi pour les concepteurs expérimentés, d’utiliser au mieux le framework. L’équipe a donc fait un grand nettoyage sur la documentation. Un nouveau paragraphe est notamment la section de personnalisation très utile. Une nouvelle palette de couleurs a également été ajoutée, offrant encore plus de possibilités de conception directement à la base du code.

En outre, la partie formulaire a également été révisée. Vous pouvez trouver beaucoup plus rapidement des informations utiles sur la création de formulaires. La version Bootstrap 5 offre en effet plus de flexibilité pour la conception d’éléments de contrôle (boutons, boîtes, radio, etc.).

Tous les changements prévus ne sont pas encore inclus dans la première version alpha. Cependant, les développeurs ont déjà annoncé quelques développements cruciaux qui seront intégrés dans les prochaines versions :

• Right-to-left (RTL) : les langues qui se lisent de droite à gauche seront mieux prises en charge à l’avenir.
• Offcanvas menu : avec les offcanvas, davantage de possibilités pour concevoir des menus.
• SVG in HTML : actuellement, les fichiers SVG sont intégrés via CSS, mais il est possible d’utiliser du code HTML pour cela.