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

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

Книга «CSS3 для веб-дизайнеров » Дэна Сидерхолма поможет вам использовать CSS3 прямо сейчас, применяя технологии, появившиеся в новых стандартах.

Сайты – это не то же самое, что изображения сайтов. Когда один человек отрисовывает сайт в Фотошопе, а другой пишет разметку и CSS-код, верстальщик вынужден угадывать и предполагать те или иные намерения дизайнера. Этот процесс интерпретации редко совершенен – только если верстальщика не зовут Дэн Сидерхолм. Когда Дэн верстает макеты других людей, у него все получается так, как нужно, и даже те места, в которых дизайнер ошибся. Например, Дэн неизбежно превращает фиксированные размеры объекта в макете в гибкий, легко читаемый и надежный код.

И правда, Дэн ввел в обращение фразу «надежный веб-дизайн», когда учил всех нас такому дизайну.

В случае Дэна гибкий никогда не означает недоделанный. Детали всегда важны, потому что Дэн не только талантливый верстальщик, всегда думающий об интересах пользователя, – он также прирожденный дизайнер. Он живет дизайном, дышит дизайном и даже подарил миру новый способ делиться дизайном: сайт dribbble.com. Дэн еще и прирожденный учитель и веселый человек, и его манера шутить с каменным лицом заставляет самого Стивена Райта выглядеть несерьезным в сравнении. Дэн многому учит, помогая дизайнерам улучшать свои навыки.

Вот почему, друзья, мы попросили его рассказать о CSS3. Можно лишь мечтать об учителе умнее, опытнее; о человеке, более сконцентрированном на дизайне, или о большем ценителе веб-стандартов, чем наш друг Дэн.

Об авторе книги «CSS3 для веб-дизайнеров»

Дэн Сидерхолм – веб-дизайнер, писатель, муж и отец, живущий в Салеме, штат Массачусетс. Он основал SimpleBits, крохотную дизайн-студию. Будучи признанным специалистом в области веб-дизайна, основанного на стандартах, Дэн работал с YouTube, MTV, Google, Yahoo, ESPN, Fast Company, Blogger и другими компаниями. В своих дизайн-проектах, публикациях и выступлениях он следует принципам гибкого и адаптивного дизайна, использующего веб-стандарты.

Дэн – сооснователь и дизайнер Dribbble, сообщества дизайнеров, где они в реальном времени делятся друг с другом проектами, над которыми работают. Ранее он основал Cork’d – первую социальную сеть для страстных любителей вина.

Дэн – автор трех бестселлеров: Handcrafted CSS (New Riders)20, Bulletproof Web Design21, Second Edition (New Riders) и Web Standards Solutions, Special Edition (Friends of ED). Также он играет на укулеле (четырехструнный щипковый музыкальный инструмент) и называет себя любителем космических путешествий.

Приятного чтения!

Дэн Сидерхолм

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

Предисловие

Сайты – это не то же самое, что изображения сайтов. Когда один человек отрисовывает сайт в Фотошопе, а другой пишет разметку и CSS-код, верстальщик вынужден угадывать и предполагать те или иные намерения дизайнера. Этот процесс интерпретации редко совершенен – только если верстальщика не зовут Дэн Сидерхолм. Когда Дэн верстает макеты других людей, у него все получается так, как нужно, и даже те места, в которых дизайнер ошибся. Например, Дэн неизбежно превращает фиксированные размеры объекта в макете в гибкий, легко читаемый и надежный код.

(И правда, Дэн ввел в обращение фразу «надежный веб-дизайн», когда учил всех нас такому дизайну.)

В случае Дэна гибкий никогда не означает недоделанный. Детали всегда важны, потому что Дэн не только талантливый верстальщик, всегда думающий об интересах пользователя, – он также прирожденный дизайнер. Он живет дизайном, дышит дизайном и даже подарил миру новый способ делиться дизайном: сайт dribbble.com. Дэн еще и прирожденный учитель и веселый человек, и его манера шутить с каменным лицом заставляет самого Стивена Райта выглядеть несерьезным в сравнении. Дэн многому учит, помогая дизайнерам улучшать свои навыки.

