<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Custom Properties IE11 Demo</title>
<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="./ie11CustomProperties.js"><\x2fscript>');</script>
<body>
<a href="https://github.com/nuxodin/ie11CustomProperties" style="flex-basis:100%; max-width:none; padding:.5em">back to project</a>
<style>
html {
--theme-color:orange;
}
body {
display:flex;
flex-wrap:wrap;
}
body > * {
max-width:500px;
margin:2rem;
padding:2rem;
overflow:auto;
border:2px solid var(--theme-color);
}
h2 {
border-bottom:2px solid var(--theme-color);
}
a {
color:var(--theme-color);
}
button {
background-color:var(--theme-color);
}
pre {
color:#fff;
background-color:var(--theme-color);
font-size:13px;
padding:1em;
overflow:auto;
}
</style>
<div id=pseudoClasses tabindex=0>
<h2>Pseudo-classes (:hover, :focus, :target)</h2>
<ul>
<li class=hasHover>Has Hover</li>
<li class=hasTarget>Has Target</li>
<li class=hasFocus>Has Focus</li>
</ul>
<a href="#pseudoClasses">target to #pseudoClasses</a><br>
<a href="#">click to set target #</a><br>
<style>
#pseudoClasses:hover .hasHover,
#pseudoClasses:target .hasTarget,
#pseudoClasses:focus .hasFocus {
background:var(--theme-color);
}
</style>
</div>
<div id=chaining>
<h2>Chaining</h2>
<style>
#chaining {
--a:var(--theme-color);
--b:var(--a);
background-color:var(--b);
}
#chaining:hover {
--a:transparent;
}
</style>
</div>
<div id=fallback>
<h2>Fallback</h2>
<style>
#fallback {
--theme-color:var(--not_defined, green);
}
</style>
</div>
<div id=before>
<h2>Pseudo-Elements</h2>
<style>
#before > h2 {
--before:' 👉 ';
}
#before > h2::before {
content:var(--before);
}
</style>
</div>
<div id=style_attribute>
<h2>ie-style attributes</h2>
<div style="background-color:var(--theme-color); --inner:white; padding:10px" ie-style="background-color:var(--theme-color); --inner:white">
<pre>
ie-style="
background-color:var(--theme-color);
--inner:white"
</pre>
<pre style="background:var(--inner); color:var(--theme-color)" ie-style="background:var(--inner); color:var(--theme-color)">
ie-style="background:var(--inner);
color:var(--theme-color)"
</pre>
</div>
</div>
<div id=dom_change>
<h2>Dom changes</h2>
<button onclick="document.body.classList.toggle('dark-mode')">onclick="document.body.classList.toggle('dark-mode')"</button>
<style>
body.dark-mode {
--bg-color:#666;
}
body {
background-color:var(--bg-color);
}
</style>
</div>
<div id=svg>
<h2>SVG</h2>
<svg width="60" height="60" viewbox="0 0 24 24" fill-rule="evenodd" clip-rule="evenodd">
<path d="M6 24H4a1 1 0 0 1-1-1v-1a2 2 0 0 1-2-2v-8a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1V3a3 3 0 0 1 3-3h16a3 3 0 0 1 3 3v4a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1v8a2 2 0 0 1-2 2v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1H7v1a1 1 0 0 1-1 1zm-1.5-7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm15 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm-5 1h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM21 5.5a.5.5 0 0 0-.5-.5h-17a.5.5 0 0 0-.5.5V14s3.1 1 9 1 9-1 9-1V5.5zM16 2H8v1h8V2z"/>
</svg>
<style>
#svg svg {
fill:var(--theme-color);
}
#svg:hover svg {
--theme-color:black;
}
</style>
</div>
<div id=jsIntegration>
<h2>JS-Integration</h2>
<button onclick="setThemeColor('red')">onclick="setThemeColor('red')"</button><br>
<button onclick="setThemeColor('orange')">onclick="setThemeColor('orange')"</button><br>
<br>
<button onclick="getThemeColor(this)">onclick="getThemeColor(this)"</button>
<script>
function setThemeColor(color) {
document.body.style.setProperty('--theme-color', color);
}
function getThemeColor(element) {
const computed = getComputedStyle(element);
const color = computed.getPropertyValue('--theme-color');
alert(color);
}
</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>
body {
--important:var(--theme-color) !important;
--important:white;
}
.important:hover {
background-color:var(--important) !important;
}
#important {
background-color:white;
}
</style>
<pre>
/* important on setters: */
body {
--important:var(--theme-color) !important;
--important:white;
}
/* important on gettses: */
.important:hover {
background-color:var(--important) !important;
}
#important {
background-color:white;
}
</pre>
</div>
<div id=register>
<h2>CSS.registerProperty()</h2>
<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>
<script>
CSS.registerProperty({
name:'--red-border',
inherits:false,
initialValue:'5px solid red',
})
</script>
<style>
.initialValue {
border:var(--red-border);
}
.parent {
--red-border:5px dashed red;
border:var(--red-border);
}
.child {
border:var(--red-border);
}
</style>
</div>
<div id=dynamicStyle>
<h2>dynamic added style-element</h2>
<button onclick="addStyleElememt()">
onclick="addStyleElememt()"
</button>
<script>
function addStyleElememt(){
var el = document.createElement('style');
var color = (0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
el.innerHTML =
'#dynamicStyle { '+
'--theme-color: #'+color+';'+
'}';
dynamicStyle.appendChild(el);
}
</script>
</div>
<div id="dynamicContent">
<h2>Dynamic Content</h2>
<button onclick="setContent()">onclick="setContent()"</button>
<script>
function setContent(){
var content = dynamicContent.innerHTML;
dynamicContent.innerHTML = '';
setTimeout(function(){
dynamicContent.innerHTML = content;
},500)
}
</script>
</div>
<script hidden>
!document.body.msMatchesSelector && alert("Visit this Page in IE11!");
var styleElements = document.querySelectorAll('style:not([hidden]), script:not([hidden])');
for (var i=0, styleElement; styleElement = styleElements[i++];) {
const pre = document.createElement('pre');
var contents = styleElement.innerHTML;
contents = contents.replace(/-ie-/g, '--');
contents = contents.replace(/-ieVar-[^;]+(;)?( )?/g, '');
pre.innerHTML = htmlEntities(contents.trim());
styleElement.parentNode.insertBefore(pre, styleElement);
}
function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
</script>