2027 Web Platform Feature Ranking

Chee Aun

Ranked proposals (top = most important)

  1. CSS @supports at-⁠rule()

    Checks if a CSS at-rule is supported.

  2. OpaqueRange for form controls

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

  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. 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.

  5. Element-scoped view transitions

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

  6. CSS interpolate-⁠size property and calc-⁠size() function

    Allows animating to height: auto, and using intrinsic sizes in calculations.

  7. Allow CSS transitioning/animating display and content-⁠visibility

    Useful for delaying display: none until an exit animation completes.

  8. CSS grid lanes (masonry)

    display: grid-⁠lanes creates a layout where items are tightly packed into parallel lanes.

  9. CSS scroll snap events

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

  10. 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.

  11. Web app manifest share_target

    Allows an installed web app to appear in the device's share dialog as a target for shared content.

  12. Viewport Segments API

    Adapt layouts to devices where the display is split, such as foldables.

  13. Scheduler API

    Helps chunk up main-thread work relative to other tasks.

  14. Additional sanitizing HTML methods and trusted types integration

    Such as beforeHTML(), appendHTML(), and replaceWithHTML(), which insert sanitized HTML into an existing tree.

  15. CSS corner-⁠shape property

    Alternative shapes for border-⁠radius, such as squircles and bevels.