Bert Boscreato il 6 Feb 2003;
ultimo aggiornamento: vedi documento originale
it
Home tutorial in Italiano;
Originale di questa pagina;
Traduzione di ratoize,
consulenza lingua Inglese: English Conversation;
Ultimo aggiornamento traduzione: 30 Mag 2008;
(This page uses CSS style sheets)
Normalmente un URL punta ad una pagina. Ma quando l'URL termina con "#qualcosa" esso prende di mira uno specifico elemento della pagina. I browser tipicamente cercano di far sì che l'elemento preso di mira sia visibile e se possibile in cima allo schermo.
Con il selettore ':target', si può; aggiungere uno specifico stile all'elemento preso di mira, affinchè riceva più; attenzione.
Ma si può; fare di più;. Si può; nascondere o visualizzare un elemento sulla base del fatto che sia o no l'elemento target. Sotto c'è un esempio. Esso mostra un piccolo menu con quattro opzioni ed ognuna è associata ad un testo. All'inizio non è mostrato nessun testo. Ogni opzione è un link ad un elemento con un target ID (#item1, #item2...) e questi elementi sono visibili solo quando sono il target dello URL corrente.
Si provi a cliccare sulle opzioni del menu e a guardare alla barra degli indirizzi del browser lo URL corrente.
Questo è l'elemento che corrisponde allo item 1. Non dovrebbe essere visibile, a meno che non si è cliccato sul link che punta a "#item1".
Se si è passati ad item 2, allora questo elemento dovrebbe essere visibile.
Questo elemento è visibile se si è cliccato sul terzo item del menu. L'elemento ha un URL, che si può anche usare altrove. Si può metterlo su qualche altra pagina Web e saltare direttamente su questa.
Ecco come funziona. Ci sono due parti importanti, il sorgente HTML e la proprietà; 'display'. Per primo il documento HTML. Esso ha alcuni link ed elementi con il corrispondente ID:
<p>
<a href="#item1">item 1</a>
<a href="#item2">item 2</a>
<a href="#item3">item 3</a>
<a href="#default">clear</a>
<div class="items">
<p id="item1">... item 1...
<p id="item2">... item 2...
<p id="item3">...
<p id="default"><!-- by default, show no text -->
</div>
Le regole di stile inizialmente nascondono tutte le P all'interno del DIV, ma poi visualizzano la P che è il target corrente:
div.items p {display: none}
div.items p:target {display: block}
Tutto qui. L'esempio sopra continua con l'aggiunta di qualche colore, margine, bordi, etc., affinchè possa sembrare meglio un menu. Si può; guardare al sorgente di questa pagina per vedere come è fatto.
In realtà;, abbiamo aggiunto 'p:not(:target)', per assicurare che solo i browser CSS3 nascondano l'elemento. Quindi le regole migliori sono queste:
div.items p:not(:target) {display: none}
div.items p:target {display: block}
Una volta capito quanto sopra, non è difficile divertirsi a creare una vera interfaccia a schede: un insieme di regole di stile che non solo mostrano diversi contenuti in base al bottone premuto, ma cambiano anche l'aspetto del bottone stesso.
Ecco qui un esempio. Esso non usa 'display: none', ma 'z-index'. Se si vuol sapere come funziona, dare semplicemente uno "sguardo al sorgente"...
Questa pagina è basata sull'originale idea di Daniel Glazman. Guardare la spiegazione nel suo "blog" del 9 Gen 2003 e la sua demo del 13 Gen.