CSS-спрайты
Из-за этого может возникать небольшая задержка при появлении картинки в первый раз. И хотя при всех последующих наведениях курсора этой задержки уже нет, многие разработчики задумались над тем, как устранить эту проблему. Например, с помощью JavaScript можно обеспечить загрузку всех фоновых изображений заранее. Но есть способ, который не требует знаний языка программирования, и заключается он в использовании спрайтов.
Что такое спрайты CSS
Преимущества CSS-спрайтов
Как создать спрайт из картинок
В классическом случае спрайты создаются в редакторе изображений. Мелкие картинки последовательно размещаются на большом полотне (нередко с прозрачным фоном), которое затем сохраняется как графический файл.
Ручной способ создания спрайтов — занятие довольно долгое. Поэтому, когда использование спрайтов стало набирать обороты, появились онлайн-сервисы по автоматическому созданию спрайт-листов, например, Spritegen, RetinaSpriteGenerator и другие. Вы загружаете необходимые изображения в отдельных файлах на сайт, и для вас генерируется спрайт, который вы сразу можете скачать на компьютер.
Как пользоваться спрайтами CSS
Теперь пора узнать, как использовать CSS-спрайты на практике. Мы покажем вам небольшой пример с использованием спрайта, содержащего значки социальных сетей (мы показывали его выше). В обычном состоянии ссылки значок соцсети будет цветным (верхний ряд спрайта), а при наведении курсора он будет становиться серым (как в нижнем ряду).
HTML-разметка выглядит следующим образом:
Для ссылки на каждую соцсеть мы создали свой класс. Поскольку это тестовый пример, то мы не тратим время на заполнение атрибутов href — вместо ссылок на настоящие сайты мы поставили заглушки. Внутрь тега мы ничего не помещаем, потому что за внешний вид ссылок будут отвечать их фоновые изображения со значками соцсетей.
Переходим к CSS. Первым делом запишем общие стили для всех ссылок:
Первая строка содержит ссылку на спрайт. По факту, мы задали одно фоновое изображение для всех ссылок. Вторая строка отменяет дублирование фона — здесь оно не потребуется.
Идем дальше: позиционируем фон для ссылки на Twitter. Иконка Твиттера расположена справа от Facebook и примыкает к ней, не создавая пустых промежутков. Нам необходимо переместить спрайт влево на столько пикселей, чтобы скрыть иконку Facebook и полностью заполнить область ссылки иконкой Twitter. Поскольку ширина каждой иконки равна 100 пикселям, то мы и сдвигаем фон влево на 100 пикселей. Вертикальное позиционирование мы пока нигде не меняем, а оставляем значение top :
Аналогичное действие мы проделаем для остальных ссылок, прибавляя к каждому последующему горизонтальному позиционированию еще 100 пикселей, тем самым сдвигая спрайт всё больше и больше влево. Получится такая картина:
Результат работы данного кода показан на скриншоте ниже:
Теперь разберемся с поведением фоновых картинок при наведении курсора на ссылку. Нам нужно смещать спрайт по вертикали вверх таким образом, чтобы в область просмотра попадала иконка из нижнего ряда спрайта. Здесь всё довольно просто и решается одним правилом CSS, а именно присвоением значения bottom свойству background-position-y :
В нашем случае этот стиль можно записать один для всех ссылок, и он будет работать правильно. Однако в других ситуациях, когда элементы в спрайте расположены в другом порядке, вам может понадобиться писать больше кода.
Результат работающих спрайтов смотрите на демонстрации ниже (для более красивой подачи примера мы сделали сдвиг фона более плавным при наведении курсора):
Если вам стало интересно, то вот и строка, которая отвечает за плавность изменения иконок (не волнуйтесь, чуть позднее мы будем изучать CSS-анимацию, и в частности свойство transition ):
Итак, теперь вы знаете, что такое спрайты CSS и чем они могут быть полезны. Помимо предотвращения задержек при загрузке фоновых картинок, использование спрайтов помогает снизить нагрузку на сервер. Кроме того, это удобный способ хранить все графические элементы интерфейса в одном месте.
Вот мы и разобрали основные методы стилизации ссылок. Рекомендуем вам дополнительно попрактиковаться, чтобы закрепить полученные знания. А следующая глава нашей книги посвящена CSS-анимации, реализация которой стала возможна благодаря свойствам, появившимся в CSS3. И в первом уроке мы разберем свойство трансформации — transform.
Генерация CSS-спрайтов с Gulp
Остальные 3 варианта — это реализации на одном движке spritesmith. В итоге выбор пал на официальный порт для Gulp.
Установка
Самое первое, что надо сделать — установить Gulp на компьютер. Официальная документация поможет вам справиться с этим шагом.
Затем ставим gulp.spritesmith. В моем случае проект чистый, поэтому я ставлю все необходимые зависимости.
Теперь можно переходить к настройке генератора.
Настройка
Перед тем как приступить непосредственно к описанию таска, ознакомимся с параметрами, которые принимает функция.
Исходя из этого, самый простой таск будет иметь следующий вид:
У нас получился такой спрайт:
И следующий CSS-код:
Тонкая настройка
В итоге, спрайт будет иметь следующий вид:
Использование
Содержимое файла mixins.styl :
Миксин позволяет нам сразу выводить ширину и высоту картинки — это очень удобно, особенно при использовании псевдоэлементов для оформления.
Рабочий пример
Проблемы
К сожалению, все варианты предусмотреть не получится — иногда это может быть изменение класса через js, поэтому мы можем просто использовать
если картинка была объявлена ранее.
С этим решением я работаю почти месяц и могу сказать, что оно экономит очень много времени. Стремитесь автоматизировать любую рутину и использовать свое время максимально эффективно.
Я для вас подготовил репозиторий с рабочим примером, который вы можете использовать как основу для своих проектов или просто посмотреть его работу.
Как я использую SVG-спрайты
Условия
Моя структура папок:
Поехали!
Устанавливаем плагины(я это делаю глобально и потом линкую):
В gulpfile объявляем плагины:
Варим спрайт
Первый таск — создаем html-файл с тегами symbol.
Давайте разберемся, что тут происходит по частям.
Говорим откуда нам нужно взять иконки и минифицируем их. Переменная assetsDir — для удобства.
Удаляем атрибуты style и fill из иконок, для того чтобы они не перебивали стили, заданные через css.
Но я заметил у данного плагина один баг — иногда он преобразовывает символ ‘>’ в кодировку ‘>’.
Эту проблему решает следующий кусок таска:
Теперь сделаем из получившегося спрайт и положим в папку:
symbol_sprite.html — и есть наш спрайт. Внутри он будет содержать следующее(для простоты у меня пара иконок):
Щепотка стилей
Я решил сделать для создания scss отдельный таск. Если вы нашли другое решение, напишите в комментариях.
В свойстве cssFile объявляем, куда положить на scss файл(потом инклудим его).
В свойстве templates объявляем, где взять для него шаблон. Код моего шаблона:
Получаем _svg_sprite.scss следующего содержания:
Скомпилированный css будет таким:
Обратите внимание, что размеры иконок выражены через em, что позволит нам в дальнейшем управлять ими через font-size.
Составляем итоговый таск, чтобы запускать одну команду:
Подключаем на страницу
Итак мы получили html-файл с иконками и scss-файл с оформлением. Далее подключим файл на страницу, используя кеширование через localStorage. Этот процесс подробно описан в статье Caching SVG Sprite in localStorage.
Подключаем js-файл следующего содержания:
Все, мы подключили наш файл на страницу, после первой загрузки он кешируется.
Иконки я встраиваю через миксин jade, т.к. это быстро и удобно:
Теперь, чтобы встроить иконку вызываем миксин с её именем:
Открываем страницу в браузере:
Пока размеры иконок в натуральную величину и имеют стандартный цвет. Изменим это(не в сгенерированном файле, а в главном):
Результат:
Вот и все, мы получили рабочую систему подключения иконок через спрайты, но есть еще один момент.
Размытие
К сожалению, не все дизайнеры делают иконки по пиксельной сетке. В этом случае иконки будут «размываться». Если вы экспортируете иконки из иллюстратора вам нужно включить пиксельную сетку и подогнать размер и расположение иконки под пиксельную сетку. Если вы работаете в готовыми svg-файлами — воспользуйтесь сервисом iconmoon для их правильного выравнивания.
Особую благодарность выражаю @akella, который помог мне в написании данного решения.
CSS-спрайты
CSS-спрайт – способ объединить много изображений в одно, чтобы:
Рассмотрим, как это работает, на примере дерева:
Сейчас «плюс», «минус» и «статья» – три отдельных изображения. Объединим их в спрайт.
Шаг 1. Использовать background
В данном случае он уже сделан. Стиль для дерева:
Шаг 2. Объединить изображения
Шаг 3. Показать часть спрайта в «окошке»
А теперь самое забавное. Размер DIV для иконки – жёстко фиксирован:
Это значит, что если поставить в качестве background объединённую картинку, то вся она не поместится, будет видна только верхняя часть:
Шаг 4. Сдвинуть спрайт
Сдвиг фона background-position позволяет выбирать, какую именно часть спрайта видно.
В спрайте icons.gif изображения объединены так, что сдвиг на 16px покажет следующую иконку:
Отступы
Тогда если элемент немного больше, чем размер изображения, то в «окошке» не появится лишнего.
Пример спрайта с отступами:
Иконка RSS находится в нём на координатах (90px, 40px) :
Это значит, для того чтобы показать эту иконку, нужно сместить фон:
При этом в левом-верхнем углу фона как раз и будет эта иконка:
Элемент, в котором находится иконка (в рамке), больше по размеру, чем картинка.
Если бы в спрайте не было отступов, то в такое большое «окошко» наверняка влезли бы другие иконки.
Итого
Решение лучше всего принимать, исходя из принципов семантической вёрстки.
Задайте вопрос – что здесь делает изображение? Является ли оно самостоятельным элементом страницы (фотография, аватар посетителя), или же оформляет что-либо (иконка узла дерева)?
Элемент IMG следует использовать в первом случае, а для оформления у нас есть CSS.
Если фоновое изображение нужно повторять по горизонтали или вертикали, то спрайты тоже подойдут – изображения в них нужно располагать в этом случае так, чтобы при повторении не были видны соседи, т.е., соответственно, вертикально или горизонтально, но не «решёткой».
Для автоматизированной сборки спрайтов используются специальные инструменты, например SmartSprites.
Как использовать CSS-спрайты для увеличения скорости загрузки веб-страниц
Спрайты существуют не первый день. Разработчики игр активно используют этот инструмент, чтобы ускорять отображение анимации на экране. В этой статье пойдёт речь об использовании спрайтов для улучшения пользовательского опыта посетителей сайтов.
Что такое спрайты в CSS
Спрайт — изображение, которое является частью сцены в игре. Несколько спрайтов объединяются в одно изображение, которое называется таблицей спрайтов (sprite sheet). После загрузки таблицы в память спрайты последовательно и быстро отображаются на экране. Это создаёт иллюзию анимации. Чтобы пользователь увидел на экране одну сцену, разработчик использует десятки или сотни разных спрайтов.
Пример таблицы спрайтов
Вот главная идея использования спрайтов в CSS: быстрее загрузить одно изображение и показывать его по частям, а не загружать несколько изображений и показывать их по очереди.
CSS-спрайты: быстрый обзор возможностей
CSS-спрайты — технология, которую разработчики применяют для оптимизации веб-страниц. Технология предполагает объединение нескольких небольших изображений с одинаковым разрешением в одно большое изображение, которое также называется таблицей спрайтов. Таблица спрайтов используется, когда нужно показывать пользователям отдельные элементы, которые являются частью большого изображения.
Обычно веб-разработчики включают в таблицу спрайтов логотипы, навигационные стрелки, кнопки и так далее. Такие элементы имеют одинаковое разрешение и часто используются на страницах сайта.
Как спрайты помогают веб-разработчикам
Чаще всего при создании сайтов разработчики хранят и используют изображения как отдельные файлы. Когда пользователь открывает страницу, браузер отправляет отдельный HTTP-запрос, чтобы загрузить и отобразить каждый файл. Это увеличивает время загрузки сайта, так как на странице может быть много отдельных изображений, например, кнопок, иконок, логотипов.
Преимущества спрайтов: один HTTP-запрос против шести
CSS-спрайты позволяют разработчикам объединять часто используемые маленькие изображения в одно большое. Благодаря этому браузер загружает один файл. Чтобы отобразить нужное маленькое изображение, используется смещение в большом изображении.
Преимущества использования спрайтов
Два основных преимущества использования спрайтов:
Как правильно создавать таблицы спрайтов
Чтобы создать таблицу спрайтов, разработчик должен объединить все необходимые элементы в одно изображение. Это можно сделать с помощью редакторов изображений, например, Photoshop или GIMP. Также эту задачу можно решить с помощью онлайн-генераторов CSS-спрайтов, о которых пойдёт речь ниже.
Когда таблица спрайтов готова, разработчик обеспечивает доступ к конкретным элементам. Для этого используются следующие атрибуты:
Как отмечалось выше, таблицы спрайтов можно делать с помощью популярных редакторов изображений. Но есть более простые способы.
Первый: используйте онлайн-генераторы для работы с таблицами спрайтов, например, CSS Sprite Generator. Это бесплатный инструмент. К тому же он автоматически генерирует CSS-код, необходимый для доступа к отдельным элементам. Вы можете корректировать свойства, например, менять отступы и выравнивание.
Для установки Sprity используйте команду:
Для работы со Sprity в командной строке понадобится пакет sprity-cli.
Как правильно работать с CSS-спрайтами
В качестве примера используем таблицу спрайтов, изображённую на иллюстрации.
В таблице есть шесть иконок социальных сетей. В верхнем ряду иконки, которые пользователи видят по умолчанию. В нижнем ряду иконки, которые пользователь видит при наведении курсора.
Если таблица спрайтов создана с помощью описанного выше онлайн-генератора, у разработчика уже есть CSS-код, нужный для доступа к конкретным элементам. Если специалист использовал редакторы изображений, необходимо самостоятельно определить смещение.
Определяем x и y с помощью MS Paint или GIMP
Если у вас есть координаты левой верхней точки нужного спрайта, например, верхней иконки Instagram, вы можете получить доступ к нужному элементу с помощью CSS-кода.
В данном случае используются width и height 125px, так как иконки имеют такое разрешение. Чтобы получить доступ ко второй иконке в верхнем ряду, используем такой код.
Таким способом можно получить доступ к каждому элементу таблицы спрайтов. Вот как выглядит HTML и CSS код целиком.
Шаг 1: указываем нужный HTML-код
В коде ниже мы просто добавляем ссылки на соответствующие ресурсы.
Шаг 2: добавляем стили с помощью CSS
Сначала добавляем стили для общего для всех иконок класса.
Шаг 3: получаем доступ к отдельным элементам верхнего ряда.
Шаг 4: получаем доступ к элементам нижнего ряда
Вместо заключения: присоединяйтесь к гигантам, которые используют CSS-спрайты
В число таких гигантов входят Google, Amazon, Facebook и другие компании с громкими именами. Они активно используют спрайты, чтобы уменьшить количество HTTP-запросов на сессию для одного пользователя. Это очень важно для посещаемых сайтов, на которые заходит много пользователей одновременно.
Адаптированный перевод статьи How to Implement CSS Sprites to Enhance Web-Pages. Мнение администрации Хекслета может не совпадать с мнением автора оригинальной публикации.
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.