Question

In the paradigm of responsive design it’s easy to hide stuff via css like this

@media screen and (max-width: 360px) {
    #flash {
    display:none;
}

Is there a way not to load the div with id=”flash” without javascript, flash or server site languages? The reason for me of not loading the flash part is that i dont want mobile devices to load it…

HTML:

<div id="flash">
   <flashgallerystuff></>
</div>

Thanks a lot!

Answer 1

You can’t use lack of javascript to hide an element, but you could take a ‘progressive enhancement’ type approach and use javascript to insert the div in question. That way the div is never present for users without javascript.

Another, similar approach, is to give the body tag a default class of, eg. ‘no-js’, which you remove on pageload with javascript (so browsers without js will have that class on their body tags). Then you can use that class in the CSS to set a default of ‘display:none’ for your ‘flash’ div:

.no-js #flash { display: none }