14.09.2011 
Олег Барабанов Немного о CSS3. Или о священных пинках новых стандартов.
Смотря на текущее развитие таких стандартов как HTML5, CSS3, SVG и прочих атрибутиках, не могу не заметить тот факт, что сдерживает всю эту лавину известный нам Internet Explorer. Даже 9-ый Explorer не привнес много вкусностей, которые есть уже во многих современных браузерах.
В сегодняшней статье я немного задену такие интересные плюшки как CSS3 Transition, а также CSS3 Transform. А так же приведу немного примеров. За работоспособность примеров прошу не ругать, проверял только в новом Firefox(4+) и Chrome. В Firefox, версии ниже 4-ой, а так-же в Internet Explorer, работать не будет. Про Safari и Opera ничего не скажу, т.к. в них не проверял. Я хотел лишь примеры сделать, но если будут пожелания со стороны читателей, я могу примеры довести до «победного конца»
Давайте приведем банальную ситуацию современных галерей картинок на сайтах. Пользователь, загружает в слепую картинку, закрепляет её за нужной категорией. А после смотрит и видит… что он забыл её перевернуть… Есть два варианта решения ситуации – это если на стороне сайта и сервера есть возможность перевернуть картинку. Второй вариант – это самим перевернуть картинку и загрузить заново. Минусами обоих вариантов, является пережимание картинок, с последующим их ухудшением качества(посетители сайтов и порталов фотографов подтвердят это), а так же определенный дискомфорт.
Или ситуация с простейшими анимациями и «карусельками». Сайты напичканные JS, делающие каждые доли секунд какие-то изменения DOM модели, существенно понижают скорость разработки проекта, а также скорость его работы в браузерах.
К счастью группа WHATWG заметила эти неудобства и начала разрабатывать новые стандарты, облегчающие работу с анимацией.
Итак… давайте посмотрим один простейший пример отображения картинки:
К сожалению очень неудобно просматривать такую фотографию. Но нам в помощь может прийти такой полезный инструмент CSS Transform: rotate.
Добавим мы два класса и две кнопки, изменяющие класс картинки.
Уже получше, но как-то резко… Может добавим плавности ? И тут на помощь нам приходит такой прекрасный инструмент как CSS Transition.
Уже получше =)
Но т.к. мы всетаки говорим о практическом применении, давайте взглянем на такие популярные менюшки, которые любят делать на flash.
Как видите – ни картинок, ни flash, ни JS. Удобно и легко перенастраиваемо.
Ну и ко всему этому, я решил сделать небольшой пример игры. Пример «более-менее» рабочий, но если будут пожелания у читателей нашего блога, то я могу доделать её до финального релиза.
Смотрим в FF4+ или Chrome: Пример №5 – игра.
Так каков же итог?
Перед тем как описать все плюсы и минусы данных решений, я чуть-чуть расскажу о текущей ситуации данных инноваций.
На данный момент, свойства CSS Transition и CSS Transform в нормальном уровне работают только в FF4+, Chrome, Safari, opera 10.50+ . Для сайтов – отказ от куска браузеров – не лучшая ситуация. Но вот для CRM или Интранет приложений, где можно отказаться от части браузеров, в пользу огромного количества возможностей – это уже реально. А если учитывать тот момент, что преобразования CSS в самых последних браузерах идет с использованием GPU ускорения – это не только облегчает работу JavaScript в браузере, но и делает семантику написания шаблона сайта более красивой.
Так каковы же плюсы и минусы:
Начну с минусов:
- Поддержка есть только в новых браузерах.
- На сайтах, с наличием flash – CSS3 transition работает некорректно
- Стандарт еще черновой, соответственно в браузерах он реализован по своему (хоть и схоже друг с другом). Соответственно префиксы -moz-,-webkit-,-o- обязательны
Ну и плюшки:
- CSS3 Transform и Transition не изменяет DOM-модель, а работает с уже отрендеренной частью. Соответственно, работает он куда быстрее, и не забивает стек вызовов однопоточного JavaScript(у которого на сайте своих дел полно). А в браузерах с поддержкой GPU ускорения – работает вообще на «УРА».
- Как и любой CSS – описывается он простыми селекторами.
- Позволяет сделать в пару кратких, понятных, и легко корректируемых строчек то, что раньше можно было сделать громоздкими скриптами, плагинами и костылями (или всем вместе).
- В тандеме с JavaScript – можно сделать то, что раньше возможно было сделать только с Flash или SVG+SMIL
- Существенно облегчает, и соответственно ускоряет разработку фронтендной части сайта.
P.S.
Все примеры были сделаны на скорую руку, просто для демонстрации. Если будет желание у меня или у читателей, я найду время на доработку примеров.
В рубрике "
Метки:
Спасибо за статью!
Насчет того, что внедрение новых плюшек тормозит только IE это немного лукаво. Поскольку все эти стандарты еще не приняты и всегда могут быть изменены. Да и современные браузеры не все поддерживают, а если поддерживают, то бывает сильно по-разному.
Есть несколько проектов, которые позволяют использовать некоторые особенности CSS3 на сайте без ущерба для старых браузеров – http://css3pie.com/ и http://www.modernizr.com/
Ну касательно современных браузеров. Будет время или добро от начальства – приведу рабочие примеры.
Я же пока коснулся только двух – CSS3 Transition и CSS3 Transform. Они уже более менее становятся доступными из-за дикого развития браузеров из серии «трое в лодке(gecko,opera со своим движком и webkit) не считая…». К сожалению, ни один костыль не может в полной мере заменить эти две фишки именно в том виде, в котором они работают. Как я и писал – Transform и Transition работают на уже отрендеренной страницей,без изменения структуры DOM-модели, и это становится панацеей самого браузера.
IE просто среди всего этого списка – сильно отстает.
Ну и я не призываю сейчас это юзать – я просто приглашаю готовиться к тому, что когда-то с огромной долей вероятности, будет активно юзаться. Да и просто считаю, что кто занимается в этой сфере, должен быть «на волне».
Да и юзать костыли в анимации – это не дело. Слишком важна скорость отрисовки. Так что – как я и писал, технологию можно юзать там, где можно отказаться от части браузеров (интранет приложения, оффлайн веб-приложения и т.д.).
Если будет достаточно пожеланий от других, я могу(да и хочу) поподробней эту тему(да и по HTML5(в особенности canvas|exCanvas а также о SMIL) тоже) раскрыть, с примерами практических приложений для заказчика в интранет сфере. Уже неоднократно на практике приходилось эти новинки использовать, так что мне есть, что написать =)
Я думаю, многим будет интересно почитать
Прикольная игруха. Мы делали аналог на флэше году эдак в 2004 для Тельца Видео Интернейшнл. Тогда, конечно, никто даже представить не мог, что это проще в браузере можно будет сделать.
Кстати, игра не работает в FF5 – после нажатия кнопки «Начать игру» ничего не происходит.
И еще когда экран с небольшим разрешением по вертикали при скролинге съезжают закрывашки для фоток. Т.е. фотки не скролятся, а закрывашки скролятся.
К сожалению не мог проверить непосредственно в 5-ом и 4-ом фаерфоксе. В связи с тем, что это интересно только единицам, а многим очень не понравилось, доделку примеров и написание статей на эту тему, к сожалению, видимо придется закрыть.
Олег, клевая тема и отличная иллюстрация приемов работы с HTML5 свойствами! Мой респект.
Совместимость со старыми браузерами увы и ах ну что делат ь- прогресс есть прогресс. Я себя до сих пор не могу заставить перелезть с FF3.6 – слишком много плагинов заточено
Почему transform не работает в Chrome и Chromium? В опере и огнелисе всё нормально, хотя в опере у у трансформирующийся объяект выглядит плавнее, а в огнелисе лесенкой.
p.s. речь идёт о браузерах последней стабильной версии
Странно – в последнем Хроме всё нормально робит(17-фя версия, на текущий момент самая новая). Зато в опере не должно, т.к. префиксы для нее в код не вводил.
На firefox еще и влияет тип рендеринга изображения CSS3 image-rendering. Да и в последних версиях он стал вообще оптимизированнее в плане трансформаций.
Ну и примеры были сделаны просто чтобы показать =) Если будут интересующиеся на эту тему – разумеется более детально и подробно раскрою тему, с поддержкой всех основных браузеров.