CSS: transition & browsers

Неожиданно пэрэчэпыуся я за странное отмораживание браузеров на движке Gecko (Seamonkey 2.38, Firefox ESR38, Firefox 41, Firefox 45.0a1 (Nightly)).

В CSS есть такое замечательное свойство transition которое позволяет делать эффект перехода между двумя состояниями элемента. Чаще всего посредством наведения мыши, т. е. благодаря псевдоклассу :hover который задается в свойствах таблицы стилей.

Проще говоря, это рюшко-сопелка, которая сглаживает, точнее, анимирует, например, изменение цвета(поведения) гиперссылок при наведении курсора (transition и неtransition) без применения javascript и его многочисленных библиотек.

Да, если подумать, скрипач она не нужна. Но народу нравится.

Обычно я смотрел (отлаживал) все свои изделия в двух браузерах: на движках Gecko (Firefox и Ко) и Webkit (Chrome и Ко). Но, как правило, в последние годы они ничем не отличаются в отображении веб-страниц. Поэтому у меня есть незахламленный чистый Хром, в котором я и.. того-этого. Он быстрее работает, чем Файрфокс, и постепенно вытесняет его. И поделом, кстати.

Обычно я хожу в обход всяких эффектов, но тут захотелось трошки повеселиться.

На нынешнем временном простом зимнем блоге внизу есть область, попав мышью в которую, можно увидеть ряд снежинок (мега, да?). Чтобы картинку резко не выбивало, я добавил секундный «переход» между темной и синей.

Полез я нонче проверить, как там поживает бложек, с обычного своего повседневного Seamonkey. И не обнаружил никакой мягкости и плавности. Поначалу я подумал, что Симанки как продукт архаичный (хоть и основанный на современном движке, том же самом, что и передовой Файрфокс), просто не поддерживает это свойство. Но оказалось, что даже свежайшая сегодняшняя файрфоксовая альфа страдает тем же непониманием высокого искусства.

Главное, с текстовыми ссылками все работает отлично, можете убедиться, открыв верхнее меню, нажав красную хреновину вверху экрана. Плавные уходы и приходы. Картинки — фиг. Хром — все на ура.

Я подумал, что мешает какой-то код на странице, хотя опять же, хрому это не помеха. И переместил только этот снежиночный элемент в известный сервис для тестирования кода jsfiddle. Та же картина. Хром отлично, Фоксы — неуд.

Джаваскрипта никакого нет, остальное можете видеть. Result — это резулт. Ткните и проверьте.

Вроде ерунда, а зацепило. Половина интернета рюшку не приметит! Ужас! Ааааа!

Ну да, можно подключить jQuery, тем более что эта штука уже работает на странице, выдвигая «меню» и инициируя кнопку перемещения вверх. Но тут не в этом дело. Всегда нужно искать простой путь. Для меня эффекты, если они необходимы, прежде всего это стандарты CSS, а уж потом все остальное. Джава-скрипт многими людьми отключается во избежание. В том числе я лично знаю парочку параноидальных админов, которые своих подопечных в интернет гоняют чуть ли не через TOR с полным выпиливанием малейших пылинок на челе безопасности… Никакие модные параллаксы в их браузерах работать не будут. А CSS будет, потому что это просто безобидное оформление, помогающее (или мешающее) восприятию html-разметки веб-страницы.

Не знаю, что с этим делать. Попала песчинка в ботинок. Ненавижу такие ситуации, когда какая-то ерунда портит пёрфект всего остального. Гм, я на выяснения, эксперименты и этот отклик потратил кучу времени.

Ну ладно. Пойду сделаю тыквенную кашу с рисом и изюмом. Happy Halloween!

P.S.

Если две картинки заменить спрайтом (то есть склеить их вместе, что практикуется для более быстрой подгрузки, но требует более сложного и точного позиционирования, особенно когда картинок в одном спрайте много и они разного размера), такая фиговина работает в Файрфоксе, но эффект получается совсем иным:

Картинка едет вверх, поскольку вторая ее часть лежит на 27 пикселей «ниже». Тогда как две картинки по отдельности дают эффект «проявки» или «подсветки»… Идиотия какая-то.

CSS — инструмент очень сильный. Сделать с его помощью можно многое. Но это такой замысловато скрученный клубок разноцветных нитей, что порой…

Короче.