Sono talmente tanti i modi per nascondere un elemento in una pagina web che, quasi, ogni sviluppatore ha evoluto una propria strategia. Ma non tutti sono corretti, anzi i più diffusi sono proprio quelli da evitare. Ma quando potrebbe essere utile nascondere un elemento? Semplicemente quando l'elemento HTML non deve essere visualizzato dall'utente all'ingresso della pagina. Come, ad esempio, l'avviso dell'utilizzo da parte del sito dei cookies. Una volta premuto su "ok" oppurre un tasto analogo, quella parte di testo deve essere nascosta. Ecco allora che dobbiamo usare un metodo per nascondere l'ipotetico div. Il modo più comune e sfruttato, per colpa del JavaScript, è il classico display: none, utilizzato dagli sviluppatore per un veloce e facile nascondiglio. Questa regola CSS andrà letteramente ad eliminare dal DOM l'elemento, facendolo sparire alla vista del browser. È sicuramente il metodo più utilizzato ma non quello più sbagliato, nonostante resti da evitare . Il metodo completamente errato è quello di togliere la visibilità (visibility: hidden). Fu letteralmente disprezzato negli anni '90 perché tramite questa regola si potevano nascondere nelle pagine web miriadi di parole chiave, le quali non erano inerenti al contesto della pagina, ma che andavano ad indicizzare la pagina su Google su più potenziali ricerche. Con il risultato che poteva venirti presentata fra i primi risultati di Google un sito di ferramenta anche avevi introdotto "la pizzeria più vicina". Ma tecnicamente che differenze ci sono fra questi due pirmi metodi? Il primo che abbiamo visto elimina totalmente l'elemento dal DOM, facendo credere al parser che l'elemento non esiste. Il secondo, invece, lo nasconde semplice alla vista dell'utente, pur rimanendo sempre presente nella pagina HTML. Se invece noi rendessimo il Div così piccolo da essere invisibile? Anche questo metodo è da evitare. Il height: 0; width: 0; overflow: hidden; non è adatto ad un sito nato dopo il 2010. Provate a pensare a tutti quei ciechi che utilizzano un lettore di pagina e quanto possano indispettirsi a sentirsi dire parecchie parti inutili della pagina che, a visione dello sviluppatore, non dovevano nemmeno essere visualizzate. Per tanto anche il text-indent: -999px che sposta il nostro Div molto lontano dalla vista, ma che lo fa rimanere comunque presente nella pagina. Senza scordarsi del focus della pagina e sperare che il nostro Div non contenta alcun bottone.

Proseguiamo con i metodi quasi accettabili. Non perfetti, ma che tutto sommato non creano gravi danni a nessuna tipologia d'utenza. Il primo lo possiamo chiamare "rientro positivo" e si basa su: overflow: hidden; text-indent: 100%; white-space: nowrap; width: 20px;. Il difetto di questa regola è che è limitato a componenti inline e con una larghezza precisa. Quindi scordatevi l'adattamento a differenti schermi. Una variante accettabile del penultimo metodo potrebbe essere posizionare il Div fuori dallo schermo con queste regole: position: absolute; left: -999em;. Questa regola sposta interamente il contenuto oltre al bordo sinistre di 999 unità, legandolo alla posizione in modo assoluto.
Il metodo migliore per nascondere un div o qualsiasi altro elemento di una pagina HTML è sicuramente questo:

Tabella unicode.js
.hidden {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}