window.MSInputMethodContext && document.documentMode && document.write('<script src="./ie11CustomProperties.js"><\x2fscript>');
back to project 
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;
}

Pseudo-classes (:hover, :focus, :target)

target to #pseudoClasses
click to set target #
#pseudoClasses:hover .hasHover,
#pseudoClasses:target .hasTarget,
#pseudoClasses:focus .hasFocus {
  background:var(--theme-color);
}

Chaining

#chaining {
  --a:var(--theme-color);
  --b:var(--a);
  background-color:var(--b);
}
#chaining:hover {
  --a:transparent;
}

Fallback

#fallback {
  --theme-color:var(--not_defined, green);
}

Pseudo-Elements

#before > h2 {
--before:' 👉 ';
}
#before > h2::before  {
content:var(--before);
}

ie-style attributes

ie-style="
background-color:var(--theme-color);
--inner:white"
    
ie-style="background:var(--inner);
color:var(--theme-color)"

Dom changes

body.dark-mode {
  --bg-color:#666;
}
body {
  background-color:var(--bg-color);
}

SVG

#svg svg {
  fill:var(--theme-color);
}
#svg:hover svg {
  --theme-color:black;
}

JS-Integration




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);
}

Media Queries

Resize the browser window

@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); } }

!important

/* 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;
}

CSS.registerProperty()

class=initialValue
class=parent
class=child
should not inherit dotted border 
CSS.registerProperty({
  name:'--red-border',
  inherits:false,
  initialValue:'5px solid red',
})
.initialValue {
  border:var(--red-border);
}
.parent {
  --red-border:5px dashed red;
  border:var(--red-border);
}
.child {
  border:var(--red-border);
}

dynamic added style-element

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);
}

Dynamic Content

function setContent(){
  var content = dynamicContent.innerHTML;
  dynamicContent.innerHTML = '';
  setTimeout(function(){
    dynamicContent.innerHTML = content;
  },500)
}