Hallo an alle wunderbaren Entwickler da draußen! In diesem Beitrag führe ich euch durch die Erstellung eines einfachen Kontaktformulars mit semantischem HTML und einer großartigen CSS-Pseudoklasse namens :focus-within. Die :focus-within-Klasse ermöglicht es …
Nehmen Sie sich jetzt zwei Minuten Zeit und besuchen Sie Ihr aktuelles Projekt in einem Browser. Dann, nur mit der Tabulatortaste, *sollten* Sie zwischen interaktiven Elementen wie Schaltflächen, Links und Formularelementen navigieren können.
Wenn Sie sehen können, *sollten* Sie…
Während die meisten Menschen, die im Internet surfen, einen Computer benutzen und eine Maus verwenden, verlassen sich viele stattdessen auf ihre Tastatur. Theoretisch sollte die Verwendung einer Webseite mit der Tastatur kein Problem darstellen – drücken Sie die TAB-Taste, um den Tastaturfokus zu verschieben…
/* Only show invalid ring while not focused */
input:not(:focus):not(:placeholder-shown):invalid {
border-color: var(--color-invalid);
}
input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
display: block;
}
/* Only show valid ring while not focused and if a value is entered */
/* :empty won't work 
In den Nachrichten dieser Woche befasst sich Chrome mit Fokusringen, wir lernen, wie man "Donut"-Scope erhält, die globale Datenschutzsteuerung erhält die Unterstützung großer Namen, es ist Zeit, Pixel in Media Queries zu verbannen, und ein Snippet, das störendes Formularvalidierungsstyling verhindert.…
Ich habe kürzlich mit meinem Team begonnen, an einer Progressive Web App (PWA) für einen Kunden zu arbeiten. Wir verwenden React mit clientseitigem Routing über React Router, und eines der ersten Elemente, die wir erstellt haben, war das Hauptmenü. Menüs…
Stellen Sie sich vor, Ihre :focus-Stile würden sich von Element zu Element *animieren*, wenn Sie durch eine Seite tabben. Wie der Fokusring, der über die Seite fliegt zum nächsten Element. Der Geist dahinter ist ähnlich wie beim sanften Scrollen: Es ist…
Viele Formen assistiver Technologien nutzen die Tastaturnavigation, um Bildschirminhalte zu verstehen und Aktionen darauf auszuführen. Eine Art der Navigation erfolgt über die Tab-Taste. Vielleicht sind Sie mit dieser Art der Navigation bereits vertraut, wenn Sie sie nutzen, um …
Es lohnt sich immer zu wiederholen: Alle interaktiven Elemente sollten einen Fokusstil haben. So kann ein Tastaturnutzer erkennen, wenn er den Fokus auf dieses Element verschoben hat.
Aber wenn Sie dafür allein :focus verwenden, hat das einen Nebeneffekt, der…
