Получает ли @import в CSS дополнительные HTTP-запросы?

У меня есть сайт электронной торговли, в котором содержится около 8 файлов CSS, связанных с заголовком, что приводит к 8 отдельным HTTP-запросам на сервер. Я объединил все файлы CSS в один большой, в результате получив файл 67kb (!) - чтобы сократить HTTP-запросы до 1 для наших файлов css.

Я нахожу этот размер файла CSS немного неуправляемым в свете того факта, что постоянно выполняю обновления на сайте. Моя забота заключается в том, что мои пользователи могут поймать меня в середине обновления и увидеть страницу с нестандартным интерфейсом при переходе со страницы на страницу - b/c 67kb все еще занимает хорошие 2-3 секунды, прежде чем она будет успешно размещена на удаленном сервере через FTP.

Мой вопрос: использует ли @import в этом большом файле CSS для разбивки файлов на более мелкие более управляемые размеры (в этом CSS файле) возвращает нас к исходным 8 http-запросам при загрузке страниц? Или @imports в CSS обрабатываются по-разному?

Ответ 1

Да, вы вернетесь к запросу в каждой таблице стилей при использовании @import.

Ваш лучший выбор - минимизировать и объединить CSS в один файл для развертывания. Но вы все равно можете разрабатывать отдельные файлы.

Ответ 2

Браузер должен каким-то образом получить данные, поэтому как он не может использовать другой HTTP-запрос?; -)

Также возможно, что вы выиграете от кеширования браузера, если вы меняете только один файл, а остальные семь не изменяются.

Вы можете попробовать обнюхивать соединение между клиентом и сервером и посмотреть, что он запрашивает.

Ответ 3

Вы можете предотвратить дополнительные HTTP-запросы, объединив таблицы стилей с .htaccess. Этот метод объясняется в HTML5 Boilerplate.htaccess. Он работает следующим образом:

В .htaccess:

<FilesMatch "\.combined\.(js|css)$">
    Options +Includes
    SetOutputFilter INCLUDES
</FilesMatch>

В style.combined.css:

<!--#include file="reset.css"-->
<!--#include file="style.css"-->

Вы можете использовать это для объединения .js(или любого другого расширения, которое вы ввели в круглую скобку.)

Документация для Options + Includes здесь.

Ответ 4

Да, для каждого оператора @import выдается отдельный запрос.

Вы можете проверить это с помощью быстрого теста; напишите фрагмент HTML, включая файл CSS, который импортирует второй файл CSS. Просмотр результатов на панели Firebug показывает два отдельных запроса для каждого файла CSS. Это тест, который я использовал для подтверждения этого ответа.

Ответ 5

Импорт CSS не обрабатывается иначе, чем любые другие "включить" на странице, например ссылку на внешний JavaScript script. Однако кеширование браузера должно сделать это не-проблемой, за исключением первого доступа к вашему сайту.

Ответ 6

Если у вас есть файл с CSS размером 67 Кб, есть что-то странное. Помните, что C в CSS для CASCADING, и это означает, что вам не нужно определять в каждом классе все свойства каждого из тегов, участвующих в классе.

Например, если вы определяете < DIV id = "maincontainer" > в качестве контейнера вы можете определить для него класс

#maincontainer {font-face:Arial,helvetica,sans;}

Это означает, что если вы создадите подкласс для этого тега <P> как

#maincontainer P {color:darkgray;}

Все <P> теги внутри основного контейнера DIV будут использовать шрифт arial, helvetica, sanz.

Также попробуйте создать файлы CSS, чтобы их использовать на страницах. Уникальный CSS файл для всего сайта позволяет загружать множество классов, которые не будут использоваться на некоторых страницах. Разделите и победите.