Введение
Маленькое изображение, используемое в макете веб-страниц.
Прозрачный GIF-разделитель — это небольшое прозрачное GIF-изображение, которое использовалось в веб-дизайне и HTML-кодировании. Они применялись для управления визуальным расположением HTML-элементов на веб-странице, когда стандарт HTML сам по себе не предоставлял такую возможность. Они устарели после того, как браузерные войны привели к добавлению атрибутов макета в теги таблиц HTML 2.0, и практически не использовались к моменту широкого распространения каскадных таблиц стилей (CSS).
История
Книга Дэвида Сигеля 1996 года "Создание эффектных веб-сайтов" впервые опубликовала технику использования Spacer GIF. По словам Сигеля, он разработал этот прием у себя дома, в гостиной. Стандарт каскадных таблиц стилей (CSS) снизил необходимость использования Spacer GIF для верстки веб-страниц. CSS позволяет добиться аналогичных результатов различными способами, например, изменяя поля или отступы элемента или явно задавая относительное позиционирование.
Использование
Рано было замечено, что хотя размер ячеек таблицы нельзя было установить напрямую, каждая ячейка могла содержать изображение через тег IMG. Размер тегов изображений можно было задавать независимо, используя их атрибуты WIDTH и HEIGHT. Тогда ячейка таблицы автоматически изменяла свой размер, чтобы вместить только это изображение. Также было осознано, что отображаемый размер полностью контролировался атрибутами и не зависел от фактического размера используемого файла изображения (хотя сам файл изображения все равно требовался). Соответственно, один и тот же файл изображения можно было использовать для всех многочисленных изображений-заполнителей, необходимых на веб-странице. Единственным требованием было, чтобы это изображение было невидимым, либо совпадало по цвету со страницей, либо было прозрачным. Сами GIF-файлы-заполнители были небольшими прозрачными файлами изображений. GIF-файлы использовались, поскольку это был распространенный формат, поддерживающий прозрачность, в отличие от JPEG. Обычно эти файлы назывались spacer.gif, transparent.gif или 1x1.gif. До широкого распространения каскадных таблиц стилей (CSS) GIF-файлы-заполнители использовались для управления пустым пространством на веб-странице, размер которого можно было изменять в соответствии с HTML-атрибутами. Причина, по которой GIF-заполнитель невидим, заключается в том, что веб-разработчик мог создать ячейку таблицы и заполнить фон определенным цветом, который был бы виден сквозь прозрачный GIF-заполнитель. Например, разработчик, желающий создать синий квадрат размером 500x500 пикселей, мог бы использовать отдельное синее изображение 500x500, что привело бы к дополнительному расходу трафика. Вместо этого разработчик мог указать цвет фона ячейки таблицы и задать размеры существующего прозрачного GIF-заполнителя.
Недостатки
Дизайн часто выглядел безупречно на экране дизайнера, но мог выглядеть совершенно иначе на экране пользователя. Разное разрешение экрана, механизмы отрисовки браузеров, а также предпочтения пользователя в шрифтах могли существенно изменить верстку дизайна. Многие макеты становились просто нечитаемыми, особенно с распространением небольших экранов и мобильных устройств. Реализация дизайна с использованием прозрачных GIF-изображений могла быть крайне трудоемкой, особенно при внесении небольших изменений в существующий дизайн.
Устаревание
Техника устарела для разработки веб-страниц примерно к 1998 году. Реализация CSS позволила напрямую задавать размеры HTML-элементов. Хотя внедрение CSS происходило медленно из-за некачественной реализации в браузерах и инерции разработчиков, базовая возможность управления расположением элементов, обеспечиваемая использованием прозрачных GIF-изображений для создания отступов, стала доступна примерно к 1997 году. Кроме того, макеты, основанные на таблицах и сетках, были заменены адаптивными макетами в попытке учитывать растущее использование мобильных устройств для доступа к веб-контенту. Эти методологии дизайна отказались от попыток жесткого контроля двухмерной компоновки элементов. Вместо этого элементы предоставлялись браузеру пользователя, который размещал их наилучшим образом, исходя из размеров окна браузера. Адаптивные макеты снизили важность задания размеров элементов страницы в браузере пользователя. Это особенно проявилось в устранении необходимости указывать размеры в абсолютных единицах, таких как пиксели. Поскольку веб-дизайнер никогда не мог контролировать размер окна экрана пользователя, попытка жестко задать размеры всегда была ошибочной.