CSS3 для веб-дизайнеров - Дэн Сидерхолм

В первой главе я упоминал, что часто слышу: «Не могу дождаться, хочу начать использовать 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.