Erläuterung der spezifischen Verwendung von CSS :focus-within

Dieser Artikel stellt hauptsächlich relevante Informationen zur spezifischen Verwendung von CSS vor, die einen gewissen Referenzwert haben.

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 (CSS Level 4-Selektor) aufgenommen wurde ). Es ist, als ob Sie :focus oder :hover kennen. :focus-within ist sehr praktisch für die Handhabung des Fokusstatus. Elemente mit 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:

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

Das Obige ist ein einfaches Formular mit einem Eingabeformular Kontrollen.

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

.form-group:focus-within {
    border-color: #000;
}

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.

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 Vorfahrenelement) 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 oder lange Tabelle 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. Wenn Ihre Benutzer jedoch Schwierigkeiten haben, die Maus zu bedienen, 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 den Fokus ü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ü

Dropdown-Menü Ist eine unserer am häufigsten verwendeten Webkomponenten. 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 .nav__list_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 .nav__list__drop:focus-within anstelle von .nav__list__drop.has-focus . Dropdown-Menüs werden angezeigt, wenn Sie die Tastatur bedienen, um den Fokus auf ein Dropdown-Menüelement zu legen.

.nav__list a:focus + .nav__list__drop,
.has-drop:hover .nav__list__drop,
.nav__list__drop: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 interessiert sind, schreiben Sie die Demo doch einfach selbst. Sie werden diese Immobilie lieben.

Das obige ist der detaillierte Inhalt vonErläuterung der spezifischen Verwendung von CSS :focus-within. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!