Il mondo dello sviluppo web è in costante mutamento. Ogni anno escono nuove tecnologie e per noi sviluppatori web è dura restare aggiornati su tutto, soprattutto su quali funzionalità sono supportate dai browser e quali sono sicure da usare in produzione.

Prima di Baseline

Fino a non molto tempo fa si parlava ancora di supporto per Internet Explorer e si valutava il supporto di funzionalità CSS e Javascript in base alle versioni dei browser. Questo causava non pochi problemi legati ai tanti browser presenti ed allo stato differente in cui si trovavano.

Il sito CanIUse è sempre stato un punto di riferimento per capire quale funzionalità fosse supportata, così da adeguare il proprio codice.

Inutile dire che questo approccio ha sempre causato confusione, maggior lentezza nello sviluppo, nel testing e sicuramente qualche bug.

Baseline

Per risolvere questo problema i team di sviluppo di Chrome, Firefox, Safari ed Edge si sono ritrovati per collaborare e creare una base di partenza (baseline), che tutti gli sviluppatori web possono utilizzare per capire quali funzionalità sono supportate in modo trasversale su tutti i browser.

I browser verranno quindi tenuti aggiornati simultaneamente, così come le documentazioni di riferimento. Ad esempio sul sito di Developer Mozilla alla pagina delle grid CSS potete notare una dicitura in alto con:

• logo di Baseline
• stato di supporto
• supporto sui rispettivi browser più importanti

Questo permetterà a tutti i web developer di essere sempre aggiornati sullo stato dell’arte ed implementazione di ogni singola funzionalità sui diversi browser. Si tratta di un enorme passo avanti, anche se agli inizi, che farà la differenza su come intendiamo il supporto sui browser e l’adozione delle nuove tecnologie in produzione.

Alcune features già disponibili

Elemento Dialog

Il nuovo elemento semantico <dialog> ci permette di creare facilmente popup e modali. Create un elemento dialog con ID e chiamate il metodo showModal() per aprirlo. Al resto ci pensa il browser.

<dialog id="d">
  <form method="dialog">
    <p>Sono un dialog</p>
    <button>ok</button>
  </form>
</dialog>

<button onclick="d.showModal()">
  Apri Dialog
</button>

Proprietà CSS Trasform Individuali

É possibile separare le proprietà di trasform in tre diverse regole CSS.

.div {
  translate: 30% 0;
  rotate: 60deg;
  scale: 1.4;
}

Nuove unità di misura viewport

Le nuove unità di misura svh ed lvh danno un maggiore controllo sul design del layout lato mobile.

Copia di un oggetto in Javascript

É stata aggiunta la funzione structuredClone per creare facilmente una copia di un oggetto, anzichè il più complesso giro utilizzando JSON.stringify e JSON.parse.

const oggetto = { id: 0, prop: { nome: "Luca", cognome: "Rossi" } };

/* vecchio metodo */
const copiaOggetto = JSON.parse(JSON.stringify(oggetto));

/* nuovo metodo */
const copiaOggetto = structuredClone(oggetto);