CSS update Media Query

Adapt your UI to the screen's refresh rate capabilities.

Published on

CSS media queries are a powerful tool that allow you to control the appearance of your website or web app based on the device it is being viewed on. With media queries, you can create different layouts for different screen sizes, orientations, and other factors.

The update media query gives you a way to adapt the UI to the refresh rate of a device. The feature can report a value of fast, slow, or none which relates to the capabilities of different devices..

Browser support
  • Chrome 113, Supported 113
  • Firefox 102, Supported 102
  • Edge 113, Supported 113
  • Safari, Not supported


Devices and refresh rate

Most of the devices you design for are likely to have a fast refresh rate. This includes desktops and most mobile devices.

You can query the device, see if it has a fast refresh rate for rendering content, and style accordingly while still delivering a single stylesheet.

@media (update: fast) {
/* computer screens, totally cool to animate */

eReaders, and devices such as low powered payment systems, may have a slow refresh rate. Knowing that the device can’t handle animation or frequent updates, means that you can save battery usage or faulty view updates.

@media (update: slow) {
/* e-book readers or severely underpowered devices */

Lastly, there are scenarios like printed paper or e-ink displays that may only offer a single render pass. Output like this cannot refresh at all, and is referred to as none. It can be queried like this:

@media (update: none) {
/* one time render like printed paper */

In the following CodePen, see a progressively enhanced hover animation using this new update media query:

More resources

Published on Improve article


Blur camera background


DevTools Tips: Source maps in DevTools

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.