title: Set multiple values for one css attribute
body: <p>Is it possible to set two Values for a single attribute on a CSS ID, e.g.</p>
  
  <blockquote>
    <p>height: 12em; height: 12rem;</p>
  </blockquote>
  
  <p>for a single id?
  I know it's possible to do this with CSS, but I want to change the height via javascript, and have both values on one attribute, so that 'em' functions as a fallback for Browsers not supporting 'rem'.</p>
  
  <p>Example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function updateHeight() {
    var testElem = document.getElementById("testId");
    testElem.style.height = "12em";
    testElem.style.height = "12rem";
    //testElem.style.height = "12em; 12rem;"; doesn't work, applies "12em"
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#testId {
    height: 8em;
    height: 8rem;
    background-color: black;
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Test&lt;/title&gt;
    &lt;meta charset="utf-8" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="testId"&gt;
      BlaBla
    &lt;/div&gt;
    &lt;button onclick="updateHeight()"&gt;Bla&lt;/button&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>