Visualizza Nessuno - che cos'è? Proprietà e uso

Ci possono essere casi in cui si sta lavorando allo sviluppo di pagine Web in cui è necessario nascondere determinate aree o elementi per un motivo o per un altro. Puoi semplicemente eliminare questi elementi nel markup HTML. Ma ci sono casi in cui è necessario che rimangano nel codice, ma non visualizzati nella finestra del browser, per qualche motivo. Per mantenere l'elemento nel tuo HTML, ma allo stesso tempo renderlo invisibile, dovresti fare riferimento ai mezzi del CSS.

Come nascondere elementi con i CSS

Esistono due modi comuni per nascondere un elemento nel codice HTML. Uno di questi è usare le proprietà di visualizzazione o visibilità. A prima vista, queste due proprietà possono sembrare uguali, ma ognuna di esse ha le sue caratteristiche, di cui dovresti essere a conoscenza. Diamo uno sguardo più da vicino alle differenze tra visibilità: nascosto e display: nessuno.

Proprietà di visibilità

La prima opzione nasconde l'elemento dal browser, ma questa parte nascosta del codice occupa ancora spazio sulla pagina web. In altre parole, rende invisibile l'elemento, ma rimane comunque al suo posto e occupa lo spazio che occuperebbe se fosse visibile. Se si posiziona un tag div su una pagina e si utilizza il CSS per impostarne le dimensioni, la visibilità: la proprietà nascosta renderà il blocco non visibile nella finestra del browser, ma il testo successivo si comporterà come se il blocco fosse ancora presente.

Questo perché l'elemento rimane nel flusso. La proprietà visibilità è utilizzata abbastanza raramente e di solito insieme ad altre impostazioni. Se usi anche altre configurazioni CSS, come il posizionamento, puoi prima usarlo per nascondere l'elemento, ma in modo da poterlo riportare nel luogo quando passi il cursore. Questo è un possibile utilizzo della proprietà visibilità, ma non è accessibile troppo spesso.

Il display: nessuna proprietà e il suo uso in CSS

A differenza della proprietà visibility, che lascia un elemento nello stream, la seconda proprietà CSS, che viene utilizzata per nascondere gli elementi, consente di nascondere un blocco come se non fosse lì. Per un div, display none funziona come se rimuovesse completamente questo elemento dal documento. Non occupa spazio, sebbene rimanga ancora nel codice sorgente HTML. L'oggetto non apparirà sul tuo sito e non ci saranno prove visibili della sua esistenza. Dato che gli elementi circostanti saranno considerati come spazio vuoto e si spostano, a seconda delle loro proprietà. Questo perché cade fuori dal flusso. Questa proprietà può essere applicata con successo o meno, a seconda delle intenzioni del creatore. In ogni caso, non dovrebbero essere abusati.

Usando la proprietà durante il layout

I progettisti di layout utilizzano spesso il display: nessuna proprietà durante il test di una pagina. Questo di solito accade se hai bisogno di nascondere un'area per un po 'in modo da poter testare altre aree della pagina. In questo caso, usa display: none. È importante ricordare che l'articolo deve essere restituito alla pagina prima che il sito sia effettivamente lanciato. Il punto è che un elemento che viene rimosso dallo stream utilizzando questo metodo diventa invisibile ai motori di ricerca e agli screen reader, anche se continua a rimanere nel markup HTML.

In passato, questo metodo è stato utilizzato per cercare di influenzare il posizionamento nei motori di ricerca. Ma ora gli elementi che non sono visualizzati possono essere contrassegnati con una bandiera rossa di Google per capire perché questo approccio viene utilizzato. Uno dei modi per utilizzare display: nessuno con vantaggio sta creando siti web con design reattivo. Quando si scrive codice per tali pagine Web, è spesso necessario creare elementi disponibili per la visualizzazione solo in una determinata risoluzione, ma nascosti per altre opzioni. Puoi usare display: none in CSS per nascondere questo elemento e poi riaccenderlo più tardi. Questo è un uso accettabile di questa proprietà, perché è impossibile sospettare un tipografo nel tentativo di nascondere qualcosa per motivi di influenza sui motori di ricerca.