Вот почему, друзья, мы попросили его рассказать о CSS3. Можно лишь мечтать об учителе умнее, опытнее; о человеке, более сконцентрированном на дизайне, или о большем ценителе веб-стандартов, чем наш друг Дэн. Приятного чтения!

Джеффри Зельдман

1. CSS3 сегодня

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

Можно утверждать, что все интересное началось в 2001-м, когда Джефри Зельдман написал статью «К черту плохие браузеры» (http://bkaprt.com/css3/1/), обозначив рассвет эпохи CSS. Этот манифест заставил дизайнеров двигаться дальше и использовать CSS не только для задания шрифтов и цветов ссылок, таким образом оставляя позади старые браузеры, не понимавшие CSS1. Да-да, CSS1.

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

Приблизительно около 2006 года разговоры о CSS стихли. Решения к большей части задач, встающих перед нами, были найдены и хорошо задокументированы. Для известных ошибок браузеров были найдены несколько обходных путей. Были созданы группы поддержки для дизайнеров, страдающих из-за необъяснимых ошибок Internet Explorer. Наши волосы стали седеть (говорю за себя). Впрочем, важнее всего то, что современные браузеры были сравнительно бездвижными. Этот период status quo дал нам время отточить используемые приемы и выработать набор передовых практик, но положение дел стало немного, осмелюсь сказать, скучным для приверженца CSS, который стремился получить лучшие инструменты.

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

Не читайте спецификации

Зайдите в комнату, наполненную веб-дизайнерами, и спросите их: «Кто любит читать спецификации?» Возможно, вы увидите одну поднятую руку. (Если этот человек – вы, то я горжусь вами и свободным временем, которое у вас есть, по всей видимости.) Пусть они и представляют собой важный справочник, я определенно не получаю удовольствия от чтения спецификаций целиком и не рекомендую заниматься этим, чтобы полностью постигнуть CSS3.

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

W3C (World Wide Web Consortium. Прим. перев. ) объясняет модульный подход так:

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

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

Но, разумеется, если вам нравится читать спецификации – вперед! Естественно, из них можно многому научиться – но намного прагматичнее сконцентрироваться на том, что уже внедрено и может быть использовано сегодня, и об этих вещах мы поговорим в этой главе. Затем мы будем применять эти вещи на конкретных примерах.

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

CSS3 – для всех

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

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

Целиться на взаимодействие

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

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

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

Когда применять CSS3

В терминах визуального взаимодействия с сайтом можно разбить все на две категории: ключевое и второстепенное (табл. 1.01 ).


Таблица 1.01. Визуальное взаимодействие с сайтом можно разбить на категории ключевое и второстепенное. К второстепенному CSS3 можно применять сегодня


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

Например, в развивающейся спецификации CSS3 появилось несколько элементов для управления форматом – это то, что нам всем крайне нужно.

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

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

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

Серия книг A Book Apart по ВЕБ-ДИЗАЙНУ NEW 2013

A Book Apart - это серия книг для интернет-профессионалов: тех, кто создает веб-сайты, улучшает их эффективность и продает с их помощью товары и услуги. Книги серии невелики по объему, но насыщены практической информацией. Их любят те, кто постоянно совершенствуют свои знания в IT и не стоят на месте.

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

SpoilerTarget">Спойлер

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


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

Для кого эта книга
Для владельцев сайтов, программистов, веб-дизайнеров, как опытных, так и начинающих.


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

SpoilerTarget">Спойлер

О чем эта книга
Эту книгу можно назвать инструкцией по использованию HTML5. Из нее вы узнаете все необходимое об истории и развитии HTML, принципах устройства и что стало определяющим фактором в разработке.
О спецификациях HTML5 и о том, что должны делать браузеры, когда им встречаются документы с ошибками разметки. О том, как указывать кодировки документа разметки.
О технологических нововведениях: элементе img, появлении JavaScript, быстром росте количества Ajax-приложений. О том, как использовать структурные элементы HTML5 прямо сейчас, например, назначить стиль любому элементу, который вы захотите изобрести, или начать использовать доступные вам дополнительные уровни заголовков.
...и множество, множество атрибутов, элементов, списков опций, кодов.

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

Для кого эта книга
- Для тех, кто создает контент и делает семантическую разметку веб-страниц.
- Для тех, кто разрабатывает доступные интерфейсы.

«Фишка» книги
Прочитав эту книгу, вы сможете:
- применять разметку;
- обновлять стили картинки при помощи JavaScript; динамически генерировать картинку на сервере;
- добавлять аудио-, видео-, векторную графику на веб-страницы без использования Flash;
- используя технологию canvas, рисовать на страничке c помощью JavaScript и многое другое.
Автор обладает уникальной способностью разъяснять HTML5 и ясно писать о том, что имеет значение для дизайнеров/разработчиков, стремящихся делать доступный и основанный на стандартах дизайн.
Помимо этого, Джереми четко и понятно описал DOM и JavaScript.


Дизайн – это работа

SpoilerTarget">Спойлер

О чем эта книга
В книге известный веб-дизайнер Майк Монтейро делится секретами своей профессии.
По авторитетному утверждению Майка, успех проектов заключается не только в гениальности веб-мастера, но и в умении последнего слушать, смотреть и... да-да! учиться. Чтобы добиться успеха, веб-дизайнер должен правильно ставить цели, уметь презентовать свою качественную работу и отличать людей, которые не понимают ценность дизайна.

Для кого эта книга
Для собственников бизнеса, владельцев сайтов, программистов, фотографов, веб-дизайнеров, как начинающих, так и опытных.

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

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

"Фишка" книги
Ценность книги, прежде всего, в практических рекомендациях. Автор анализирует распространенные рабочие эпизоды, комментирует, отмечает сильные и слабые стороны специалиста и клиента.

Конструктивный анализ поможет в дальнейшем избежать многих ошибок и неприятностей.


Сайты – это не то же самое, что изображения сайтов. Когда один человек отрисовывает сайт в Фотошопе, а другой пишет разметку и CSS-код, верстальщик вынужден угадывать и предполагать те или иные намерения дизайнера. Этот процесс интерпретации редко совершенен – только если верстальщика не зовут Дэн Сидерхолм. Когда Дэн верстает макеты других людей, у него все получается так, как нужно, и даже те места, в которых дизайнер ошибся. Например, Дэн неизбежно превращает фиксированные размеры объекта в макете в гибкий, легко читаемый и надежный код.

(И правда, Дэн ввел в обращение фразу «надежный веб-дизайн», когда учил всех нас такому дизайну.)

В случае Дэна гибкий никогда не означает недоделанный. Детали всегда важны, потому что Дэн не только талантливый верстальщик, всегда думающий об интересах пользователя, – он также прирожденный дизайнер. Он живет дизайном, дышит дизайном и даже подарил миру новый способ делиться дизайном: сайт dribbble.com . Дэн еще и прирожденный учитель и веселый человек, и его манера шутить с каменным лицом заставляет самого Стивена Райта выглядеть несерьезным в сравнении. Дэн многому учит, помогая дизайнерам улучшать свои навыки.

Вот почему, друзья, мы попросили его рассказать о CSS3. Можно лишь мечтать об учителе умнее, опытнее; о человеке, более сконцентрированном на дизайне, или о большем ценителе веб-стандартов, чем наш друг Дэн. Приятного чтения!

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

Но, разумеется, если вам нравится читать спецификации – вперед! Естественно, из них можно многому научиться – но намного прагматичнее сконцентрироваться на том, что уже внедрено и может быть использовано сегодня, и об этих вещах мы поговорим в этой главе. Затем мы будем применять эти вещи на конкретных примерах.

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

CSS3 – для всех

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

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

Целиться на взаимодействие

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

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

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

Когда применять CSS3

В терминах визуального взаимодействия с сайтом можно разбить все на две категории: ключевое и второстепенное (табл. 1.01 ).