Come nascondere un oggetto HTML o un link con i tag display:none e visibility:hidden.

Come funzionano le proprietà display e visibility e come usarle per nascondere elementi HTML per questioni estetiche o per difenderci da chi ci copia.

So che molti colleghi che utilizzano la piattaforma Blogger sono spesso alle prese con l'esigenza di nascondere un elemento del layout. Può trattarsi di un link che dà fastidio o di una icona nativa di Blogger come il bottone con contatore di Google+ che impedisce l'installazione di altri bottoni in modo simmetrico. 

Un esempio di una procedura di questo tipo l'ho trattato con il post su come nascondere il link all'autore del blog nella versione mobile di Blogger. Per meglio illustrare questa procedura partiamo da lontano. Gli elementi HTML si dividono in elementi di blocco, elementi inline, elementi di lista e elementi connessi alle tabelle. Gli elementi di lista sono quelli inseriti negli elenchi mentre quelli connessi alle tabelle sono appunti inseriti in quest'ultime.

Soffermiamoci un po' di più sugli elementi di blocco e elementi inline:

1. elementi di blocco - sono contenitori che possono contenere altri elementi, sia di tipo blocco che inline. Quando un elemento blocco è inserito nel documento viene creata una nuova riga. Sono elementi di blocco il tag del paragrafo <p> e il tag dei titoli <h1>, <h2>, ecc.
2. elementi inline - non possono contenere elementi blocco, ma solo altri elementi inline oltre al loro contenuto. Quando sono inseriti in un documento non danno origine ad una nuova riga. Un esempio classico è il tag <span> che aggiunge nuovo testo ma nella stessa riga.

Con la proprietà display possiamo modificare un elemento di blocco in un elemento inline e viceversa. La sintassi da usare per questa operazione è la seguente

nome-selettore {display: valore;}

e le regole base sono mostrate in questa tabella

Valore	Descrizione
block	l'elemento diventa un elemento di blocco
inline	l'elemento assume la caratteristica di un elemento inline
inline-block	l’elemento potrà avere dimensioni esplicite (width. height, margin e padding) come gli elementi di blocco ma si disporrà orizzontalmente come gli elementi inline potendo avere testo a sinistra e a destra ed essere allineato verticalmente
none	l’elemento non viene mostrato come se non fosse nemmeno presente nel documento, in quanto non genera alcun contenitore. Serve per nascondere un elemento con il CSS

Facciamo due esempi pratici. Se vogliamo che un elemento sia mostrato nella stessa riga degli altri e non ne crei automaticamente un altra dovremo aggiungere questo codice style="display:inline;" mentre se volessimo che un elemento non avesse niente alla sua sinistra e alla sua destra dovremo aggiungere questo codice style="display:block;". 

DISPLAY:NONE PER NASCONDERE UN ELEMENTO

Quando si vuole nascondere un elemento si utilizza il tag display:none; che è molto potente e che può servire sia per aggiustare il modello sia anche nei post. Utilizzando i tool Ispeziona Elemento di Chrome e Analizza Elemento di Firefox o altri metodi equivalenti possiamo per esempio nascondere le sidebar nelle pagine statiche dei blog su Blogger. 

Facciamo un altro esempio. Se volessimo nascondere l'elemento Pubblicato da... nel footer del blog dovremo trovare il suo selettore che in questo caso è .post-author

Il codice da incollare sopra alla riga ]]></b:skin> in Modello > Modifica HTML è quindi

.post-author {display:none !important;}

dove è stato aggiunto !important per dare priorità a questa regola rispetto alle altre già presenti nel modello. Dopo aver salvato il template si avrà questo risultato

Come vedete dallo screenshot con display:none; è come se l'elemento selezionato non esistesse.

VISIBILITY:HIDDEN PER NASCONDERE MANTENENDO LO SPAZIO

L'utilizzo del tag visibility:hidden; è una possibile alternativa a display:none; qualora si volesse nascondere un elemento mantenendo però inalterato lo spazio che occupava. Riprendendo l'esempio fatto qui sopra se nel modello e nella stessa posizione incollassimo questa riga

.post-author {visibility:hidden !important;}

otterremmo questo risultato 

COME CREARE UN LINK NASCOSTO E COME USARLO CONTRO CHI COPIA

I tag display:none; e visibility:hidden; possono essere usati non solo nel modello ma anche in un singolo post. Non so quanto questa pratica possa essere considerata legittima ma si possono inserire nei post dei link nascosti verso il nostro blog. Se qualcuno copia i nostri post e li ripubblica, o anche se ripubblica i feed senza il nostro consenso, ripubblicherà anche questi link nascosti.

Per creare un collegamento invisibile possiamo aggiungere questo codice in uno o più articoli

<div style="display:none;"><a href="URL DEL LINK">ANCHOR TEXT</a></div>

Al posto di URL DEL LINK possiamo inserire l'indirizzo dell'articolo e al posto di ANCHOR TEXT il titolo dell'articolo stesso. I motori di ricerca rileveranno questi collegamenti nascosti e questo sarà un modo per convincere Google che siamo la fonte originale dei contenuti. Questo inserimento può essere fatto anche immediatamente dopo che si è pubblicato il post.