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…
Als wir das v17-Design (wir sind jetzt bei v18) dieser Seite veröffentlichten. Ich fügte html { scroll-behavior: smooth; } zum CSS hinzu. Sofort erhielt ich Kommentare wie diesen (nur ein Beispiel)
…... wenn Sie Strg+F drücken oder
Skip-Links sind kleine interne Navigationslinks, die Benutzern helfen, sich auf einer Seite zu bewegen. Es ist möglich, dass Sie noch nie einen gesehen haben, da sie oft versteckt sind und als Barrierefreiheitsverbesserung dienen, die Tastaturbenutzern und Bildschirmen ermöglicht ...
Ich mag :focus-within wirklich. Es ist ein super nützlicher Selektor, der es Ihnen ermöglicht, im Wesentlichen ein Elternelement auszuwählen, wenn eines seiner Kinder fokussiert ist.
Sagen wir, Sie wollten zusätzliche Inhalte anzeigen, wenn ein <div></div> gehovert wird... ...
Ich habe kürzlich diesen Artikel von Keith Grant gelesen, der das neu erschienene <dialog vorstellte. Begeistert von diesem neuen UI-Element setzte ich mich sofort daran, damit zu experimentieren, um zu sehen, wie es effektiv als Modal verwendet werden kann …
Nehmen wir an, wir haben ein <div></div>.
Wir wollen, dass dieser div *nur* sichtbar ist, wenn er gehovert wird, also
div:hover {
opacity: 1;
}Wir brauchen auch Fokusstile, für die Barrierefreiheit, also
div:hover,
div:focus {
opacity: 1;
}Aber Divs...
Der :focus-within Pseudo-Selektor in CSS ist etwas ungewöhnlich, aber gut benannt und recht intuitiv. Er wählt ein Element aus, wenn dieses Element Kinder enthält, die :focus haben.
form:focus-within {
background: lightyellow;
}Was funktioniert so…
<!-- this form Gute Entdeckung von Ian Devlin
Die
:focus-withinPseudoklasse wird aktiv, wenn ein Element selbst den Fokus hat oder wenn einer seiner Nachfahren den Fokus hat.
Die Auswahl eines Elternelements basierend auf Kindern wird *lange erwartet*. Das Kronjuwel davon ...