Выносим CSS в пост-загрузку

Люблю я Ваши статьи. Очень помогают в разработке. Руководствуюсь ими при создании CMS/CMF

Пойду сделаю кофе, вникать долго, но интересно. :)

Во-вторых, сообщить браузерам, что они могут отобразить страницу без первого массива правил (ведь если в нем содержатся только фоновые изображения, то они могут и подождать чуть-чуть).

и пусть весь мир подождет… извините, не сдержался)
Далеко не всегда фоновые изображения могут подождать, особенно если это фоновое изображение для какой-нибудь кнопки, или заголовка, чего конечно же не должно быть, но у дизайнеров другая точка зрения)

Заметил интересную особенность при таком подходе в IE6.
А именно, обратил внимание на поведение фоновых картинок, если их много и если на странице они повторяются.

например:

css
div.my_div {background-img: url('./my_img.gif'); width: 100px; height: 100px}

html

<div class=«my_div»></div>
<div class=«my_div»></div>
<div class=«my_div»></div>
<div class=«my_div»></div>

В этом случае ие6 начинает грузить для каждого дива ЗАНОВО картинку.
Другие браузеры (и ие7) этого не делают.
Как только загрузилась картинка они сразу покажут ее во всех дивах.

PS. Это замечено, если css грузиться после загрузки всей страницы. То есть после официального onload

PSS.
>В этом случае ие6 начинает грузить для каждого дива ЗАНОВО картинку.
Поправка:
Он заново не грузит, точнее он посылает запрос на загрузку картинки, получает 304 и только потом берет ее из кеша.

сегодня как раз этим и занимался :)
летает в воздухе наверное ;)

Ничего не понял, но все равно круто, смогу лишь только повторить по аналогии. Спасибо автору!

Скромно замечу, что похоже, у автора навязчивое желание использовать узкий термин reflow там, где можно обойтись русским и априори гораздо более понятным для более широких масс «перерисовка страницы». Более того, термин reflow введён и используется, насколько мне известно, главным образом, в Mozilla, и применительно к другим браузерам такую перерисовку так обычно не называют. ;-)

По моему, достаточно сомнительный прирост скорости в 12% с учетом проблем которые с этим возникают.

интересный поход, спасибо за статью. возникли вопросы
1) как бы нормально автоматизировать сборку таких CSS файлов.
2) для Safari я так понял проблема в том что, он не начинает отображать страницу пока не загрузит все стили? можно запросить стили используя AJAX + после загрузки затолкать css в head через style

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

по поводу проблемы сложилось четкое ощущение: высосано из пальца.

мотивирую:
1. проблемы css-спрайтов обрисованы для тех случаев, когда они (спрайты) используются «без головы», а некоторые упомянутые проблемы, весьма спорны (в том смысле, что являются ли они проблемами, — к примеру, в статье «спрайты — зло» написано, что они (спрайты) требуют введения доп. несемантической разметки, заменяющей, в принципе, тег img и это дано как проблема; однако так ли это — бооольшой вопрос)
2. весьма странно, что в оригинале статьи о том, что спрайты — зло, автор указывает на невозможность позиционирования фонового png с прозрачностью для IE6… есть же уже IE PNG fix 2 пусть и альфа, но вполне работает.
3. описанная в этом топике методология, по моему скромному мнению, весьма специфична и может использоваться на ресурсах со сверхвысокой посещаемостью, коих в сети весьма и весьма немного.

резюме: выигрыш по скорости 12% — рассчетный. тестов с описанием методологии тестирования нет.

описанное решение, на мой взгляд, является пока слишком сырым для практического использования.

предпочитаю нормально сделанные спрайты.