JavaScript

`js/feature-detect`

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

Why

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.

Fix

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.

Examples

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

Sources

Facts

Id: js/feature-detect
Severity: minor
Check: static checked in the source by audit
Applies to: jsx html vue svelte astro
Taught by the skill: fe-javascript JavaScript in the browser
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

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