4 ms·

This article was useful and concise. I urge web developers to consider the trade-offs when using CSS hardware acceleration. Properties like `will-change` or `

This article was useful and concise. I urge web developers to consider the trade-offs when using CSS hardware acceleration. Properties like `will-change` or `transform3d` substantially increase the client device's energy usage. This has battery-life implications for users on portable devices such as laptops, tablets, and mobile phones. As with any other feature, ask "why" before "how" when prioritizing interactive motion in your webapp. More info: https://dev.opera.com/articles/css-will-change-property/ https://dev.opera.com/articles/css-will-change-property/

michaelchisari 9y ago
A nice feature would be to add an "energy saver" option to your web app, which adds a class to your app and a stylesheet that disables all animations.
- myfonj 9y ago
  In user styles capable browsers you can disable CSS3 animations pretty easily, just using *, *::before, *::after { transition: none !important; animation: none !important; } (For not-so-capable browsers using author level pseudo-user-style sheets the `star` must have raised specificity, like `:not(#\0)`.) I used this in the past when I wanted to play 2048 as fast as possible, resetting also border-radius, text-shadow, box-shadow, text-rendering, image-rendering and background-image [1]. It really made quite a difference :] [1] https://userstyles.org/styles/103878/nofx https://userstyles.org/styles/103878/nofx
  - uwu 9y ago
    `transition: none` breaks pages relying on the "transitionend" js event (edit: and i guess the other transition-related events i forgot about), i noticed logging into google wouldn't work with it (it wouldn't hide some gray overlay) here's what i use instead: /* forgot if this was needed but i think using !important here broke something */ transition-property: none; /* maybe not needed */ transition-delay: 0!important; /* non-zero to support "transitionend" event */ transition-duration: 0.0000001s!important; /* possible tiny optimization */ transition-timing-function: linear!important; i don't know if `animation` has events associated with it but i haven't came across any sites breaking without them
    - myfonj 9y ago
      This is insightful remark; I guessed it could break some presumably crappy designs blindly relying on transition-state or such, but … Google? Wow. Even considering their approach to user level style sheets [1] it is mildly surprising. Side note: perhaps using `..duration: ..ms` in and `transition-timing-function: step-start;` could make some additional micro optimisation. [1] killed it: https://bugs.chromium.org/p/chromium/issues/detail?id=347016 https://bugs.chromium.org/p/chromium/issues/detail?id=347016
- halokonrad 9y ago
  There is actually a draft of media query called "reduced motion" that tells webpage that user prefers to have animation use set to minimum. It wasn't created to save energy but to help people that feel dizzy when too much of animation is going on. https://webkit.org/blog/7551/responsive-design-for-motion/#using-reduce-motion-on-the-web https://webkit.org/blog/7551/responsive-design-for-motion/#u... Other nice to have option would be to just force disable rendering all animation by browser itself.
wfunction 9y ago
> Properties like `will-change` or `transform3d` substantially increase the client device's energy usage They also made the font blurry on Chrome on Windows prior to DirectWrite (it's moot now, though personally I'll say that I hate the use of DirectAnything for simple font rendering).

michaelchisari 9y ago

A nice feature would be to add an "energy saver" option to your web app, which adds a class to your app and a stylesheet that disables all animations.

myfonj 9y ago
In user styles capable browsers you can disable CSS3 animations pretty easily, just using *, *::before, *::after { transition: none !important; animation: none !important; } (For not-so-capable browsers using author level pseudo-user-style sheets the `star` must have raised specificity, like `:not(#\0)`.) I used this in the past when I wanted to play 2048 as fast as possible, resetting also border-radius, text-shadow, box-shadow, text-rendering, image-rendering and background-image [1]. It really made quite a difference :] [1] https://userstyles.org/styles/103878/nofx https://userstyles.org/styles/103878/nofx
- uwu 9y ago
  `transition: none` breaks pages relying on the "transitionend" js event (edit: and i guess the other transition-related events i forgot about), i noticed logging into google wouldn't work with it (it wouldn't hide some gray overlay) here's what i use instead: /* forgot if this was needed but i think using !important here broke something */ transition-property: none; /* maybe not needed */ transition-delay: 0!important; /* non-zero to support "transitionend" event */ transition-duration: 0.0000001s!important; /* possible tiny optimization */ transition-timing-function: linear!important; i don't know if `animation` has events associated with it but i haven't came across any sites breaking without them
  - myfonj 9y ago
    This is insightful remark; I guessed it could break some presumably crappy designs blindly relying on transition-state or such, but … Google? Wow. Even considering their approach to user level style sheets [1] it is mildly surprising. Side note: perhaps using `..duration: ..ms` in and `transition-timing-function: step-start;` could make some additional micro optimisation. [1] killed it: https://bugs.chromium.org/p/chromium/issues/detail?id=347016 https://bugs.chromium.org/p/chromium/issues/detail?id=347016
halokonrad 9y ago
There is actually a draft of media query called "reduced motion" that tells webpage that user prefers to have animation use set to minimum. It wasn't created to save energy but to help people that feel dizzy when too much of animation is going on. https://webkit.org/blog/7551/responsive-design-for-motion/#using-reduce-motion-on-the-web https://webkit.org/blog/7551/responsive-design-for-motion/#u... Other nice to have option would be to just force disable rendering all animation by browser itself.

wfunction 9y ago

> Properties like `will-change` or `transform3d` substantially increase the client device's energy usage They also made the font blurry on Chrome on Windows prior to DirectWrite (it's moot now, though personally I'll say that I hate the use of DirectAnything for simple font rendering).