Wie Sie vielleicht wissen, gibt es drei ähnliche klingende Pseudoklassen in CSS, nämlich: Fokus,: Fokus auf sich aufmerksam und: fokuswithin.
Auf dem ersten Blick könnte man über den Unterschied zwischen diesen und wann zu welcher verwendet werden. Die gute Nachricht ist: Diese drei Pseudoklassen sind extrem einfach zu verstehen und voneinander zu unterscheiden.
In diesem Artikel werden wir verstehen, was genau ist: Fokus,: fokussierbar und: fokussierend und wann und wie jeder dieser Pseudoklassen verwendet wird.
Weitere Lesen:
Wenn Sie eine Auffrischung über Pseudoklassen benötigen, wandern Sie in unserem CSS-Kurs zum Kapitel CSS-Pseudoklassen.
Zuerst Die erste Dinge, die : Fokus Pseudo-Klasse gilt für ein Element, wenn es fokussiert ist
.Dieser Fokus kann mit der Maus (wenn wir auf das Element klicken), der Tastatur (wenn wir durch Drücken der Registerkarte) oder auf das zugrunde liegende Programm (wenn wir JavaScript verwenden).
Weitere Lesen:
Sie können die: Fokus-Pseudo-Klasse in den CSS-Pseudoklassen ausführlich untersuchen ::: Fokus.
Darüber hinaus dürfen nur fokussierbare Elemente Fokus erhalten und daher Gegenstand von: Focus sein. Dies sind typischerweise interaktive Elemente in HTML - wie bei textArea & gt; & lt; button & gt; usw. usw.
? Hinweis : Nicht-interaktive Elemente wie & lt; p & gt;, & lt; h1 & gt;, & lt; blockquote & gt; & lt; Code & gt usw., sind nicht fokussierbar und können daher nicht das Thema von: Fokus sein. Nur wenn wir sie explizit fokussierbar machen, können wir erwarten, dass wir das tabindex -Attribut auf sie einstellen.
Zurück zu: Fokus, diese Pseudoklasse wird verwendet, um Stile auszuwählen, und wenden Sie danach Stile auf Elemente an, wenn sie sich im fokussierten Zustand befinden.Vielleicht wäre das naivste Beispiel dafür ein Eingabefeld, wie unten gezeigt:
<label> <span>Name</span> <input type="text" name="name"> </label>
In dem Moment, in dem wir auf das Eingangsfeld klicken, wird der Fokus erhält
Dies hilft uns, sofort zu erkennen, welche Eingaben wir derzeit in einer Form vieler Eingangsfelder sind.
Stellen Sie sich das Gegenteil vor. Nehmen wir an, wir klicken auf ein Eingabefeld und haben gleichzeitig kein spezielles Styling auf das Feld angewendet.
Was denkst du, wäre es für uns möglich zu bestimmen, in welcher Eingabe wir derzeit sind? Das Ideal bei der Gestaltung von Benutzeroberflächen jeglicher Art ist,
alles so einfach wie möglich zu machen. " -Class.im Wesentlichen:
Die: Fokus-Pseudoklasse (sogar die beiden anderen Fokus-Pseudo-Klasse) hilft unsdie Zugänglichkeit
einer Webseite.Indem wir den Benutzer visuell darüber nachweisen, wo er sich derzeit auf der Webseite befindet, machen wir es ihm leicht genug, mit der Webseite zu interagieren und seine Arbeit ohne Verwirrung zu erledigen.
Mit anderen Worten: Der Fokus ist wichtiger für eine Pseudo-Klasse, als wir denken könnten.Aber es ist nicht die einzige wichtige Fokus-basierte Pseudoklasse; Wir haben auch
: fokussierbar
.Das Problem mit: Fokus
<label> <span>Name</span> <input type="text" name="name"> </label>
<button>A button</button>
Aber eine Sekunde warten? Ist dieser Wunsch von uns wünschenswert?
sagte eine andere Möglichkeit: Ist es eine kluge Entscheidung, den Umriss zu präsentieren, wenn wir mit der Maus auf die Schaltfläche klicken?
Wie sich herausstellt, nein, es ist nicht!Lassen Sie uns verstehen, warum ...
Wenn wir auf eine Schaltfläche klicken - oder auf ein interaktives Element im Allgemeinen, soll dieseine Aktion
für z. Ein Link - Wir wissen bereits, wo wir auf der Webseite sind. Da wir bewusst auf die Schaltfläche klicken, können wir natürlich nicht verwirrt sein, welches Element auf der Webseite derzeit Fokus hat - wir wissen klar, dass es sich um die Schaltfläche handelt, auf die wir gerade geklickt haben, auf die der Fokus derzeit liegt.In dieser Hinsicht macht es nicht viel Sinn, wenn überhaupt, die Taste als derzeit fokussiertes Element visuell hervorzuheben.
Aber warum macht dies für Eingabefelder sinnvoll?
Gute Frage. Sie haben Recht in Ihrer Beobachtung, dass: Focus absolut gut funktioniert, wenn wir es auf Eingabefeldern verwenden, und es gibt einen einfachen Grund dafür. Wenn wir mit der Maus auf ein Eingabefeld klicken, beendet unser Job
nicht. Wir müssen noch Daten in das Feld eingeben.Und weil unsere Arbeit noch nicht erledigt ist, müssen wir schnell und eindeutig wissen, welche Eingabe derzeit aktiv ist. Vor allem die wichtige, aber subtile Unterscheidung zwischen Eingabefeldern und Schaltflächen (und anderen solchen interaktiven Elementen):
Zu diesem Zeitpunkt wissen wir also, dass Eingabefelder gut mit der: Fokus-Pseudo-Klasse gelieren, aber das ist nicht der Fall bei Schaltflächen.
Aber denken Sie daran, dass diese Argumentation nur für die Interaktion mit diesen Elementen mit der Maus gilt. Was passiert, wenn wir zu einer Tastatur wechseln?
lass uns herausfinden ...
Wie Sie vielleicht wissen, ist es nicht nur möglich, mit der Maus um eine Webseite zu navigieren. Wir können auch die Tastatur dafür verwenden, und gleich gut .
Wenn eine Webseite auf diese Weise aufgebaut ist, um nur Maus -Interaktionen zu unterhalten, ist sie äußerst unzugänglich.
Stellen Sie sich vor, jemand hat sein Mausgerät gebrochen und möchte sich nun auf ihre Prüfung vorbereiten und dass es im Moment keine Möglichkeit gibt, einen anderen zu bestellen. Der schlimmste Fall wäre, wenn sich diese Person auf einer Website vorbereiten wollte, die nur um Maus -Interaktionen erstellt wurde.
Als CSS -Entwickler müssen wir diese Tatsache und Design -Websites als so zugänglich sein, ohne eine Maus wie mit ihr. In dieser Hinsicht müssen wir sicherstellen, dass sie den notwendigen visuellen Schwerpunkt auf interaktiven Elementen leisten, wenn sie Fokus erhalten.
und dies enthält jetzt auch Schaltflächen.
Lassen Sie uns dies noch einmal sagen.
Wenn wir die Maus verwenden, um mit einer Webseite zu interagieren, ist es nicht erforderlich, visuelle Betonung für Schaltflächen (und ähnliche Elemente) in ihrem fokussierten Zustand zu schaffen. Tatsächlich ist es unerwünscht, wie wir oben gesehen haben. Dies liegt daran
Aber wenn wir stattdessen die Tastatur verwenden, istvisuelle Betonung für die Erstellung von . Dies liegt daran, dass der Benutzer jetzt nicht bekannt ist, welches interaktives Element im Fokus steht. Wir müssen dies visuell präsentieren.
Das Problem ist, dass wir nicht verwenden können: Fokus auf dieses Styling -Problem, weil ...nun ... es gilt auch für die Taste, auch wenn wir mit der Maus mit ihnen interagieren.
Nun was?
Sie müssen sich keine Sorgen machen, denn wir haben: Fokus-sichtbar zur Rettung!
'naming' ). Die Chancen stehen hoch, dass die Bedeutung im Namen selbst liegt.
Befolgt, wenn wir den Namen analysieren: Fokus auf sichtbar, hat es eindeutig etwas mit 'Focus' zu tun, aber auch etwas mit 'sichtbar' . Können Sie nur mit dem Namen herausfinden, was diese Pseudoklasse bedeutet? Nun: Der Fokus ist sichtbar für ein Element, das in Fokus und ist, deren Fokus (idealerweise) sichtbar gemacht werden muss. Wir könnten auch sagen, dass: Fokus auf ein Element gilt, das sein Focus sichtbar ist . : Fokus aufmerksam zeigt sich nur, wenn wir ein Element mithilfe der Tastatur oder einer anderen nicht-Maus-Interaktion in den Fokus bringen (z. B. mit JavaScript). Am wichtigsten ist-und das ist wirklich wichtig-: Fokus auf sichtbar gilt nicht für Schaltflächen (und solche Elemente), wenn sie aufgrund von Maus-Interaktionen Fokus erhalten . Gehen wir damit zurück zu unserem & lt; button & gt; Beispiel oben und ersetzen Sie die: Fokusregel mit: Fokus auf sich aufmerksam, damit der Umriss nur angezeigt wird, wenn die Schaltfläche über die Tastatur den Fokus empfängt: Live -Beispiel Hier ist, was wir erhalten, wenn wir auf die Schaltfläche klicken (mit der Maus): Nichts. Aber wenn wir die Registerkarte Taste drücken, um zur Taste zu navigieren und sie in den Fokus zu stellen, erhalten wir den gleichen Umriss wie zuvor: Dies bringt uns genau auf die endgültige Schlussfolgerung, dass wir beim Stylen von Schaltflächen (oder anderen solchen Elementen, z. B. & lt; a & gt;), vorzugsweise verwenden müssen: Fokus zu sichbar anstatt: Fokus (aus Gründen, die wir oben). : Fokus auf sichtbar ist im Grunde genommen eine Win-Win-Situation, in der (a) wir keine Stile anwenden, wenn Schaltflächen angeklickt und daher mit der Maus fokussiert sind und (b) wir sicherstellen, dass unsere Webseite zugänglich bleibt Wenn Sie die Tastatur mit den erforderlichen Fokusstilen auf Tasten verwenden. : Fokus auf sichtbar ist ein Held! (Aber ich kenne den Namen des Films nicht!) Offensichtlich konnten wir diesen Artikel nicht beenden, ohne die weniger nützliche zu übergehen. Lass uns das jetzt machen.
Denken Sie daran, die Namen sorgfältig zu lesen ), für ein Element, das Fokus in IT hat .
hübsch grundlegend. ? Beachten Sie : Denken Sie daran, dass: Focy-In-Tan-sich genau wie: Fokus darin, dass es beispielsweise auch auf Maus-Interaktionen auf Schaltflächen angezeigt wird. Es zeigt kein ähnliches Verhalten wie: fokussierbar. Jetzt suchen Sie vielleicht nach einem praktischeren Beispiel: Focus-Within und genau das ist das, was ich als nächstes für Sie habe. Wie bereits erwähnt:: In den Fokus, in denen man in CSS nicht häufig verwendet wird, aber einige Fälle sind so, dass sie mit: Focus-Within ziemlich elegant gelöst werden können. Lesen Sie weiter, um mehr über einen solchen Fall zu erfahren. Angenommen, wir haben eine Barrierefreiheit auf einer Website, die nur bei der Verwendung der Tastaturnavigation angezeigt wird. Anfangs ist es versteckt, aber nur visuell; Das heißt, es ist möglich, zu einer der Tasten in dieser Balken zu tätig. ? Beachten Sie : 'Nur visuell versteckt' bedeutet, dass das Element keine Anzeige hat: keine oder Sichtbarkeit: Versteckt darauf eingestellt, um es sonst tatsächlich zu verbergen. Zum Beispiel Deckkraft: 0 verbirgt ein Element nur visuell. In dem Moment, in dem eine der Schaltflächen in dieser Barrierefreiheitsleiste in den Mittelpunkt kommt, muss diese Leiste dem Benutzer vorgestellt werden. Aber wie Sie die Zugänglichkeitsleiste auswählen, wenn einer seiner Schaltflächen fokussiert ist? > Ist eine Kurzform für '' Barrierefreiheit '), der gewünschte Selektor wäre .A11y-bar: Focus-Within.
.a11y-bar: Focus-In-Within wählt die .a11y-Bar aus, wenn der Fokus darin liegt, genau das, was wir brauchen.
Gute Arbeit!
Der folgende Link zeigt dieses Beispiel:
Weitere Lesen
Verwenden von CSS: Fokus aufmerksam, um Tastaturfokusanzeige zu bieten-WCAG 2.1-Techniken
<label>
<span>Name</span>
<input type="text" name="name">
</label>
Was ist mit: Focus-Within?
<button>A button</button>
button:focus {
outline: 3px solid blue;
}
Praktischer Anwendungsfall für: Fokus-in-within
Trotz der Tatsache, dass wir fast alles behandelt haben, was wir wissen müssen: Fokus,: Fokus-sichtbar und: Fokus, in dem wir uns befinden, gibt es immer noch Wert, weiter von einigen Ressourcen zu lesen, wie unten erwähnt:
Erfolgskriterium verstehen 2.4.7: Fokus sichtbar | Wai | W3c
Wenn Sie ein Neuling in CSS sind und die Grundlagen gut lernen möchten, betrachten Sie den CSS -Kurs auf Codegual.
Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen: Focus,: Focus-Saviable und: Focus in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was ist der Grund für einen Fehler bei der DNS-Auflösung?
Nagios-Konfigurationsmethode
So flashen Sie ein Xiaomi-Telefon
Was ist der Unterschied zwischen Originalbildschirm und zusammengebautem Bildschirm?
location.search
Welche Antivirensoftware gibt es?
Welche Versionen des Linux-Systems gibt es?
Was macht Matcha Exchange?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
