JavaScript

`js/feature-detect`

Test for the feature you need (in, CSS.supports, matchMedia), not the browser name in navigator.userAgent.

Dlaczego

User-agent strings are long, spoofed, frozen in parts and change with every release. Code that branches on them breaks for the next browser version or for a browser it did not know, and keeps old workarounds alive long after the bug is fixed.

Poprawka

Check the capability itself: 'share' in navigator, CSS.supports('container-type: inline-size'), matchMedia('(pointer: coarse)'), or @supports in CSS. Read the user agent only for logging or analytics, and mark that line with fs-ignore js/feature-detect.

Przykłady

// bad
if (/iPhone|Android/.test(navigator.userAgent)) enableTouchMenu()
// good
if (matchMedia('(pointer: coarse)').matches) enableTouchMenu()

Źródła

Fakty

Identyfikator: js/feature-detect
Waga: drobna
Sprawdzanie: statyczne sprawdzane w kodzie źródłowym przez audit
Dotyczy plików: jsx html vue svelte astro
Uczy jej skill: fe-javascript JavaScript in the browser
Od wersji: 0.1.0

Plik reguły na GitHubie

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain js/feature-detect