Реактивные веб-сайты Николай Мациевский Евгений ...

136РЕАКТИВНЫЕ ВЕБ-САЙТЫПо мере появления элементов на странице пользователь ощущает, чтостраница загружается. Обычно окончание этой стадии совпадает дляпользователя с окончанием всей загрузки.Если говорить об ускорении этой стадии, то здесь одной из основныхтехнологий будет именно технология CSS Sprites, которая уже отлично себязарекомендовала в этом качестве. Однако у нее вместе с очевиднымиплюсами (значительное уменьшение запросов к серверу, кроссбраузерность)есть и несколько минусов. В частности:❚ несемантическая верстка в случае использования сложных спрайтов.Это приводит к дополнительному времени создания документа(особенно существенно может быть для «старых» браузеров).(Более подробно о влиянии DOM-дерева на процесс загрузки страницырассказывается в следующей главе);❚ невозможность комбинирования нескольких осей повторения.Это не очень существенно, поскольку все использование CSSSprites (как было описано в предыдущем разделе) можно свести ктрем основным изображениям;❚ тяжесть изменения картинки в случае сложной геометрии;❚ отображение неверного фона при масштабировании.4.3.1. data:URIЕсть ли выход из этого положения? Да, есть. Это технология data:URI,которая позволяет включать фоновые изображения прямо в CSS-файл вbase64-виде. Плюсы данного подхода очевидны: не нужно «склеивать»несколько картинок в один файл, есть возможность объединять различныеоси и анимированные с обычными изображениями, полностью отделитьсодержание (семантику документа) от его представления (оформленияи дизайна), и т. д.Но есть и ложка дегтя: IE вплоть до версии 7 не поддерживаетdata:URI. IE8 — уже да, но все остальные IE — нет. Что делать?4.3.2. mhtmlНам на помощь приходит технология mhtml (MIME HTML), которуюподдерживает по умолчанию только IE (почти в полной мере) и Opera (начинаяс версии 9.0). Она позволяет включать base64-данные в CSS-файл ввиде комментариев. В этом случае сам файл выступает в двух ипостасях:как таблица стилей и как хранилище фоновых картинок.Если мы объединим эту технологию с data:URI, то все будет хорошо.Правда?