https://github.com/oslego/css-polyfill-triggers

Demo of using CSS Animations to trigger CSS polyfills
https://github.com/oslego/css-polyfill-triggers

Last synced: about 1 month ago
JSON representation

Demo of using CSS Animations to trigger CSS polyfills

• Host: GitHub
• URL: https://github.com/oslego/css-polyfill-triggers
• Owner: oslego
• Created: 2015-03-16T15:10:09.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-04-23T14:25:13.000Z (over 9 years ago)
• Last Synced: 2024-10-14T12:49:07.856Z (3 months ago)
• Language: HTML
• Homepage: https://oslego.github.io/css-polyfill-triggers
• Size: 1.33 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Using CSS Animations to trigger CSS polyfills

This basic example demonstrates how to trigger CSS polyfills with CSS Animations events.

![Illustration of CSS polyfills triggered with CSS Animations](./demo.gif)

## The idea

This technique works by encoding the polyfill-able CSS declaration as the name of a CSS animation which is applied to target elements. A script listens at runtime for `animationStart` events, decodes the animation name into a property/value pair and calls any registered CSS polyfills for it.

## Pros

- This approach removes the need for using an expensive JavaScript-driven CSS parser at runtime;

- Relying on the native CSS engine to apply CSS animations according to media queries, selector specificity and cascade also removes the need for complex JavaScript logic in determining when and what to polyfill;

- CSS animation events are triggered for each selector target individually;

## Cons

- Complications may arise when applying this polyfill-triggering technique with CSS Animations used for their intended purposes. However, it is possible to use multiple animations on the same target element.

- Manually adding & maintaining CSS Animations as polyfill triggers is prone to human error. Using a CSS post-processor might be more suitable.

- This technique may be limited to polyfilling property/value pairs. Polyfills for selectors or CSS Rules like `@supports` do not benefit from this animation-triggered behavior.

- CSS animations are not supported in older browsers.

## Thoughts

If you find this interesting, let's talk. I'm [@razvancaliman](https://twitter.com/razvancaliman) on Twitter.