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

Postoji li način za rukovanje događajima klikova u CSS-u bez koristeći JavaScript. Možete koristiti metodu sa :target. Ali šta ako se ne može koristiti? Postoji još jedan metod.

Pogledajte demo. Potpuno je napravljen u CSS-u, a ne u liniji JavaScript koda. Zasnovan je na izvornoj upotrebi selektora:active i:hover.

Opis

Prvo morate kreirati kontejner koji će sadržavati dugme i blokove koji se prikazuju kada se pritisne miš. Struktura označavanja će biti otprilike ovako:

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

    Moramo učiniti .content nevidljivim dok se ne pritisne tipka miša na .wrapper . Da biste riješili problem, postavite prikaz svojstva .content: none . Zatim, kada se pritisne dugme miša na .wrapper-u, uključićemo svojstvo display: block za .content. Zašto postaviti svojstvo .wrapper:active .content display: block . U ovom stanju, .content će biti vidljiv samo kada se pritisne tipka miša. Ako ga otpustite, .content će ponovo nestati. Da to popravimo, uvjerimo se da kada je kursor miša iznad .content, elementu je dodijeljeno svojstvo display: block. To jest, postavili smo display: block svojstvo za .content:hover. CSS kod će izgledati ovako:

    Sadržaj (prikaz: nema; ) .wrapper:aktivan .sadržaj (prikaz: blok; ) .content:hover (prikaz: blok; )

    Ostaje samo da se "češlja" izgled i neka bude jasnije:

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

    Tekst dugmeta u gornjem kodu će imati žutu pozadinu, a informacije prikazane kada se pritisne dugme miša imaće crvenu pozadinu.

    Možete lako pronaći mnoge tutorijale na Internetu koristeći pseudo-class:target. Međutim, nemojmo slijediti tuđi kod, već ga pokušajmo razumjeti i razumjeti kako funkcionira? Naravno, ne možemo bez primjera.

    Šta je:meta?

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

    Pseudo-klase ne treba miješati sa pseudo-elementima, koji mogu odabrati samo određeni dio elementa, kao što je prvo slovo ili prvi red pasusa.

    Pseudo-klase:

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

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

    Mislim da je iz sintakse jasno šta radi ova ili ona pseudo-klasa ili pseudo-element. Najpopularnija pseudo-klasa je :hover, na nju nailaze svi webmasteri; ona opisuje stilove elementa kada lebdi. target radi slično i opisuje stilove elementa kada se dogodi određena situacija.

    ID-ovi fragmenata

    Ukratko, ovo je stvar za koju je vezana naša pseudo-klasa. Ovo je hashtag sa riječju ili frazom koja se nalazi na kraju adrese. izgleda ovako:

    Ova tehnika se može koristiti za prijelaze unutar članka. Na primjer, na početku članka kreirate malu tabelu sadržaja, kada kliknete na element na koji se osoba odvodi u odjeljak do kojeg vodi link; odjeljak treba dodati identifikator.

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

    Rukovanje klikom pomoću:target

    Sada pokušajmo da se uvjerimo da kada kliknete na željeni odjeljak iz našeg improviziranog izbornika, promijeni se stil naslova, pokazujući koji je pasus trenutno aktivan.

    H1 ( font: 30px Arial sans-serif; ) h1:target (font-size: 50px; text-decoration: underline; color: #37aee4; )

    Kod je vrlo jednostavan - kada se klikne, naslov mijenja svoju veličinu, boju i podvlači se. Možete dodati život (Ruslan, zdravo) 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-transition: boja 0,5s lakoća; -ms-transition: lakoća boja 0,5s; prelaz: boja 0.5s lakoća; )

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

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

    U ovom slučaju, znak plus znači da stil treba primijeniti na pasus nakon naslova. dakle, kada se promijeni aktivno zaglavlje, mijenjamo i dizajn odjeljka sa tekstom koji mu "pripada".

    Podrška za pretraživač

    Ciljna pseudo-klasa pripada trećem izdanju CSS-a i savršeno je podržana od svih pretraživača osim IE, starijeg od verzije 9. Stoga je ne biste trebali implementirati ako vaša publika koristi ovaj pretraživač. Iako, postoji izlaz - ovo je Selectvizr, JS biblioteka s kojom možete učiniti da IE radi sa 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 tabelu koja pokazuje koje biblioteke podržavaju šta. Ako ste zainteresovani, pročitajte. Ovo .

    Zaključak

    Korištenje pseudo klasa može izgledati komplikovano, ali kada shvatite kako funkcioniraju, možete raditi nevjerovatne stvari koristeći samo CSS i ništa drugo. Pseudo-klasa: cilj- odlična potvrda ovoga. Uz njegovu pomoć možete radikalno promijeniti interakciju stranice s posjetiteljem. Gornji primjer je najjednostavniji, ali i dalje dodaje malo interaktivnosti stranici. Ali ovo je samo nekoliko linija koda.

    Ne pretjerujte sa ljepotom i podrškom za pretraživače i sve će biti u redu.

    ugodan dan

    target="_blank se koristi za pravljenje oznake otvorio link u novom prozoru. Ali šta je ciljni HTML? Zašto bi trebalo biti prazno? A najzanimljivije je zašto je na početku donja crta? Pogledajmo bliže ovaj kod i shvatimo šta on radi.

    ciljni atribut

    Ciljne vrijednosti

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

    _self

    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 veze. Na primjer, između oznaka dodao sljedeći kod , trebate koristiti target="_self" da se link otvori u istom prozoru.

    _blank

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

    Ovu vrijednost ciljnog HTML atributa najbolje je koristiti za otvaranje veza ka vanjskim stranicama ili PDF datotekama u novoj kartici. Zahvaljujući tome, nakon zatvaranja ovih kartica, korisnik se vraća na vašu stranicu. Ali ovo ne treba zloupotrebljavati, jer će korisniku biti prilično teško navigirati ako se svaki link otvori u novoj kartici.

    _parent

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