
Bootstrap 5 alpha 2
Un altro importante aggiornamento di Bootstrap che lo avvicina sempre di più alla sua final release
Bootstrap 5 è stato rilasciato oramai da qualche mese e in milioni si sono fiondati a scaricarlo per iniziare ad implementarlo nei propri progetti o nei vari temi premium (anche questo blog è realizzato con questa ultima versione rilasciata). Come saprai con la versione 5 la caratteristica più importante è stata l'abbandono del jQuery e di Internet Explorer (era ora direi) cosa che ha fatto discutere parecchio la comunità con le solite schiere dei pro e dei contro ma a aprte questo tutto il framework ha subito grandi cambiamenti e in questa nuova alpha 2 sono state introdotto alcune caratteristiche, vediamo quali
Aggiornamento della navbar della documentazione
Sebbene questa non sia un update del framework in se, rappresenta sicuramente un bel bonus per gli sviluppatori, infatti come dice Bootstrap stesso, è un restyle della barra di navigazione delle pagine della documentazione, utile per chi vuole una buona base di partenza. Tutta la navbar è stata ripulita e ottimizzata per device piccoli e alcuni link sono stati rimossi da mobile perchè poco pratici; anche la subnav è stata ridisegnata per espandersi a pieno sul mobile e sonos tate aggiunte icone diverse per glis tati expanded e collapsed.
Dark caroulsel
Nuova class .carousel-dark
da poter aggiungere ad ogni .carousel
per ottenere testi e indicatori in nero. Inoltre per ottimizzare il tutto e non aggiungere peso è stato usato il CSS filter per invertire l'SVG dei controlli.
Dark dropdowns
Dopo quasi 9 anni dalla prima versione di Bootstrap hanno finalmente introdotto i dropdowns in versione dark, basterà quindi aggiungere la class .dropdown-menu-dark a qualsiasi dropdown. Questo rappresenta l'inizio di quello che sarà lo sviluppo futuro di questa classe che per ora non è stata approfondita nel dettaglio ma che promettono sarà ampiamente trattata nelle prossime release minori.
Bottone di chiusura ridisegnato
Il bottone per la chiusura X è stato completamente ridisegnato, nel nome nella forma nello stato focus e nel colore. Hanno abbandonato ×
a favore di un SVG direttamente nel css via background-image
e la classe ora è .btn-close
con anche il support per la versione bianca sempre tramite css filter.
Utilities di posizionamento
Simpatica aggiunta di alcune classi utili al posizionamento di elementi come puoi vedere in figura,
top
, right
, bottom
e left
con la possibilità di definire in partenza 0, 50% o 100% il tutto combinabile con la nuove fuznionia translate che permettono di centrare elementi agli angoli o ai bordi.
la lista di altre piccole modifiche e inserimenti è molto più lunga e in costante aggiornamento, l'alpha 3 è già in programma e prevede interessanti aggiornamenti come la riscrittura degli input group o l'aggiunta di utilities per il font-size.

Nuova proprietà css content visibility
Nascondere i contenuti non renderizzati per velocizzare i tempi di caricamento.

Css per tutti :focus-visible e accessibilità
Usabilità nei siti, un aspetto un pò trascurato da non sottovalutare, vediamo come usare la classe :focus-visible