Ultimamente ho visto un sacco di tutorial che utilizzano :bersaglio in CSS per fare un lavoro di fantasia quindi ho pensato di prendermi il tempo per scavare davvero e discutere come e perché funziona questa sintassi. Invece di seguire ciecamente il codice di qualcun altro, dovresti essere in grado di maneggiare questo strumento con la consapevolezza di cosa sta accadendo in che modo influenza il supporto del browser.
Continua a leggere per imparare tutto sulle funzionalità di base associate a :bersaglio pseudo classe e come si può estendere la capacità di eseguire tutti i tipi di cose pazze con puro CSS. Lungo la strada costruiremo alcuni esempi di navigazione e presentazione fantastici dai quali imparare.
Cos'è: target?
In CSS, :bersaglio è un selettore di pseudo classe. Ricordate dal nostro articolo su: before e: after, che le pseudo classi sono un modo per selezionare un intero pezzo del vostro documento HTML mentre gli pseudo elementi possono essere usati per selezionare una? Sotto-parte? di un elemento. Per aiutare a illustrare questo punto, ecco alcuni esempi di ciascuno:
La pseudo-classe che probabilmente conosci meglio è : hover, che ti consente di dichiarare uno stile speciale che verrà attivato quando l'utente si muove sopra un elemento. Il :bersaglio Allo stesso modo, la pseudo classe consente lo styling personalizzato che verrà attivato in base a uno scenario specifico.
Identificatore di frammenti
L'evento speciale per il :bersaglio la pseudo classe dipende da qualcosa chiamato "identificatore di frammento". C'è una storia complicata e una spiegazione dietro a questi, ma tutto quello che devi sapere è che quando discutiamo di identificatori di frammenti, ci riferiamo a un hashtag associato a una parola o una frase alla fine di un URI.
Questi sono abituati a? Bersaglio? un punto specifico in una pagina HTML e sono associati a un ID (che utilizza anche la sintassi dell'hashtag). Se associato, l'URI può essere utilizzato per passare al suo ID di accompagnamento. Ecco una pagina di prova rapida che ho montato che illustra questa funzionalità.
Questa pagina contiene una serie di tag h1, ognuno dei quali possiede un ID univoco. Ecco la struttura di base:
Questa struttura è associata a un semplice menu di navigazione costituito da voci di elenco contenenti tag di ancoraggio. Ogni tag di ancoraggio punta a uno degli identificatori di frammento che abbiamo impostato. La funzionalità qui è estremamente utile: quando fai clic su una delle voci dell'elenco, la pagina salta automaticamente all'intestazione corrispondente. Fai un tentativo per vederlo in azione. Tieni presente che funziona con puro HTML, non è necessario alcun CSS.
Leveraging: target Per creare eventi click
Ora che abbiamo una semplice demo attiva e funzionante che utilizza ID univoci e identificatori di frammenti, è ora di tirare fuori la nostra :bersaglio pseudo classe. Qualcosa dentro a :bersaglio il blocco di stile sarà attivato solo quando un identificatore di frammento è attualmente attivo nell'URI. In un modo, :bersaglio può essere utilizzato per creare l'evento di clic CSS mai elusivo.
Ad esempio, supponiamo di voler fare in modo che l'elemento cliccato nel nostro menu di navigazione sia in qualche modo modificato. Ciò consentirà agli utenti di identificare chiaramente la sezione a cui stanno saltando. Per fare ciò, useremo il selettore? H1: target? e aggiungere qualche variazione attraverso la dimensione del carattere, il colore e la decorazione del testo. Dai un'occhiata alla demo qui.
Animalo
Sei libero di usare :bersaglio praticamente comunque lo useresti : hover, il che significa che puoi divertirti tantissimo aggiungendo effetti di animazione. Qui abbiamo aggiunto una piccola transizione per il cambio colore. Guardalo dal vivo qui.
Manipolazione di oggetti non mirati
Diciamo che volevamo cambiare anche il paragrafo di accompagnamento quando una determinata intestazione è mirata. Questo può sembrare difficile dal momento che abbiamo già impostato la nostra struttura HTML in modo che gli ID univoci vengano utilizzati solo sui tag h1, ma ricorda che i CSS ci forniscono un numero di potenti selettori. Possiamo effettivamente utilizzare un clic sull'elemento di destinazione per manipolare altri oggetti sulla pagina.
Nel nostro esempio, il targeting dell'elemento di paragrafo dopo il clic su h1 è facile come estrarre il combinatore fratello adiacente. Il codice è sotto e la demo è qui.
Crea una presentazione CSS semplice
Dato questo come un punto di partenza, gli sviluppatori sono arrivati con un sacco di grandi applicazioni per l'utilizzo del :bersaglio pseudo classe. Puoi usarlo per creare una pura interfaccia a schede CSS o anche una presentazione di immagini. Vediamo come creare quest'ultimo.
Per iniziare, dobbiamo codificare una lista non ordinata. Ogni elemento della lista conterrà un tag di ancoraggio che punta a un identificatore di frammento, seguito da un'immagine con un ID corrispondente.
Ora useremo un posizionamento intelligente per spingere tutto al suo posto e, naturalmente, un po ' :bersaglio magia per far funzionare tutto. Vedi se riesci a capire cosa sta succedendo qui prima che ti faccia vedere.
Per prima cosa abbiamo spostato i nostri elementi di elenco a sinistra, abbiamo stilizzato il testo e applicato un effetto hover. La parte interessante del posizionamento è che abbiamo spostato tutte le nostre immagini dalla parte di testo delle loro voci di lista usando la meravigliosa tecnica di posizionamento assoluto all'interno di un genitore relativamente posizionato. Leggi questo articolo per sapere tutto su come funziona.
Successivamente, impostiamo lo z-index di tutte le immagini su -1, quindi impostiamo lo z-index dell'immagine mirata su 1. Ciò fa sì che l'elemento della lista su cui fai clic per portare la sua immagine sopra le altre. Per rendere il passaggio piacevole e graduale, riduciamo a zero l'opacità delle altre immagini e aggiungiamo una transizione CSS3. Vedi la demo della presentazione CSS pura qui.
Supporto del browser
Il :bersaglio pseudo class selector è un selettore di livello CSS tre, che offre un supporto eccezionale su quasi tutti i browser in circolazione? tranne ovviamente per IE. Il buon vecchio Internet Explorer supporta i selettori CSS3 nelle versioni 9 e 10, ma niente di più vecchio di quello.
Per questo motivo, è in gran parte poco saggio da usare :bersaglio su tutto ciò che influisce direttamente sul successo dell'interazione dell'utente. Ad esempio, potrebbe andare bene per gli stili di differenziazione facoltativi dai nostri primi esempi, ma la nostra presentazione non funzionerà affatto per IE8 e per gli utenti meno recenti.
Selectivizr To The Rescue
Come con qualsiasi problema di selettore CSS3 di IE, c'è in realtà una soluzione piuttosto semplice che consente di utilizzare :bersaglio senza escludere i tristi esseri umani che eseguono versioni antiquate di un browser costruito da Microsoft: Selectivizr.
È sufficiente inserire la libreria JavaScript preferita come jQuery o MooTools, quindi incollare uno snippet di codice da Selectivizr e il resto viene gestito in modo completamente automatico. Selectivizr lavorerà con il suo voodoo per portare il supporto per selettori CSS3 a IE6 e versioni successive.
Conclusione
Utilizzare pseudo classi può essere complicato, ma una volta che hai capito come funzionano alcuni di loro, il tipo di cose che potrai utilizzare con puro CSS ti stupirà. Il bersaglio? la pseudo classe è un ottimo esempio di qualcosa che può cambiare radicalmente il modo in cui si strutturano le interazioni dell'utente. Basta essere sicuri di non scappare e usarlo troppo senza considerare le implicazioni che avrà sul supporto del browser.
Lascia un commento qui sotto e facci sapere cosa ne pensi :bersaglio. L'hai mai usato in un vero progetto? Perché o perché no?