: țintă - CSS-Tricks

Anonim

:targetSelectorul pseudo în CSS se potrivește atunci când hash în URL - ul și id - ul unui element sunt aceleași. De exemplu, dacă adresa URL actuală este:

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

Și acest lucru a existat în HTML:

 Content

Acest selector ar corespunde:

:target ( background: yellow; )

Și acel sectionelement ar avea un fundal galben.

Cu acel generic al unui selector (care se potrivește cu orice se întâmplă să fie ținta), dacă URL-ul s-a schimbat pentru a se termina #faqși ar exista un alt element cu un ID de faq, acel selector s-ar potrivi din nou și #faqelementul ar avea un fundal galben.

Puteți să o limitați specificând elementele pe care doriți să le vizați, cum ar fi

#voters:target ( )

Când ați folosi acest lucru?

O posibilitate este când doriți stilul cu „stări”. Când pagina are un anumit hash, se află în acea stare. Nu este la fel de versatil ca manipularea numelor de clase (deoarece nu poate exista decât unul și poate fi legat doar de un singur element), dar este similar. Orice ai putea face schimbând o clasă pentru a schimba starea, ai putea face atunci când elementul este în :target. De exemplu: schimbați culorile, schimbați poziția, schimbați imaginile, ascundeți / arătați lucruri, orice.

Aș folosi aceste reguli generale atunci când :targeteste o alegere bună:

  1. Când este nevoie de o „stare”
  2. Atunci când comportamentul salt-jos / hash-link este acceptabil
  3. Când este acceptabil să afecteze istoricul browserului

Cum obțineți hashuri în adresele URL?

Cel mai obișnuit mod este ca un utilizator să facă clic pe un link care include un hash. Poate fi un link intern (aceeași pagină) sau o adresă URL complet calificată care se încheie cu un hash și o valoare. Exemple:

Go To There Go To There

Comportament de sărituri

Indiferent dacă este sau nu un link de aceeași pagină, comportamentul browserului este derularea paginii până când acel element se află în partea de sus a paginii . Sau, pe cât poate, dacă nu poate derula atât de departe. Acest lucru este destul de important de știut, deoarece înseamnă că exploatarea acestui comportament „declarat” este un pic dificil / limitat.

De exemplu, am încercat odată o varietate de tehnici pentru a reproduce filele CSS funcționale, dar în cele din urmă am decis că folosirea casetei de selectare hack a fost o idee mai bună, deoarece evită problemele legate de sărituri de pagină. Ian Hansson la CSS Science are și câteva exemple de file. Al treilea exemplu al său folosește :targetelemente absolut poziționate ascunse deasupra părții superioare a paginii pentru a preveni comportamentul de săritură a paginii. Este inteligent, dar o soluție generală perfectă, deoarece asta ar însemna că pagina ar sări în sus în cazul în care filele ar fi mai jos pe o pagină.

Mai multe informatii

  • Articol aici despre CSS-Tricks: On: target
  • Selector spec. Nivel 4
  • O galerie simplă de imagini folosind: țintă (suferă de saltul de pagină, exemplu bun al acestui lucru) de Chris Heilmann
  • Demo de tehnică de estompare galbenă (deși pentru conținut existent, nu pentru conținut nou adăugat) de la Web Designer Notebook.
  • O țintă CSS, literalmente, de Caleb Ogden.
  • CSS: țintă pentru proiectele de pe ecran
  • Documente MDN

Suport pentru browser

Crom Safari Firefox Operă IE Android iOS
Orice 1.3+ 1.3+ 9.5+ 9+ 2.1+ 2+