Mappatura delle proprietà JavaScript

La proprietà display è una proprietà importante del CSS, ma è anche comunemente utilizzata in JavaScript per nascondere e visualizzare elementi senza eliminarli e ricrearli. Per cambiare la visualizzazione dell'elemento div, puoi usare non solo CSS, ma anche JavaScript. In questo caso, viene utilizzato il seguente codice:

. Un'altra opzione è usare la libreria jQuery. Come il display CSS: nessuna proprietà per un div, il metodo jQuery "hide () nasconde anche gli elementi selezionati.Le parti nascoste del codice non verranno affatto visualizzate.

Screen reader e visibilità degli oggetti

I lettori di schermo, i cosiddetti "lettori", cambiano il loro comportamento quando trovano nel contenuto un elemento nascosto con display: nessuno. Il contenuto nascosto, di norma, non informa i lettori su se stesso, se gli attributi dell'etichetta non sono registrati in esso. Ci sono situazioni in cui gli sviluppatori possono volere che i contenuti siano nascosti visivamente, ma divulgati agli utenti di screen reader. Ad esempio, il design potrebbe richiedere frasi ambigue, come "altro", in cui il contesto è visivamente ovvio, ma potrebbe essere perso per gli utenti di screen reader. Per ovviare a questo, lo sviluppatore può fare quanto segue: scrivere una regola CSS con un blocco di visualizzazione o nessuna e aggiungere markup con una descrizione di questo elemento.

Problemi con gli screen reader

Il problema è che nasconde il contenuto dal display: nessuno nasconde anche il contenuto degli utenti che leggono dallo schermo. Per aggirare questo problema, gli sviluppatori hanno iniziato a posizionare il contenuto utilizzando diversi metodi, ad esempio il posizionamento assoluto con la larghezza e l'altezza specificate dell'elemento e l'overflow: proprietà nascosta. Quando si utilizza il markup con una descrizione in questo caso, le informazioni contestuali non vengono visualizzate sullo schermo, ma vengono annunciate agli utenti di screen reader. Ma se controlli i siti per l'accessibilità, molto spesso ci sono elementi che sono erroneamente nascosti usando il display: nessuna proprietà. Gli esempi più comuni sono collegamenti progettati per aiutare gli utenti di tastiera e screen reader. L'ironia è che queste buone intenzioni svaniscono e rendono inutili i collegamenti a causa dell'uso del display: nessuno.

Regole di base per risolvere i problemi di accessibilità

A causa di problemi con i motori di ricerca e varie opzioni per la percezione delle informazioni, è necessario prestare attenzione quando si utilizza il display: nessuno. Questo non significa che non dovresti usarlo affatto. Questa proprietà ha molte qualità che lo rendono quasi indispensabile per alcune operazioni.

Ecco alcune regole che dovrebbero aiutare a determinare quando e come nascondere gli elementi visivamente:

1. Se è necessario nascondere visivamente il contenuto, ma lasciarlo disponibile per i programmi di lettura, non utilizzare per la visualizzazione del testo: nessuno.
2. Se il contenuto che stai nascondendo può essere utile solo agli utenti che usano screen reader, considera se vuoi nasconderlo. Se si decide ancora di nasconderla, assicurarsi che diventi visibile durante la messa a fuoco.
3. Se vuoi nascondere qualcosa temporaneamente e visualizzarlo come risultato dell'interazione dell'utente, visualizza: nessuno può essere solo ciò di cui hai bisogno. Un fattore importante in questo caso è che, poiché piuttosto utilizzerai JavaScript per rendere visibile il contenuto modificando il valore della proprietà display, devi tenere presente che dovrai anche nasconderlo per gli utenti che non hanno JS.

Quando si lavora con la visualizzazione dei contenuti, tutto si riduce alla realizzazione del display: nessuno nasconde il contenuto di tutti coloro che utilizzano i CSS per il browser.