Я практически уверен, что я никого не удивишь здесь, сказав, что CSS спрайты были вокруг в течение достаточно, а теперь, поднимают несколько спорных голов в сфере веб-разработки уже в 2003.
Тем не менее, CSS спрайтов на самом деле не нашли свой путь в повседневный инструментарий общих веб-разработчик.В то время как теория, лежащая в CSS спрайты достаточно легкий и его преимущества очевидны, они все равно оказались слишком надоедливым для реализации, особенно когда времени мало и сроков горами.Барьеры существуют, чтобы быть нарушены, хотя и мы не собираемся позволить пару крошечных неровности дороги портят больше льгот CSS sprite.
Если вы хотите более подробной информации о передовом опыте и практических случаев использования, безусловно, читал “ Тайна Спрайты CSS:. Методы, инструменты и Resources” Если вы оборонительного типа, я рекомендовал бы “ CSSСпрайты: полезный метод, или потенциальные мешающего “, которые обсуждаются возможные caveats.
Я не буду занимать какую-либо позицию относительно обоснованности спрайты CSS.Целью данной статьи является выяснить, почему люди до сих пор найти его трудно использовать CSS спрайтов.Кроме того, мы придумали пару существенных улучшений существующих методов.Таким образом, запуск Photoshop (или ваш CSS спрайтов инструмент выбора), поставить на МЕНЬШЕ и Sass шляпы, и освежить свои CSS псевдо-элемент навыки, потому что мы будем смешивать и соответствовать нашим способом легче CSS спрайтов implementation.
Проблема с CSS Sprites
В то время как Photoshop загружается, найдите время, чтобы подумать, почему CSS спрайты были такие трудное время получить широкое признание и поддержку.Я всегда пытаются найти правильную стартовую позицию для каждого изображения в спрайт.Я обычно забывают точные координаты к тому времени мне нужно, чтобы записать их в таблицу стилей, особенно, когда изображение находится на x:259 y:182 и меры 17× 13 pixels.
Я всегда переключаться между Photoshop и мои CSS редактор, чтобы записать правильные значения, все больше и больше разочарованных с каждым коммутатором.Я знаю, программное обеспечение там, специально разработанные, чтобы помочь нам справиться с этим, но я никогда не находил приложение, которое позволяет мне правильно структурировать свои CSS вывода, так что я могу просто скопировать и вставить его в свой CSS file.
Еще одна важная вещь, чтобы понять, что CSS спрайты предназначены для одной части нашего инструментария оптимизации сайта.Многие из людей, которые пишут и блог о спрайты CSS комфортно носить шляпы оптимизации при прокладке из наилучшей практики, часто собираемся немного за борт и теряя, сколько усилий требуется для реализации своих методовchoice.
Это нормально, если вы работаете над оптимизацией проекта, но это становится контрпродуктивным, когда вам нужно создать свой сайт с нуля, в то время как борьба сжатые сроки.Если у вас есть время, чтобы по-настоящему сосредоточиться на реализации спрайтов CSS, это на самом деле не все так сложно, но если у вас есть жонглировать 50 других приоритетов, в то же время, оно превратится в неприятностью для многих разработчиков.С помощью этих двух факторов в виду, мы постараемся найти способ сделать изображение таргетинга легче, в то время как примириться с тем, что иногда мы должны жертвовать полной оптимизацией во имя простоты development.
CSS спрайты в дикой природе: Amazon, Google и Facebook.
Подготовка Sprite
Если вы посмотрите в Интернете для примера спрайты CSS, вы увидите, что большинство из них оптимизирован для идеального использования реальных estate— пробелы между изображениями сведено к минимуму, чтобы сохранить нагрузку на весь спрайт как можно ниже.Это уменьшает время загрузки значительно, когда изображение сначала скачал, но она также вводит эти ужасные изображения координаты, которые мы упоминали ранее.Итак, почему бы не взять несколько иной подход?Давайте рассмотрим более простой способ целевой изображения при убедившись, что в результате спрайт существенно не больше, чем сумма его отдельных images.
Вместо того, чтобы складывать изображение таким образом, что делает полученный спрайт как можно меньше, давайте попробуем другой макет.Вместо случайной сетки, мы собираемся построить хороший квадратную сетку, оставив пространство каждого квадрата для одного изображения (хотя больших изображений может охватывать несколько квадратов).Цель состоит в том, чтобы иметь возможность целевого отправной точкой каждого изображения (левый верхний угол) с очень простую математическую function.
Размер ячеек сетки будет зависеть от среднего размера изображений, которые вы будете spriting.Для моего сайта, я использовал 32× 32 пиксельной сетке (потому что только одно изображение превышает этот размер), но сетка размеров будет варьироваться в зависимости от ситуации.Другая вещь, чтобы принять во внимание, является изображение кровотечения, которые могут возникнуть при масштабировании страниц, если вы хотите перестраховаться, добавить немного обивка для каждого изображения в спрайт.Для дополнительной оптимизации, вы можете также использовать прямоугольную сетку вместо квадрата сетки, дальнейшее сокращение любого неиспользуемого пространства, в то время как чуть более сложный, это не сильно отличается от того, что мы будем делать.В этой статье, однако, мы будем придерживаться площади grid.
Подготовка Sprite: Photoshop Bonus
Я не дизайнер, поэтому я не уверен, насколько применимы этого раздела за рамки Photoshop, но есть еще некоторые примечательные улучшения, которые могут быть сделаны прежде, чем мы вернемся к самому коду.Во-первых, визуализация сетки может бытьБольшую помощь.Photoshop имеет руководства, чтобы сделать это (так что вы на самом деле не должны включать в себя маркеры в спрайт), с дополнительным бонусом, что слои будут привязываться к этим руководствам (что разница в точности позиционирования каждого отдельного изображения намного проще)
Ручное добавление этих гидов может быть несколько сопротивления, однако.К счастью, мой коллега (снимаю шляпу перед Filip Van Tendeloo) был достаточно любезен, чтобы написать и поделиться мало Photoshop script который строит эту сетку направляющих автоматически на основе базового размера вашей площади.Довольно удобно, не так ли?Просто скачайте скрипт, сохраните его в Presets\Scripts каталог и выбрать File → Scripts → Sprite Grid из Photoshop menu.
И, наконец, по-настоящему завершить вещи, вы можете добавить номера к оси х и у вашей сетке, так что вы можете легко определить каждый квадратный в сетке.Не добавлять эти цифры с фактическим спрайт, хотя, просто скопируйте спрайт в новый образ и добавить их там.Эти цифры только для reference— но поверьте мне, они, безусловно, пригодится в minute.
Пример ссылки image.
Если вы не можете (или не хотят) использовать предварительную обработку таких языков, как все меньше и Sass, просто добавьте координаты каждого квадратного instead.
Меньше и Sass Для Rescue
Со всеми изображениями на той же площади сетки, теперь мы можем легко вычислить верхний левый координаты каждого изображения (это координаты точного соответствия, необходимые для background-position значения, чтобы изменить спрайт).Просто возьмите базовый размер сетки и умножить его на цифры, которые вы только что добавили в вашем эталонного изображения.Скажем, у вас должны быть ориентированы на изображение в позиции (5,3), и ваши сетки размером 32 пикселей; левом верхнем положении ваше изображение будет 32 × (5,3) = (160,96).Чтобы добавить эти значения в файле CSS, просто использовать их отрицательные эквиваленты, например, так:
background-position: -160px -96px;
Оставить свой калькулятор, где он в настоящее время, потому что это было бы слишком много хлопот.Если компьютеры хороши ни при чем, он делает расчеты, так что мы собираемся сделать хорошее применение этой силы.Обычный CSS не позволяет нам делать расчеты (пока), но языках, как МЕНЬШЕ и Sass были сделаны, чтобы сделать именно это.Если вам нужна дополнительная справочная информация, обратитесь к статье “ Введение в LESS и сравнение с Sass.” Хотя оба языка имеют схожую функциональность, их синтаксис несколько отличается.Я меньше человек сам, но если вы привыкли к Sass, превращая следующие примеры для Sass код не должен быть слишком жестким.Теперь для некоторых продвинутых CSS магии:
@spriteGrid: 32px;
.sprite(@x, @y) {
background: url(img/sprite.png) no-repeat;
background-position: -(@x*@spriteGrid) -(@y*@spriteGrid);
}
Ничто не слишком захватывающей до сих пор.Во-первых, мы определили размер сетки использовании менее переменной (@spriteGrid).Затем мысделал примесь, которая принимает число мы добавили к эталонным изображением ранее.Эта примесь использует переменную сетки и координаты изображения для расчета базы положение изображения, которые мы хотим цели.Он не может выглядеть необычно, но он уверен, делает основную использование спрайтов намного легче уже.С этого момента, вы можете просто использовать .sprite(1,5), и это все, что нужно сделать.Нет больше раздражает расчетов или найти случайных начала coordinates.
Конечно, примесь выше работает только в нашей несколько упрощенном примере (с использованием квадратной сеткой и только один спрайт).Некоторые веб-сайты там являются более сложными и могут потребовать различных спрайтов использовании прямоугольной сетки для дополнительной оптимизации.Это не совсем невозможно исправить с меньшим, хотя:
.spriteHelper(@image, @x, @y, @spriteX, @spriteY) {
background: url("img/@{image}.png") no-repeat;
background-position: -(@x*@spriteX) -(@y*@spriteY);
}
.sprite(@image, @x, @y) when (@image = sprite1), (@image = sprite3){
@spriteX: 32px;
@spriteY: 16px;
.spriteHelper(@image, @x, @y, @spriteX, @spriteY);
}
.sprite(@image, @x, @y) when (@image = sprite2){
...
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров