CSS3 для веб-дизайнеров

CSS-анимации либо останутся технологией исключительно для браузеров на движке WebKit, либо пойдут по стопам переходов и преобразований и будут приняты всеми остальными. В любом случае CSS-анимации – простые, не требуют большого труда и спокойно игнорируются браузерами, которые их не понимают. То, что я показал в этом примере, довольно примитивный способ использования анимаций, призванный проиллюстрировать, что возможно создать, пользуясь исключительно разметкой и стилевыми таблицами. Это замечательно, и по этой причине с анимациями стоит экспериментировать.

Сосредоточьтесь на взаимодействии

Элементы форм редко бывают критическими элементами бренда, и поэтому формы – прекрасная область применения CSS3-свойств.

Элементы форм сильно отличаются внешне в зависимости от пользовательского окружения, но мы можем уменьшить эту разницу, оформляя их с помощью расширенного CSS и зная, что в браузерах, которые не поддерживают CSS3, будут отображаться прекрасно работающие, знакомые элементы форм по умолчанию.

Заключение

Теперь спустимся на Землю и посмотрим назад.

Мы обсудили много прекрасных (если позволите мне так говорить) способов использования CSS3 прямо сейчас, в ежедневной работе. Я надеюсь, что, показав, как эти приемы могут улучшать взаимодействие в браузерах, которые поддерживают новые свойства, и как все остается рабочим в остальных браузерах, вы будете вдохновлены на то, чтобы использовать их ежедневно, вне зависимости от проекта.

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

В первой главе я упоминал, что часто слышу: «Не могу дождаться, хочу начать использовать CSS3… когда его закончат». Цель этой книги – показать, что ждать незачем. Начинайте использовать CSS3 для некритических визуальных

событий в своем дизайне. Теперь, когда вы вооружены тем, что работает и – еще важнее, – как вещи выглядят тогда, когда новые свойства не работают, – вы можете легко добиваться того, на что раньше уходило больше времени и кода, всего лишь несколькими строчками CSS.

А как насчет заказчиков и руководителей, которые не понимают этого?

Еще один вопрос, который мне часто задают о CSS3, – как я использую новые свойства, работая с заказчиками. Как объяснять им преимущества использования CSS3 по сравнению с другими решениями? Обучать своих заказчиков – самое

полезное: покажите им, насколько меньше кода и изображений получается в результате. Продемонстрируйте, как отличается пользовательский опыт в браузерах, которые пока что не поддерживают CSS3. Объясните им, в чем заключается компромисс.

Если это трудоемко, тогда просто используйте CSS3.

Начинайте добавлять фрагменты CSS3 в свою ежедневную работу, и пусть ваши заказчики и руководители с радостью узнают об этом. Правда заключается в том, что многие визуальные эффекты, которые были показаны в примерах в этой книге, можно обнаружить, когда взаимодействуешь с сайтом: наводишь на элементы, переводишь фокус и так далее. Разумеется, такие эффекты создаются намеренно.

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

Хотите, чтобы это работало во всех браузерах, о которых только можно подумать? Ну, за это придется еще заплатить. Хм.

Что дальше?

Какое же будет будущее? CSS3 в целом заключает в себе много больше, чем то, о чемговорится в этой маленькой книге. Я хотел честно сосредоточиться на том, что практически применимо сегодня, избегая те места спецификации, которые по-прежнему прорабатываются и для которых нет такой распространенной поддержки.

Но пока что все идет хорошо. Поддержка новых свойств появляется в каждой версии WebKit, Mozilla и Opera. Быстрое принятие новых свойств с помощью браузерных префиксов – это то, что продвигает инновации. Следить за тем, что нового, и отмечать, когда наступает переломная точка в поддержке нового свойства современными браузерами, – такие действия могут дать представление об использовании свойств CSS3 в настоящих проектах.

Нас ждут интересные времена с IE9 Beta. Да, я действительно сказал это. Мы видим, как в Internet Explorer появляется все больше и больше поддержки CSS3, и это замечательно.