Fokus

Klicke in das Feld Name: Ein Cursor beginnt darin zu blinken, und was du tippst, landet dort. Das Feld hat den Fokus: Es ist das Element der Seite, das bekommt, was du auf der Tastatur eingibst. Es kann immer nur ein Element den Fokus haben.

Nicht alle benutzen eine Maus. Manche bewegen sich mit der Tastatur über eine Seite: Tab setzt den Fokus auf den nächsten Link, Button oder das nächste Feld, Shift+Tab setzt ihn zurück, und Enter drückt den Button, der den Fokus hat. Probiere es aus: Klicke auf eine leere Stelle oben in der Vorschau und drücke ein paarmal Tab. Der Browser zeichnet einen Umriss um das Element mit dem Fokus. Ohne den Umriss wüssten Leute, die die Tastatur benutzen, nicht, wo auf der Seite sie sind. Entferne ihn also nie, wenn du ihn nicht durch einen eigenen ersetzt.

Der eigene Umriss des Browsers passt nicht immer zur Seite: Auf unseren orangefarbenen Buttons ist er schwer zu sehen. Tailwind hat zwei Varianten für den Fokus:

• focus: wendet eine Klasse an, wann immer das Element den Fokus hat (in CSS :focus). Das ist richtig für Formularfelder: Sie sollen zeigen, dass sie den Fokus haben, egal ob du in sie hineinklickst oder mit Tab zu ihnen kommst.
• focus-visible: wendet eine Klasse nur an, wenn der Browser entscheidet, dass der Fokus sichtbar sein soll (in CSS :focus-visible): wenn du mit der Tastatur zu einem Button kommst, aber nicht, wenn du ihn mit der Maus anklickst. Das wollen wir bei Buttons. Wer geklickt hat, weiß, welcher Button es war, und ein Umriss nach jedem Klick würde nur stören.

Den Umriss selbst erzeugst du mit den outline-*-Klassen. Anders als ein Rahmen braucht ein Umriss keinen Platz, es verschiebt sich also nichts auf der Seite, wenn er erscheint:

Ein Feld mit Fokus bekommt einen orangefarbenen Umriss statt dem des Browsers: focus:outline-2 focus:outline-orange-500. Ein Button bekommt denselben Umriss mit einem kleinen Abstand, aber nur, wenn der Fokus von der Tastatur kommt: focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500. Wie du siehst, braucht jede Klasse, die nur in einem Zustand gelten soll, ihre eigene Variante.

Du stößt vielleicht auch auf ring-*-Klassen, etwa focus:ring-2. Sie zeichnen mit einem Schatten (box-shadow) eine ähnliche Linie um ein Element und erfüllen dieselbe Aufgabe; in diesem Kurs bleiben wir bei Umrissen. Und achte auf einen häufigen Fehler: Die Klasse outline-hidden versteckt den Umriss. Wenn du sie allein benutzt, ohne einen eigenen Fokusstil, finden sich Leute, die die Tastatur benutzen, auf der Seite nicht mehr zurecht.