The rule catalog
81 rules. Each maps a set of npm packages to the native approach that covers the same ground, and states where the package is still the better choice.
Nothing matches that combination. Widen one of the filters to see the rest of the catalog.
Safe today
Widely availableIn every major engine for years. Use these without a fallback.
- Date and time pickers
- Locale-aware date and time formatting
- Animating from JavaScript
- Modal dialogs
- HTTP requests
- Spinners and progress bars
- Form validation
- Colour manipulation
- Focus trapping
- Multi-line text truncation
- Element size queries
- jQuery
- Hashing and encryption
- Lazy-loaded images and iframes
- Reordering a list by dragging
- Saving a generated file
- Query string parsing
- Smooth scrolling and scroll-to-anchor
- Gzip and deflate in the browser
- Country and language names
- Sticky headers and sidebars
- Relative time formatting
- Visibility tracking
- Locale-aware number and currency formatting
- Touch and pointer gestures
- Deep cloning
- Server-sent events
- Text to speech
- Grouping a list by key
- Knowing when a webfont has loaded
- File pickers and drop zones
- Cancelling async work
- Reacting to a breakpoint
- Element resize tracking
- Scrolling an element into view
- Generating UUIDs
- Cross-tab messaging
- Stripping accents from text
- Event emitters
- Base64 encoding
- Natural and locale-aware sorting
- Mutexes and critical sections
- Tab visibility
- Choosing a plural form
- Scroll chaining and body scroll lock
- Keyboard-only focus styling
- Fixed aspect ratios
- Deferred promises
- Fluid type scales
- Joining a list into a sentence
Newly available
Newly availableIn every major engine, but recently. Check your support target.
- Enter and exit transitions
- Styled scrollbars
- Off-screen rendering
- Splitting text by character or word
- Copy and paste
- Page and state transitions
- Highlighting search matches
- Accordions
- Auto-growing textareas
- Matching URL patterns
- Human-readable durations
- Keeping the screen awake
- Light and dark theming
- Passkeys in the browser
- Balanced headings
- Timing out async work
Bleeding edge
Limited availabilityMissing from at least one engine. These need a fallback.
- Date arithmetic and time zones
- Tooltips, dropdowns and popovers
- Custom select menus
- Carousels
- Masonry layouts
- Scroll-triggered animations
- Sharing to other apps
- Animating to height auto
- Voice input
- Resizable panels
- Fullscreen toggling
- Prefetching the next page
- Reading and writing cookies
- Trimming font leading
- Bluetooth device access
Why a rule sits in a tier
A rule is only as available as its least-supported required feature. A tooltip needs the Popover API and CSS anchor positioning, and anchor positioning has not reached Baseline, so the whole rule reads as limited even though half of it is available everywhere. The weakest link is what decides whether you can ship it.