2027 Web Platform Feature Ranking

Ranked proposals (top = most important)

1. CSS linked parameters

   Allows passing custom properties into external SVG resources, such as colors.
2. HTML headingoffset and headingreset attributes

   Offsets the heading level of descendant <h1>–<h6> elements. Includes the CSS :heading() pseudo-class.
3. Customizable/stylable <select>

   Customize the button, selected option, picker, and options with CSS.
4. CSS grid lanes (masonry)

   display: grid-⁠lanes creates a layout where items are tightly packed into parallel lanes.
5. Web app manifest share_target

   Allows an installed web app to appear in the device's share dialog as a target for shared content.
6. 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.
7. CSS border-⁠shape property

   Sets the geometry of the border box to a fully custom shape, changing the shape of borders, outlines, and shadows.
8. Web app installation via <install> and navigator.install()

   Prompts the user to install a progressive web app.
9. OpaqueRange for form controls

   A live range of text within <textarea> and <input>, for things like custom highlights and positioning popovers next to text.
10. JavaScript Temporal

    A modern and extensive date/time API to replace Date.
11. CSS flex-⁠wrap: balance

    Distributes items in a multi-line flex container so each line has about the same number of items.
12. Allow CSS transitioning/animating display and content-⁠visibility

    Useful for delaying display: none until an exit animation completes.
13. HTML focusgroup attribute

    Combines descendant elements into a single tab stop, with arrow-key navigation between them.
14. CSS filter(image, ...filters)

    Takes an image and a filter, and returns a new image.
15. Speculation Rules API

    Hints to the browser to proactively download pages in the background so they appear instantly when the user navigates to them.
16. CSS align-⁠content for centering in buttons and inputs

    Allows overriding the vertical alignment of text in form controls.
17. CSS @function

    Defines custom functions that take arguments and return a CSS value.
18. Sanitizer API, via document.parseHTML() and element.setHTML()

    Customizes the sanitization of HTML inserted into the DOM, to prevent cross-site scripting attacks.
19. JavaScript CSS module imports

    import … with { type: "css" } to load CSS resources as constructable stylesheets.
20. CSS scroll-⁠snap-⁠type: pair

    Snap to the same element in both axes.
21. CSS color gamut mapping

    Displays out-of-gamut colors (such as from oklch()) closer to the intended color, rather than clipping RGB channels.
22. requestIdleCallback

    Queues a function that runs in idle browser time, either at the end of a frame or when the user is inactive.
23. CSS scroll-triggered animations

    timeline-⁠trigger and animation-⁠trigger play, pause, or reverse animations when the user scrolls to a particular point.
24. CSS polygon() vertex rounding

    Such as polygon(round 20px, …) to round the corners of a polygon.
25. CSS scroll snap events

    scrollsnapchanging and scrollsnapchange events fire when a scroll gesture changes the selected scroll snap target.
26. WebUSB API

    Exposes USB-compatible devices to web pages.
27. CSS container scroll-state queries

    The @container scroll-⁠state(...) at-rule applies styles based on the sticky positioning, snapped, and scrollable state of the container.