Загрузка файлов и медиа запросы

Question

Всем известно, что стили из медиа запросов не применяются, если устройство не подходит под параметры, указанные в запросе. А что с файлами, например, background: url("...") no-repeat; Т.е., css файл, внутри которого несколько медиа запросов: десктоп, планшет, телефон и 3 url с бэкграундами на каждое устройство. Они ведь не будут загружаться все, а загрузится только соответствующий медиа запросу, так? Например сайт открыт с телефона – загрузился один бэкграунд из соответствующего медиа запроса.

интересный вопрос. я бы на твоем месте просто провел тест - открыл бы консоль в браузере на вкладке network и перезагрузил бы страницу - там ты сразу увидишь какие были картинки подгружены и сразу станет понятно как оно работает) — Denis Ross, Sep 04 '18 at 14:00
Уже полез в неё, буду тестировать. — halfPeiceOfGangsta, Sep 04 '18 at 14:46

Oleg · Answer 1 · 2018-09-04T15:03:22.357

Вопрос показался интересным, решил поиграться. Сделал простецкий index.html:

<!DOCTYPE html>
<html>
    <head>
        <style>
            @media screen and (max-width: 1920px) {
                body {
                    background: url("./some/path/doesnt/matter1920.jpg");
                }
            }
            @media screen and (max-width: 600px) {
                body {
                    background: url("./some/path/doesnt/matter600.jpg");
                }
            }
        </style>
    </head>
    <body></body>
</html>

Вот что получилось в хроме: Видна попытка загрузки только одной картинки. Если подергать ширину окна, то появляется вторая: Если грузить сразу маленьким окном(по-идее условие max-width:1920px тоже проходит), то все равно видим только маленькую картинку: А вот IE 11 сразу обе попытался грузануть: "Узкий" IE 11 только маленькую картинку захотел грузить:

Можете поиграться сами с другими браузерами. Мне лень их устанавливать.
Или другими параметрами медиа запроса.

UPD
Теперь такой эксперимент. Допустим мы теперь эти картинки разнесем по разным CSS. Делаем такой index.html:

<!DOCTYPE html>
<html>
    <head>
        <link rel='stylesheet' media='screen and (max-width: 1920px)' href='./css1920.css' />
        <link rel='stylesheet' media='screen and (max-width: 600px)' href='./css600.css' />
    </head>
    <body></body>
</html>

Рядом положим две css, по которым разнесем картинки. css600.css:

body {
    background: url("./some/path/doesnt/matter600.jpg");
}

И css1920.css:

body {
    background: url("./some/path/doesnt/matter1920.jpg");
}

Теперь хром грузит обе CSS, но картинку только одну:
И

IE по-прежнему грузит всё для полного окна:

И только маленькую картинку для маленького окна:

Интересно, т.е. даже из различных подходящих медиа запросов браузер выбирает только одну картинку, а не загружает их поочерёдно. — halfPeiceOfGangsta, Sep 04 '18 at 14:48
Видно, что поведение немного разное в разных браузерах. Сейчас еще одну мысль проверяю — Oleg, Sep 04 '18 at 14:51
любопытный опыт, возьму на заметку, спасибо!) (самому было лень тестировать Т_Т) — Denis Ross, Sep 04 '18 at 14:53
В качестве подстраховки можно использовать @media(min-width: 601px) and (max-width: 1920px), вместо @media screen and (max-width: 1920px), тогда маленький экран не попадёт под под первый медиа запрос, даже если какой-то из браузеров будет загружать картинки всех подходящих медиа запросов. — halfPeiceOfGangsta, Sep 04 '18 at 14:56
@DenisRoss Простое любопытство взяло) Хотя я даже не фронтендер. Так, приходится иногда — Oleg, Sep 04 '18 at 15:04
@halfPeiceOfGangsta Этот вариант тоже следует проверить. Браузеры все равно увидят оба бэкграунда. Как они будут обрабатывать - предлагаю Вам уже самостоятельно проверить. Мне пора закругляться — Oleg, Sep 04 '18 at 15:05

Загрузка файлов и медиа запросы

1 Answers1