Как использовать CSS спрайты в отзывчивом дизайне

Question

Я надеюсь, что там будет гуру CSS, который может помочь с этим ... Я создаю отзывчивый макет для сайта, который включает горизонтальную навигационную панель сверху. Этот бар содержит 5 кнопок с одинаковой шириной (хотя, очевидно, эта ширина должна быть гибкой). Я хотел бы использовать значки вместо текста для кнопок, когда меню просматривается на устройстве с небольшой шириной окна просмотра. Я буду использовать медиа-запросы, чтобы адаптировать макет для использования текста, как только я почувствую, что ширина области просмотра достигла подходящего размера. Это важно, потому что я не ожидаю изменения размера самих значков. Я рад, что они имеют фиксированный размер, центрированный в кнопке, и если сам размер кнопки изменяется, тогда будет просто больше «отступов» вокруг центрированного значка. Обычно я использовал бы все значки на одном изображении и использовал технику спрайтов, чтобы отображать только правильную часть изображения, но я столкнулся с проблемой. Если я хочу, чтобы элемент привязки заполнил элемент родительского списка, то как я могу центрировать спрайт?

Вот пример разметки: Сначала HTML (фрагмент)

<nav> 
    <ul class="top_nav"> 
    <li><a class="link_1" href="#">link 1</a></li> 
    <li><a class="link_2" href="#">link 2</a></li> 
    <li><a class="link_3" href="#">link 3</a></li> 
    <li><a class="link_4" href="#">link 4</a></li> 
    <li><a class="link_5" href="#">link 5</a></li> 
    </ul> 
</nav> 

И я мог бы стиль это так:

nav ul { 
      width: 100%; 
      overflow: auto; 
     } 

nav li { 
      float: left; 
      width: 20%; 
      background: #2c2c2c; /* dark background for light icons */ 
     } 

nav li a { 
      display: block; 
      border: 1px solid #e7e7e7; 
      background-image: url(path/to/sprite.png); 
      background-repeat: no-repeat; 
      text-indent: -15000px; 
      width: 48px; 
      height: 48px; 
      margin: 0 auto; 
      } 

nav li a.link_1 { 
        background-position: 0 0; 
       } 

nav li a.link_2 { 
        background-position: 0 -49px; 
       } 

и т.д ....

Но это будет давать мне только зону с кликом 48px x 48px внутри кнопки, которая может изменить ее ширину в зависимости от размера родительского элемента. Если я сделаю элемент привязки заполнить его родительский элемент списка, то значок не может быть центрирован с использованием правила поля. я мог бы добавить еще один элемент внутри анкерного элемента, который был пуст, но был значок, как это фон, как это:

<li><a href="#"><div class="link_1">Link 1</div></a></li> 

И стиль его:

nav li a { 
      display: block; 
      border: 1px solid #e7e7e7; 
      width: 100%; 
      } 

nav li a div { 
       background-image: url(path/to/sprite.png); 
       background-repeat: no-repeat; 
       text-indent: -15000px; 
       width: 48px; 
       height: 48px; 
       margin: 0 auto; 
       } 

nav li a div.link_1 { 
        background-position: 0 0; 
       } 

Но это не очень семантический или элегантное решение. Может ли кто-нибудь подумать о чем-нибудь лучше?

Answer 1

Вы можете использовать:

• контент (:before/:after) вместо реальных элементов, чтобы сохранить код в чистоте;
• background-size свойство увеличить фоновые изображения;
• Data URIs вместо спрайтов. URI данных поддерживаются всеми текущими браузерами (IE8 имеет ограничение на 32 Кбайт максимального размера для каждого файла, представленного в виде URI данных).

Answer 2

Я на самом деле есть решение, которое имеет большую поддержку кросс-браузер, имеет приятный чистый код, и хорошо документированы для использования спрайтов в качестве фонового изображения с небольшим количеством CSS разметки на моего блога здесь: http://pagecrafter.com/responsive-background-image-sprites-css-tutorial/

По существу он полагается на аккуратный трюк, чтобы поддерживать соотношение сторон элемента, позволяя фоновому изображению оставаться в полном размере указанного элемента. Тогда все, что нужно, это указать расположение фонового спрайта в процентах! Этот метод также хорошо работает, потому что, как только у вас будет готово css, вы просто применяете класс к своему элементу, и вам хорошо идти.

Answer 3

Я создал responsive CSS sprite generator.

Он работает с использованием прозрачных PNG в URI данных, чтобы сохранить соотношение сторон, процентное положение фона, чтобы показать правильное изображение, и размер фона: 100% для масштабирования.

В отличие от некоторых других технологий, это будет работать с изображениями разных размеров и пропорций в одном спрайте.