dphiffer/important-test.html

## important-test.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>!important considered harmful</title>
    <style>

    body {
      font: 12px verdana;
    }

    div {
      font: 10px verdana;
      color: #fff;
      width: 300px;
      height: 100px;
      padding: 20px;
    }

    p {
      width: 300px;
    }

    .normal {
      background: red;
    }

    .important {
      background: red !important;
    }

    </style>
    <script>

    // !important flag overrides JS style assignment
    window.onload = function() {
      var div = document.getElementsByTagName('div');
      div[0].style.background = 'green';
      div[1].style.background = 'green';
    };

    </script>
  </head>
  <body>
    <div class="normal">background: red;</div>
    <div class="important">background: red !important;</div>
    <p>
      This page demonstrates how setting the <code>!important</code> flag in CSS makes it impossible to override styles after the fact in JavaScript. Each div above starts with a red background, and a JavaScript onload function attempts to set each of them to green.
    </p>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>!important considered harmful</title>
	<style>

	body {
	font: 12px verdana;
	}

	div {
	font: 10px verdana;
	color: #fff;
	width: 300px;
	height: 100px;
	padding: 20px;
	}

	p {
	width: 300px;
	}

	.normal {
	background: red;
	}

	.important {
	background: red !important;
	}

	</style>
	<script>

	// !important flag overrides JS style assignment
	window.onload = function() {
	var div = document.getElementsByTagName('div');
	div[0].style.background = 'green';
	div[1].style.background = 'green';
	};

	</script>
	</head>
	<body>
	<div class="normal">background: red;</div>
	<div class="important">background: red !important;</div>
	<p>
	This page demonstrates how setting the <code>!important</code> flag in CSS makes it impossible to override styles after the fact in JavaScript. Each div above starts with a red background, and a JavaScript onload function attempts to set each of them to green.
	</p>
	</body>
	</html>