Web Design
-
Ottimizzare CSS con PurifyCSS
In un precedente post abbiamo parlato di UnCSS, una libreria sviluppata per consentire la rimozione di regole di stile CSS inutilizzate; PurifyCSS è una soluzione alternativa a UnCSS in quanto svolge la medesima funzione ma in modo differente, non si basa infatti sul ricorso a componenti JavaScript di terze parti per il parsing ma, più semplicemente, invoca una funzione che analizza i selettori utilizzati all’interno di una pagina HTML. Continua a leggere →
-
Differenze tra gli attributi hidden e aria-hidden di HTML 5
In un precedente articolo abbiamo descritto le specifiche relative all’attributo
hidden
di HTML 5, si tratta in sostanza di un costrutto di tipo booleano che specifica se un elemento non è rilevante al momento corrente o non è più rilevante nel contesto di un contenuto; un browser potrebbe quindi non rendere visibili gli elementi associati ahidden
che, però, continuerebbero ad essere disponibili per un utilizzo successivo. Continua a leggere → -
Tent CSS: CSS survival kit
Tent CSS è un framework CSS che viene offerto come base di partenza per la realizzazione di siti Web; come suggerisce il suo nome, concettualmente esso è ispirato alle tende da campeggio che rappresentano un riparo rudimentale in grado di offrire il minimo indispensabile per la sopravvivenza delle persone ospitate. Nello stesso modo Tent CSS si presenta come uno strumento essenziale, tutte le feature a corredo potranno essere integrate utilizzando altre librerie. Continua a leggere →
-
SlideShow animati con Eagle.js e JavaScript
Eagle.js è un framework JavaScript concepito per la realizzazione di slideshow animati. Per la sua creazione è stata utilizzata la libreria VueJS, considerata ad oggi una delle migliori soluzioni Open Source con cui sviluppare interfacce utente Web based interattive; basata sul pattern architetturale MVVM (Model–view–viewmodel), essa offre infatti il supporto per le transizioni e permette a Eagle.js di utilizzare dei componenti scalabili. Continua a leggere →
-
CSS: ridimensionare testi con vmin e vmax
In un suo recente articolo Chris Coyier di CSS-tricks ricorda che nel responsive design, oltre alle unità di misura più frequentemente utilizzate per la stilizzazione delle aree di visualizzazione (viewport), esistono anche
vmin
evmax
. Esse rappresentano entrambe delle unità di tipo relative length, cioè valori con i quali specificare una lunghezza relativa ad un’altra proprietà utilizzata per esprimere lunghezza.
Continua a leggere → -
UnCSS per rimuovere gli stili CSS inutilizzati
Soprattutto quando si gestiscono progetti Web based di grandi dimensioni, è possibile che alcune delle regole CSS definite per il nostro sito Internet o la nostra Web application non vengano effettivamente utilizzate, magari a causa di modifiche a carico del frontend che hanno portato alla rimozione o alla sostituzione di alcune componenti di pagina. Può quindi essere utile uno strumento come UnCSS appositamente concepito per rimuovere gli stili inutilizzati. Continua a leggere →
-
CSS: selettore last-of-type per background specifici
last-of-type
è un utile selettore di CSS che consente di specificare il colore di sfondo dell’ultimo elemento child delimitato dal tag di paragrafazione (p
). Detto in termini più semplici: dato un insieme di elementi delimitati dal tagp
, sarà possibile utilizzare il selettorelast-of-type
per associare all’ultimo di essi un colore di sfondo differente rispetto a quello degli altri. Continua a leggere → -
Semplice header non rettangolare per il layout di un sito Web
Gli header non rettangolari saranno probabilmente una delle principali tendenze del Web design di quest’anno; l’idea è in pratica quella di superare un modello ormai consolidato che vede il layout di un sito Internet composto da un header rettangolare, magari utilizzato per ospitare uno slider contenente delle immagini, nettamente separato rispetto alla sezione dedicata ai contenuti. Un header non rettangolare ha invece la caratteristica di rendere meno netto il passaggio tra quest’ultimo i restanti elementi di pagina. Continua a leggere →
-
WebSlides: presentazioni online con HTML5 e CSS3
WebSlides è una soluzione interamente basata sulle tecnologie e gli standard per lo sviluppo orientato Web che consente di realizzare prestazioni multimediali utilizzando esclusivamente HTML5 e CSS3; si tratta di un’applicazione Open Source pensata per chi ha l’esigenza di condividere contenuti, motivo per il quale potrebbe risultare particolarmente utile in ambiti dedicati alla formazione e alla produttività. Continua a leggere →
-
Autocompletamento degli input con datalist
Quando realizziamo un form per i contatti o un altro modulo per il feedback da integrare nelle nostre pagine Web è possibile sfruttare
select
,radio
ocheckbox
per limitare il numero di scelte a disposizione degli utilizzatori; HTML 5 introduce però un elemento ancora più evoluto,datalist
, che consente di definire un elenco di voci predefinite per i campi di input pur lasciando all’utente la libertà di scrivere un valore differente da quelli proposti. Continua a leggere →