Главная

Вёрстка табов для SEO на одном CSS

2013-12-19 в 13:56, admin, рубрики: css, internet explorer, tabs, метки: css, Internet Explorer, tabs

Специалисты по оптимизации справедливо считают, что если документ (читай страница) имеет логичную структуру, то Гугл его любить будет сильнее. Однако дизайнеры склонны плевать на структуру — им главное чтоб большая картинка занимала пол листа. А скучные тексты пусть сидят в табах.
Между Сциллой и Харибдой пытается проплыть верстальщик. Когда не получается проплыть, он изобретает

Изобретение подходит лишь тем, кто отчаянно плюет на версии IE старше 9. Предназначено для доставляния удовольствия спецам по SEO.
Давным давно уже я получаю требование от своего Мастера-оптимизатора строить табы так:

<h2 class=tab>заголовок таба 1</h2>
<div class=tab>тело таба 1</div>
<h2 class=tab>заголовок таба 2</h2>
<div class=tab>тело таба 2</div>
<h2 class=tab>заголовок таба 3</h2>
<div class=tab>тело таба 3</div>

До недавнего времени такая разметка преобразовывалась на клиенте в нечто похожее

<header>
  <h2>заголовок таба 1</h2>
  <h2>заголовок таба 2</h2>
  <h2>заголовок таба 3</h2>
</header>
<section>
  <div>тело таба 1</div>
  <div>тело таба 2</div>
  <div>тело таба 3</div>
</section>

и далее функционировало под управление JQuery.
Но у данного подхода есть один неприятный момент — прыжки. А если еще и подгружаются веб шрифты, то прыжки становятся еще более заметны.
И вот после невероятных усилий только-CSS решение было найдено. Нехитрая манипуляция с флоатами и отрицательными отступами и вуаля:

h2.tab {
  float: left;
  height: 60px;
}
h2.tab.active {
 background: yellow;
}
div.tab {
  margin-top:60px;
  float: right;
  margin-left: -100%;
  width: 100%;
  display: none;
}
h2.tab.active + div.tab { display: block; }

Вроде бы почти «только CSS», но нет — скрипт используется для того, чтобы расставлять класс активному табу так:

  $('h2.tab').click(function(){
    if ($(this).hasClass('active')) return;
    $(this).addClass('active').siblings('h2').removeClass('active');
  });

то есть «не тру». Дальнейшие попытки использовать псевдо селектор :active не привели к жалаемому результату (если кто найдёт — пиши). Однако основаная проблема была решена — разметка только на CSS. Зато можно показывать содержимое таба с лихими CSS3 эффектами.
PS: в реальной жизни пришлось после последнего блока с контентом поставить BR.clearfix. :after почему то не сработал.
Ещё раз повторюсь — адекватно работает только в Chrome, Firefox and IE>8.
Смотреть здесь
Счастливой верстки!

Автор: copyhold

Источник