Закладки с использованием одного CSS

Мысль построения закладок с помощью только CSS витает уже давно. Пользователь желает нажать на закладку и увидеть новое содержание, без перезагрузки страницы.

Проводились разные попытки, чтобы реализовать функционал закладок на чистом CSS не привлекая JavaScript. Сегодня появилась возможность реализации закладки используя псевдо-класс :checked, что возможно, будет основным решением этой задачи на протяжении нескольких лет.

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

<div class="tabs">

<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Закладка №1</label>

<div class="content">
<p>Содержание закладки №1</p>
</div>
</div>

<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Закладка №2</label>

<div class="content">
<p>Содержание закладки №2</p>

<img src="http://placekitten.com/200/100">
</div>
</div>

<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Закладка №3</label>

<div class="content">
<p>Содержание закладки №3</p>

<img src="http://placedog.com/200/100">
</div>
</div>

</div>

CSS
С помощью CSS можно скрыть радио кнопку (она нужна лишь для «отмеченная/неотмеченная»). Чтобы метки были выстроены в одну строку, создадим закладки плавающими блоками. Области содержания позиционируем одну поверх другой.
Когда радио кнопка находится в состоянии :checked, нужно с помощью свойства z-index переставить соответствующую область содержания наверх (ее будет видно визуально, при ее появлении другие области содержания будут ею скрыты).

.tabs {
  position: relative;
  min-height: 200px;
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  margin-left: -1px;
  position: relative;
  left: 1px;
}
.tab [type=radio] {
  display: none;
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

Удобный код CSS, который подходит для любого количества закладок (следует только в код HTML добавлять элемент div с классом tab).
В чем же преимущество данного метода?
В доступности. С помощью свойства display: none скрываются радио кнопки. Программы для чтения с экрана не видят радио кнопок и не сбиваются. При этом содержание не применяет свойство display: none; .поэтому остается доступным.
Работает в IE 9+, Firefox 3.6+, Safari 5.1+, Opera 10+, Chrome 13+.