Ich habe in letzter Zeit eine Vielzahl von Tutorials gesehen, die sie nutzen :Ziel in CSS, um ein paar fantastische Leistungen zu erbringen, also dachte ich, ich würde mir die Zeit nehmen, wirklich nachzudenken und zu diskutieren, wie und warum diese Syntax funktioniert. Anstatt blindlings dem Code eines anderen zu folgen, sollten Sie in der Lage sein, dieses Tool zu nutzen, um zu wissen, was passiert und wie sich dies auf die Browserunterstützung auswirkt.
Lesen Sie weiter und erfahren Sie alles über die grundlegenden Funktionen von :Ziel Pseudoklasse und wie Sie diese Fähigkeit ausdehnen können, um alle Arten verrückter Sachen mit reinem CSS auszuführen. Auf dem Weg werden wir einige großartige Beispiele für Navigation und Diashow erstellen, von denen Sie lernen können.
Was ist: Ziel?
In CSS :Ziel ist ein Pseudoklassenselektor. Erinnern Sie sich an unseren Artikel über: before und: after, dass Pseudo-Klassen eine Möglichkeit sind, ein ganzes Stück Ihres HTML-Dokuments auszuwählen, während Pseudo-Elemente verwendet werden können, um einen Teilbereich auszuwählen. eines Elements. Um diesen Punkt zu veranschaulichen, finden Sie hier einige Beispiele:
Die Pseudo-Klasse, mit der Sie wahrscheinlich am vertrautesten sind, ist :schwebenMit dieser Option können Sie ein spezielles Styling festlegen, das aktiviert wird, wenn der Benutzer ein Element überfährt. Das :Ziel Die Pseudoklasse ermöglicht auf ähnliche Weise eine benutzerdefinierte Gestaltung, die basierend auf einem bestimmten Szenario aktiviert wird.
Fragmentkennungen
Die besondere Veranstaltung für die :Ziel Pseudoklasse hängt von etwas ab, das als Fragmentbezeichner bezeichnet wird. Es gibt eine komplizierte Geschichte und Erklärung, aber alles, was Sie wirklich wissen müssen, ist, dass wir, wenn wir über Fragmentkennungen sprechen, auf einen Hashtag verweisen, der mit einem Wort oder einer Phrase am Ende einer URI gepaart ist.
Diese werden verwendet, um? einen bestimmten Punkt in einer HTML-Seite und mit einer ID verbunden sind (die auch die Hashtag-Syntax verwendet). Bei der Paarung kann der URI verwendet werden, um zur zugehörigen ID zu springen. Hier ist eine kurze Demo-Seite, die ich aufgegriffen habe, um diese Funktionalität zu veranschaulichen.
Diese Seite enthält eine Reihe von h1-Tags, von denen jedes eine eindeutige ID besitzt. Hier ist die Grundstruktur:
Diese Struktur ist mit einem einfachen Navigationsmenü verbunden, das aus Listenelementen mit Ankertags besteht. Jedes Ankertag zeigt auf eine der von uns eingerichteten Fragmentkennungen. Diese Funktionalität ist äußerst praktisch: Wenn Sie auf eines der Listenelemente klicken, springt die Seite automatisch zur entsprechenden Überschrift. Probieren Sie es aus, um es in Aktion zu sehen. Beachten Sie, dass dies mit reinem HTML funktioniert, kein CSS erforderlich.
Nutzen: Ziel Zum Erstellen von Klickereignissen
Jetzt, da wir eine einfache Demo mit eindeutigen IDs und Fragmentkennungen haben, ist es an der Zeit, unsere herauszuholen :Ziel Pseudoklasse. Alles in einem :Ziel Der Stilblock wird nur aktiviert, wenn im URI derzeit ein Fragmentbezeichner aktiv ist. In gewisser Weise :Ziel kann zum Erstellen des immer schwer fassbaren CSS-Klickereignisses verwendet werden.
Nehmen wir zum Beispiel an, wir wollten es so gestalten, dass das Element, das in unserem Navigationsmenü angeklickt wird, irgendwie geändert wird. Auf diese Weise können Benutzer den Abschnitt, zu dem sie springen, eindeutig identifizieren. Um dies zu erreichen, verwenden wir den Selektor? H1: target? und fügen Sie einige Variationen durch Schriftgröße, Farbe und Textdekoration hinzu. Schauen Sie sich die Demo hier an.
Animieren Sie es
Sie können frei verwenden :Ziel ziemlich viel, aber Sie würden verwenden :schwebenDas heißt, Sie können alle Arten von Spaß beim Hinzufügen von Animationseffekten haben. Hier haben wir einen schönen kleinen Übergang für die Farbänderung hinzugefügt. Sehen Sie es hier live.
Nicht zielgerichtete Objekte bearbeiten
Nehmen wir an, wir wollten auch den zugehörigen Absatz ändern, wenn eine bestimmte Überschrift anvisiert wird. Das hört sich vielleicht schwierig an, da wir unsere HTML-Struktur bereits so eingerichtet haben, dass die eindeutigen IDs nur für die h1-Tags verwendet werden. Denken Sie jedoch daran, dass CSS eine Reihe leistungsfähiger Selektoren enthält. Wir können tatsächlich einen Klick auf das Zielelement verwenden, um andere Objekte auf der Seite zu bearbeiten.
In unserem Beispiel ist das Targeting des Absatzelements nach dem angeklickten h1 so einfach wie das Herausziehen des benachbarten Geschwisterkombinators. Der Code ist unten und die Demo ist hier.
Erstellen Sie eine einfache CSS-Diashow
Vor diesem Hintergrund haben sich die Entwickler mit einer Menge großartiger Anwendungen für die Verwendung des Betriebssystems beschäftigt :Ziel Pseudoklasse. Sie können es verwenden, um eine reine CSS-Oberfläche mit Registerkarten oder sogar eine Bilddiaschau zu erstellen. Mal sehen, wie man Letzteres erstellt.
Um zu beginnen, müssen wir eine ungeordnete Liste erstellen. Jedes Listenelement enthält ein Ankertag, das auf eine Fragmentkennung verweist, gefolgt von einem Bild mit einer übereinstimmenden ID.
Jetzt werden wir eine kluge Positionierung verwenden, um alles an Ort und Stelle zu verschieben und natürlich ein wenig :Ziel Magie, damit alles funktioniert. Sehen Sie, ob Sie herausfinden können, was hier vor sich geht, bevor ich Sie durchbringe.
Zuerst haben wir unsere Listenelemente nach links verschoben, den Text gestaltet und einen Hover-Effekt angewendet. Das Interessante an der Positionierung ist, dass wir alle unsere Bilder mit Hilfe der wundervollen Technik der absoluten Positionierung innerhalb eines relativ positionierten übergeordneten Elements vom Textteil ihrer Listenelemente entfernt haben. Lesen Sie diesen Artikel, um zu erfahren, wie dies funktioniert.
Als Nächstes setzen wir den Z-Index aller Bilder auf -1 und dann den Z-Index des Zielbilds auf 1. Dies bewirkt, dass das Listenelement, auf das Sie klicken, sein Bild über die anderen stellt. Um den Wechsel angenehm und graduell zu gestalten, reduzieren wir die Deckkraft der anderen Bilder auf null und fügen einen CSS3-Übergang hinzu. Sehen Sie sich hier die reine CSS-Diashow an.
Browser-Unterstützung
Das :Ziel Pseudo-Class-Selector ist ein CSS-Level-3-Selector, der auf nahezu jedem Browser eine großartige Unterstützung bietet? außer natürlich für IE. Der gute alte Internet Explorer unterstützt CSS3-Selektoren in Version 9 und 10, aber nichts älteres.
Aus diesem Grund ist es weitgehend unklug zu verwenden :Ziel auf alles, was den Erfolg der Benutzerinteraktion direkt beeinflusst. Zum Beispiel könnte es für die optionalen Differenzierungsstile der ersten Beispiele geeignet sein, aber unsere Diaschau funktioniert für IE8 und ältere Benutzer überhaupt nicht.
Selectivizr zur Rettung
Wie bei jedem IE CSS3-Auswahlproblem gibt es eine ziemlich einfache Lösung, die Sie verwenden können :Ziel ohne die traurigen Menschen auszuschließen, die veraltete Versionen eines von Microsoft erstellten Browsers ausführen: Selectivizr.
Fügen Sie einfach Ihre bevorzugte JavaScript-Bibliothek wie jQuery oder MooTools ein, fügen Sie dann einen Code-Code von Selectivizr ein und erledigen Sie den Rest vollständig automatisiert. Selectivizr wird mit seinem Voodoo arbeiten, um IE6 und höher mit eindrucksvoller CSS3-Auswahl zu unterstützen.
Fazit
Die Verwendung von Pseudoklassen kann schwierig sein, aber sobald Sie ein Gefühl dafür bekommen, wie einige von ihnen funktionieren, werden Sie mit den Arten von Dingen, die Sie mit reinem CSS ausführen können, erstaunlich. Das Ziel? Pseudoklasse ist ein großartiges Beispiel für etwas, das die Art und Weise, wie Sie Benutzerinteraktionen strukturieren, dramatisch verändern kann. Stellen Sie nur sicher, dass Sie nicht zu viel laufen und verwenden Sie es zu viel, ohne die Auswirkungen zu berücksichtigen, die die Browser-Unterstützung haben wird.
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, woran Sie denken :Ziel. Haben Sie es jemals in einem echten Projekt verwendet? Warum oder warum nicht?