Cos'è l'obiettivo in css. Evento click CSS puro senza: target. Come creare un collegamento ipertestuale in HTML usando href

Oggi parleremo delle principali funzioni legate con pseudo classe : obbiettivo e come puoi usarlo per creare straordinari effetti CSS puri, impara come creare presentazioni usando css e molto altro.

Che cos'è: obiettivo?

h1 (font: grassetto 30px / 1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;) h1: target (font-size: 50px; decorazione del testo: sottolineato; colore: # 37aee4;)

Aggiungi animazione

Ravviviamo il nostro effetto e aggiungiamo un po' di animazione, come una piccola transizione per cambiare il colore. Vedere come funziona.

h1 (font: grassetto 30px / 1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; -webkit-transition: colore 0,5 s; -moz-transition: colore 0,5 s; -o-transition: colore 0,5 s facilità; -ms-transition: facilità colore 0,5 s; transizione: facilità colore 0,5 s;) h1: target (dimensione carattere: 50 px; decorazione del testo: sottolineato; colore: # 37aee4;)

Gestione di oggetti non target

Supponiamo di voler modificare gli stili del paragrafo che segue l'intestazione selezionata.

È molto facile farlo con il seguente codice. Vedi demo.

h1: target + p (sfondo: # f7f7f7; padding: 10px;)

Creare una semplice presentazione con CSS

Gli sviluppatori hanno creato tonnellate di app che utilizzano la pseudo-classe : obbiettivo... Questo pseudo selettore può tornare utile quando si creano schede o persino presentazioni. Vediamo come è possibile implementare quest'ultimo.

Per creiamo una lista non ordinata. Ogni elemento nell'elenco conterrà un tag di ancoraggio che punta all'ID dello snippet e un'immagine con l'ID corrispondente.

• Uno
• Due
• Tre
• quattro
• Cinque

Ora aggiungiamo i nostri stili:

* (margin: 0px; padding: 0px;) #slideshow (margin: 50px auto; position: relative; width: 400px;) ul (list-style: nessuno;) li (float: left; overflow: hidden; margin: 0 20px 0 0;) li a (color: # 222; text-decoration: none; font: 15px / 1 Helvetica, sans-serif; -webkit-transition: color 0.5s easy; -moz-transition: color 0.5s easy; -o-transition: facilità di colore 0,5 s; -ms-transition: facilità di colore 0,5 s; transizione: facilità di colore 0,5 s;) li a: hover (colore: # 50b0df;) li img (posizione: assoluta; top: 50 px; left: 0; z-index: -1; -webkit-transition: opacità 1s facilità di ingresso; -moz-transition: opacità 1s facilità di ingresso-uscita; -o-transition: opacità 1s facilità di ingresso-uscita; -ms-transition: opacità 1s facilità in entrata; transizione: opacità 1s facilità in entrata;) li img: target (z-index: 1;) li img: not (: target) (opacità: 0;)

Prima aggiungiamo galleggiante: sinistra tutti gli elementi della nostra lista. Abbiamo usato il posizionamento assoluto e relativo per gli elementi.

Quindi, installa indice z: -1 per tutte le immagini e poi imposta indice z: 1 per le immagini di destinazione. Ciò farà sì che l'immagine cambi quando si fa clic sulla voce dell'elenco. Per rendere la transizione più fluida, imposteremo il valore di opacità per altre immagini. 0 .

Guarda una demo di presentazione CSS pura.

Compatibilità tra browser

Pseudo-classe : obbiettivoè un selettore CSS di livello 3, il che significa che è supportato in quasi tutti i browser tranne (non indovinerai) ... IE. Il buon vecchio asino supporta solo i selettori CSS3 nelle versioni 9 e 10.

Come con qualsiasi problema di rendering del selettore CSS3 in IE, questo è abbastanza facile da risolvere con Selectivizr.

Grazie a questo plugin e alla magia del voodoo, i selettori CSS3 richiesti saranno supportati anche in IE6.

Conclusione

L'uso di pseudo-classi può sembrare scoraggiante all'inizio, ma perché capisci come possono semplificare il tuo lavoro e rendere il tuo sito più interessante. Pseudo selettore

: obbiettivoè un buon esempio. Assicurati solo di non esagerare con gli stili.

Un altro caso d'uso interessante : obbiettivo

Per impostazione predefinita, quando si fa clic su un collegamento, il documento si apre nella finestra o cornice corrente. Se necessario, questa condizione può essere modificata dall'attributo di destinazione del tag. ... XHTML non usa questo attributo.

Sintassi

...

Attributo richiesto

I valori

Il valore è il nome della finestra o del frame specificato dall'attributo name. Se viene impostato un nome inesistente, verrà aperta una nuova finestra. I seguenti sono usati come nomi riservati.

Vuoto Carica la pagina in una nuova finestra del browser. _self Carica la pagina nella finestra corrente. _parent Carica la pagina nel frame genitore, se non ci sono frame, allora questo valore funziona come _self. _top Annulla tutti i frame e carica la pagina nella finestra del browser completa, se non ci sono frame allora questo valore funziona come _self.

Valore predefinito

Convalida

L'uso di questo attributo è deprecato dalle specifiche HTML; il codice valido si ottiene solo utilizzando un transitorio .

HTML5 IE Cr Op Sa Fx

Apri in una nuova finestra

La: pseudo classe target è una delle grandi caratteristiche dei CSS3. Corrisponde all'elemento puntato dall'identificatore nell'URI del documento.

L'identificatore nell'URI contiene un carattere "#" seguito dal nome dell'identificatore che corrisponde al valore dell'attributo ID elemento nel documento.

Supporto

Dato che stiamo parlando di CSS3, la pseudo-classe è supportata da tutti i browser moderni tranne IE da 6 a 8. La solita frustrazione non dovrebbe impedirti di decidere di usare: target. IE9 supporta già la: pseudo classe target.

Come si usa: target?

Questa pseudo classe può avere un proprio stile, proprio come le pseudo classi. : hover, : attivo o : messa a fuoco per i link. Oltre alle suddette pseudo classi : obbiettivo utilizzato in determinate azioni con il sito web. Soprattutto quando si utilizza un identificatore di frammento come questo: http://example.com/index.html#lorem-ipsum.

Dimostrazione

La pagina demo fornisce un esempio molto chiaro di come e quando utilizzare : obbiettivo... Pseudo classe : obbiettivo può migliorare l'usabilità della tua risorsa.

Markup HTML

Di seguito è riportato un esempio dalla demo. Abbiamo 4 collegamenti e lo stesso numero di blocchi. Ogni gruppo ha il proprio identificatore univoco.

• Blocco 1
• Blocco 2
• Blocco 3
• Blocco 4

CSS

Il seguente codice CSS ti consente di ottenere l'effetto desiderato, con l'aiuto del quale viene selezionato il blocco con l'ID corrispondente (un'ombra appare attorno al rettangolo).

/ * Aggiungi spazio * / ul, div (margin-bottom: 10px;) / * Stile blocco predefinito * / div (padding: 10px; border: 1px solid #eaeaea; -moz-border-radius: 5px; border- radius : 5px;) / * Cambia la visualizzazione dell'output se corrisponde * / div: target (border-color: # 9c9c9c; -moz-box-shadow: 0 0 4px # 9c9c9c; -webkit-box-shadow: 0 0 4px # 9c9c9c ; box-shadow: 0 0 4px # 9c9c9c;)

Di seguito è riportato il risultato dell'azione del codice. Se fai clic sul collegamento, il blocco corrispondente viene evidenziato e diventa attivo.

C'è un modo per gestire gli eventi di clic in CSS senza utilizzare JavaScript. Puoi usare il metodo con : obbiettivo... Ma cosa succede se non può essere utilizzato? C'è un altro metodo.

Guarda una demo. È completamente fatto in CSS, non una singola riga di JavaScript. Si basa sull'uso originale dei selettori: active e: hover.

Descrizione

Innanzitutto, è necessario creare un contenitore che conterrà il pulsante e i blocchi visualizzati facendo clic con il mouse. La struttura del markup sarà qualcosa del genere:

Devi rendere invisibile il .content finché non viene premuto il pulsante del mouse sul .wrapper. Per risolvere il problema, impostare la proprietà display: none per .content. Quindi, quando clicchiamo sul .wrapper, abiliteremo la proprietà display: block per il .content. Per fare ciò, imposta la proprietà display: block per .wrapper: active .content. In questo stato, il .content sarà visibile solo quando viene premuto il pulsante del mouse. Se lo lasci andare, il .content scompare di nuovo. Per correggere, faremo in modo che quando il cursore del mouse si trova su .content, la proprietà display: block sia assegnata all'elemento. Cioè, impostiamo la proprietà display: block per .content: hover. Il codice CSS sarà simile a questo:

Contenuto (display: nessuno;) .wrapper: attivo .content (display: block;) .content: hover (display: block;)

Resta solo da "pettinare" l'aspetto e dargli chiarezza:

Wrapper (posizione: relativa;) .button (sfondo: giallo; altezza: 20px; larghezza: 150px;) .content (posizione: assoluta; padding-top: 20px;) .content li (sfondo: rosso;)

Il testo del pulsante nel codice sopra avrà uno sfondo giallo e le informazioni visualizzate quando si preme il pulsante del mouse avranno uno sfondo rosso.

La: pseudo-classe target seleziona l'elemento nel documento a cui punta il frammento di URL. Ad esempio, questa parte di testo è racchiusa in un elemento con ID # target-test. Se segui il collegamento, quell'elemento diventa il target e gli stili della pseudo-classe: target hanno effetto.

L'anno scorso ho scritto sulla pseudo-classe target in 5 selettori CSS sottoutilizzati (e le loro applicazioni). Il primo esempio è stato l'utilizzo della: pseudo-classe target per evidenziare la sezione della pagina a cui si è passati. Questo potrebbe essere, ad esempio, l'aggiunta di un colore di sfondo o di un bordo, come nell'esempio con.

Ma recentemente, sono giunto alla conclusione che possiamo usare meglio la pseudo-classe target creando elementi interattivi sulla pagina senza JavaScript.

Esempio n. 1: nascondere e mostrare il contenuto

Un semplice esempio di utilizzo della pseudo-classe target sarebbe nascondere e mostrare il contenuto a cui ci rivolgiamo. In un blog, possiamo quindi mostrare una sezione con commenti dopo un clic dell'utente. Questo viene fatto semplicemente nascondendo l'elemento finché non corrisponde a: target.

Mostra commenti #comments: not (: target) (display: nessuno;) #comments: target (display: block;)

Esempio n. 2: navigazione a scorrimento

Il prossimo esempio è creare una barra di navigazione a scorrimento. Posizioniamo la barra di navigazione in un punto fisso rispetto all'ambito per garantire che non ci siano salti dopo che l'utente fa clic.

#nav (posizione: fissa; alto: 0; altezza: 100%; larghezza: 80%; larghezza massima: 400 px;) #nav: non (: target) (destra: -100%; transizione: destra 1,5 s;) #nav: target (destra: 0; transizione: destra 1s;)

Esempio n. 3: modale popup

Prendendo questa idea ulteriormente, possiamo creare un modale che riempie l'intera pagina.

# contenitore-modale (posizione: fissa; alto: 0; sinistra: 0; larghezza: 100%; altezza: 100%; sfondo: rgba (0,0,0,0.8); display: flex; giustifica-contenuto: centro; align-items: center;) .modal (width: 70%; background: #fff; padding: 20px; text-align: center;) # modal-container: not (: target) (opacità: 0; visibilità: nascosto; transizione: opacità 1s, visibilità 1s;) # contenitore-modale: target (opacità: 1; visibilità: visibile; transizione: opacità 1s, visibilità 1s;)

Esempio n. 4: modifica degli stili globali

L'ultimo esempio non può essere definito corretto in termini di semantica, è l'applicazione della: pseudo-classe target a un elemento con la successiva sostituzione di stili o layout di pagina.

#body: not (: target) (main (larghezza: 60%;) a parte (larghezza: 30%;) .show-sidebar-link (display: nessuno;)) #body: target (main (larghezza: 100%; ) a parte (display: nessuno;) .hide-sidebar-link (display: nessuno;))

Che ne dici di semantica e accessibilità?

Come ho menzionato nell'articolo "Link o pulsanti", quando si utilizza l'elemento il browser si aspetta di navigare in un'altra pagina o in un'altra sezione della pagina. Nei miei esempi (tranne l'ultimo), questo è esattamente ciò che accade. L'unico trucco è che nello stato normale l'elemento con stile è nascosto, appare dinamicamente solo nello stato mirato.

Per quanto posso dire, questo metodo ha due potenziali inconvenienti:

1. L'URL cambia, il che influisce sulla cronologia del browser. Ciò significa che quando l'utente naviga "indietro", può inavvertitamente navigare verso l'elemento di destinazione.
2. Per chiudere l'elemento di destinazione, l'utente deve passare a un altro elemento o semplicemente a #. L'ultima opzione (che uso nei miei esempi) non è semantica e può reindirizzare l'utente all'inizio dell'articolo, per cui l'utente potrebbe non essere pronto.

Tuttavia, se utilizzato correttamente, questo metodo può essere utilizzato almeno come fallback per gli utenti con JavaScript disabilitato. In alcuni casi, come nel primo esempio, potrebbe anche essere preferibile e più semplice rispetto all'utilizzo di JavaScript. Come sempre, dipende da ogni caso specifico.