: mērķis - CSS-triki

Anonim

:targetPseido selektors CSS spēlēs, kad hash URL un ID elementa ir vienādi. Piemēram, ja pašreizējais URL ir:

https://css-tricks.com/#voters

Un tas pastāvēja HTML:

 Content

Šis atlasītājs atbilstu:

:target ( background: yellow; )

Un šim sectionelementam būtu dzeltens fons.

Izmantojot šo vispārīgo selektoru (kas atbilst visam, kas notiek kā mērķis), ja vietrādis URL tiek mainīts līdz beigām #faqun ir vēl viens elements ar ID faq, šis atlasītājs atkal sakrīt un #faqelementam ir dzeltens fons.

Jūs to varētu ierobežot, precīzi norādot, kuriem elementiem vēlaties atlasīt mērķauditoriju

#voters:target ( )

Kad jūs to izmantotu?

Viena iespēja ir, kad vēlaties stilu ar “stāvokļiem”. Ja lapai ir noteikts jaukums, tā atrodas šajā stāvoklī. Tas nav tik universāls kā manipulēšana ar klases nosaukumiem (jo var būt tikai viens un tas var būt saistīts tikai ar vienu elementu), bet tas ir līdzīgi. Jebkas, ko jūs varētu darīt, mainot klasi, lai mainītu stāvokli, jūs varētu darīt, kad elements atrodas :target. Piemēram: mainīt krāsas, mainīt pozīciju, mainīt attēlus, paslēpt / parādīt lietas, neatkarīgi no tā.

Kad :targetbūtu laba izvēle, es izmantotu šos īkšķa noteikumus :

  1. Kad ir nepieciešama “valsts”
  2. Kad lēciena uz leju / jaucējsaites darbība ir pieņemama
  3. Kad ir pieņemami ietekmēt pārlūka vēsturi

Kā jūs iegūstat URL sajaukšanu?

Visizplatītākais veids ir, ja lietotājs noklikšķina uz saites, kurā iekļauta jaucējkrāsa. Var būt iekšēja (tās pašas lapas) saite vai pilnībā kvalificēts URL, kas beidzas ar jaukšanu un vērtību. Piemēri:

Go To There Go To There

Lecoša uzvedība

Neatkarīgi no tā, vai tā ir vienas lapas saite vai nē, pārlūka darbība ritina lapu, līdz šis elements atrodas lapas augšdaļā . Vai arī, ciktāl tas ir iespējams, ja tas nespēj ritināt tik tālu. Tas ir diezgan svarīgi zināt, jo tas nozīmē, ka šīs “norādītās” uzvedības izmantošana ir mazliet grūts / ierobežots.

Piemēram, es kādreiz izmēģināju dažādas metodes, lai atdarinātu funkcionālās CSS cilnes, bet galu galā nolēmu, ka izvēles rūtiņas uzlaušana ir labāka ideja, jo tā izvairās no lēcieniem lapās. Ian Hansson no CSS Science ir arī daži cilņu piemēri. Viņa trešajā piemērā tiek izmantoti :targetun absolūti novietoti elementi, kas paslēpti virs lapas augšdaļas, lai novērstu lēcienu no lapas. Tas ir gudrs, bet kopumā ideāls risinājums, jo tas nozīmētu, ka lapa pārietu uz augšu, ja cilnes būtu tālāk lapā.

Vairāk informācijas

  • Raksts šeit par CSS-Tricks: On: target
  • Selektori 4. līmeņa spec
  • Krisa Heilmana vienkārša attēlu galerija, izmantojot: target (cieš no lapas lēciena, labs piemērs tam)
  • Dzeltenās izbalēšanas tehnikas demonstrācija (lai gan esošajam saturam, nevis nesen pievienotajam saturam) no Web Designer Notebook.
  • CSS mērķis, burtiski, autors: Caleb Ogden.
  • CSS: mērķis ārpus ekrāna dizainiem
  • MDN dokumenti

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
Jebkurš 1.3+ 1.3+ 9,5+ 9+ 2.1+ 2+