Kliknite događaj u čistom CSS-u bez:target. Ciljanje u CSS-u. Kako radi? Što je sa semantikom i dostupnošću

Postoji li način za rukovanje klikovima u CSS-u bez koristeći JavaScript. Možete koristiti metodu sa :cilj. Ali što ako se ne može koristiti? Postoji još jedna metoda.

Pogledajte demo. U potpunosti je izrađen u CSS-u, a ne u retku JavaScript koda. Temelji se na izvornoj upotrebi selektora:active i:hover.

Opis

Prvo morate napraviti spremnik koji će sadržavati gumb i blokove koji se prikazuju kada se pritisne miš. Struktura označavanja bit će otprilike ovakva:

  • Lorem ipsum dolor sit amet.
  • Consectetur adipiscing elit.
    • Dugme

    Moramo učiniti .content nevidljivim dok se ne pritisne tipka miša na .wrapper. Kako biste riješili problem, postavite svojstvo .content display: none . Zatim, kada se pritisne tipka miša na .wrapper, uključit ćemo svojstvo display: block za .content. Zašto postaviti svojstvo .wrapper:active .content display: block . U ovom stanju, .sadržaj će biti vidljiv samo kada se pritisne tipka miša. Ako ga otpustite, .content će ponovno nestati. Kako bismo to popravili, pobrinimo se da kada je pokazivač miša iznad .content elementu bude dodijeljeno svojstvo display: block. Odnosno, postavili smo svojstvo display: block za .content:hover. CSS kod će izgledati ovako:

    Sadržaj ( display: none; ) .wrapper:active .content ( display: block; ) .content:hover ( display: block; )

    Ostalo je još samo "pročešljati" izgled i da bude jasnije:

    Wrapper (pozicija: relativna;) .button (pozadina: žuta; visina: 20px; širina: 150px;) .content (pozicija: apsolutna; padding-top: 20px;) .content li (pozadina: crvena; )

    Tekst gumba u gornjem kodu imat će žutu pozadinu, a informacije koje se prikazuju kada se pritisne tipka miša imat će crvenu pozadinu.

    Na Internetu možete lako pronaći mnoge upute koristeći pseudo-class:target. Ipak, nemojmo slijediti tuđi kod, nego ga pokušajmo razumjeti i razumjeti kako funkcionira? Naravno, ne možemo bez primjera.

    Što je:target?

    U CSS:target, ovo je pseudo-klasa koja vam omogućuje da odaberete cijeli "komad" vašeg HTML dokumenta na kojem će se izvršiti neka radnja. To može biti na primjer odlomak teksta ili naslov.

    Pseudoklase ne treba brkati s pseudoelementima, koji mogu odabrati samo određeni dio elementa, kao što je prvo slovo ili prvi red odlomka.

    Pseudo-klase:

    • a:link(boja:#111)
    • a:lebdjeti (boja:#222)
    • div:prvo dijete(boja:#333)

    Pseudoelementi:
    • p::prvo-slovo(boja:#444)
    • p::prvi redak(boja:#555)

    Mislim da je iz sintakse jasno što ova ili ona pseudo-klasa ili pseudo-element radi. Najpopularnija pseudoklasa je :hover, s kojom se susreću svi webmasteri; ona opisuje stilove elementa pri lebdenju. target radi slično i opisuje stilove elementa kada se dogodi određena situacija.

    ID-ovi fragmenata

    Ukratko, to je stvar za koju je vezana naša pseudoklasa. Ovo je hashtag s riječju ili frazom koja se nalazi na kraju adrese. Ovako izgleda:

    Ova se tehnika može koristiti za prijelaze unutar članka. Na primjer, na početku članka stvorite malu tablicu sadržaja, kada kliknete na element od kojeg se osoba odvodi na odjeljak na koji vodi poveznica; odjeljak mora dodati identifikator.

    Ovo radi za čisti HTML, trikovi nisu potrebni. Mali identifikatori.

    Rukovanje klikom pomoću:target

    Pokušajmo sada osigurati da se stil naslova mijenja kada kliknete na željeni odjeljak iz našeg improviziranog izbornika, pokazujući koji je odlomak trenutno aktivan.

    H1 (font: 30px Arial sans-serif;) h1:target (veličina fonta: 50px; ukras teksta: podcrtano; boja: #37aee4;)

    Kod je vrlo jednostavan - kada se klikne naslov mijenja veličinu, boju i podcrtava se. Možete dodati život (Ruslan, bok) i napraviti animaciju za promjenu boje naslova:

    H1 ( font: 30px Arial sans-serif; -webkit-transition: boja 0,5s lakoća; -moz-transition: boja 0,5s lakoća; -o-prijelaz: boja 0,5s lakoća; -ms-prijelaz: boja 0,5s lakoća; prijelaz: boja 0,5 s lakoća; )

    Isticanje aktivnog naslova je dobra stvar, ali što ako trebate promijeniti dizajn teksta koji ga slijedi? CSS nam daje ovu priliku. Ovako izgleda:

    H1:target + p ( pozadina: #eaeaea; padding: 10px; )

    U ovom slučaju znak plus znači da stil treba primijeniti na odlomak koji slijedi iza naslova. Tako, kada se promijeni aktivno zaglavlje, mijenjamo i dizajn odjeljka s tekstom koji mu “pripada”.

    Podrška za preglednik

    Ciljana pseudoklasa pripada trećem izdanju CSS-a i savršeno je podržavaju svi preglednici osim IE, starije od verzije 9. Stoga je ne biste trebali implementirati ako vaša publika koristi ovaj preglednik. Iako, postoji izlaz - ovo je Selectvizr, JS biblioteka s kojom možete natjerati IE da radi s CSS3. Samo dodamo skriptu i to je to, radi.

    Jedina stvar je, ako ne koristite JQuery ili MooTools, morate ih povezati da bi ova skripta radila. Službena web stranica ima tablicu koja pokazuje koje knjižnice podržavaju što. Ako vas zanima, pročitajte. ovo .

    Zaključak

    Korištenje pseudo klasa može se činiti komplicirano, ali nakon što shvatite kako rade, možete raditi nevjerojatne stvari koristeći samo CSS i ništa drugo. Pseudo-klasa: cilj- izvrsna potvrda ovoga. Uz njegovu pomoć možete radikalno promijeniti interakciju stranice s posjetiteljem. Gornji primjer je najjednostavniji, ali ipak dodaje malo interaktivnosti stranici. Ali ovo je samo nekoliko redaka koda.

    Ne pretjerujte s ljepotom i podrškom preglednika i sve će biti u redu.

    ugodan dan

    target="_blank se koristi za izradu oznake otvorio link u novom prozoru. Ali što je ciljni HTML? Zašto bi trebao biti prazan? I što je najzanimljivije, zašto je podvlaka na početku? Pogledajmo pobliže ovaj kod i shvatimo što on radi.

    ciljni atribut

    Ciljane vrijednosti

    Četiri najčešće vrijednosti za ciljni atribut su:

    _sebe

    Jedina situacija u kojoj se to može dogoditi je ako se oznaka koristi u HTML-u , koji postavlja poseban način otvaranja za sve poveznice. Na primjer, ako između oznaka dodao sljedeći kod , trebate koristiti target="_self" tako da se poveznica otvara u istom prozoru.

    _prazan

    Otvara vezu u novoj kartici ili prozoru. To je određeno korisničkim lokalnim postavkama, u većini preglednika ovo je stranica nove kartice. Možda mislite da pomoću ove vrijednosti možete implementirati skočne oglasne jedinice. Ali to nije istina. Najčešće se za to koristi JavaScript umjesto HTML-a.

    Ovu ciljnu vrijednost HTML atributa najbolje je koristiti za otvaranje veza na vanjske stranice ili PDF datoteke u novoj kartici. Zahvaljujući tome, nakon zatvaranja ovih kartica, korisnik se vraća na vašu stranicu. Ali to se ne smije zlorabiti, jer će korisniku biti prilično teško kretati se ako se svaka poveznica otvori u novoj kartici.

    _roditelj

    Vrijednost _parent otvara vezu u nadređenom okviru za okvir u kojem se nalazite. Ovo nije popularna vrijednost, budući da su oznake za stvaranje okvira I nisu podržani u HTML5. Međutim, ova se vrijednost još uvijek može koristiti unutar oznaka