


Блоки link с @import. Оптимизация CSS-структуры. Оптимизация структуры веб-страниц
@import @import
link @import
link с @import
Блоки link с @import
Много @import
link link
Упрощаем CSS-селекторы
Незначительное отличие от предыдущего примера привело к удивительным результатам в IE. <link> используется для вызова a.css и для нового файла proxy.css, который содержит только @import для b.css.
В HTML-коде:
<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='proxy.css'>
В proxy.css:
@import url('b.css');
Результаты эксперимента в IE показаны на рисунке 4. Первый запрос – HTML-документ. Второй запрос – a.css (2 секунды). Третий – proxy.css. Четвертый – b.css (2 секунды). И вот что удивительно, IE не хочет начинать загрузку b.css, пока файл a.css не будет загружен полностью. Во всех других браузерах такого сюрприза не происходит, что приводит к более быстрой загрузке страницы (см. рисунок 5.5).

Рис. 5.4. Результаты в IE. Источник getincss.ru

Рис. 5.5. Результаты в других браузерах. Источник getincss.ru