Display flash object alternative content depending on media query?

HTML & CSS
13

Just for the record I have tried hiding the html nav immediately inline in js like this:

  <div id="nav">
    <ul>
      <li>
        <a href="/1.html">Link 1</a>
      </li>
      <li>
        <a href="/2.html">Link 2</a>
      </li>
      <li>
        <a href="/3.html">Link 3</a>
      </li>
      <li>
        <a href="/4.html">Link 4</a>
      </li>
    </ul>
  </div>

<script>
    var nav = document.getElementById('nav');
    if (nav) nav.style.display = 'none';
</script>

This effectively prevents any background images belonging to nav descendants from loading - tested in Firefox and Chrome. I don’t know if it will work in 100% of cases but when testing on localhost it did. On DOM load my script simply sets the display to block again so this doesn’t cause any problems. If a user has js turned off then the hiding script will not fire therefore the menu will be visible.