CSS3 для веб-дизайнеров. Дэн Сидерхолм
т недоделанный. Детали всегда важны, потому что Дэн не только талантливый верстальщик, всегда думающий об интересах пользователя, – он также прирожденный дизайнер. Он живет дизайном, дышит дизайном и даже подарил миру новый способ делиться дизайном: сайт dribbble.com. Дэн еще и прирожденный учитель и веселый человек, и его манера шутить с каменным лицом заставляет самого Стивена Райта выглядеть несерьезным в сравнении. Дэн многому учит, помогая дизайнерам улучшать свои навыки.
Вот почему, друзья, мы попросили его рассказать о CSS3. Можно лишь мечтать об учителе умнее, опытнее; о человеке, более сконцентрированном на дизайне, или о большем ценителе веб-стандартов, чем наш друг Дэн. Приятного чтения!
1. CSS3 сегодня
Глядя в прошлое, на яркую историю CSS, мы видим важные этапы, которые формировали наше видение веб-дизайна. Прорывные приемы, статьи и события научили нас создавать гибкие и доступные сайты, которыми мы можем гордиться – и их обликом, и качеством кода.
Можно утверждать, что все интересное началось в 2001-м, когда Джефри Зельдман написал статью «К черту плохие браузеры» (http://bkaprt.com/css3/1/)[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 обновляться чаще и точнее, таким образом позволяя более гибкое и своевременное развитие спецификации в целом[2].
Преимущество для нас, веб-дизайнеров, в том, что одновременно с экспериментированием и ускоренным циклом релизов приходит возможность использовать многие свойства CSS3, не дожидаясь, пока они получат статус кандидат в рекомендации (Candidate Recommendation. Прим. перев.) – возможно, это произойдет годы спустя.
Но, разумеется, если вам нравится читать спецификации – вперед! Естественно, из них можно многому научиться – но намного прагматичнее сконцентрироваться на том, что уже внедрено и может быть использовано сегодня, и об этих вещах мы поговорим в этой главе. Затем мы будем применять эти вещи на конкретных примерах.
Мне всегда удавалось научиться большему о веб-дизайне, изучая рабочие примеры,