Web from the future

A collection of web features that will—hopefully—soon land in a browser near you.

@webfromfuture · RSS · Newsletter

CSS image-set

Similar to the srcset attribute for <img> elements, the image-set CSS function allows to select different images depending on screen resolution or browser support.

Learn more →

Content Visibility

Content visibility is a CSS property that lets you control an element's rendering. For example, You can use it to skip rendering off-screen elements dramatically improving performance.

Learn more →

URL.canParse a modern URL checker

If you want to validate a URL in JavaScript, chances are you’re using a regular expression, using a library or a try/catch block. URL.canParse() is a better way to do the same.

Learn more →

@property: CSS variables on steroids

CSS variables are great, but they have some limitations. Mainly, they are all treated as strings. @property allows you to give your CSS variables semantic meaning and default values.

Learn more →

text-box-trim CSS property

text-box-trim is the typical feature you didn’t know you needed and when you discover you can’t do without. It removes the extra space on top and bottom of the text, making it easier to align text in buttons or next to icons.

Learn more →

Scroll driven animations

This CSS feature allows you to sync your animations with the scroll state of the page or of a single element.

Learn more →

Newsletter

Stay informed with cutting-edge features shaping the world of HTML, CSS, and JS. Subscribe to keep pace with the evolving web!

Subgrid

After flex and grid, subgrids are the next step in alignment in CSS.

Learn more →

CSS nesting

We’ve been using it for years thanks to SASS, LESS & co. Now it’s finally coming to native CSS!

Learn more →

Masonry grid layout

Are you rendering a grid with elements of different heights? Why not give it a Pinterest look? Masonry Grid Layout is your new favorite CSS property.

Learn more →

text-wrap: balance CSS rule

This is a CSS one-liner that will make your headlines look better. Learn it and use it everywhere.

Learn more →

Popover API

After years of struggle, we finally have a way to create popovers (and modals) in a simple way.

Learn more →

Passkeys

Passkeys are an alternative to passwords. They allow users to log in via touch or face ID, leaving the whole process to the browser. They are going places.

Learn more →

@when/@else conditional rules

These rules will make it easier to combine @media and @supports rules.

Learn more →

Relative colors

Relative color allows to modify existing colors using color functions. Think lighter() but better.

Learn more →

Decorators

If you are an Angular developer you know what they are. Other languages have them too. They are coming to JavaScript.

Learn more →

Import JSON in JS

As the title says, import JSON in JS the modern way.

Learn more →