В первой главе я упоминал, что часто слышу: «Не могу дождаться, хочу начать использовать CSS3… когда его закончат». Цель этой книги – показать, что ждать незачем. Начинайте использовать CSS3 для некритических визуальных
событий в своем дизайне. Теперь, когда вы вооружены тем, что работает и – еще важнее, – как вещи выглядят тогда, когда новые свойства не работают, – вы можете легко добиваться того, на что раньше уходило больше времени и кода, всего лишь несколькими строчками CSS.
А как насчет заказчиков и руководителей, которые не понимают этого?
Еще один вопрос, который мне часто задают о CSS3, – как я использую новые свойства, работая с заказчиками. Как объяснять им преимущества использования CSS3 по сравнению с другими решениями? Обучать своих заказчиков – самое
полезное: покажите им, насколько меньше кода и изображений получается в результате. Продемонстрируйте, как отличается пользовательский опыт в браузерах, которые пока что не поддерживают CSS3. Объясните им, в чем заключается компромисс.
Если это трудоемко, тогда просто используйте CSS3.
Начинайте добавлять фрагменты CSS3 в свою ежедневную работу, и пусть ваши заказчики и руководители с радостью узнают об этом. Правда заключается в том, что многие визуальные эффекты, которые были показаны в примерах в этой книге, можно обнаружить, когда взаимодействуешь с сайтом: наводишь на элементы, переводишь фокус и так далее. Разумеется, такие эффекты создаются намеренно.
В своей работе с заказчиками я часто добавляю эти улучшения взаимодействия в проект, ничего не говоря об этом, удивляя и радуя их, когда они обнаруживает их. И, что еще важнее, удивляя и радуя посетителей сайта заказчика, когда они обнаруживают эти эффекты.
Хотите, чтобы это работало во всех браузерах, о которых только можно подумать? Ну, за это придется еще заплатить. Хм.
Что дальше?
Какое же будет будущее? CSS3 в целом заключает в себе много больше, чем то, о чемговорится в этой маленькой книге. Я хотел честно сосредоточиться на том, что практически применимо сегодня, избегая те места спецификации, которые по-прежнему прорабатываются и для которых нет такой распространенной поддержки.
Но пока что все идет хорошо. Поддержка новых свойств появляется в каждой версии WebKit, Mozilla и Opera. Быстрое принятие новых свойств с помощью браузерных префиксов – это то, что продвигает инновации. Следить за тем, что нового, и отмечать, когда наступает переломная точка в поддержке нового свойства современными браузерами, – такие действия могут дать представление об использовании свойств CSS3 в настоящих проектах.
Нас ждут интересные времена с IE9 Beta. Да, я действительно сказал это. Мы видим, как в Internet Explorer появляется все больше и больше поддержки CSS3, и это замечательно.
В итоге мы сможем полагаться на CSS3 не только для улучшения взаимодействия, но и для критических визуальных элементов (расположение блоков на странице – один из основных примеров). Кажется, что по этому пути мы движемся довольно медленно, но для хорошего результата совершенно необходимо, чтобы все происходило грамотно и продуманно. Пока мы движемся по этому пути, не стесняйтесь брать и использовать то, что хорошо работает сейчас. Вы, ваши заказчики и жители веба будут рады.
Дополнительные материалы и ресурсы
CSS3.info уже давно публикует новости, примеры и информацию о развитии событий:
http://www.CSS3.info
Смотрите также раздел «Предпросмотр», где выложены демки конкретных свойств:
http://www.CSS3.info/preview
Раньше я говорил, что не нужно читать спецификации, но для должного понимания картины в целом, чтобы подготовиться к тому, что будет дальше, и чтобы видеть, в каком состоянии какие модули находятся (рабочий черновик, кандидат в рекомендации и т. д.), смотрите сюда:
http://www.w3.org/style/CSS/current-work
Или сюда, чтобы узнать больше о самих модулях, как они разделены и что в них содержится:
http://www.w3.org/tR/CSS3-roadmap
Блоги разработчиков всех основных браузеров – замечательный источник знаний, который позволит быть в курсе того, какие свойства в каких браузерах поддерживаются. Я советую подписаться на эти блоги, чтобы всегда знать, какие свойства поддерживаются, от каких отказываются и с чем экспериментируют:
http://webkit.org/blog
http://blog.mozilla.com
http://dev.opera.com/articles/css
http://blogs.msdn.com/b/ie
Появилось несколько сайтов, которые могут помочь понять совместимость браузеров и узнать, в каких их версиях поддерживаются конкретные свойства:
http://caniuse.com
http://www.quirksmode.org/css/contents.html
http://html5readiness.com Пусть URL не смущает вас; на сайте также пишут про CSS3.
Есть браузерные инструменты, которые дают графический интерфейс для создания рабочего кода во всех браузерах, где есть поддержка конкретного свойства. Эти инструменты могут сильно пригодиться в изучении:
http://CSS3generator.com
http://CSS3please.com
http://gradients.glrzad.com
http://tools.westciv.com
http://border-radius.com
Наконец, решения на JavaScript могут помочь расширить поддержку CSS3 во многих других браузерах. Для критических визуальных событий, которые должны работать везде с помощью современного CSS3, есть несколько вариантов:
http://www.modernizr.com
http://ecsstender.org
http://selectivizr.com/ Эмулятор псевдоклассов для IE5.5–8.
Спасибо, что прочитали эту книгу! Отправляйтесь создавать замечательные вещи. Dream big and implement small.
Об издательстве A Book Apart
Веб-дизайн – это междисциплинарное мастерство и высочайшая, лазероподобная точность. Таково направление мыслив наших книгах, издаваемых для людей, которые создают сайты. Мы рассказываем о развивающихся и важнейших темах в мире веб-дизайна и веб-разработки, придерживаясь ясности и прежде всего лаконичности – потому что погруженные в работу дизайнеры и разработчики не могут позволить себе терять время попусту.
Цель каждой книги – разобраться в сложной теме и сделать это понятно и быстро, чтобы читатель мог вскоре вернуться к работе. Спасибо, что поддерживаете нашу миссию: дать всем профессионалам инструменты, которые нужны, чтобы развивать веб.
Об авторе
Дэн Сидерхолм – веб-дизайнер, писатель, муж и отец, живущий в Салеме, штат Массачусетс. Он основал SimpleBits, крохотную дизайн-студию. Будучи признанным специалистом в области веб-дизайна, основанного на стандартах, Дэн работал с YouTube, MTV, Google, Yahoo, ESPN, Fast Company, Blogger и другими компаниями. В своих дизайн-проектах, публикациях и выступлениях он следует принципам гибкого и адаптивного дизайна, использующего веб-стандарты.
Дэн – сооснователь и дизайнер Dribbble, сообщества дизайнеров, где они в реальном времени делятся друг с другом проектами, над которыми работают. Ранее он основал Cork’d – первую социальную сеть для страстных любителей вина.
Дэн – автор трех бестселлеров: Handcrafted CSS (New Riders)[20], Bulletproof Web Design[21], Second Edition (New Riders) и Web Standards Solutions, Special Edition (Friends of ED). Также он играет на укулеле (четырехструнный щипковый музыкальный инструмент. Прим. перев.) и называет себя любителем космических путешествий.
Примечания
1
http://www.alistapart.com/articles/tohell/ Здесь и далее прим. ред.
2
http://www.w3.org/tR/css3-roadmap/#whymods
3
http://www.alistapart.com/articles/prefix-or-posthack/
4
http://www.w3.org/tR/Css3-transitions/
5
http://www.opera.com/docs/specs/presto23/css/transitions/
6
https://developer.mozilla.org/en/Css/Css_transitions
7
http://www.w3.org/tR/css3-transitions/#properties-from-css-
8
http://trentwalton.com/2010/03/22/Css3-in-transition/
9
http://www.w3.org/tR/Css3-2d-transforms/#abstract
10
http://www.w3.org/tR/css3-2d-transforms/#transform-origin
11
http://www.w3.org/tR/Css3-background/
12
http://en.wikipedia.org/wiki/Parallax_scrolling
13
http://thinkvitamin.com/design/how-to-recreate-silverbacks-parallax-effect/
14
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
15
http://www.quirksmode.org/css/contents.html
16
http://msdn.microsoft.com/en-us/library/cc351024(Vs.85). aspx
17
http://www.westciv.com/tools/gradients/index-moz.html
18
http://snook.ca/archives/html_and_css/multiple-bg-css-gradients
19
http://www.w3.org/tR/Css3-animations/
20
Издание на русском языке: Седерхольм Д. CSS ручной работы. М.: Питер, 2011.
21
Издание на русском языке: Седерхольм Д. Пуленепробиваемый веб-дизайн. Библиотека специалиста. М.: Питер, 2012.
