Skip to content
Permalink
Browse files

listen for media-query changes

  • Loading branch information
nuxodin committed Sep 9, 2019
1 parent 8a58cc9 commit c976678a92c3fd35e704ecec7d2f4ee4d5115d2b
Showing with 57 additions and 17 deletions.
  1. +12 −3 ie11CustomProperties.js
  2. +2 −1 package.json
  3. +43 −13 test.html
@@ -1,4 +1,4 @@
/*! ie11CustomProperties.js v2.1.0 | MIT License | https://git.io/fjXMN */
/*! ie11CustomProperties.js v2.2.0 | MIT License | https://git.io/fjXMN */
// c1.onElement helper
!function () {
'use strict';
@@ -108,8 +108,7 @@

// cached regexps, better performance
const regFindSetters = /([\s{;])(--([^;}]+:[^;!}]+)(!important)?)/g;
const regFindGetters = /([{;]\s*)([^;}]+:[^;}]*var\([^!;}]+)(!important)?/g;
//const regFindGetters = /([{;]\s*)([^;}]+:[^;}]*var\([^;}]+)/g;
const regFindGetters = /([{;]\s*)([^;}{]+:[^;}]*var\([^!;}]+)(!important)?/g;
const regRuleIEGetters = /-ieVar-([^:]+):/g
const regRuleIESetters = /-ie-([^};]+)/g
const regHasVar = /var\(/;
@@ -196,6 +195,16 @@
const found = parseRewrittenCss(rule.cssText)
if (found.getters) addGettersSelector(rule.selectorText, found.getters);
if (found.setters) addSettersSelector(rule.selectorText, found.setters);

// mediaQueries: redraw the hole document
// better add events for each element?
const media = rule.parentRule && rule.parentRule.media && rule.parentRule.media.mediaText;
if (media && (found.getters || found.setters)) {
matchMedia(media).addListener(function(){
drawTree(document.documentElement)
})
}

}
}

@@ -1,6 +1,6 @@
{
"name": "ie11-custom-properties",
"version": "2.1.0",
"version": "2.2.0",
"description": "Custom Properties polyfill for IE11.",
"main": "ie11CustomProperties.js",
"author": "Tobias Buschor",
@@ -13,6 +13,7 @@
"css",
"css custom properties",
"css variables",
"polyfill",
"IE11"
],
"bugs": {
@@ -37,6 +37,8 @@
}
</style>



<div id=pseudoClasses tabindex=0>
<h2>Pseudo-classes (:hover, :focus, :target)</h2>
<ul>
@@ -81,15 +83,15 @@ <h2>Fallback</h2>
</div>

<div id=before>
<h2>Pseudo-Elements</h2>
<style>
<h2>Pseudo-Elements</h2>
<style>
#before > h2 {
--before:' 👉 ';
--before:' 👉 ';
}
#before > h2::before {
content:var(--before);
content:var(--before);
}
</style>
</style>
</div>

<div id=style_attribute>
@@ -156,6 +158,31 @@ <h2>JS-Integration</h2>
</script>
</div>



<div id=mediaQueries tabindex=0>
<h2>Media Queries</h2>
<p>Resize the browser window</p>
<ul>
<li class=min400 >min-width: 400px</li>
<li class=min800 >min-width: 800px</li>
<li class=min1200>min-width: 1200px</li>
<li class=min1600>min-width: 1600px</li>
<li class=min2000>min-width: 2000px</li>
<li class=min2400>min-width: 2400px</li>
</ul>
<style>
@media (min-width: 400px ) { .min400 { background:var(--theme-color); } }
@media (min-width: 800px ) { .min800 { background:var(--theme-color); } }
@media (min-width: 1200px) { .min1200 { background:var(--theme-color); } }
@media (min-width: 1600px) { .min1600 { background:var(--theme-color); } }
@media (min-width: 2000px) { .min2000 { background:var(--theme-color); } }
@media (min-width: 2400px) { .min2400 { background:var(--theme-color); } }
</style>
</div>



<div id=important class=important>
<h2>!important</h2>
<style hidden>
@@ -190,11 +217,14 @@ <h2>!important</h2>

<div id=register>
<h2>CSS.registerProperty()</h2>
<div class=-inheritParent style="padding:1em; margin:1em 0">
class=-inheritParent
<div class=-inheritChild style="padding:1em;">class=-inheritChild</div>
<div class=initialValue style="padding:1em; margin:1em 0">class=initialValue</div>
<div class=parent style="padding:1em; margin:1em 0">
class=parent<br>
<div class=child style="padding:1em;">
class=child<br>
should not inherit dotted border
</div>
</div>
<div class=-initialValue style="padding:1em; margin:1em 0">class=-initialValue</div>

<script>
CSS.registerProperty({
@@ -204,14 +234,14 @@ <h2>CSS.registerProperty()</h2>
})
</script>
<style>
.-inheritParent {
--red-border:5px dashed red;
.initialValue {
border:var(--red-border);
}
.-inheritChild {
.parent {
--red-border:5px dashed red;
border:var(--red-border);
}
.-initialValue {
.child {
border:var(--red-border);
}
</style>

0 comments on commit c976678

Please sign in to comment.
You can’t perform that action at this time.