Табы на чистом CSS, от IE6+ (реинкарнация одного решения)

[masterrr]

UPD: в ЛС сообщили, что в Safari 5.1 всё видно с градиентами и в Линуксе, и в Win. Тем лучше, теперь код CSS работает с нормальной деградацией (равномерная заливка серым) для Safari 5.0.

Я сообщил не про Линукс, а про Lion :)
В Chrome 1-9, Safari 4-5 работает -webkit-gradient();

[spmbt]

Спасибо за тест и за информацию о том, в каких версиях появилось. Впрочем, это побочный код. Наиболее ценна идея с переключением по табам от makzimko.

[Sytrus]

Добавлю в избранное, пригодится. Спасибо.

[ilnoor]

Только имейте ввиду, что в Opera 11.50 не работает. Вкладки при наведении немного двигаются, но никакой реакции на клик не происходит.

[spmbt]

Отлично, что заметили. Никак не ожидалось подвоха в том, что везде работает. Сделал фикс в UPD4. Вроде везде работает, но надо найти исправление бага тех же немного старых Опер при узких окнах.

[spmbt]

Тогда ждём от кого-либо следующего шага развития идеи. В этом — суть краудсорсинга. Теперь — очередь следующего автора :).
Кстати, ещё одна идея. Может быть, удастся использовать min-height: 100% для полного заполнения высоты фрейма.

[Finom]

Пожалуйста, выложите суть. Мне совершенно неинтересны тразишны, градиенты и прочие красивости, только скелет, с выковыриванием которого я (и, скорее всего, не только я) испытываю некоторые трудности.

И, кстати, не юзайте этот кривоработающий иетестер. В отладчике ИЕ9 есть отличная эмуляция старых баузеров (просто клацните F12 находясь на любой странице, сами всё увидете).

[spmbt]

Я использовал исходную наработку с парой эффектов, поэтому поневоле учитывал и их при приведении вида к кроссбраузерному. В использовании красивостей есть свой смысл: сугубо технический приём лучше воспримется если представлен в красивой обёртке. Мне при доработке самому приходилось кое-что дописывать (смещения, хаки) только для того, чтобы пример смотрелся красиво. Предлагаю доработать пример или сделать совершенно новый, с чистой сутью. Песочница jsfiddle.net этому отлично способствует. Собственно, и опубликовал свою доработку только затем, чтобы интересная идея (покрытая CSS3-свойствами) не потерялась.

[Finom]

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

[spmbt]

Действительно; я не учёл, что сам прочитал ту статью, а другие не успели. Сейчас исправлюсь (в статье). Если в 2 словах, то в окне или фрейме создаются 2 элемента: список заголовков табов и список контента. По клику на заголовке таба происходит переход на участок контента по якорю. Всё, что ниже якоря, то отображается в окне/фрейме. Чтобы при этом не мешали другие участки контента (другое содержимое соседних табов), используется overflow: hidden в блоке <ul id=«tabcontent»>. Всё. Знакомиться лучше с первым примером, там нет кроссбраузерных решений, если не считать CSS3-свойств, которые не принциипиальны.

[okneigres]

Конкретно по этой задаче, никогда не понимал её смысла.
Зачем?
js табы удобнее и универсальнее.

[spmbt]

За вопрос спасибо — ответил в статье. Действительно, сначала нужно было ответить на вопрос «зачем» :).

[spmbt]

Подтверждаю. Ссылка с результирующим кодом в IE8 Win32 XP приводит к выпадению браузера в режим IE8Compat+IE7Standarts. И ведёт себя соответственно, как IE7, т.е. высвечивается только при наведении на ссылку, а не на кнопку. То же самое — и из локального файла *.htm, и из статического с другого хостинга, если доктайп — HTML5. А что в этом странного? Совершенно логичное поведение, IE8 не знает доктайпа HTML5, поэтому выпадает в режим совместимости.

[spmbt]

> В режим IE8Compat его может перевести только…
Вот именно. У меня при открытии окна устанавливается режим Compat, и он влияет на последующее поведение при HTML5. Если все гайды вывели из учёта того, что пользователь никогда не попадает в IE8Compat, то всё правильно, этого не должно быть никогда. Но у меня, например, попадает, и у разрабочика под рукой есть эти настройки. В зависимости от того, что он поставит, так и пойдёт. Но если стоит HTML4 Strict (ну и другие, но для этого примера говорим про него), то браузер выпадет в Document Mode IE8, а не IE7, как при HTML5.

(Я убедительно объяснил, что эта ситуация реальна? Единственным возражением может быть «А не надо так настраивать!», но это же не аргумент. Если что-то может сломаться, его сломают и будут правы как потребители. То самое и с HTML5 в режиме Compat.)

Я с этими комбинациями режимов в IE(9) писал специальный скрипт на строк 25-30, который распознавал все мыслимые комбинации настроек и правильно опознавал реальный режим с учётом браузер-мод, чтобы подгрузить нужные стили. Без него тестировщики периодически жаловались, что «вот в такой-то комбинации IE9 неправильно опознаёт версию для подгрузки CSS, сделайте что-нибудь. И проблема была в ручном выставлении режимов. Кстати, надо об этом написать…

[spmbt]

Нет, тестирую же коды по ссылке, и из локального файла file:///… с тем же содержимым, результат один. Точнее, тут чуть хитрее ведёт себя IE8. Если открыл домашнюю страницу (ya.ru, она в квирксе, а BrowserMode:Compat) в новом окне или новый таб (он в doc:ie8), то он в обоих случаях перескакивает в режим Doc:IE7. Если перед этим явно изменю документ-моду, то не перескакивает, остаётся в установленной моде (Quirks, ie7, ie8) и ведёт соответственно. Почему есть начальное перескакивание именно в doc:ie7 — не знаю, но факт, что есть.

[spmbt]

> он — правильный доктайп!
Поэтому я оговорил, что с точки зрения IE :).
> Видимо, очередной нелогичный баг
Да, что нелогичный — очевидно.

А вообще результат мне понравился, ещё одну итерацию до многострочных заголовков, идею которых описывал в статье — и можно применять во всех боевых режимах.

[egorinsk]

Ссылка: jsfiddle.net/bA9mF/45/embedded/result/
Броузер: Opera 11.11 (хотя я думал, все еще на старой доброй десятке сижу)

При нажатии на табы ничего не происходит. Яваскрипт включен.

[spmbt]

Да, уже обнаружили этот удивительный факт, написан и до ката, и в UPD4 есть фикс, работающий везде и как минимум в Опере 10.51.

[CraB]

Есть ли пример такого варианта без ограничения в высоту блока с текстом?