Kliknite dogodek v čistem CSS brez:target. Cilj v CSS. Kako deluje? Kaj pa semantika in dostopnost

Ali obstaja način za obravnavanje dogodkov klikov v CSS brez z uporabo JavaScripta. Metodo lahko uporabite z :tarča. Kaj pa, če ga ni mogoče uporabiti? Obstaja še ena metoda.

Oglejte si demo. V celoti je izdelan v CSS, ne v vrstici kode JavaScript. Temelji na prvotni uporabi izbirnikov:active in:hover.

Opis

Najprej morate ustvariti vsebnik, ki bo vseboval gumb in bloke, ki se prikažejo, ko pritisnete miško. Struktura označevanja bo približno takšna:

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

    Vsebino .content moramo narediti nevidno, dokler ne pritisnemo gumba miške na .wrapper. Za rešitev težave nastavite lastnost .content display: none . Potem, ko pritisnemo gumb miške na .wrapper, bomo vključili lastnost display: block za .content. Zakaj nastaviti lastnost .wrapper:active .content display: block . V tem stanju bo .content vidna samo, ko pritisnete gumb miške. Če ga izpustite, bo .content spet izginil. Da bi to popravili, poskrbimo, da je elementu dodeljena lastnost display: block, ko je miškin kazalec nad .content. To pomeni, da nastavimo lastnost display: block za .content:hover. Koda CSS bo videti takole:

    Vsebina ( display: none; ) .wrapper:active .content ( display: block; ) .content:hover ( display: block; )

    Preostane le še "prečesati" videz in naj bo bolj jasno:

    Ovoj (položaj: relativno; ) .button (ozadje: rumeno; višina: 20 slikovnih pik; širina: 150 slikovnih pik; ) .content (položaj: absolutno; oblazinjenje na vrhu: 20 slikovnih pik; ) .content li (ozadje: rdeče; )

    Besedilo gumba v zgornji kodi bo imelo rumeno ozadje, informacije, prikazane ob pritisku na gumb miške, pa rdeče ozadje.

    Z uporabo psevdorazreda:target lahko preprosto najdete številne vadnice na internetu. Vendar ne sledimo kodi nekoga drugega, ampak jo poskušajmo razumeti in razumeti, kako deluje? Seveda pa ne moremo brez primerov.

    Kaj je:target?

    V CSS:target je to psevdorazred, ki vam omogoča, da izberete cel "kos" vašega dokumenta HTML, na katerem bo izvedeno neko dejanje. To je lahko na primer odstavek besedila ali naslov.

    Psevdo-razredov ne smemo zamenjevati s psevdo-elementi, ki lahko izberejo le določen del elementa, kot je prva črka ali prva vrstica odstavka.

    Psevdo-razredi:

    • a:povezava(barva:#111)
    • a:lebdenje (barva:#222)
    • div:prvi otrok(barva:#333)

    Psevdoelementi:
    • p::prva-črka(barva:#444)
    • p::prva vrstica(barva:#555)

    Mislim, da je iz sintakse jasno, kaj počne ta ali oni psevdo-razred ali psevdo-element. Najbolj priljubljen psevdorazred je :hover, nanj naletijo vsi spletni skrbniki; opisuje sloge elementa pri lebdenju. target deluje podobno in opisuje sloge elementa, ko pride do določene situacije.

    ID-ji fragmentov

    Skratka, to je stvar, na katero je vezan naš psevdorazred. To je hashtag z besedo ali frazo, ki se nahaja na koncu naslova. Videti je takole:

    To tehniko lahko uporabite za prehode znotraj članka. Na primer, na začetku članka ustvarite majhno kazalo vsebine, ob kliku na element katerega se oseba preusmeri na razdelek, do katerega vodi povezava; razdelku je treba dodati identifikator.

    To deluje za čisti HTML, triki niso potrebni. Majhni identifikatorji.

    Obravnava klika z:target

    Zdaj pa poskusimo zagotoviti, da se ob kliku na želeni razdelek v našem improviziranem meniju spremeni slog naslova, ki prikazuje, kateri odstavek je trenutno aktiven.

    H1 (pisava: 30px Arial sans-serif;) h1:target (velikost pisave: 50px; okras besedila: podčrtano; barva: #37aee4;)

    Koda je zelo preprosta - ob kliku naslov spremeni svojo velikost, barvo in je podčrtan. Dodate lahko življenje (Ruslan, zdravo) in naredite animacijo za spreminjanje barve naslova:

    H1 ( pisava: 30px Arial sans-serif; -webkit-transition: barvni 0,5s enostavnost; -moz-transition: barvni 0,5s enostavnost; -o-transition: barvni 0,5s enostavnost; -ms-transition: barvni 0,5s enostavnost; prehod: barva 0,5 s enostavnost; )

    Označevanje aktivnega naslova je dobra stvar, a kaj, če morate spremeniti zasnovo besedila, ki mu sledi? CSS nam daje to priložnost. Videti je takole:

    H1:target + p (ozadje: #eaeaea; oblazinjenje: 10px;)

    V tem primeru znak plus pomeni, da je treba slog uporabiti za odstavek, ki sledi naslovu. torej ko se spremeni aktivna glava, spremenimo tudi zasnovo razdelka z besedilom, ki mu »pripada«.

    Podpora za brskalnik

    Ciljni psevdorazred spada v tretjo izdajo CSS in ga popolnoma podpirajo vsi brskalniki razen IE, starejši od različice 9. Zato ga ne bi smeli implementirati, če vaše občinstvo uporablja ta brskalnik. Čeprav obstaja izhod - to je Selectvizr, knjižnica JS, s katero lahko omogočite, da IE deluje s CSS3. Samo dodamo skript in to je to, deluje.

    Edina stvar je, da če ne uporabljate JQuery ali MooTools, ga morate povezati, da ta skript deluje. Uradna spletna stran ima tabelo, ki prikazuje, katere knjižnice kaj podpirajo. Če vas zanima, preberite. ta .

    Zaključek

    Uporaba psevdo razredov se morda zdi zapletena, a ko enkrat razumete, kako delujejo, lahko delate neverjetne stvari samo s CSS in nič drugega. Psevdo-razred: cilj- odlična potrditev tega. Z njegovo pomočjo lahko korenito spremenite interakcijo strani z obiskovalcem. Zgornji primer je najpreprostejši, vendar strani še vedno doda malo interaktivnosti. Toda to je le nekaj vrstic kode.

    Ne pretiravajte z lepoto in podporo brskalnika in bo vse v redu.

    Imej lep dan

    target="_blank se uporablja za izdelavo oznake odprl povezavo v novem oknu. Toda kaj je ciljni HTML? Zakaj bi moralo biti prazno? In najbolj zanimivo je, zakaj je na začetku podčrtaj? Oglejmo si podrobneje to kodo in razumemo, kaj počne.

    ciljni atribut

    Ciljne vrednosti

    Štiri najpogostejše vrednosti za ciljni atribut so:

    _sebe

    Edina situacija, v kateri se to lahko zgodi, je, če je oznaka uporabljena v HTML , ki nastavi poseben način odpiranja za vse povezave. Na primer, če med oznakami dodal naslednjo kodo , morate uporabiti target="_self", da se povezava odpre v istem oknu.

    _prazno

    Odpre povezavo v novem zavihku ali oknu. To določajo uporabnikove lokalne nastavitve, v večini brskalnikov je to stran novega zavihka. Morda mislite, da lahko s to vrednostjo implementirate pojavne oglasne enote. Ampak to ni res. Najpogosteje se za to uporablja JavaScript in ne HTML.

    To ciljno vrednost atributa HTML je najbolje uporabiti za odpiranje povezav do zunanjih spletnih mest ali datotek PDF v novem zavihku. Zahvaljujoč temu se po zaprtju teh zavihkov uporabnik vrne na vaše spletno mesto. Vendar tega ne bi smeli zlorabljati, saj bo uporabnik precej težko krmaril, če se vsaka povezava odpre v novem zavihku.

    _parent

    Vrednost _parent odpre povezavo v nadrejenem okvirju za okvir, v katerem ste. To ni priljubljena vrednost, saj so oznake za ustvarjanje okvirjev in niso podprti v HTML5. Vendar je to vrednost še vedno mogoče uporabiti znotraj oznak