Bootstrap 5: le novità più importanti

Bootstrap è uno dei framework più popolari per lo sviluppo front end di siti web. Lo strumento fornisce modelli per CSS e HTML con i quali è possibile implementare design web moderni in modo relativamente semplice. Layout, font, pulsanti e vari elementi di navigazione possono essere progettati e posizionati in modo semplice e veloce.

Originariamente sviluppato per Twitter, il framework è disponibile da tempo come progetto open source gratuito per tutti. Ora è stata rilasciata l’alpha dell’ultima versione di Bootstrap 5.

Dal 16 giugno 2020 Bootstrap 5 è già disponibile in una versione alfa, che è ancora considerata sperimentale. Gran parte delle modifiche previste sono già state attuate, ma lo sviluppo non è ancora terminato. Allo stesso tempo, continueranno a essere rilasciate le patch per la versione 4 del popolare framework. Il team non ha pubblicato un programma di rilascio, quindi non è attualmente possibile dire quando verrà rilasciata una prima beta e infine la versione finale. Nel caso del predecessore sono passati circa 2 anni e mezzo tra il rilascio della versione alpha e la versione finale.

Il team di Bootstrap ha annunciato diverse centinaia di modifiche per la nuova versione. In molti casi si tratta di piccoli aggiornamenti minori, ma ci sono anche alcune novità che possono rivelarsi estremamente importanti per gli utenti di questo framework open source.

Al giorno d’oggi sono pochi gli utenti che utilizzano ancora il vecchio browser di Microsoft Internet Explorer. Talmente pochi che con Bootstrap 5 gli sviluppatori hanno deciso di non offrire più alcun supporto per questo browser. Siccome Internet Explorer è diventato obsoleto e non viene più sviluppato da Microsoft (a favore del nuovo browser Edge), in questo modo gli sviluppatori possono risparmiarsi di aggiungere molto codice, in realtà oramai inutile.

Con il termine del supporto per Internet Explorer, i progetti in Bootstrap diventano più piccoli. Il motivo è che il browser Microsoft, ormai obsoleto, non essendo in grado di gestire i nuovi metodi JavaScript, ha sempre richiesto materiale supplementare, il che si traduceva in file di dimensioni maggiori. In questo modo si è ottenuta una riduzione sia della dimensione dei file che dei tempi di lavoro.

Per semplificare il lavoro con JavaScript, molti web designer e sviluppatori utilizzano la libreria gratuita jQuery, che è stata inclusa per anni in Bootstrap. Ma con la nuova versione, gli sviluppatori hanno deciso di terminare questa integrazione, in quanto si presume che agli utenti di Bootstrap 5 non servirà più. Ora infatti gli stessi effetti possono essere generati rapidamente e facilmente anche senza jQuery grazie a un codice JavaScript più avanzato o tramite HTML e CSS.

Grazie a questi cambiamenti, i progetti realizzati con la nuova versione di Bootstrap sono diventati notevolmente più snelli. Le dimensioni dei file e quindi i tempi di caricamento si riducono, il che si traduce in una migliore esperienza utente.

Poiché Internet Explorer non è più supportato, Bootstrap 5 può ora concentrarsi ancora di più sulle moderne tecniche di web design. Questo include le CSS Custom Properties: conosciute già da tempo in Sass e Less, ultimamente stanno guadagnando una certa fama anche in ambito di CSS classico. Le proprietà (spesso chiamate variabili) rendono la progettazione con CSS molto più semplice, oltre a consentire la realizzazione di layout moderni e accattivanti.

Già nella versione 4 del framework front end era possibile creare i layout utilizzando le griglie CSS. In Bootstrap 5 la funzione rimane invariata, ma vi sono state aggiunte delle estensioni. Con xxl il team ha introdotto una dimensione supplementare. Inoltre, sono state aggiunte nuove classi per il vertical spacing.

Finora Bootstrap era strettamente legato al generatore di siti statici Jekyll. Questo strumento ha però uno svantaggio: richiede l’installazione di Ruby. Per questo il team di sviluppatori ha deciso di passare a Hugo, che invece è scritto con il moderno linguaggio Go e non necessita di alcun altro software in background. Inoltre Hugo promette di essere molto più veloce dei suoi concorrenti.

Al fine di aumentare la flessibilità e di spingere ulteriormente lo sviluppo di Bootstrap, Bootstrap 5 offre un nuovo modo per includere librerie e toolkit propri. Mentre prima era possibile integrare librerie e strumenti esterni in un progetto solo tramite classi, ora con Sass è stata sviluppata una nuova interfaccia. È possibile utilizzarlo per includere le proprie utilità e per rimuovere quelle fornite da Bootstrap, se non si desidera utilizzarle per il proprio progetto.

Il progetto di Bootstrap, che nel frattempo è cresciuto enormemente, richiede anche un’adeguata documentazione. Questo è l’unico modo di acquisire piena familiarità con il framework, non solo per i nuovi utenti ma anche per i web designer più esperti. A questo scopo il team ha deciso di mettere ordine anche nella documentazione. Una nuova aggiunta è la sezione di personalizzazione, che spiega come estendere Bootstrap in modo indipendente. È stata inoltre aggiunta una nuova tavolozza di colori che offre ancora più possibilità di design direttamente all’interno del codice.

Anche l’area dei moduli è stata rivista. Ora è possibile trovare informazioni sulla creazione di moduli molto più velocemente. Soprattutto in questo contesto, la nuova versione di Bootstrap 5 offre molta più flessibilità nella progettazione degli elementi di controllo (pulsanti, box, pulsanti radio...).

Non tutte le modifiche previste sono già incluse nella prima versione alfa. Tuttavia, gli sviluppatori hanno già annunciato alcuni sviluppi cruciali che saranno inclusi nelle prossime release:

• Right-to-left (RTL): le lingue che vengono lette da destra a sinistra saranno meglio supportate in futuro.
• Menu offcanvas: con offcanvas ci dovrebbero essere ancora più possibilità per la progettazione di menu.
• SVG in HTML: attualmente, i file SVG sono integrati tramite CSS, ma c’è chi per farlo preferisce utilizzare il codice HTML.