Html6 e css4: vediamo cosa ci aspetta in futuro

Uno sguardo al passato

Html5 che sta per Web Hypertext Application Technology Working e il 5 sta per la versione corrente è stato pubblicato dal W3C Recommendation ad ottobre 2014 mentre per il CSS3 Cascading Style Sheets in circolazione dal 2013 (con vari moduli però sviluppati negli anni precedenti).

Per capire cosa sarà aggiunto (è solo un occhiata, sicuramente ci saranno maggiori features nel tempo) bisogna capire cosa è stato ed è attualmente per il web l' HTML5. Questa versione (5) è stata sviluppata in ottica semantica per facilitare l'interpretazione degli elementi ai vari crawler per analizzare, comprendere e fornire informazioni agli utenti, tra i tag principali vediamo:

  • Per la struttura: <section> , <article> , <nav> , <header> , <footer> , <aside> e <hgroup>
  • Per la grafica: <svg> e <canvas>
  • Per il multimedia: <audio>> e <video>

Ci sono inoltre nuovi elementi semantici che accrescono la quantità di elementi validi come: <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>, o <meter> . Ma non si tratta solo di questo, perchè questi tag insieme a delle API's messe a disposizione possono interagire in modo del tutto nuovo (rispetto ad HMTL4) con JavaScript che è sempre più presente nei siti web, sia per animazioni sia per sviluppo di SPA (Single Page Application) grazie anche al rapido sviluppo di framework e non come Angular, React, VueJs e chi più ne ha più ne metta, diciamo solo che questi in ambito lavorativo sono i più richiesti.

CSS3 l'ultima evoluzione dei fogli di stile per rendere questo web sempre più all'avanguardia sia per gli sviluppatori che per i grafici, integrando diverse specifiche, che se anni addietro bisognava ricorrere a delle png oggi è possibile renderlo sicuramente più dinamico e dare la possibilità a queste 2 figure (grafici e sviluppatori web) sempre più indipendenza gli uni dagli altri con specifiche come:

  • nuovi selettori e pseudo-classi;
  • nuove proprietà e metodi per la gestione dei colori e trasparenze;
  • nuove proprietà per la gestione di sfondi e bordi;
  • possibilità di utilizzare font non standard (@font-face);
  • possibilità di creare layout a più colonne;
  • possibilità di definire fogli di stile ad hoc in base alle caratteristiche del dispositivo in uso (media queries)
  • effetti dinamici quali transizioni, trasformazioni e animazioni

Se ad oggi sembrano banali e scontate, ci sono stati giorni in cui il web e la grafica non se la passavano proprio bene facendo a pugni per garantire prestazioni, manutenibilità e grafica di un sito web. Ad oggi con queste specifiche ed altre è possibile ammirare delle vere e proprie opere d'arti create tramite il CSS3 con la riproduzione di oggetti di una certa complessità, quadri, e chissà quante altre cose sono in cantiere e potremmo ammirare un domani, questo solo per dirvi già oggi quanto è potente del "semplice" css e anche se dai programmatori può essere definito come semplice sono dell'idea che a seconda di come si usa (e si sfrutta a pieno) un qualcosa esce fuori il potenziale e la complessità di qualsiasi cosa, aggiungo anche se i server a nostra disposizione sono sempre più performanti anche a basso costo l'ottimizzazione del css porta i suoi benefici (ovviamente non basta solo questo, ma insieme ad un ottima struttura html e magari del JavaScript ottimizzato) si possono avere siti web che caricano in poco tempo e cosa più importante l'utente finale è più felice e lo preferirà a parità di offerta del sito/piattaforma rispetto ad un concorrente.

Uno sguardo al futuro per scoprire le direzioni

No! Non sono il doc Emmett Brown

Il fulcro di questo nuovo articolo (si lo so era parecchio che non scrivevo) è proprio per vedere cosa ci aspetta domani, così da essere pronti e non trovarci impreparati.

HTML6 vediamo cosa aspettarci da questa nuova versione. Sicuramente vi starete domandando quando possiamo aspettarci questa nuova versione dell'HTML5? Bene, WHATWG, l'organismo di standard che guida le modifiche alle specifiche HTML, ha deciso di implementare un approccio diverso dal come siamo abituati ad intendere gli aggiornamenti, ciò significa che è improbabile che in futuro venga un grande aggiornamento "HTML6", poiché ora si verificano più frequentemente piccole modifiche alle specifiche, così facendo si ha tempo di implementare nuove funzioni e dare la possibilità agli sviluppatori di adeguarsi man mano con l'aggiunta di tag (poi bisogna sempre verificare la compatibilità con i vari browser). Tra le features che trovo interessanti ci sono: Le modali native:

