Navigation

Toutes les catégories

Filtrer par auteur

Voir les derniers articles

Bootstrap 5 : quelles nouveautés en 2020 ?

Le métier de développeur peut être frustrant  : réinventer du HTML, du CSS et du JavaScript à chaque projet… Bien que certains...

Publié par Sebastien Turbe

Le métier de développeur peut être frustrant  : réinventer du HTML, du CSS et du JavaScript à chaque projet… Bien que certains préfèrent écrire leur propre code, il n’y a pas de honte à se contenter d’un framework existant. L’un des frameworks les plus populaires est Bootstrap, qui vient de dévoiler sa dernière version (en Alpha), avec à la clé des changements importants.

L’équipe derrière Bootstrap fait de son mieux pour rendre le framework léger, simple et plus rapide, au bénéfice du développeur  : dans cette dernière version le ménage a donc été fait  !

Si vous l’utilisez dans vos projets, alors vous aimerez probablement les changements offerts par Bootstrap 5, dont voici les principales nouveautés.

 

Exit jQuery

Alors que Bootstrap utilise jQuery depuis plus de 8 ans, ce framework est devenu assez lourd, d’autant qu’il oblige les sites web qui l’utilisent à le télécharger, ajoutant un temps de chargement parfois conséquent, pour une bibliothèque qui ne peut être utilisée par aucun autre plugin que Bootstrap.

jQuery a donc peu à peu perdu de sa popularité au profit d’Angular, Vue ou React, car la plupart de ces frameworks modernes fonctionnent à travers le DOM virtuel et non pas directement sur le DOM, ce qui conduit à des performances fortement améliorées.

À l’avenir, toute requête jQuery devra être réalisée avec du code JavaScript dans Bootstrap 5, ce qui permettra de réduire la taille ou le poids des fichiers du framework.

 

Exit Internet Explorer

Le glas a sonné pour l’un des pires cauchemars du développeur web  : dans Bootstrap 5, la prise en charge d’Internet Explorer 10 et 11 n’est plus qu’un souvenir.

Le navigateur de Microsoft ne supportant pas les standards modernes de JavaScript ni la plupart des nouvelles propriétés CSS, il limitait le développeur dans la conception d’un site web, ou bien l’obligeait à alourdir son code pour le rendre compatible avec ce navigateur obsolète. Fini le casse-tête  !

 

Exit les « card deck »

nouveautés Bootstrap 5

Dans les dernières versions de Bootstrap, il fallait utiliser les « jeux de cartes » comme autant de classes CSS, pour pouvoir définir des zones de largeur et de hauteur égales. Bootstrap 5 a remplacé ses « jeux de cartes » par un nouveau système de grid qui offre un meilleur contrôle sur la responsivité de la page. Les classes « card » devenues inutiles ont été supprimées.

Bien sûr, la disparition de ces classes (et d’autres) vont laisser la place à de nouvelles classes CSS, comme la classe « dropdown-menu-dark » qui transforme le menu, lui aussi largement remanié.

 

Exit Jekyll, bonjour Hugo

Le générateur de site statique passe de Jekyll à Hugo. Jekyll, jadis choisi pour sa facilité de mise en route et sa simplicité de déploiement sur GitHub, a fait long feu  : sa lenteur, combinée à l’installation obligatoire de Ruby, a eu raison de lui.

Hugo, par contre, est écrit en Go  : il n’a pas de dépendance externe, et il est beaucoup plus rapide.

Polices d’écriture responsives

La conception d’un site web qui reste attrayant sur plusieurs tailles d’écrans a été un véritable défi pour les développeurs. Les « media queries » ont été souvent utilisées résoudre les problèmes de typographie (mais pas que). Les « media queries » permettent aux développeurs de contrôler l’apparence des textes en spécifiant des tailles de police spécifiques en fonction d’une taille d’écran donnée.

Bootstrap 5 activera par défaut les tailles de police réactives qui redimensionneront automatiquement l’élément en fonction de la taille de la fenêtre de l’utilisateur, via le moteur RFS (Responsive Font Sizes).

À savoir
RFS est un moteur de redimensionnement développé pour redimensionner les tailles de police. Mais pas que, puisque RFS offre la possibilité de redimensionner pratiquement tout, comme le margin, padding, border-radius…

 

Nouvelle librairie d’icônes

nouveautés Bootstrap 5

Dans Bootstrap 4, les développeurs web doivent se contenter de polices d’icônes libres de droit (comme Font Awesome) ou utiliser leurs propres icônes SVG afin d’ajouter du cachet à leur site web.

Bootstrap 5 arrive avec une nouvelle bibliothèque d’icônes SVG conçue par le co-fondateur de Bootstrap. Avant la sortie officielle de Bootstrap 5, ces icônes peuvent d’ores-et-déjà être ajoutées et utilisées dans votre projet, en visitant cette page.

Le plus
Entièrement gratuite, cette librairie d’icônes peut même servir à ceux qui n’utilisent pas le framework.

 

Conclusion

L’équipe de développement de Boostrap 5 a bien travaillé, mais a informé ses utilisateurs que cette mouture est toujours en version alpha  : d’autres changements, ainsi que des corrections de bugs  sont attendus jusqu’à la sortie de la bêta. Si vous êtes un aficionado du framework, pressé d’essayer la version 5 de Bootstrap, il est inutile de vous conseiller de garder un œil sur le GitHub de Bootstrap.

Vous avez un projet de création de site internet avec Bootstrap ? Demandez les devis de développeurs web freelances sur Codeur.com ! C’est rapide, et gratuit !

5
/
5
(
1

vote

)
Lire la suite de l'article

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Webmarketing

Marketing d’influence : comment s’en servir en périodes de fêtes ?

2019 se rapproche… et en tant que professionnel du marketing, vous devez sûrement vous poser des questions sur le marketing d’influence. Une stratégie...

Publié le par Celine Albarracin
Webmarketing

Nord Conversion Day : un rendez-vous autour de l’expèrience utilisateur, le 5 avril à Lille

Organisé par Wexperience, le Nord Conversion Day est un rendez-vous d’une journée, où l’on parle UX autour de conférences et de workshops....

Publié le par Ludwig Herve