Tra le classi messe a disposizione da uikit all’interno della sezione Utility le più interessanti sono indubbiamente, soprattutto nell’ottica di un loro utilizzo all’interno di un sito Passweb, quelle che consentono di gestire la visibilità o meno di un determinato elemento in relazione al verificarsi di specifiche circostanze (come ad esempio il passaggio del mouse o il fatto di utilizzare un dispositivo touch)

Vediamo quindi quali sono queste classi e in quali circostanze ci permettono di nascondere o visualizzare l’elemento a cui vengono applicate:

• .uk-hidden: consente di nascondere l’elemento cui viene applicata indipendentemente dal tipo di dispositivo utilizzato per visualizzare la pagina web.

Vengono utilizzate le proprietà “visibility: hidden” e “display: none” per cui l’elemento è nascosto e non viene neppure considerato il suo ingombro all’interno della pagina web

• .uk-hidden-touch: consente di nascondere l’elemento cui viene applicata nel momento in cui la pagina web dovesse essere visitata da un dispositivo touch

Vengono utilizzate le proprietà “visibility: hidden” e “display: none” per cui l’elemento è nascosto e non viene neppure considerato il suo ingombro all’interno della pagina web

• .uk-hidden-notouch consente di nascondere l’elemento cui viene applicata nel momento in cui la pagina web dovesse essere visitata da un dispositivo NON touch

Vengono utilizzate le proprietà “visibility: hidden” e “display: none” per cui l’elemento è nascosto e non viene neppure considerato il suo ingombro all’interno della pagina web

• .uk-invisible: consente di nascondere l’elemento cui viene applicata indipendentemente dal tipo di dispositivo utilizzato per visualizzare la pagina web.

A differenza della precedente classe .uk-hidden viene applicata la sola proprietà “visibility: hidden” per cui in queste condizioni l’elemento cui viene applicata questa classe è si nascosto ma mantiene sempre il suo ingombro all’interno della pagina web.

• .uk-visible-hover: deve essere utilizzata in combinazione con una delle precedenti classi che consentono di nascondere gli elementi cui vengono applicate; deve essere applicata all’elemento padre di quello nascosto e consente di visualizzare quest’ultimo nel momento in cui l’utente dovesse passa con il mouse sopra l’elemento cui viene applicata.

Per visualizzare l’elemento nascosto è utilizzata la proprietà “display: block”

• .uk-visible-hover-inline: deve essere utilizzata in combinazione con una delle precedenti classi che consentono di nascondere gli elementi cui vengono applicate; deve essere applicata all’elemento padre di quello nascosto e consente di visualizzare quest’ultimo nel momento in cui l’utente dovesse passare con il mouse sopra l’elemento cui viene applicata.

Per visualizzare l’elemento nascosto è utilizzata la proprietà “display: inline-block”

Ora mentre le prime 4 classi sono estremamente semplici da comprendere, anche in quello che può essere il loro utilizzo all’interno di Passweb, le ultime due meritano invece un piccolo approfondimento.

Innanzi tutto è bene sottolineare ancora una volta come queste due classi essendo utilizzate per visualizzare elementi inizialmente nascosti dovranno necessariamente essere utilizzate in combinazione con una di quelle classi che consentono invece di nascondere un elemento. Allo stesso modo essendo l’elemento che devono visualizzare inizialmente nascosto non potranno essere applicate direttamente ad esso ma dovranno invece essere applicate al suo elemento padre.

In sostanza dunque, il markup cui fare riferimento per poter utilizzare correttamente una di queste due classi dovrà essere del tipo di quello qui di seguito indicato:

<div class="uk-visible-hover">

<div class="uk-hidden">

... /*Contenuto inizialmente nascosto*/

</div>

</div>

In Passweb un markup di questo tipo si può ottenere, come al solito, utilizzando due Componenti Contenitore annidati ai quali assegnare le rispettive classi aggiuntive mediante l’apposito campo presente nella loro maschera di configurazione.

Infine per comprendere appieno la differenza tra queste due classi e cosa comporti effettivamente, per visualizzare un dato elemento, il fatto di impostare la proprietà display sul valore “block” piuttosto che sul valore “inline-block” è bene richiamare velocemente un concetto di base del CSS: gli elementi blocco e gli elementi inline

Cercando di semplificare al massimo questo concetto potremmo considerare una pagina web visualizzata all’interno di un browser come un insieme di tanti box rettangolari, non importa che si tratti di paragrafi, immagini, div o tabelle, si tratta pur sempre di box rettangolari.

Osservando attentamente l’immagine sopra riportata è possibile notare però come non tutti queste box rettangolari sono uguali. Alcuni contengono altri box al loro interno, altri sono invece contenuti all’interno dei primi.

Alcuni se si trovano (come accade in figura) in mezzo al testo lasciano che esso scorra loro intorno senza interromperne il flusso e senza andare a capo.

Questa considerazione piuttosto semplice, ci offre la rappresentazione della fondamentale distinzione tra elementi blocco (quelli in racchiusi in figura da un bordo nero) e elementi inline (quelli racchiusi in figura da un bordo rosso).

• Elementi blocco: sono box che possono contenere altri elementi, sia di tipo blocco che di tipo inline. Quando un elemento di blocco è inserito nel documento viene automaticamente creata una nuova riga nel flusso del documento stesso
• Elementi inline: non possono contenere elementi blocco, ma solo altri elementi inline (oltre che ovviamene il loro stesso contenuto, essenzialmente del testo). Quando sono inseriti in un documento non danno origine ad una nuova riga

Ogni elemento di una pagina web ha una sua visualizzazione predefinita, nel senso che, a default, è un elemento blocco (es. titoli, paragrafi, div …) oppure un elemento inline (es. span …). Attraverso la proprietà display possiamo agire su questi valori predefiniti trasformando, ad esempio, un elemento inline in uno di tipo blocco e viceversa.

I principali valori utilizzati per la proprietà display sono:

• block: l'elemento viene presentato come un blocco (a prescindere dalle sue caratteristiche di default);
• inline: l'elemento viene presentato come un in linea (a prescindere dalle sue caratteristiche di default);
• inline-block: l'elemento viene presentato come un blocco in linea, cioè un particolare tipo di blocco che pur avendo dimensioni, margini, padding e bordi come i normali elementi di tipo block, si dispone orizzontalmente e non produce alcun ritorno a capo;
• none: l'elemento non viene visualizzato nella pagina e non occupa alcun ingombro all'interno del documento.

Chiariti questi concetti possiamo ora tornare alle nostre due classi della sezione Utility avendo già ben chiaro cosa succederà nel momento in cui si dovesse utilizzare la classe .uk-visible-hover piuttosto che quella .uk-visible-hover-inline.

Nel primo caso, essendo applicata la proprietà display: block l’elemento visualizzato verrà considerato come un elemento blocco per cui verrà creata una nuova riga nel flusso del documento e eventuali contenuti successivi all’elemento visualizzato scorreranno verso il basso.

Nel secondo caso, essendo applicata la proprietà display: inline-block per cui l’elemento visualizzato comparirà sulla stessa riga senza produrre nessun ritorno a capo e, di fatto, senza interrompere il flusso del documento.