Немного о CSS3. Или о священных пинках новых стандартов.

Немного о CSS3. Или о священных пинках новых стандартов.

Смотря на текущее развитие таких стандартов как HTML5, CSS3, SVG и прочих атрибутиках, не могу не заметить тот факт, что сдерживает всю эту лавину известный нам Internet Explorer. Даже 9-ый Explorer не привнес много вкусностей, которые есть уже во многих современных браузерах.

В сегодняшней статье я немного задену такие интересные плюшки как CSS3 Transition, а также CSS3 Transform. А так же приведу немного примеров. За работоспособность примеров прошу не ругать, проверял только в новом Firefox(4+) и Chrome. В Firefox, версии ниже 4-ой, а так-же в Internet Explorer, работать не будет. Про Safari и Opera ничего не скажу, т.к. в них не проверял. Я хотел лишь примеры сделать, но если будут пожелания со стороны читателей, я могу примеры довести до «победного конца»

Давайте приведем банальную ситуацию современных галерей картинок на сайтах. Пользователь, загружает в слепую картинку, закрепляет её за нужной категорией. А после смотрит и видит… что он забыл её перевернуть… Есть два варианта решения ситуации — это если на стороне сайта и сервера есть возможность перевернуть картинку. Второй вариант — это самим перевернуть картинку и загрузить заново. Минусами обоих вариантов, является пережимание картинок, с последующим их ухудшением качества(посетители сайтов и порталов фотографов подтвердят это), а так же определенный дискомфорт.

Или ситуация с простейшими анимациями и «карусельками». Сайты напичканные JS, делающие каждые доли секунд какие-то изменения DOM модели, существенно понижают скорость разработки проекта, а также скорость его работы в браузерах.

К счастью группа WHATWG заметила эти неудобства и начала разрабатывать новые стандарты, облегчающие работу с анимацией.

Итак… давайте посмотрим один простейший пример отображения картинки:

Пример №1

К сожалению очень неудобно просматривать такую фотографию. Но нам в помощь может прийти такой полезный инструмент CSS Transform: rotate.

Добавим мы два класса и две кнопки, изменяющие класс картинки.

Пример №2

Уже получше, но как-то резко… Может добавим плавности ? И тут на помощь нам приходит такой прекрасный инструмент как CSS Transition.

Пример №3

Уже получше =)

Но т.к. мы всетаки говорим о практическом применении, давайте взглянем на такие популярные менюшки, которые любят делать на flash.

Пример №4

Как видите — ни картинок, ни flash, ни JS. Удобно и легко перенастраиваемо.

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

Смотрим в FF4+ или Chrome:   Пример №5 — игра.

Так каков же итог?

Перед тем как описать все плюсы и минусы данных решений, я чуть-чуть расскажу о текущей ситуации данных инноваций.

На данный момент, свойства CSS Transition и CSS Transform в нормальном уровне работают только в FF4+, Chrome, Safari, opera 10.50+ . Для сайтов — отказ от куска браузеров — не лучшая ситуация. Но вот для CRM или Интранет приложений, где можно отказаться от части браузеров, в пользу огромного количества возможностей — это уже реально. А если учитывать тот момент, что преобразования CSS в самых последних браузерах идет с использованием GPU ускорения — это не только облегчает работу JavaScript в браузере, но и делает семантику написания шаблона сайта более красивой.

Так каковы же плюсы и минусы:

Начну с минусов:

  1. Поддержка есть только в новых браузерах.
  2. На сайтах, с наличием flash — CSS3 transition работает некорректно
  3. Стандарт еще черновой, соответственно в браузерах он реализован по своему (хоть и схоже друг с другом). Соответственно префиксы -moz-,-webkit-,-o- обязательны

 

Ну и плюшки:

  1. CSS3 Transform и Transition не изменяет DOM-модель, а работает с уже отрендеренной частью. Соответственно, работает он куда быстрее, и не забивает стек вызовов однопоточного JavaScript(у которого на сайте своих дел полно). А в браузерах с поддержкой GPU ускорения — работает вообще на «УРА».
  2. Как и любой CSS — описывается он простыми селекторами.
  3. Позволяет сделать в пару кратких, понятных, и легко корректируемых строчек то, что раньше можно было сделать громоздкими скриптами, плагинами и костылями (или всем вместе).
  4. В тандеме с JavaScript — можно сделать то, что раньше возможно было сделать только с Flash или SVG+SMIL
  5. Существенно облегчает, и соответственно ускоряет разработку фронтендной части сайта.

