shoorick

Разбираюсь с модными HTML5 и CSS3, а точнее, с бесскриптовой анимацией, с помощью transition. Попробовал сделать вертикальный (обычный) аккордеон — почти получилось. Ни один яваскрипт не пострадал. Работает под линуксом в Firefox 10, Opera 11.60 и Chromium 14. Под виндой в IE 8 — не работает. В остальных браузерах и ОС пока не тестировал. Modernizr пока тоже не прикручивал.

Действующий пример лежит на http://shoorick.ru/lj/net/accordion-vertical.html, код — на гитхабе и ( под катом )
Следующая задача — повернуть получившийся баян на 90° — с ней я почти придумал, как справиться. Дальшейшие — смена картинок и прокрутка содержимого блока без участия яваскрипта и посетителя сайта — пока туманны. Но всё равно придумаю. Или нагуглю. Хотя в девизе моей альма-матери другой порядок действий: Нагуглю или придумаю. Aut viam inveniam, aut faciam.

JavaScript в файрфоксе (3.6.16 под убунтой) работает как-то странно: функция Math.floor, когда вызвана из скрипта, не желает округлять свой аргумент — координаты элемента и возвращает его в неизменном виде, с длинным хвостом из знаков после запятой. Хотя при вызове из отладочной консоли работает вполне исправно.

В других браузерах (MSIE, Opera, Chrome) координаты целочисленны, но отображаемый и скрываемый скриптом на jQuery элемент скачет по всей странице, вместо того, чтобы сидеть на одном месте. Похоже, каким-то образом его абсолютное позиционирование становится относительным.

Нашёл методом тыка странный костыль: при скрытии элемента загоняю его в угол:

$('#strange').offset({top:0, left:0});

После чего, при следующем отображении, элемент встаёт в нужную позицию.

Если к веб-странице прицепить несколько стилей и указать у тэга <link> атрибут title, то есть, написать так:

<link rel="stylesheet" type="text/css" href="/css/first.css" title="Основной стиль" />
<link rel="stylesheet" type="text/css" href="/css/second.css" title="Дополнительный стиль" />

то MSIE при показе страницы использует оба стилевых файла, а вот Mozilla Firefox, Opera и Konqueror используют лишь первый (в мозилле пользователь может выбрать, какой именно из стилей следует использовать). Почему — непонятно, вроде бы rel="stylesheet", а не "alternate stylesheet".

Если убрать title хотя бы из второго тэга (или из обоих) — страница отображается с учётом обоих файлов во всех перечисленных браузерах.