Спрайты и CSS псевдо-элементы – эффективный тандем.

Перевод статьи:  Sprites and CSS pseudo-elements the perfect pair.
Автор:  Rick Harris.

Важность использования спрайтов в веб-разработке вполне очевидна и не нуждается в дополнительном объяснении. И если у вас уже есть опыт применения этой технологии в своих проектах, то вам, вероятно, уже известно, что она имеет и отрицательные моменты. Наиболее универсальным подходом для вставки небольших изображений и иконок (по крайней мере, для их временного отображения) можно назвать метод, который для достижения необходимого эффекта предусматривает использование пустых элементов <span> с последующим применением к ним необходимого CSS кода. Этот способ, конечно же, абсолютно неприемлем с точки зрения семантики и может вызвать трудности связанные с обслуживанием сайта в будущем. Если же вы избрали семантически корректный путь веб-разработки и в процессе реализации спрайтов используете исключительно CSS методы, то перед вами предстанут трудности другого вида – чрезвычайно точное проектирование структуры карты CSS спрайта, исключающее дефекты отображения иконок, связанные с позиционированием. Более того, если в будущем вы пожелаете добавить к уже сформированному спрайту несколько изображений, то вы во всей красе ощутите неудобство этого способа.

Но не все так безнадежно, как кажется на первый взгляд. И подходящим решением, можно назвать метод, позволяющий извлечь из двух, упомянутых выше способов лишь положительные моменты. Он предусматривает использование CSS псевдо-элементов.

Пример.

По сути, псевдо-элементы не представляют собой ничего нового и вы, вероятно, уже имеете опыт их использования. А если появилась необходимость освежить свои знания в этой области, то можете просмотреть очень удачный и наглядный видеокурс посвященный псевдо-элементам. В противном случае, давайте рассмотрим пример, в котором использование псевдо-элементов способствует значительному усовершенствованию использования технологии CSS спрайтов.

Допустим, что нам необходимо создать ссылку на собственную страницу соцсети Facebook и оформить ее соответствующим образом, использовав для этого иконку. Необходимый html код:

<a class="fb-link" href="http://facebook.com/my-fb-page">
Facebook
</a>

Отлично. Теперь, если следовать семантически правильным путем, то для оформления ссылки нужно использовать необходимую часть карты CSS спрайта, определив ее в качестве значения для фона элемента:

.fb-link {
padding-left: 20px;
background: (my-sprite-map.png) no-repeat 0 -16px;
}

В этом случае, при определенной степени везения и отсутствии эффекта наложения соседних иконок, входящих в общую карту спрайта, мы получим желаемый результат. Но если, всё-таки, какое-либо соседнее, находящееся рядом с требуемой иконкой Facebook, изображение появится в рамках фона форматируемого элемента, в нашем случае ссылки (*что вполне допустимо при неточном позиционировании и/или составлении карты спрайта, но в данном случае имеется в виду неоднозначность значений размерности строчного элемента, устанавливаемых различными браузерами), то это приведет к нежелательным последствиям. Есть, конечно же, способ, позволяющий избежать подобных проблем – это упомянутый выше, семантически неправильный, использующий пустой <span> элемент:

<a class="fb-link" href="http://facebook.com/my-fb-page">
<span class="icon"></span> Facebook
</a>

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

.fb-link .icon {
display: inline-block;
width: 16px;
height: 16px;
background: (my-sprite-map.png) no-repeat 0 -16px;
}

Но добавление пустых html элементов в исходный код документа лишь для его визуального форматирования – недопустимый ход с точки зрения веб-стандартов. Эту проблему можно обойти, применив аналогичные стили не к реальному html элементу страницы, а к псевдо-элементу:

.fb-link:before {
content: " ";
display: inline-block;
width: 16px;
height: 16px;
background: (my-sprite-map.png) no-repeat 0 -16px;
}

Во втором случае мы добавили лишь одну строку content: " ", что является обязательным условием использования псевдо-элементов – без определения свойства content и даже если его значением будет пустая строка, они отображаться не будут. В результате такого форматирования, не нарушая никаких семантических требований, мы получили все преимущества использования пустого <span> элемента с целью безопасного применения CSS спрайтов.

На этой странице можно увидеть результаты применения рассмотренного в статье метода использования CSS спрайтов. Несмотря на простоту примера, подобную технологию можно применять в более сложных случаях визуального оформления страницы. К тому же необходимо знать, что вы можете расширить возможности, определяя для каждого html элемента сразу два псевдо-элемента (:before и :after).

Важное отступление, касательно реализации в IE.

Следует иметь в виду, что псевдо-элементы абсолютно не поддерживаются в IE7 и ниже. Для некоторых разработчиков это является камнем преткновения. Чтобы решить проблему, просто применяйте условные операторы (хаки, комментарии). В большинстве случаев для посетителей, пользующихся ранними версиями IE (седьмая и ниже) всегда можно предоставить несколько упрощенный вариант страницы. Для придания более привлекательного вида такой странице, можно поэкспериментировать со свойством border-radius или другими, поддерживаемыми в IE.

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *