Каскадные Таблицы Стилей / Реинкарнация и дополнение одного решения — табы на чистом CSS

Была на Хабре статья о реализации табов на чистом CSS, которую автор удалил (видимо, из-за незавершённости решения), скрыв при этом все комментарии. На основе решения, благодаря авторской наработке я устранил один из пользовательских недостатков и опукбликовал в комментарии. Поведение табов стало обычным, по клику на табе (или кнопке, смотря как назвать), он подсвечивался без свойства :focus и оставался подсвеченным после отведения мыши. Чтобы не терять из виду то и другое решения и для продолжения их развития, приведу копии их. Решение автора makzimko скопирвано в песочницу, сохранив все необходимые свойства. Дополнение — в модификации там же.(Чем неудобен Хабр — удаление статей, сопровождающееся удалением комментариев. Нельзя быть уверенным, опубликовав комментарий, в том, что он сохранится. Теряется идея краудсорсинга — доработки сообществом изначальных сырых решений, и базы знаний — то, что написал, хранится и для себя, и для других читателей. Несколько больше уверенности придаёт статья, поэтому решение было переопубликовано в статью.)
Целевые достоинства решений:
Требуется реализовать механизм табов или кнопок преключения контента, не прибегая к скриптам.
Достоинства, впрочем, видны; перечислим недостатки.
Недостатки исходного решения (часть их решена далее, часть — присуща подходу):
*) нет памяти нажатия кнопки; :focus мог бы помочь, но любой клик по странице потеряет фокус;
*) неподдержка IE8 и ниже (за счёт inline-block; решаемо);
*) ограничение высоты контента — за счёт способа решения, необходимо иметь фиксированную высоту для контента, превышение которой приведёт к обрезанию содержимого. (Решение — скролл для каждого внутреннего блока.);
*) немодульность (если не в фрейме) — нельзя использовать как независимый блок на странице, только как окно или фрейм.
Недостатки в дополнении:
Кроме устранения первого недостатка, сохраняются другие и добавляется ещё пара:
*) в дополнении возможно использовать только один ряд табов или кнопок;
*) дублирование контента табов (заголовки).
Однако, важность первого недостатка была больше — влияла на отображение, а появившиеся недостатки скрыты от пользователя и относятся к трудностям реализации. Стало быть, получили чуть более ограниченное в реализации, но похожее на настоящие табы решение.
Чтобы правильно смотреть на решение, в URL страницы или фрейма должен быть записан якорь, например, #tab1. Поскольку в песочнице jsfiddle.net якори не предусмотрены, используется маленький скрипт, переключающий на якорь через секунду. В действующем решении его, разумеется, не требуется.
Решение с модификацией проверяется и готово к дальнейшим разработкам здесь: jsfiddle.net/bA9mF/45/ (просмотр).
Выглядит так (Fx8-10, Opera11.61, Chrome 16, Safari 5.1 Win):
Показано покрытие кнопкой .pressed последней активной кнопки и реакция на наведение мыши на других кнопках.
В Fx не срабатывает -moz-transition; в Safari нет градиентов, поэтому выполнено равномерной заливкой.
Некоторые вариации шрифтов в браузерах скрыты увеличенными кнопками .pressed, но достижимо и точное пиксельное покрытие с несколько другой вёрсткой, и заодно — нормальная реализация в IE7-8. Для этого надо выстроить кнопки по float:left и зафиксировать зазоры между ними, которые сейчас немного плавают из-за inline-block.