Skip to contentSkip to footer

Experimental Chromium features

Polypane is a browser for developers, so it comes with some experimental Chromium features turned on by default. This means you can use Polypane to try out upcoming features before they make their way into regular browsers!

Enabled features

Container queries

Container queries using the @container (min-width:20rem) {} notation let you do "responsive design" at a component level, adapting the style to the width of the space for the container rather than the viewport.

The :has() pseudo-class

The :has() pseudo-class enables you to style elements based on the descendants they have, like a "parent selector". By using complex selectors you can style elements based on the structure of all surrounding elements.

Prefers-reduced-data

Prefers reduced data is a new media query that lets visitors signal they want to preserve data. You can emulate it in Polypane by going to the emulation section above a pane and toggling "prefers-reduced-data" to "reduce".

We wrote an article about what you can do with prefers-reduced-data, read that here: Creating websites with prefers-reduced-data.

Page Transition API

The page transition api will let you create animations between the current page and new pages on your domain by declare animations between elements in your CSS.

Scroll-timeline

With scroll-timeline you can link an animation to the scroll position of an element. This makes it really easy to do parallax style animations.

Selectmenu

The <electmenu> element is an experiment to provide a more customizable select element, with a stylable interface and options.

The togglepopup and popup attributes let you create popups with all the right semantics without using JavaScript.

Spelling and grammar pseudo selectors

Use ::spelling-error and ::grammar-error to style text that the browser has flagged as containing spelling or grammar errors. Not all CSS properties are available for these styles.

Custom Highlight API

Use :highlight() and the CSS.highlights JS API to highlight arbitrary parts of a websites content.

CSS Scopes

The @scope at-rule lets you scope styling between two selectors, making in so the CSS inside it is only applied to a part of the page and not the entire page.

Suggestions?

Have suggestions for things you want enabled in Polypane? Let us know.

PP

Have a question about Polypane?

Contact us any time though chat, Slack or our contact form:

Contact Support

Build your next project with Polypane

  • Use all features on all plans
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Try for free
Polypane screenshot