
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Usare nel modo migliore il nuovo selettore previsto nella specifica CSS3
Di tutte le parti della specifica CSS3 che i browser stanno implementando, ce n’è una già abbastanza diffusa e di grande potenziale che potrebbe valere la pena di approfondire.
Mi riferisco alla pseudoclasse :target.
L’oggeto in questione è pensato per individuare gli elementi di una pagina che sono il bersaglio di un link con identificatore di frammento (ovvero le ancore interne, cioè quegli URI che terminano con #id-elemento).
Il concetto è più o meno lo stesso della ben più famosa (e utilizzata) pseudoclasse :hover, l’unica differenza sta solo nell’oggetto puntato.
Al momento in cui scrivo, :target è già supportato da Safari, Firefox e Opera 9.5. Purtroppo non è ancora implementato in Internet Explorer (confidiamo nella prossima versione 8) ma in compenso i browser con cui possiamo sfruttarne le potenzialità occupano tra tutti, per il momento, una percentuale di mercato pari a circa il 25% e questo valore è sufficente da giustificarne l’uso in determinati contesti come progressive enanchement (un miglioramento completamente degradabile quando non supportato).
Per capire come funziona, sviluppiamo un esempio base che sia familiare a tutti: creeremo alcuni div posizionati in modo assoluto, in modo da emulare il comportamento delle finestre del nostro desktop:
<div id=”f1″ class=”finestra”></div>
<div id=”f2″ class=”finestra”></div>
<div id=”f3″ class=”finestra”></div>
Diamo uno stile:
div.finestra {
background: #ececec;
color: #333;
position: absolute;
margin: 0px;
padding: 0px;
z-index: 1;
}
div#f1 { }
div#f2 { }
div#f3 { }
Aggiungiamo un piccolo menu su lista:
<ul>
<li><a href=”#f1″>Finestra 1</a>
<li><a href=”#f2″>Finestra 2</a>
<li><a href=”#f3″>Finestra 3</a>
</ul>
Quello che vogliamo ottenere è una modifica dello z-index dell’elemento puntato dal menu, in modo tale che risulti in primo piano.
Per ottenere questo, basta semplicemente definire la seguente regola:
div.finestra:target { z-index: 5; }
Che, in italiano corrente si legge: “Imposta lo z-index a 5 a tutte le div di classe .finestra che sono il bersaglio di un’ ancora interna“.
Se avete un browser che supporta :target, potete osservare l’esempio all’opera.
Se ci troviamo a gestire una singola pagina, divisa in sezioni di contenuto differente, raggiungibili da link interni, allora :target può venirci incontro per migliorarne notevolmente l’usabilità.
<!– Il nostro elenco puntato –>
<ul>
<li><a href=”#sez1″>Sezione 1</a>
<li><a href=”#sez2″>Sezione 2</a>
<li><a href=”#sez3″>Sezione 3</a>
<li><a href=”#sez4″>Sezione 4</a>
<li><a href=”#sez5″>Sezione 5</a>
</ul>
<!– Il corpo della pagina diviso in sezioni –>
<h2 id=”sez1″>Sezione 1</h2>
<p> ….. </p>
<hr />
<h2 id=”sez2″>Sezione 2</h2>
<p> ….. </p>
<hr />
<h2 id=”sez3″>Sezione 3</h2>
<p> ….. </p>
<hr />
<h2 id=”sez4″>Sezione 4</h2>
<p> ….. </p>
<hr />
Definendo una semplice regola di target possiamo evidenziare il titolo della sezione puntata dai link:
h2:target { background: #ffff00; }
Oppure, ancora, combinare l’uso di altri selettori per selezionare porzioni ancora diverse. Come i paragrafi successivi della sezione:
h2:target + p { background: #ff3333; }
Oppure, di nuovo, per selezionare tutte le parole marcate da <strong> dentro ai paragrafi:
h2:target + p > strong { background: #000000; color: #ffffff; }
O ancora, selezionare solo la prima linea dei paragrafi della sezione:
h2:target + p:first-line { background: #ff0000; }
Insomma: le possibilità sono molteplici, l’unico limite in questo senso è l’implementazione nei browser dei vari selettori e delle pseudo-classi che si intendono usare.
Anche se l’esempio presentato può sembrare di scarsa utilità pratica, vi invito a riflettere come possa essere applicato con successo in situazioni più comuni: ad esempio per gestire la trovabilità delle informazioni negli archivi di un blog, permettendo di evidenziare con un click tutti i post presenti in una determinata categoria e nascondere i restanti; oppure ancora per incrementare l’usabilità dei menu a tendina, che sono caratterizzati da un alto livello di annidamento di link. Una volta imparato ad utilizzare lo strumento, le idee su come applicarlo con successo verrano da sole.
Un menu a tab è costituito da alcuni pannelli che vengono visualizzati uno alla volta, in mutua esclusione.
Attualmente per implementarne uno che funzioni su tutti i browser occorre ricorrere a Javascript per gestirne la visualizzazione. Il metodo che stiamo per vedere fa uso di :target e la sua realizzazione non richiede altro che puro CSS. Purtroppo però, come gia accennato nell’introduzione, questa soluzione non è cross-browser (si spera però che lo sarà in futuro!) e quindi prendetela come un esercizio di stile.
Vediamo per prima cosa il markup:
<!– Le Tab –>
<a href=”pannello1″>Pannello 1</a> <a
href=”pannello2″>Pannello 2</a>
<!– I pannelli –>
<p id=”pannello1″> …. </p>
<p id=”pannello2″> …. </p>
Per praticità l’esempio è ridotto all’essenziale (due link e due paragrafi), il suo scopo è solo quello di apprenderne il funzionamento. Tutti gli abbellimenti del caso sono lasciati alla vostra fantasia.
Adesso, tramite soltanto due linee di CSS faremo funzionare il tutto:
p { display:none; }
p:target { display: block; }
La prima regola nasconde tutti i paragrafi (che sarebbero, idealmente, i nostri pannelli).
La seconda regola si occupa di far tornare visibile il relativo pannello puntato da uno dei link (i tabs).
Ecco una prova su strada di quanto visto.
Come visto dai pochi esempi proposti il potenziale di :target è notevole. Anche se è ancora presto per poterlo utilizzare efficacemente per soluzioni complesse, vi invito comunque a farne uso come progressive enanchement: grazie ai browser di nuova generazione i CSS3 sono sempre più vicini, e non c’è motivo per non cominciare a familiarizzare con ciò che viene implementato.
Per concludere eccovi alcuni link di approfondimento sull’argomento:
Se vuoi aggiornamenti su Approfondimento su :target inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
In questa seconda parte del video vedremo come migliorare il testo creato nel tutorial precedente: è possibile aggiungere un nuovo […]
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Usare in maniera creativa la proprietà CSS che consente di aggiungere ombre sotto una porzione di testo
Esaminiamo le tecniche di base per costruire un’area editabile all’interno di pagine web
Scegliere la giusta persona verbale in base al contesto
La guida alle opzioni di base di HitFilm Express, il software per l’editing video con molte funzioni di stampo professionale.