reactjs / reactjs/react.dev

[Beta] Ensure correct usage of :betterhover

Offen
#3,979 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
JavaScript
Sterne
11.8k
Forks
7.9k
Ø Merge
1 T. 11 Std.
Gemergte PRs (30 T.)
11

Beschreibung

It seems that when dark mode was added, some usage of :hover is missing betterhover class prefix

https://github.com/reactjs/reactjs.org/blob/beta/src/components/DocsFooter.tsx#L73

:betterhover is needed to only apply hover CSS on devices that support it (its secretly a media query under the hood). While not as good as react-aria/react-stately's hover detection hook (which understands if hybrid devices are in touch mode or not, the betterhover variant/screen is the next best CSS-only equivalent.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne bei src/components/DocsFooter.tsx ungefähr in Zeile 73 und vergleiche die Verwendung von hover mit dem Dark-Mode-Styling und der betterhover-Anforderung des Issues. Erledigt ist die Aufgabe, wenn das betroffene Hover-CSS das betterhover-Präfix verwendet, sodass es nur auf Geräten angewendet wird, die hover unterstützen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
1/5
Geschätzter Aufwand
Unter einer Stunde
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
55/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.