In questo breve ciclo di script proveremo a capire come il browser esegue il rendering delle pagine web e come evitare operazioni costose per migliorare le prestazioni. Perchè a volte i problemi di latenza o aggiornamento non sono sempre da imputare alla connessione internet.Ogni...

Negli script precedenti abbiamo trattato i Web components: degli elementi HTML personalizzati che permettono di inscatolare una determinata funzionalità per poterla riutilizzare a piacimento in altre pagine della stessa applicazione o in altri progetti. Dopo l'introduzione e la ...

Nello script precedente non siamo stati del tutto sinceri riguardo i Web Component e la gestione degli eventi. Quello che abbiamo creato, e che ripresentiamo qui di seguito// HTML var button = document.getElementById('myButton');button.addEventListener('click', () => { alert...

Creare un Web Component in HTML è un processo che consente di realizzare elementi personalizzati riutilizzabili, estendendo le funzionalità native del DOM. Questa tecnologia sfrutta un insieme di API moderne che includono custom elements, shadow DOM e template HTML. Offrono una ...

La tipografia nel web design ha sempre giocato un ruolo cruciale nella comunicazione visiva. Tuttavia, fino a pochi anni fa, i designer erano costretti a utilizzare diverse varianti statiche di un font (regular, bold, italic, ecc.). Con l'introduzione dei CSS variable font, la ...

L'attributo accesskey è una funzionalità spesso trascurata dell'HTML, ma può migliorare notevolmente l'accessibilità e la velocità di navigazione all'interno di una pagina web. Nel dettaglio ci permette di impostare tasti di scelta rapida a elementi interattivi per accedere ...

La nidificazione (nesting) è una caratteristica che consente di scrivere CSS più leggibile e organizzato raggruppando gli stili in maniera gerarchica. Caratteristica fino ad ora disponibile solo tramite i preprocessori, come SCSS (Sass), ma di cui possiamo fare a meno grazie all?...

Il selettore :is() è una potente aggiunta al CSS perché progettata per semplificare la scrittura di gruppi di selettori complessi. Consente a noi sviluppatori di applicare stili a diversi elementi in un'unica definizione, in modo pulito e leggibile, evitando ripetizioni e ...

Una grossa limitazione nel CSS è l'imposibilità di applicare stili sulla base del contenuto o i sui discendenti. Con l'introduzione del selettore :has avviene un cambiamento radicale: gli sviluppatori possono applicare stili in base a condizioni che prima richiedevano workaround ...

Nei precedenti script abbiamo introdotto il funzionamento, la differenza e il caso d'uso di Container Queries e Media Queries. Ora andiamo a utilizzare un template HTML che, per finalità di demo, resterà elementare, ma ci consentirà di apprezzare ogni singola modifica che verrà ...