CSS update Media Query

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..

# 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

• CSS Media Queries Level 4
• Update Media Query on MDN