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

#css

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

Ответы

Ответ 1

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



    
        
    
    



Вот что получилось в хроме:

Видна попытка загрузки только одной картинки. Если подергать ширину окна, то появляется
вторая:

Если грузить сразу маленьким окном(по-идее условие max-width:1920px тоже проходит),
то все равно видим только маленькую картинку:

А вот IE 11 сразу обе попытался грузануть:

"Узкий" IE 11 только маленькую картинку захотел грузить:

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




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



    
        
        
    
    



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

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


И css1920.css:

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


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

И

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

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