Skip to content

Instantly share code, notes, and snippets.

@cristinecula
cristinecula / css-var-polyfill.js
Created May 13, 2017 06:54
CSS Variable Polyfill
/*
TODO:
- Option to wait to apply anything until all <link>s are parsed or inject what we have and update as each <link> returns
*/
var cssVarPoly = {
init: function() {
if (window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)')) {
return;
}
cssVarPoly.ratifiedVars = {};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
Test
<script id="jsbin-javascript">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
Native web animations
<script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
</head>
<body>
Using web animations polyfill
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations-next.min.js"></script>
</head>
<body>
Using web animations next polyfill
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations-next.min.js"></script>
</head>
<body>
Using web animations polyfill
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations-next.min.js"></script>
</head>
<body>
Using web animations next polyfill + workaround