Introduzione ai CSS - La proprietà display
Thursday 24 January 2008 Marco Bertoni, ultimo aggiornamento: Tuesday 19 August 2008.
Come controllare il comportamento dei box generati dagli elementi?
Con la proprietà display, ovviamente. I quattro valori più comuni per questa proprietà sono i seguenti (se desideri approfondire consulta la specifica CSS):
block- L'elemento inizia e finisce su una nuova riga, per esempio un paragrafo
p. inline- L'elemento è visualizzato in un box posizionato sulla stessa riga del contenuto precedente, per esempio gli elementi
span,emstrongecc. list-item- L'elemento è visualizzato come un box con un etichetta (glifo) che può essere o meno visibile in funzione dei valori associati alla proprietà
list-style. Si applica tipicamente all'elementolidi HTML. none- L'elemento non genera nessun box nella struttura di formattazione. E' rimosso dal flusso del documento. Questo vale anche per gli eventuali discendenti.
La proprietà display con valore none è a volte utilizzata per nascondere ai browser visuali porzioni di codice destinate ai lettori di schermo (per esempio aiuti alla navigazione che si desidera veicolare solo agli utenti non vedenti) utilizzando regole CSS come la seguente:
.nascosto { display: none; }
Alcuni screen reader non leggono il contenuto degli elementi nascosti con questo metodo, vanificando il senso della tecnica.
Bob Easton ha sviluppato una soluzione, chiamata off-left, per ottenere lo stesso risultato senza utilizzare la proprietà display:
.nascosto {position: absolute;left: -999px;width: 990px;}
Esistono molte varianti, per esempio io utilizzo la seguente regola quando desidero nascondere qualcosa:
.invisibile {position: absolute;visibility: hidden;overflow: hidden;left: -10000px;}
Il principio è lo stesso: con il posizionamento assoluto (che studieremo in dettaglio in un prossimo articolo) si può posizionare un elemento con precisione senza modificare la sua posizione nel codice e senza influenzare gli elementi circostanti. In questo caso noi collochiamo gli elementi con classe invisibile fuori dall'area di visualizzazione (left: -10000px;1). Il contenuto non potrà essere visto, ma rimarrà disponibile per il lettore di schermo.
Per approfondire leggi la pagina dedicata all'argomento del Wiki della lista CSS-discuss.
Contribuisci alla serie di articoli Introduzione ai CSS
Note
- Ovviamente è necessario fare attenzione al lato: a sinistra per i nostri browser. Ma se la direzione del testo fosse da destra a sinistra allora la regola dovrebbe diventare
right: -10000px;. Possiamo anche spostare l'elemento verso l'alto, ma questa opzione mi ha creato a volte qualche problema per cui la sconsiglio. [indietro]
Friday 25 January 2008 7:59
La soluzione proposta non dovrebbe mai essere usata in IE7 se:
1) l’elemento contenitore dell’elemento da nascondere ha una larghezza dichiarata.
2) la larghezza è pari al 100%.
in questo caso si verifica un bug, segnalato a Gerard Talbot su gtalbot.org.
Ossia barra di scorrimento orizzontale, un bug che aveva già Netscape 7.0.
Friday 25 January 2008 9:38
Grazie per la segnalazione Gabriele ;). Non ho mai avuto questo problema, ma ora farò qualche test!.
Friday 25 January 2008 14:44
Confermo quanto scritto da Gabriele, anche se, il comportamento è anomalo: IE7 a volte lo manifesta e a volte no.
Misteri dell’ eXplorazione !
A tal proposito posso segnalare un’altra tecnica segnalata da Tom Gilder che da una proprietà ai selettori :focus ed :active per nascondere degli elementi che non saranno graficamente visibili, ma sono riconosciuti dal focus tramite tastiera.
Friday 25 January 2008 14:48
Ottimo ragazzi :). Aggiornamento (27/01): ho fatto qualche test ma non riesco a riprodurre il bug indicato da Gabriele :(. Con il metodo che uso:
.invisibile {
position: absolute;
visibility: hidden;
overflow: hidden;
left: -10000px;
}
Non mi compaiono barre di scorrimento in IE7, sia con larghezza esplicita del contenitore, sia con larghezza 100%. Ritengo che sia la dichiarazione
overflow: hidden;a evitare il tutto. Ecco il codice HTML che ho usato:<div id="contenitore">
<div class="invisibile">Testo da non visualizzare.</div>
<p>Normale paragrafo</p>
</div>
Thursday 31 January 2008 11:52
Vi ringrazio, ho finalmente capito perché un giorno mi è comparsa questa barra di scorrimento orizzontale.
Devo dire che a me succede con IE 6, anche usando il codice di Marco. Con IE 7 non ho ancora provato
Thursday 31 January 2008 11:59
E’ davvero strano questo fatto.
Una domanda: tu usi Windows con i temi oppure, come me, selezioni la visualizzazione classica? A volte ho notato che il tema di Win XP modifica la viewport provocando proprio problemi di overflow.
Thursday 31 January 2008 14:56
In effetti il tema usato influisce, così come la versione del S.O. utilizzato.
Personalmente rilevo comportamenti differenti tra XP sp. 2 e Vista.
Friday 1 February 2008 9:47
Se la domanda ‘tu usi Windows con i temi ‘ era rivolta a me, uso il tema che usa lo stile di windows XP e IE6, sulla mia postazione in ufficio.
In effetti la barra di scorrimento compare anche con IE 7, mi ricordo di averlo verificato sul computer che ho a casa, che appunto ha IE7.
Friday 1 February 2008 9:50
Si era rivolta a te ;). A questo punto proverò a fare un test più approfondito, perché a me questo bug proprio non compare.