Obsługa wielu przeglądarek bez ładowania obrazów - responsywny projekt - html, css, css3, responsive-design, cross-browser

Chcę użyć image_1 do ekranów komputerowych iimage_2 dla urządzeń mobilnych jako obrazy tła i oczywiście nie chcę ładować image_1, gdy używana jest wersja mobilna (załadowany jest image_2). Czy jest to możliwe w przypadku obsługi tylko css i obsługi wielu przeglądarek (w tym starych przeglądarek)?

Wyszedłem z tym rozwiązaniem, ale nie wiem, czy to jest przeglądarka (z IE10 / edge i najnowszą wersją FF, opera, chrome - działa dobrze).

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?*/
}
}

Odpowiedzi:

To powinno działać dobrze we wszystkich przeglądarkach z wyjątkiem ie8 i poniżej, które nie obsługują zapytań o media

Przetestowałem to dla ciebie i to zadziała we wszystkich przeglądarkach oprócz wcześniejszych wersji IE, które nie obsługują zapytań o media.

:)