Standardisierung der Fokusstile mit CSS -benutzerdefinierten Eigenschaften

Testen Sie schnell Ihr Projekt: Öffnen Sie Ihren Browser, verwenden Sie nur die Registerkartenschlüssel und versuchen Sie, zwischen interaktiven Elementen wie Schaltflächen, Links und Formularelementen zu navigieren.

Wenn Sie ein Benutzer mit normalem Sehen sind, sollten Sie in der Lage sein, die visuellen Änderungen zu erkennen, wenn der Fokus zwischen DOM -Elementen springt. Wenn es jedoch keine visuelle Veränderung gibt oder die Änderung minimal ist, können Sie einen großen Unterschied für Ihre Besucher finden.

In diesem Artikel wird eine Technik eingeführt, mit der Projektfokusstile mithilfe von CSS -benutzerdefinierten Eigenschaften effizienter verwaltet und moderne CSS -Fokus -Selektoren gelernt werden können. Lassen Sie uns zunächst verstehen, warum sichtbare Fokusstile so wichtig sind.

Treffen Sie den WCAG Focus -Stilstandards

Der sichtbare Fokusstatus entspricht den Erfolgsstandards (Web Content Accessity Guidelines (WCAG)). Das "Verständnis" -Dokument in 2.4.7 gibt die Absicht dieses Standards an:

Der Zweck dieses Erfolgskriteriums ist es, dem Benutzer zu helfen, zu verstehen, welches Element Tastaturfokus hat. Es muss in der Lage sein, den Benutzer mitzuteilen, welches Element mehrerer Elemente einen Tastaturfokus hat.

In der kommenden WCAG 2.2 wird ein neuer Standard hinzugefügt, um zu klären, wie offensichtlich der Fokusindikator sein sollte. Während Sie noch in der Entwurfsbühne sind, ist es zweifellos ein aktiver Schritt, den Leitfaden in 2.4.11 - Focus -Erscheinungsbild (Minimum) vertraut zu machen, um die Fokusstile zu verbessern, die Sie heute unternehmen können.

Verwalten Sie Fokusstile mit CSS -benutzerdefinierten Attributen

Eine Technik, die ich dieses Jahr verwendet habe, besteht darin, die folgenden Einstellungen so früh wie möglich in die wichtigsten interaktiven Grundelemente in meinem Cascading -Stylesheet aufzunehmen:

 <code>:is(a, button, input, textarea, summary) { --outline-size: max(2px, 0.08em); --outline-style: solid; --outline-color: currentColor; } :is(a, button, input, textarea, summary):focus { outline: var(--outline-size) var(--outline-style) var(--outline-color); outline-offset: var(--outline-offset, var(--outline-size)); }</code>

Dadurch werden benutzerdefinierte Eigenschaften beigefügt, sodass Sie bestimmte Teile des Umrissstils flexibel anpassen können, um sicherzustellen, dass der Fokus sichtbar bleibt, wenn sich der Elementkontext ändert.

Für --outline-size verwenden wir max() , um einen Wert von mindestens 2px zu gewährleisten und gleichzeitig die Skalierung basierend auf 0.08em basierend auf Komponenten (z. B. große Schaltflächen oder Links innerhalb des Titels) zulässt.

Die Eigenschaft, mit der Sie hier möglicherweise nicht vertraut sind, ist outline-offset , wodurch der Raum zwischen Element und Umriss definiert wird. Sie können sogar eine negative Zahl bereitstellen, um den Umriss einzubetten, der sehr nützlich ist, um den Kontrast des Fokusstils sicherzustellen. In unserem Regelsatz setzen wir diese Eigenschaft so ein, dass eine optionale benutzerdefinierte Eigenschaft --outline-offset so angepasst werden kann, dass sie bei Bedarf angepasst werden kann, andernfalls fällt sie wieder in --outline-size .

Verbesserung des Aussehens von Konturen

Während meiner Karriere wurde ich gebeten, Konturen zu entfernen und habe auch Konturen selbst entfernt, weil sie als „unansehnlich“ angesehen werden.

Es gibt jetzt zwei Gründe, warum die Kontur niemals entfernt werden sollte (mit Ausnahme von Barrierefreiheitseffekten):

1. In Chrom und Firefox folgt outline jetzt border-radius ! ? Dies bedeutet, dass Sie in Betracht ziehen, einen Hack zu entfernen, den Sie möglicherweise verwendet haben, box-shadow .
2. Mit :focus-visible können wir den Browser bitten, eine Heuristik zu verwenden, um den Fokusstil nur dann anzuzeigen, wenn ein Eingabemuster, das sichtbare Fokus erfordert, erkannt wird. Kurz gesagt, dies bedeutet, dass der Mausbenutzer sie beim Klicken nicht sieht, und der Tastaturbenutzer sieht sie weiterhin, wenn die Registerkartentasten arbeiten.

Es ist zu beachten, dass Formelemente immer Fokusstile anzeigen-sie sind nicht durch :focus-visible Verhalten begrenzt.

Erweitern wir also unseren Regeln und fügen Sie Folgendes hinzu, um :focus-visible zu machen. Wir werden den ersten :focus Fokusstil behalten, den wir für den alten Browser definiert haben, falls er nicht verloren geht.

 <code>:is(a, button, input, textarea, summary):focus-visible { outline: var(--outline-size) var(--outline-style) var(--outline-color); outline-offset: var(--outline-offset, var(--outline-size)); }</code>

Aufgrund der Art und Weise, wie Browser mit Selektoren umgehen, müssen wir diese Regeln trennen, auch wenn sie dieselben Umrisseigenschaften definieren, können wir sie nicht miteinander kombinieren.

Schließlich brauchen wir auch diese seltsam aussehende :focus:not(:focus-visible) Regel, die den regulären Fokusstil für Browser, die Unterstützung unterstützen, beseitigt :focus-visible :

 <code>:is(a, button, input, textarea, summary):focus:not(:focus-visible) { outline: none; }</code>

Es ist erwähnenswert, dass die neuesten Versionen von Chromium und Firefox auf die Verwendung umgestellt wurden :focus-visible als Standard-Möglichkeit, Fokusstile auf interaktive Elemente anzuwenden, und kürzlich als Standardmethode in Webkit aktiviert wurden, sodass es in Kürze in der Safari-Stable-Version stattfinden sollte! Unsere Regeln sind immer noch gültig, da wir das Erscheinungsbild der Umrisse anpassen.

Für weitere Anleitungen zu sichtbaren Fokusstilen empfehle ich Sara Soueidans wunderbarer und umfassender Leitfaden zu Fokussindikatoren, da er den kommenden 2.4.11 -Standard berücksichtigt.

Fokusstil -Demonstration

In diesem Beispiel zeigt jedes dieser interaktiven Elemente und wie benutzerdefinierte Einstellungen mit benutzerdefinierten Eigenschaften angewendet werden, einschließlich einiger Änderungen im Dunklen Modus. Abhängig von Ihrem Browserunterstützung sehen Sie den Fokusstil möglicherweise nicht, es sei denn, Sie verwenden den Registerkartenschlüssel, da :focus-visible verwendet wird.

Letzteres Ding: In Bezug auf die Fokusstile ist button ein einzigartiges interaktives Element, da sie zusätzliche Überlegungen zwischen den Zuständen enthält, insbesondere wenn Sie sich nur auf Farben verlassen. Um Hilfe zu erhalten, verwenden Sie den Palettengenerator in meinem Projekt ButtonBuddy.dev.

Das obige ist der detaillierte Inhalt vonStandardisierung der Fokusstile mit CSS -benutzerdefinierten Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!