P.S.

Все примеры были сделаны на скорую руку, просто для демонстрации. Если будет желание у меня или у читателей, я найду время на доработку примеров.

8 комментариев to “Немного о CSS3. Или о священных пинках новых стандартов.”

  1. Евгений Мокеев:

    Спасибо за статью!

    Насчет того, что внедрение новых плюшек тормозит только IE это немного лукаво. Поскольку все эти стандарты еще не приняты и всегда могут быть изменены. Да и современные браузеры не все поддерживают, а если поддерживают, то бывает сильно по-разному.

    Есть несколько проектов, которые позволяют использовать некоторые особенности CSS3 на сайте без ущерба для старых браузеров — http://css3pie.com/ и http://www.modernizr.com/

    • Олег Барабанов:

      Ну касательно современных браузеров. Будет время или добро от начальства — приведу рабочие примеры.
      Я же пока коснулся только двух — CSS3 Transition и CSS3 Transform. Они уже более менее становятся доступными из-за дикого развития браузеров из серии «трое в лодке(gecko,opera со своим движком и webkit) не считая…». К сожалению, ни один костыль не может в полной мере заменить эти две фишки именно в том виде, в котором они работают. Как я и писал — Transform и Transition работают на уже отрендеренной страницей,без изменения структуры DOM-модели, и это становится панацеей самого браузера.
      IE просто среди всего этого списка — сильно отстает.
      Ну и я не призываю сейчас это юзать — я просто приглашаю готовиться к тому, что когда-то с огромной долей вероятности, будет активно юзаться. Да и просто считаю, что кто занимается в этой сфере, должен быть «на волне».

      Да и юзать костыли в анимации — это не дело. Слишком важна скорость отрисовки. Так что — как я и писал, технологию можно юзать там, где можно отказаться от части браузеров (интранет приложения, оффлайн веб-приложения и т.д.).

      Если будет достаточно пожеланий от других, я могу(да и хочу) поподробней эту тему(да и по HTML5(в особенности canvas|exCanvas а также о SMIL) тоже) раскрыть, с примерами практических приложений для заказчика в интранет сфере. Уже неоднократно на практике приходилось эти новинки использовать, так что мне есть, что написать =)

  2. Прикольная игруха. Мы делали аналог на флэше году эдак в 2004 для Тельца Видео Интернейшнл. Тогда, конечно, никто даже представить не мог, что это проще в браузере можно будет сделать.

    Кстати, игра не работает в FF5 — после нажатия кнопки «Начать игру» ничего не происходит.

    И еще когда экран с небольшим разрешением по вертикали при скролинге съезжают закрывашки для фоток. Т.е. фотки не скролятся, а закрывашки скролятся.

    • Олег Барабанов:

      К сожалению не мог проверить непосредственно в 5-ом и 4-ом фаерфоксе. В связи с тем, что это интересно только единицам, а многим очень не понравилось, доделку примеров и написание статей на эту тему, к сожалению, видимо придется закрыть.

  3. Михаил Комм:

    Олег, клевая тема и отличная иллюстрация приемов работы с HTML5 свойствами! Мой респект.

    Совместимость со старыми браузерами увы и ах ну что делат ь- прогресс есть прогресс. Я себя до сих пор не могу заставить перелезть с FF3.6 — слишком много плагинов заточено 🙁

  4. moran:

    Почему transform не работает в Chrome и Chromium? В опере и огнелисе всё нормально, хотя в опере у у трансформирующийся объяект выглядит плавнее, а в огнелисе лесенкой.
    p.s. речь идёт о браузерах последней стабильной версии

    • Олег Барабанов:

      Странно — в последнем Хроме всё нормально робит(17-фя версия, на текущий момент самая новая). Зато в опере не должно, т.к. префиксы для нее в код не вводил.
      На firefox еще и влияет тип рендеринга изображения CSS3 image-rendering. Да и в последних версиях он стал вообще оптимизированнее в плане трансформаций.
      Ну и примеры были сделаны просто чтобы показать =) Если будут интересующиеся на эту тему — разумеется более детально и подробно раскрою тему, с поддержкой всех основных браузеров.

Коментарии