<dialog open>
  <p>Questo è una supermodale HTML</p>
</dialog>

  <dialog>
      <form method="dialog">
        <input type="submit" value="Si" />
        <input type="submit" value="No" />
      </form>
</dialog>

Migliore gestione dei menu:

<menu type="toolbar">
  <li><button>Cut</button></li>
  <li><button>Copy</button></li>
  <li><button>Paste</button></li>
</menu>

Ridimensionare l'immagine:
Gli esperti ritengono che sia in arrivo un aggiornamento che consentirebbe ai browser di ridimensionare l'immagine per una migliore visualizzazione. I browser incontrano difficoltà nel mostrare le dimensioni ottimali dell'immagine relative al dispositivo e alle dimensioni della finestra. I tag src e tag img non sono molto potenti per gestire questo problema. In realtà ci sarebbe già la possibilità di utilizzare il tag srcset. Questo tag permette di inserire diverse immagini in base alla larghezza min e max, potrebbe essere ampliato con nuove funzioni (anche se già così è ottimo), col tempo lo scopriremo.

<picture>
      <source media="(max-width: 1920px)" srcset="img_flowers.jpg">
      <source media="(max-width: 414px)" srcset="img_flower.jpg">
      <img src="img_flowers.jpg" alt="Flowers">
</picture>

Fotocamera integrata:
Consentirebbe di utilizzare al meglio la fotocamera e i contenuti multimediali sul nostro dispositivo. Potremmo essere in grado di controllare la fotocamera, i suoi effetti, le modalità, le immagini panoramiche, l'HDR e altre cose.

Miglioramento dell'autenticazione:
Sebbene HTML5 non sia male in termini di sicurezza, anche i browser e le tecnologie web offrono una protezione ragionevole. Senza dubbio, si potrebbe fare di più nel campo dell'autenticazione e della sicurezza. Utilizzare chiavi incorporate anziché cookie, migliorare la firma digitale, ecc. Persone e gruppi hanno molte soluzioni da offrire, dipenderà dal WHATWG accettarle o rifiutarle.

CSS4 ora è il suo turno. Prima però vanno riportate alcune fondamentali citazioni: La prima di Tab Atkins nel 2012: "There will never be a CSS4."

La seconda di Rachel Andrew nel 2016: "While referring to all new CSS as CSS3 worked for a short time, it doesn’t reflect the reality of where CSS is today. If you read something about CSS3 Selectors, then what is actually being described is something that is part of the CSS Selectors Level 3 specification. In fact CSS Selectors is one of the specifications that is marked as completed and a Recommendation. The CSS Working Group is now working on Selectors Level 4 with new proposed features plus the selectors that were part of Level 3 (and CSS 1 and 2). It’s not CSS4, but Level 4 of a single specification. One small part of CSS."

La terza di Jen Simmons nel 2018: "Many people are waiting for CSS4 to come out. Where is it? When will it arrive? The answer is never. CSS4 will never happen. It's not actually a thing."

Potrebbe bastare questo per la sezione relative al "CSS4", però ecco il colpo di scena (o forse no? 😂), Peter-Paul Koch nel 2020: "I am proposing that we web developers, supported by the W3C CSS WG, start saying “CSS4 is here!” and excitedly chatter about how it will hit the market any moment now and transform the practice of CSS.

Of course “CSS4” has no technical meaning whatsoever. All current CSS specifications have their own specific versions ranging from 1 to 4, but CSS as a whole does not have a version, and it doesn’t need one, either.

Regardless of what we say or do, CSS 4 will not hit the market and will not transform anything. It also does not describe any technical reality.

Then why do it? For the marketing effect."

Le CONCLUSIONI?:
Beh per quello che posso dire, sembra che la strada intrapresa sia quella non tanto di ragionare con il numero di versioni (come avviene per i sistemi operativi) e uscirsene con dei grossi aggiornamenti, ma come scrivevo a inizio articolo, piuttosto introdurre novità man mano che vengono sviluppate (ed ovviamente approvate dal W3C).