Noklikšķiniet uz notikuma tīrā CSS bez:target. Mērķis CSS. Kā tas strādā? Kas par semantiku un pieejamību
Vai ir kāds veids, kā apstrādāt klikšķu notikumus CSS bez izmantojot JavaScript. Jūs varat izmantot metodi ar :mērķis. Bet ko darīt, ja to nevar izmantot? Ir vēl viena metode.
Skatieties demonstrāciju. Tas ir pilnībā izveidots CSS, nevis JavaScript koda rindā. Tas ir balstīts uz sākotnējo:active un:hover atlasītāju izmantošanu.
Apraksts
Vispirms jums ir jāizveido konteiners, kurā būs poga un bloki, kas tiek parādīti, nospiežot peli. Marķējuma struktūra būs aptuveni šāda:
Mums ir jāpadara .content neredzams, līdz tiek nospiesta peles poga uz .wrapper. Lai atrisinātu problēmu, iestatiet rekvizīta .content displeju: nav . Pēc tam, kad peles poga tiek nospiesta uz .wrapper, mēs iekļausim displeja: block rekvizītu .content. Kāpēc iestatīt rekvizītu .wrapper:active .content display: block . Šajā stāvoklī .content būs redzams tikai tad, kad tiks nospiesta peles poga. Ja to atlaidīsit, .content atkal pazudīs. Lai to labotu, pārliecināsimies, ka tad, kad peles kursors atrodas virs .content , elementam tiek piešķirts rekvizīts display: block. Tas ir, mēs iestatām .content:hover rekvizītu Display: block. CSS kods izskatīsies šādi:
Saturs ( displejs: nav; ) .wrapper:active .content ( displejs: bloķēt; ) .content:hover ( displejs: bloķēt; )
Atliek tikai “izķemmēt” izskats un padariet to skaidrāku:
Iesaiņojums ( pozīcija: relatīvs; ) .poga ( fons: dzeltens; augstums: 20 pikseļi; platums: 150 pikseļi; ) .saturs ( pozīcija: absolūtā; polsterējums-augšējā: 20 pikseļi; ) .content li ( fons: sarkans; )
Pogas tekstam iepriekš minētajā kodā būs dzeltens fons, un informācijai, kas tiek parādīta, nospiežot peles pogu, būs sarkans fons.
Internetā varat viegli atrast daudzas pamācības, izmantojot pseidoklase:target. Tomēr nesekosim kāda cita kodam, bet mēģināsim to saprast un saprast, kā tas darbojas? Protams, mēs nevaram iztikt bez piemēriem.
Kas ir:target?
Programmā CSS:target šī ir pseidoklase, kas ļauj atlasīt veselu HTML dokumenta “gabalu”, kurā tiks veikta kāda darbība. Tas varētu būt, piemēram, teksta rindkopa vai virsraksts.
Pseidoklases nedrīkst jaukt ar pseidoelementiem, kas var atlasīt tikai noteiktu elementa daļu, piemēram, rindkopas pirmo burtu vai pirmo rindiņu.
Pseidoklases:
- a:link(krāsa:#111)
- a:hover(krāsa:#222)
- div:pirmais bērns(krāsa:#333)
Pseidoelementi:
- p::pirmais burts(krāsa:#444)
- p::pirmā rinda(krāsa:#555)
Manuprāt, no sintakses ir skaidrs, ko dara tā vai cita pseidoklase vai pseidoelements. Populārākā pseidoklase ir :hover, ar to saskaras visi tīmekļa pārziņi; tā apraksta elementa stilus, virzot kursoru. mērķis darbojas līdzīgi un apraksta elementa stilus, kad notiek noteikta situācija.
Fragmentu ID
Īsāk sakot, tā ir lieta, kurai mūsu pseidoklase ir piesaistīta. Šī ir atsauce ar vārdu vai frāzi, kas atrodas adreses beigās. Tas izskatās šādi:
Šo paņēmienu var izmantot pārejām rakstā. Piemēram, raksta sākumā tiek izveidots neliels satura rādītājs, uzklikšķinot uz elementa, kurā cilvēks tiek novirzīts uz sadaļu, uz kuru ved saite, sadaļai ir jāpievieno identifikators.
Tas darbojas priekš tīrs HTML, nav nepieciešami triki. Mazie identifikatori.
Klikšķa apstrāde, izmantojot:target
Tagad mēģināsim pārliecināties, ka, noklikšķinot uz vajadzīgās sadaļas mūsu improvizētajā izvēlnē, mainās nosaukuma stils, parādot, kura rindkopa pašlaik ir aktīva.
H1 ( fonts: 30 pikseļi Arial sans-serif; ) h1:target ( fonta izmērs: 50 pikseļi; teksta noformējums: pasvītrojums; krāsa: #37aee4; )
Kods ir ļoti vienkāršs – noklikšķinot virsraksts maina izmēru, krāsu un tiek pasvītrots. Varat pievienot dzīvību (Ruslan, sveiks) un izveidot animāciju nosaukuma krāsas maiņai:
H1 ( fonts: 30 pikseļi Arial sans-serif; -webkit-transition: krāsa 0,5 s vieglums; -moz-transition: krāsa 0,5 s vieglums; -o-transition: krāsa 0,5 s vieglums; -ms-pāreja: krāsa 0,5 s vieglums; pāreja: krāsa 0,5 s vieglums;)
Aktīvā virsraksta izcelšana ir laba lieta, bet ko darīt, ja jums ir jāmaina tam sekojošā teksta noformējums? CSS mums sniedz šo iespēju. Tas izskatās šādi:
H1:mērķis + p (fons: #eaeaea; polsterējums: 10 pikseļi; )
Šajā gadījumā pluszīme nozīmē, ka stils ir jāpiemēro rindkopai, kas atrodas aiz virsraksta. Tādējādi mainoties aktīvajai galvenei, mainām arī sadaļas dizainu ar tekstu, kas viņam “pieder”.
Pārlūka atbalsts
Mērķa pseidoklase pieder CSS trešajam izdevumam, un to lieliski atbalsta visas pārlūkprogrammas, izņemot IE, kas vecākas par 9. versiju. Tāpēc jums nevajadzētu to ieviest, ja jūsu auditorija izmanto šo pārlūkprogrammu. Lai gan ir izeja - tā ir Selectvizr, JS bibliotēka, ar kuru jūs varat likt IE darboties ar CSS3. Mēs vienkārši pievienojam skriptu un viss, tas darbojas.
Vienīgais ir tas, ka, ja neizmantojat JQuery vai MooTools, jums tas ir jāpievieno, lai šis skripts darbotos. Oficiālajā vietnē ir tabula, kurā parādīts, kuras bibliotēkas ko atbalsta. Ja interesē, izlasi. Šis .
Secinājums
Pseido klašu izmantošana var šķist sarežģīta, taču, kad saprotat, kā tās darbojas, varat paveikt pārsteidzošas lietas, izmantojot tikai CSS un neko citu. Pseidoklase:mērķis- lielisks apstiprinājums tam. Ar tās palīdzību jūs varat radikāli mainīt lapas mijiedarbību ar apmeklētāju. Iepriekš minētais piemērs ir visvienkāršākais, taču tas joprojām pievieno lapai nedaudz interaktivitātes. Bet šīs ir tikai dažas koda rindiņas.
Nepārspīlējiet ar skaistumu un pārlūkprogrammas atbalstu, un viss būs kārtībā.
Jauku dienu
tagu izveidošanai izmanto target="_blank atvēra saiti jaunā logā. Bet kas ir mērķa HTML? Kāpēc tam vajadzētu būt tukšam? Un pats interesantākais ir tas, kāpēc sākumā ir pasvītrojums? Apskatīsim šo kodu tuvāk un sapratīsim, ko tas dara.
mērķa atribūts
Mērķa vērtības
Četras visizplatītākās mērķa atribūta vērtības ir:
_sevis
Vienīgā situācija, kurā tas var notikt, ir tad, ja tags tiek izmantots HTML
_tukšs
Atver saiti jaunā cilnē vai logā. To nosaka lietotāja vietējie iestatījumi, lielākajā daļā pārlūkprogrammu šī ir jaunas cilnes lapa. Varētu domāt, ka, izmantojot šo vērtību, varat ieviest uznirstošās reklāmu vienības. Bet tā nav taisnība. Visbiežāk šim nolūkam tiek izmantots JavaScript, nevis HTML.
Šo mērķa HTML atribūta vērtību vislabāk izmantot, lai atvērtu saites uz ārējām vietnēm vai PDF failiem jaunā cilnē. Pateicoties tam, pēc šo cilņu aizvēršanas lietotājs tiek atgriezts jūsu vietnē. Bet to nevajadzētu ļaunprātīgi izmantot, jo lietotājam būs diezgan grūti orientēties, ja katra saite tiks atvērta jaunā cilnē.
_vecāks
Vērtība _parent atver saiti vecākrāmā tam kadram, kurā atrodaties. Tā nav populāra vērtība, jo tagi rāmju izveidei