: taikinys - CSS-gudrybės

Anonim

:targetPseudo selektorius CSS rungtynes, kai URL maišos ir elemento ID yra tas pats. Pvz., Jei dabartinis URL yra:

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

Tai egzistavo HTML:

 Content

Šis parinkiklis atitiks:

:target ( background: yellow; )

Ir tas sectionelementas turėtų geltoną foną.

Naudojant tą bendrąjį selektorių (atitinkantį viską, kas atsitinka, yra tikslinė), jei URL pasikeis į pabaigą #faqir būtų dar vienas elementas, kurio ID yra faq, tas selektorius vėl atitiks ir #faqelementas turėtų geltoną foną.

Galite jį apriboti nurodydami konkrečius elementus, kuriuos norite taikyti

#voters:target ( )

Kada tai naudotumėte?

Viena galimybė yra, kai norite stiliaus su „būsenomis“. Kai puslapyje yra tam tikra maiša, jis yra toje būsenoje. Tai nėra taip universalu, kaip manipuliuoti klasių pavadinimais (nes jų gali būti tik vienas ir jis gali būti susijęs tik su vienu elementu), tačiau jis yra panašus. Viskas, ką galėtumėte padaryti, pakeisdami klasę, kad pakeistumėte būseną, galėtumėte padaryti, kai elementas yra :target. Pavyzdžiui: pakeisti spalvas, pakeisti padėtį, pakeisti vaizdus, ​​slėpti / rodyti daiktus, bet ką.

Kada :targetyra geras pasirinkimas, naudosiu šias nykščio taisykles :

  1. Kai reikalinga „valstybė“
  2. Kai priimtinas peršokimo / maišos nuorodos elgesys
  3. Kai priimtina paveikti naršyklės istoriją

Kaip gauti maišų URL?

Dažniausiai vartotojas spustelėja nuorodą, kurioje yra maišos. Tai gali būti vidinė (to paties puslapio) nuoroda arba visiškai tinkamas URL, kuris pasibaigia maiša ir verte. Pavyzdžiai:

Go To There Go To There

Šokinėjantis elgesys

Nepaisant to, ar tai yra to paties puslapio nuoroda, ar ne, naršyklė elgiasi slinkdama puslapį tol, kol tas elementas yra puslapio viršuje . Arba kiek įmanoma, jei negali taip toli slinkti. Tai gana svarbu žinoti, nes tai reiškia, kad šio „nurodyto“ elgesio naudojimas yra šiek tiek keblus / ribotas.

Pavyzdžiui, kažkada išbandžiau įvairius metodus, kaip pakartoti funkcinius CSS skirtukus, bet galų gale nusprendžiau, kad žymimojo langelio nulaužimas buvo geresnė idėja, nes taip išvengiama puslapių peršokimo problemų. Ianas Hanssonas iš „CSS Science“ taip pat turi keletą skirtukų pavyzdžių. Trečiajame jo pavyzdyje naudojami :targetir absoliučiai išdėstyti elementai, paslėpti virš puslapio viršaus, kad būtų išvengta šuolio į priekį. Tai sumanus, bet apskritai tobulas sprendimas, nes tai reikštų, kad puslapis šokinėtų aukštyn, jei skirtukai būtų toliau apačioje.

Daugiau informacijos

  • Straipsnis čia apie CSS-Tricks: On: target
  • Pasirinkėjai 4 lygio spec
  • Paprasta vaizdų galerija, naudojant Chris: Heilmann: target (kenčia nuo puslapio šuolio dalyko, geras to pavyzdys)
  • Geltonos spalvos išblukimo technikos demonstravimas (nors ir turimam, o ne naujai pridėtam turiniui) iš „Web Designer Notebook“.
  • „CSS Target“, pažodžiui, parašė Calebas Ogdenas.
  • CSS: ne ekrano dizaino taikinys
  • MDN dokumentai

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
Bet koks 1,3+ 1,3+ 9,5+ 9+ 2.1+ 2+