Как делать CSS спрайты на примере кнопок соцсетей : Создание сайтов и поисковая оптимизация (SEO)

OlegON · █ 26.03.2016 10:13

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

Код:

<style>
    .icon {
      cursor: pointer;
      width: 36px;
      height: 36px;
      float: left;
      background: url(https://inima.org/soc.png) no-repeat;
    }

    .plus .icon {
      background-position: 0 -36px;
    }
    
    .facebook .icon {
      background-position: 0 0px;
    }
    
    .ok .icon {
      background-position: 0 -72px;
    }
    
    .vk .icon {
      background-position: 0 -108px;
    }
  </style>
<!-- noindex -->
<a href="https://plus.google.com/u/0/+InimaRuBlog/posts" target="_blank" rel="nofollow" class="plus"><div class="icon"></div></a>
<a href="http://ok.ru/group/51789599015129" target="_blank" rel="nofollow" class="ok"><div class="icon"></div></a>
<a href="https://vk.com/inimaru" target="_blank" rel="nofollow" class="vk"><div class="icon"></div></div></a>
<a href="https://www.facebook.com/Inima-165488983594458/" target="_blank" rel="nofollow" class="facebook"><div class="icon"></div></a>
<!-- /noindex -->

собственно, как выглядит, можно посмотреть тут:

Tema · █ 28.03.2016 04:03

а было как?
вообще-то так сейчас не только кнопки соцсетей, а вообще все графические элементы принято складывать

OlegON · █ 28.03.2016 05:15

Было... Вместо <div class="icon"> отдельные картинки обычным <img>. Именно это и вымораживает, что опаньки, корректно работающий сайт уже не моден по коду и у валидаторов куча претензий...