La View Transitions API è una funzionalità HTML/CSS dei browser che consente di animare il passaggio tra due stati di una pagina o tra due documenti diversi. Il browser cattura uno snapshot, o immagine, della pagina corrente e uno della pagina successiva, creando una transizione ...

Il supporto per gli elementi HTML details e summary esiste dal 2016, ma solo di recente queste funzionalità hanno iniziato a espandersi e a diventare più mature.Una novità interessante è la possibilità di modellare questi elementi per creare un exclusive accordion, cioè un gruppo...

Così come gli elementi HTML posseggono una proprietà padding e margin, anche per quanto riguarda il CSS scroll snap abbiamo dei modificatori di spazio..container { overflow-y: auto; scroll-snap-type: x mandatory; scroll-padding: 0 0 0 50px; /* Top, Right, Bottom, Left */}.item...

In una pagina dove è necessario mostrare un carosello di elementi o immagini, le opzioni possibili sono due: posizionare gli elementi nel primo spazio disponibile oppure inserirli in un container e predisporre una scroll-bar. Benchè il primo, in termini di layout e design, sia ...

Gli accordion, o sezioni comprimibili, sono un pattern molto diffuso nelle interfacce web. Permettono di organizzare grandi quantità di contenuti in poco spazio, migliorando la leggibilità e la navigazione della pagina. Hanno tuttavia un limite importante: il testo contenuto ...

Nello script #449 abbiamo trattato la content-visibility e il suo ruolo nel non dipingere ciò che non è visibile nella viewport.Se abbiamo però provato questa tecnica noteremo che il layout non è lineare: ci sono dei salti nel momento in cui il browser disegna l'elemento da ...

Nello script #432 abbiamo parlato dei concetti di Repaint, Reflow e Compositing e di come questi interagiscano sui tempi e le performance del browser. Oltre a lavorare su questi aspetti possiamo agire anche su un concetto semplice, ma, al tempo stesso, complesso da implementare ...

Partiamo da un'idea: la gestione di un'enciclopedia, un catalogo prodotti o un blog, come può essere Aspitalia.com, al cui interno vi è la possibilità di effettuare ricerche testuali. A seguito della ricerca 'un blog come può essere Aspitalia.com' probabilmente otterremo un link ...

Una form di input è l'insieme di più campi il cui unico scopo è raccogliere dati dall'utente. Spesso, per migliorarne l'usabilità e l'estetica, è utile che gli input si ridimensionino automaticamente in base al contenuto inserito.In una form con la presenza di un campo in cui è ...

Concludiamo la mini-serie sulla scrollbar, e sulle sue caratteristiche, con la gestione di un evento di navigazione verso un elemento (anchor element). Utilizzando il tag con puntatore ad un elemento, come di seguito mostratoVai a 1 Vai a 2 Contenuto 1Contenuto 2Premendo su un ...