Prise en charge multi-navigateur pour ne pas charger les images - design réactif - html, css, css3, responsive-design, cross-browser

Je souhaite utiliser image_1 pour les écrans de bureau etimage_2 pour mobile en tant qu’image d’arrière-plan et, bien sûr, je ne souhaite pas charger image_1 lorsque la version mobile est utilisée (image_2 est chargée). Est-ce possible avec la prise en charge css uniquement et multi-navigateurs (y compris les anciens navigateurs)?

Je suis sorti avec cette solution, mais je ne sais pas si cela est multi-navigateur (avec IE10 / edge et la dernière version de FF, opera, chrome - cela fonctionne très bien).

HTML

<div class="bg">
<div>
<div>
Content
</div>
</div>
</div>

CSS

.bg {
background: #FFFFFF url("image_1.png") no-repeat center top;
}

@media (max-width:306px) {
.bg {
background: #FFFFFF url("image_2.png") no-repeat center top;
/* will the image_1.png image load this way
in old browsers if condition of max-width is true?*/
}
}

Réponses:

Cela devrait fonctionner correctement dans tous les navigateurs, sauf ie8 et les versions antérieures, qui ne prennent pas en charge les requêtes multimédia.

J'ai testé cela pour vous et cela fonctionnera avec tous les navigateurs sauf les versions antérieures d'IE qui ne supportent pas les requêtes multimédia

:)