2027 Web Platform Feature Ranking

Ranked proposals (top = most important)

1. CSS @function

   Defines custom functions that take arguments and return a CSS value.
2. Speculation Rules API

   Hints to the browser to proactively download pages in the background so they appear instantly when the user navigates to them.
3. Sanitizer API, via document.parseHTML() and element.setHTML()

   Customizes the sanitization of HTML inserted into the DOM, to prevent cross-site scripting attacks.
4. Scheduler API

   Helps chunk up main-thread work relative to other tasks.
5. CSS if() function

   An inline conditional value that returns a value based on a set of conditions.
6. Promises from programmatic scroll methods

   scroll(), scrollTo(), scrollBy(), and scrollIntoView() return promises that resolve when scrolling completes.
7. WebRTC SFrame encryption

   Native end-to-end encryption in WebRTC, without exposing keys to JavaScript.
8. Element-scoped view transitions

   element.startViewTransition() starts a view transition that only affects that element's subtree, allowing multiple transitions to run concurrently.
9. Trusted Types

   Ensures input has been passed through a transformation function before being passed to an API that might execute that input.
10. CSS align-⁠content for centering in buttons and inputs

    Allows overriding the vertical alignment of text in form controls.
11. 103 Early Hints preloading

    Browsers start preconnecting and preloading resources while the server is still generating the page, with consistent resource timing entries.
12. CSS random() function

    Chooses a random numeric value within a specified range.
13. Improve interoperability of pointer events on touch devices
14. PerformanceLongAnimationFrameTiming entries in the Performance API

    Provides information about rendering updates that take longer than 50 milliseconds.
15. CSS anchor positioning with transforms and animations

    Anchor-positioned elements track transforms on their anchors, and changes to the calculated anchor() triggers transitions.
16. Additional sanitizing HTML methods and trusted types integration

    Such as beforeHTML(), appendHTML(), and replaceWithHTML(), which insert sanitized HTML into an existing tree.
17. Brotli support in CompressionStream and DecompressionStream
18. OpaqueRange for form controls

    A live range of text within <textarea> and <input>, for things like custom highlights and positioning popovers next to text.
19. Allow CSS transitioning/animating display and content-⁠visibility

    Useful for delaying display: none until an exit animation completes.
20. Targeted SVG improvements

    SVG filters, context-⁠fill/context-⁠stroke, <use> without a fragment, and path data APIs.
21. Keyboard lock in requestFullscreen()

    Allows fullscreen pages, such as games, to prevent the Escape key from exiting fullscreen, and to handle other reserved shortcuts.
22. DOM moveBefore()

    Relocates a node while preserving its state like focus, animation, or move an iframe without reloading its content.
23. CSS var() in size container queries

    Such as @container (width >= var(-⁠-⁠min-⁠width)).
24. MediaStreamTrackProcessor and VideoTrackGenerator APIs

    Simplifies real-time processing of video streams.
25. Timing of cross-origin redirects in the Performance API

    Consistent navigation timing and resource timing entries for cross-origin redirects.
26. Progressive rendering of JPEG XL and AVIF images

    Displays a preview version of the image while the rest downloads.
27. CSS reading-⁠flow and reading-⁠order properties

    Sets the order in which flex or grid elements are rendered to speech or reached via focus navigation.
28. JavaScript self-profiling API

    The Profiler API records data about the execution of a page, which you can send to a server for later analysis.
29. CSS random-⁠item() function

    Picks a random item from a list of values.
30. LayoutShift entries in the Performance API

    Measures the layout stability of web pages based on movements of the elements on the page. Used to calculate cumulative layout shift (CLS).
31. CSS flex-⁠wrap: balance

    Distributes items in a multi-line flex container so each line has about the same number of items.
32. CSS @supports at-⁠rule()

    Checks if a CSS at-rule is supported.
33. CSS inherit() function

    Like var(), but uses the parent element's value of the custom property.
34. Preserve history state after cross-document navigation

    Some browsers discard history.state after cross-document navigations, but keep it for same-document navigations.
35. CSS line-⁠clamp property

    Limits the text in a block container to a certain number of lines. Also allows custom end text if content overflow occurs.
36. CSS justify-⁠items and justify-⁠self in block layout
37. JavaScript CSS module imports

    import … with { type: "css" } to load CSS resources as constructable stylesheets.
38. JavaScript Temporal

    A modern and extensive date/time API to replace Date.
39. CSS gap decorations

    column-⁠rule and row-⁠rule display decorative lines between columns and rows of a flex, grid, or multi-column layout.