gregwhitworth

I am wanting to get developer feedback on what you are expecting based on the code below. Please don't run the code in a browser to determine your answer. Purely based on your knowledge of CSS which color box should the user see? Blue or yellow? Leave your answer in the comments. Thank you!!

  <style type='text/css'>
    div, nav {
		width: 200px;
		height: 200px;
	}

	nav, div.c1 {

position: fixed;

gregwhitworth

(function (window) {
      document.addEventListener("DOMContentLoaded", function (e) {
          var supports = {
            srcset: false,
            currentSrc: false,
            sizes: false,
            picture: false
          };
          var img = new Image();

gregwhitworth

:root {
  --primary: #0B61A4;
  --secondary: #25567B;
}

header {
  background: var(--primary);
  border-bottom: 2px solid var(--secondary);
}

gregwhitworth

body {
  background: var(--primary, blue);
}

gregwhitworth

div {
  --primary: blue;
  margin-top: var(--primary, 12px);
}

gregwhitworth

body {
  background: red;
}

@supports(--foo: blue) {
  body {
    background: green;
  }
}

gregwhitworth

:root {
  --foo: true;
}

body {
  background: red;
}

@supports(--foo: false) {
  body {

gregwhitworth

div {
  --pos: 0;
  left: var(--pos);
  animation: move 1s;
}

@keyframes move {
  to {
    --pos: 50px;
  }

gregwhitworth

body {
  --primary: blue;
  background: var(--primary);
}

.my-component {
  --primary: yellow;
  background: var(--primary);
}

gregwhitworth

var myComponent = document.getElementsByClassName('my-component')[0];
myComponent.style.setProperty('--primary', 'green');