2027 Web Platform Feature Ranking

Ranked proposals (top = most important)

1. CSS margin-⁠trim

   Removes the margins of child elements when they meet the edges of the container.
2. CSS gap decorations

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

   Sets the geometry of the border box to a fully custom shape, changing the shape of borders, outlines, and shadows.
4. CSS linked parameters

   Allows passing custom properties into external SVG resources, such as colors.
5. 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.
6. CSS anchor positioning with transforms and animations

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

   @container anchored(fallback: …) applies styles based on which position fallback an anchor-positioned element is using.
8. Responsive iframes

   The frame-⁠sizing CSS property sizes an <iframe> to its content, avoiding scrolling within the iframe.
9. Web app installation via <install> and navigator.install()

   Prompts the user to install a progressive web app.
10. Promises from programmatic scroll methods

    scroll(), scrollTo(), scrollBy(), and scrollIntoView() return promises that resolve when scrolling completes.
11. CSS ::scroll-⁠marker and ::scroll-⁠marker-⁠group pseudo-elements

    Generates navigation markers for scroll containers, for things like carousels, tabs, and tables of contents.
12. Customizable/stylable <select>

    Customize the button, selected option, picker, and options with CSS.
13. CSS random() function

    Chooses a random numeric value within a specified range.
14. CSS if() function

    An inline conditional value that returns a value based on a set of conditions.
15. 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.