web-features-summary（网络功能总结）

Web Features Summary (Baseline 2023-2026)

This skill summarizes web platform features that achieved Baseline status (available in all major browsers: Chrome, Firefox, Safari) between January 2023 and early 2026. Use this to ensure recommended APIs are widely available without polyfills.

High-Impact Modern Features (Quick Reference)

JavaScript & Web APIs

• Array & Collections:

- toSorted(), toReversed(), toSpliced(), with() (Immutable array updates) - Object.groupBy(), Map.groupBy() (Data grouping) - Set methods: intersection(), union(), difference(), symmetricDifference()

• Async & Control Flow:

- Promise.withResolvers() (External promise resolution) - Promise.try() (Wrap sync/async functions in a Promise) - AbortSignal.any() (Combine multiple abort signals) - Array.fromAsync() (Consume async iterables)

• Utilities:

- URL.canParse() (Safe URL validation) - Intl.Segmenter (Locale-sensitive text segmentation) - Intl.DurationFormat (Duration string formatting) - RegExp.escape() (Escape special characters in regex strings) - Uint8Array methods: toBase64(), fromBase64(), toHex(), fromHex() - Iterator helpers: map(), filter(), reduce(), toArray() (on iterators)

CSS

• Layout & Scoping:

- Subgrid: (grid-template-columns: subgrid) Align nested grids to parent tracks. - Container Queries: (@container) Style based on parent size, not viewport. - @scope: (@scope (.card) to (.content)) True style scoping without BEM/Modules. - Nesting: Native CSS nesting (similar to Sass).

• Colors & Theming:

- light-dark(): native light/dark mode color switching. - color-mix(): Mix colors in any space (e.g., color-mix(in srgb, red, blue)). - Relative colors: Derive colors from others (rgb(from var(--bg) r g b / 50%)).

• Typography & Math:

- text-wrap: balance (Titles) & text-wrap: pretty (Body text). - Math functions: pow(), sqrt(), hypot(), log(), exp(), round(), mod(), rem(), abs(), sign().

• UI & Interaction:

- scrollbar-color / scrollbar-width (Standardized scrollbar styling). - @starting-style (Entry animations for display: none elements). - view-transitions (Native page/element transitions) & active-view-transition. - ::details-content (Style the inner content of <details> independently).

HTML & DOM

• Interactivity:

- popover API (Native overlays/tooltips without z-index wars). - <dialog> element (now with requestClose() for safe closing). - inert attribute (Disable interaction for parts of the DOM).

• Semantics & Loading:

- <search> element (Semantic wrapper for search forms). - <link rel="modulepreload"> (Preload ES modules). - fetchpriority (Hint resource priority to browser).

Chrome-Supported Modern Features (Limited Availability)

These features are usable in modern Chrome/Edge (Chromium) but lack full cross-browser support. Use with caution and always provide fallbacks.

CSS & UI

• Anchor Positioning: (position-anchor, anchor())

- *Status:* Chrome 125+. No Firefox/Safari support. - *Use Case:* Tying tooltips/menus to trigger elements without JS. - *Interop:* Requires polyfill or JS fallback (e.g., Floating UI) for other browsers.

• Scroll-Driven Animations: (animation-timeline: scroll())

- *Status:* Chrome 115+. No stable Firefox/Safari. - *Use Case:* Parallax effects, reading progress bars linked to scroll position. - *Interop:* Graceful degradation (animation just doesn't play).

• @scope:

- *Status:* Chrome 118+, Safari 17.4+. Firefox pending. - *Use Case:* True component-level styling isolation. - *Interop:* Use BEM/Modules as fallback for Firefox.

• Container Style Queries: (@container style(...))

- *Status:* Chrome 111+. No Firefox/Safari. - *Use Case:* Styling children based on parent's *computed values* (e.g., color). - *Interop:* Highly experimental.

Web Capabilities (Fugu)

• File System Access API: (window.showOpenFilePicker())

- *Status:* Chrome 86+, Safari (Origin Private FS only). Firefox (Origin Private FS only). - *Use Case:* Reading/Writing local user files directly. - *Interop:* Progressive enhancement only.

• View Transitions (Cross-Document): (@view-transition {navigation: auto;})

- *Status:* Chrome 126+. Safari 18+. Firefox pending. - *Use Case:* Morphing animations between multi-page navigations. - *Interop:* Graceful degradation (instant navigation). - Web Hardware APIs: Chrome-only. Firefox/Safari unlikely to implement.

Modern Best Practices & Discarded Idioms

Adopt These Idioms

• Immutable Arrays: Use toSorted(), toSpliced(), and with() instead of mutation.
• Native Grouping: Use Object.groupBy() instead of reduce() patterns.
• Parent Selectors: Use :has() instead of JS-based class toggling for parent state.
• Component-First Responsive: Use @container instead of @media for internal component layout.
• Native Overlays: Use <dialog> and popover instead of custom modal/tooltip logic.
• Native Nesting: Use CSS nesting directly; reduce reliance on preprocessors for basic nesting.

Discard These Patterns

• Mutation-in-place: Stop using sort() or reverse() on original arrays when state management is involved.
• Viewport-Only Design: Stop assuming component layout is tied strictly to screen size.
• JS-Heavy UI: Stop using JavaScript for focus trapping, z-index management, and simple "click-outside" logic that <dialog> and popover handle natively.

Procedural Guidance

Verify Feature Availability

1. Check the feature name against the list in references/baseline_2023_2026.md.
2. Check references/modern_idioms.md for recommended coding patterns.
3. Verify the "Baseline Status" and date.

Additional Resources

Reference Files

• references/baseline_2023_2026.md - Comprehensive list of 100+ web features reaching Baseline status.
• references/modern_idioms.md - Detailed comparison of legacy vs. modern coding patterns.

Maintenance

• MAINTENANCE.md - Instructions for updating this skill with the latest web-features data.

Source Data

Information derived from the web-features project.