Ausführliche Erläuterung der Verwendung von „Focus-within“.

Dieses Mal erkläre ich Ihnen ausführlich, welche Vorsichtsmaßnahmen bei der Verwendung von Focus-within zu beachten sind.

Die Welt von CSS ist wirklich eine magische Welt. Viele Frontend-Entwickler haben vielleicht von :focus gehört, aber nicht von :focus-within. Was zum Teufel ist also :focus-inside? In diesem Artikel werden wir über :focus-within sprechen.

:Was ist focus-within

In CSS: focus-within ist eine Pseudoklasse, die jetzt in den

CSS-Selektor Mittel (CSS Level 4-Selektor). Es ist, als ob Sie :focus oder :hover kennen. :focus-within ist sehr praktisch für die Handhabung des Fokusstatus. Elemente der Pseudoklasse :focus-within sind wirksam, wenn das Element selbst oder einer seiner Nachkommen den Fokus hat. Wenn der Text schwer zu verstehen ist, schauen wir uns zunächst ein einfaches Beispiel an:

Das Obige ist ein einfaches Formular mit einem Eingabeformular-Steuerelement.

<p class="form-group">
    <label for="email">
        Your email:
    </label>
    <input type="email" name="email" id="email" placeholder="Enter your email address"/>
</p>

Wenn im obigen Beispiel .form-group den Fokus erhält, wird die Rahmenfarbe in #000 geändert. Dies bedeutet jedoch nicht, dass der Tastaturfokus erhalten wird, da

nicht unbedingt den Tastaturfokus erhält und tabindex nicht festgelegt ist. Oder wenn der Link oder das Eingabeelement in p den Fokus erhält, ändert das .form-group-Element die Rahmenfarbe.

.form-group *:focus {
    background: yellow;
    color: #000;
}
.form-group {
    padding: 10px;
    border: 3px solid transparent
}
.form-group:focus-within {
    border-color: #000;
}

Wenn Sie das obige Beispiel sehen, finden Sie es nicht großartig? Um ähnliche Effekte zu erzielen, mussten wir in der Vergangenheit

JavaScript

-Skripte verwenden. Über die Maus- oder Tastaturereignisse der untergeordneten Elemente von .form-group fügen Sie dann den entsprechenden Stil zu seinem übergeordneten Element (oder Vorgängerelement) hinzu.

: Verwendungsszenarien von focus-within

:focus-within sind sehr leistungsfähig, vor allem weil die Pseudoklasse aktiviert wird, wenn eines ihrer Elemente den Fokus erhält. Verwenden Sie diese Pseudoklasse mit Vorsicht, wenn das Element viele Unterkomponenten enthält.

Mit :focus-within sind einige gängige interaktive Verhaltensweisen sehr einfach geworden, insbesondere die interaktiven Verhaltensweisen, die zuvor JavaScript-Tastaturereignisse erforderten. Wir können stattdessen :focus-within verwenden.

Als nächstes schauen wir uns einige gängige Beispiele für :focus-within an.

Hervorhebung von Tabellenzeilen

Ein häufiges Beispiel ist das Verhalten der Hervorhebung von Tabellenzeilen, d wird hervorgehoben. Dieser interaktive Stil kann sehbehinderten Benutzern helfen, eine komplexe Tabelle oder lange Form besser zu lesen. Durch die Hervorhebung können diese Benutzer leichter den Überblick über die Tabellenzeile behalten, die sie gerade lesen. Die in der Vergangenheit häufig implementierte Methode bestand darin, den Stil von Tabellenzeilen mit :hover zu ändern. Diese Lösung ist für normale Benutzer eine einfache Aufgabe, aber wenn Ihre Benutzer Schwierigkeiten mit der Bedienung der Maus haben, ist :hover etwas mühsam. Wenn Sie nach Perfektion suchen, können Sie über JavaScript-Tastaturereignisse Stile zu Tabellenzeilen hinzufügen.

Mit :focus-within können wir uns von JavaScript verabschieden. Wir können es so gestalten:

Das obige Beispiel zeigt, wie man :focus-within verwendet, um eine ganze Zeile einer Tabelle hervorzuheben. Wenn ein Element verfügbar ist, das in einer bestimmten Tabellenzeile den Fokus erhalten kann, bezieht sich dies auf das Fokussieren über die Tastatur. Im obigen Beispiel gibt es beispielsweise ein -Element. Sie wissen, dass das a-Element über die Tastatur fokussiert werden kann.

Zu diesem Zeitpunkt müssen Sie nur den Stil hinzufügen:

tbody tr:focus-within,
tbody tr:hover {
    background: rgba(lightBlue, .4);
}

Dropdown-MenüDer Das Dropdown-Menü ist unsere beliebteste, häufig verwendete Webkomponente. Als ich die Pseudoklasse :focus-within zum ersten Mal sah, kamen mir als erstes Dropdown-Menüs in den Sinn.

Im obigen Beispiel wird JavaScript verwendet, um den Tastaturfokus des Benutzers in einem Navigations-Dropdown-Menü zu verfolgen. Wenn JavaScript erkennt, dass der Tastaturfokus auf einem Link liegt, fügen Sie eine .has-focus-Klasse zu .navlist_drop hinzu. Wenn li über die Klasse .has-focus verfügt, werden ihre untergeordneten Elemente angezeigt, dh das Dropdown-Menü wird angezeigt.

Für diesen Effekt können wir die Funktion des JavaScript-Skripts direkt durch :focus-within ersetzen. Verwenden Sie .navlistdrop:focus-within anstelle von .navlistdrop.has-focus . Dropdown-Menüs werden angezeigt, wenn Sie die Tastatur bedienen, um den Fokus auf ein Dropdown-Menüelement zu legen.

.navlist a:focus + .navlistdrop,
.has-drop:hover .navlistdrop,
.navlistdrop:focus-within {
    opacity: 1;
    transform: translateY(0px);
    height: auto;
    z-index: 1;
}

Offscreen-Navigation

Offscreen-Navigation ist ein häufiger Effekt auf mobilen Endgeräten. Dann können wir diesen Effekt auch durch :focus-within erzielen. Detaillierten Code finden Sie im folgenden Beispiel:

Browserkompatibilität

:focus-within Obwohl es sehr interessant ist, sind viele Studenten besorgt über seine Kompatibilität. Durch Caniuse können wir die Unterstützung des Browsers dafür sehen:

Zusammenfassung

Es ist nicht verwunderlich, wenn Sie mit :focus vertraut sind, aber Sie wissen:focus-within If bedeutet, dass Sie ständig auf neue Funktionen im Zusammenhang mit CSS achten. Natürlich hat diese Eigenschaft die Welt von CSS wieder aufgefrischt, was wirklich seltsam ist. Wenn Sie Interesse haben, schreiben Sie die Demo einfach selbst. Sie werden diese Immobilie lieben.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

CSS3-Textverlaufsanimation

CSS3 macht einen halbkreisförmigen Bogen

So verwenden Sie das Sticker-Fußzeilen-Layout in CSS

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von „Focus-within“.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!