Adapt your UI to the screen's refresh rate capabilities.
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: