Comments 28
UPD: в ЛС сообщили, что в Safari 5.1 всё видно с градиентами и в Линуксе, и в Win. Тем лучше, теперь код CSS работает с нормальной деградацией (равномерная заливка серым) для Safari 5.0.
Я сообщил не про Линукс, а про Lion :)
В Chrome 1-9, Safari 4-5 работает -webkit-gradient();
Спасибо за тест и за информацию о том, в каких версиях появилось. Впрочем, это побочный код. Наиболее ценна идея с переключением по табам от makzimko.
Добавлю в избранное, пригодится. Спасибо.
Пожалуйста, выложите суть. Мне совершенно неинтересны тразишны, градиенты и прочие красивости, только скелет, с выковыриванием которого я (и, скорее всего, не только я) испытываю некоторые трудности.
И, кстати, не юзайте этот кривоработающий иетестер. В отладчике ИЕ9 есть отличная эмуляция старых баузеров (просто клацните F12 находясь на любой странице, сами всё увидете).
И, кстати, не юзайте этот кривоработающий иетестер. В отладчике ИЕ9 есть отличная эмуляция старых баузеров (просто клацните F12 находясь на любой странице, сами всё увидете).
Я использовал исходную наработку с парой эффектов, поэтому поневоле учитывал и их при приведении вида к кроссбраузерному. В использовании красивостей есть свой смысл: сугубо технический приём лучше воспримется если представлен в красивой обёртке. Мне при доработке самому приходилось кое-что дописывать (смещения, хаки) только для того, чтобы пример смотрелся красиво. Предлагаю доработать пример или сделать совершенно новый, с чистой сутью. Песочница jsfiddle.net этому отлично способствует. Собственно, и опубликовал свою доработку только затем, чтобы интересная идея (покрытая CSS3-свойствами) не потерялась.
> В использовании красивостей есть свой смысл: сугубо технический приём лучше воспримется если представлен в красивой обёртке.
Вы не описали технический приём. А обертка должна быть в качестве бонуса, не более.
Вы не описали технический приём. А обертка должна быть в качестве бонуса, не более.
Действительно; я не учёл, что сам прочитал ту статью, а другие не успели. Сейчас исправлюсь (в статье). Если в 2 словах, то в окне или фрейме создаются 2 элемента: список заголовков табов и список контента. По клику на заголовке таба происходит переход на участок контента по якорю. Всё, что ниже якоря, то отображается в окне/фрейме. Чтобы при этом не мешали другие участки контента (другое содержимое соседних табов), используется overflow: hidden в блоке <ul id=«tabcontent»>. Всё. Знакомиться лучше с первым примером, там нет кроссбраузерных решений, если не считать CSS3-свойств, которые не принциипиальны.
Конкретно по этой задаче, никогда не понимал её смысла.
Зачем?
js табы удобнее и универсальнее.
Зачем?
js табы удобнее и универсальнее.
Подтверждаю. Ссылка с результирующим кодом в IE8 Win32 XP приводит к выпадению браузера в режим IE8Compat+IE7Standarts. И ведёт себя соответственно, как IE7, т.е. высвечивается только при наведении на ссылку, а не на кнопку. То же самое — и из локального файла *.htm, и из статического с другого хостинга, если доктайп — HTML5. А что в этом странного? Совершенно логичное поведение, IE8 не знает доктайпа HTML5, поэтому выпадает в режим совместимости.
> В режим IE8Compat его может перевести только…
Вот именно. У меня при открытии окна устанавливается режим Compat, и он влияет на последующее поведение при HTML5. Если все гайды вывели из учёта того, что пользователь никогда не попадает в IE8Compat, то всё правильно, этого не должно быть никогда. Но у меня, например, попадает, и у разрабочика под рукой есть эти настройки. В зависимости от того, что он поставит, так и пойдёт. Но если стоит HTML4 Strict (ну и другие, но для этого примера говорим про него), то браузер выпадет в Document Mode IE8, а не IE7, как при HTML5.
(Я убедительно объяснил, что эта ситуация реальна? Единственным возражением может быть «А не надо так настраивать!», но это же не аргумент. Если что-то может сломаться, его сломают и будут правы как потребители. То самое и с HTML5 в режиме Compat.)
Я с этими комбинациями режимов в IE(9) писал специальный скрипт на строк 25-30, который распознавал все мыслимые комбинации настроек и правильно опознавал реальный режим с учётом браузер-мод, чтобы подгрузить нужные стили. Без него тестировщики периодически жаловались, что «вот в такой-то комбинации IE9 неправильно опознаёт версию для подгрузки CSS, сделайте что-нибудь. И проблема была в ручном выставлении режимов. Кстати, надо об этом написать…
Вот именно. У меня при открытии окна устанавливается режим Compat, и он влияет на последующее поведение при HTML5. Если все гайды вывели из учёта того, что пользователь никогда не попадает в IE8Compat, то всё правильно, этого не должно быть никогда. Но у меня, например, попадает, и у разрабочика под рукой есть эти настройки. В зависимости от того, что он поставит, так и пойдёт. Но если стоит HTML4 Strict (ну и другие, но для этого примера говорим про него), то браузер выпадет в Document Mode IE8, а не IE7, как при HTML5.
(Я убедительно объяснил, что эта ситуация реальна? Единственным возражением может быть «А не надо так настраивать!», но это же не аргумент. Если что-то может сломаться, его сломают и будут правы как потребители. То самое и с HTML5 в режиме Compat.)
Я с этими комбинациями режимов в IE(9) писал специальный скрипт на строк 25-30, который распознавал все мыслимые комбинации настроек и правильно опознавал реальный режим с учётом браузер-мод, чтобы подгрузить нужные стили. Без него тестировщики периодически жаловались, что «вот в такой-то комбинации IE9 неправильно опознаёт версию для подгрузки CSS, сделайте что-нибудь. И проблема была в ручном выставлении режимов. Кстати, надо об этом написать…
Нет, тестирую же коды по ссылке, и из локального файла file:///… с тем же содержимым, результат один. Точнее, тут чуть хитрее ведёт себя IE8. Если открыл домашнюю страницу (ya.ru, она в квирксе, а BrowserMode:Compat) в новом окне или новый таб (он в doc:ie8), то он в обоих случаях перескакивает в режим Doc:IE7. Если перед этим явно изменю документ-моду, то не перескакивает, остаётся в установленной моде (Quirks, ie7, ie8) и ведёт соответственно. Почему есть начальное перескакивание именно в doc:ie7 — не знаю, но факт, что есть.
> он — правильный доктайп!
Поэтому я оговорил, что с точки зрения IE :).
> Видимо, очередной нелогичный баг
Да, что нелогичный — очевидно.
А вообще результат мне понравился, ещё одну итерацию до многострочных заголовков, идею которых описывал в статье — и можно применять во всех боевых режимах.
Поэтому я оговорил, что с точки зрения IE :).
> Видимо, очередной нелогичный баг
Да, что нелогичный — очевидно.
А вообще результат мне понравился, ещё одну итерацию до многострочных заголовков, идею которых описывал в статье — и можно применять во всех боевых режимах.
Ссылка: jsfiddle.net/bA9mF/45/embedded/result/
Броузер: Opera 11.11 (хотя я думал, все еще на старой доброй десятке сижу)
При нажатии на табы ничего не происходит. Яваскрипт включен.
Броузер: Opera 11.11 (хотя я думал, все еще на старой доброй десятке сижу)
При нажатии на табы ничего не происходит. Яваскрипт включен.
Есть ли пример такого варианта без ограничения в высоту блока с текстом?
Sign up to leave a comment.
Табы на чистом CSS, от IE6+ (реинкарнация одного решения)