2027 Web Platform Feature Ranking

Ranked proposals (top = most important)

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

   Allows animating to height: auto, and using intrinsic sizes in calculations.
2. CSS scroll-triggered animations

   timeline-⁠trigger and animation-⁠trigger play, pause, or reverse animations when the user scrolls to a particular point.
3. CSS grid lanes (masonry)

   display: grid-⁠lanes creates a layout where items are tightly packed into parallel lanes.
4. CSS random-⁠item() function

   Picks a random item from a list of values.
5. Brotli support in CompressionStream and DecompressionStream
6. CSS flex-⁠wrap: balance

   Distributes items in a multi-line flex container so each line has about the same number of items.
7. CSS linked parameters

   Allows passing custom properties into external SVG resources, such as colors.
8. Pause media in hidden iframes

   The media-⁠playback-⁠while-⁠not-⁠visible permission policy pauses audible media in iframes that are hidden.
9. 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).
10. CSS random() function

    Chooses a random numeric value within a specified range.
11. 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.
12. CSS filter(image, ...filters)

    Takes an image and a filter, and returns a new image.
13. Customizable/stylable <select>

    Customize the button, selected option, picker, and options with CSS.
14. CSS symbols() function

    Defines a counter style inline, such as in list-⁠style, without needing @counter-⁠style.
15. CSS anchor positioning with transforms and animations

    Anchor-positioned elements track transforms on their anchors, and changes to the calculated anchor() triggers transitions.