: Ziel - CSS-Tricks

Anonim

Der :targetPseudo-Selektor in CSS stimmt überein, wenn der Hash in der URL und die ID eines Elements identisch sind. Zum Beispiel, wenn die aktuelle URL lautet:

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

Und das gab es im HTML:

 Content

Dieser Selektor würde übereinstimmen:

:target ( background: yellow; )

Und dieses sectionElement hätte einen gelben Hintergrund.

Wenn mit diesem Generikum eines Selektors (der mit allem übereinstimmt, was zufällig das Ziel ist) die URL geändert wird #faqund ein anderes Element mit der ID von vorhanden faqist, stimmt dieser Selektor erneut überein und das #faqElement hat einen gelben Hintergrund.

Sie können dies einschränken, indem Sie genau angeben, auf welche Elemente Sie abzielen möchten, z

#voters:target ( )

Wann würden Sie dies verwenden?

Eine Möglichkeit ist, wenn Sie Stil mit "Zuständen" wollen. Wenn die Seite einen bestimmten Hash hat, befindet sie sich in diesem Zustand. Es ist nicht ganz so vielseitig wie das Bearbeiten von Klassennamen (da es nur einen geben kann und es sich nur auf ein Element beziehen kann), aber es ist ähnlich. Alles, was Sie tun können, um eine Klasse zu ändern, um den Status zu ändern, können Sie tun, wenn sich das Element befindet :target. Zum Beispiel: Farben ändern, Position ändern, Bilder ändern, Dinge ein- / ausblenden, was auch immer.

Ich würde diese Faustregeln verwenden, wenn :targeteine gute Wahl ist:

  1. Wenn ein "Zustand" benötigt wird
  2. Wenn das Jump-Down- / Hash-Link-Verhalten akzeptabel ist
  3. Wenn es akzeptabel ist, den Browserverlauf zu beeinflussen

Wie bekommt man Hashes in URLs?

Am häufigsten klickt ein Benutzer auf einen Link, der einen Hash enthält. Könnte ein interner Link (auf derselben Seite) oder eine vollständig qualifizierte URL sein, die zufällig mit einem Hash und einem Wert endet. Beispiele:

Go To There Go To There

Sprungverhalten

Unabhängig davon, ob es sich um einen Link auf derselben Seite handelt oder nicht, besteht das Browserverhalten darin, die Seite zu scrollen, bis sich dieses Element oben auf der Seite befindet . Oder so weit es geht, wenn es nicht so weit scrollen kann. Dies ist ziemlich wichtig zu wissen, da es bedeutet, dass das Ausnutzen dieses „angegebenen“ Verhaltens etwas schwierig / begrenzt ist.

Zum Beispiel habe ich einmal verschiedene Techniken ausprobiert, um funktionale CSS-Registerkarten zu replizieren, aber letztendlich entschied ich, dass die Verwendung des Checkbox-Hacks eine bessere Idee war, da dadurch die Probleme beim Springen von Seiten vermieden werden. Ian Hansson von CSS Science hat auch einige Beispiele für Registerkarten. In seinem dritten Beispiel werden :targetElemente verwendet und absolut positioniert, die über dem oberen Rand der Seite verborgen sind, um das Verhalten beim Springen von Seiten zu verhindern. Es ist clever, aber insgesamt eine perfekte Lösung, denn das würde bedeuten, dass die Seite nach oben springen würde, wenn die Registerkarten auf einer Seite weiter unten liegen.

Mehr Informationen

  • Artikel hier über CSS-Tricks: On: target
  • Selektoren Level 4 spez
  • Eine einfache Bildergalerie mit: target (leidet unter dem Seitensprung, ein gutes Beispiel dafür) von Chris Heilmann
  • Demo der Yellow-Fade-Technik (obwohl für vorhandene Inhalte, nicht für neu hinzugefügte Inhalte) aus Web Designer Notebook.
  • Ein CSS-Ziel, buchstäblich von Caleb Ogden.
  • CSS: Ziel für Off-Screen-Designs
  • MDN-Dokumente

Browser-Unterstützung

Chrom Safari Feuerfuchs Oper IE Android iOS
Irgendein 1.3+ 1.3+ 9,5+ 9+ 2.1+ 2+