TheLib.Ru » Интернет » Дэн Сидерхолм » CSS3 для веб-дизайнеров » онлайн-чтение (стр. 1)

 

 

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

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

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. Прим. перев.) – возможно, это произойдет годы спустя.
   Но, разумеется, если вам нравится читать спецификации – вперед! Естественно, из них можно многому научиться – но намного прагматичнее сконцентрироваться на том, что уже внедрено и может быть использовано сегодня, и об этих вещах мы поговорим в этой главе. Затем мы будем применять эти вещи на конкретных примерах.
   Мне всегда удавалось научиться большему о веб-дизайне, изучая рабочие примеры, нежели читая нормативные документы, и именно такого подхода мы будем придерживаться на страницах этой книги.

http://www.w3.org/TR/CSS3-mediaqueries/)
   2. Многоколоночный текст (http://www.w3.org/TR/CSS3-multicol/)
   3. Веб-шрифты (http://www.w3.org/TR/CSS3-webfonts/)
 
   Обязательно посмотрите на эти модули.

Префиксы конкретных браузеров

   Ранее упоминалось, что спецификация CSS3 – это набор модулей, которые постепенно интегрируются производителями браузеров. Иногда интеграция включает в себя экспериментальную поддержку. Это означает, что пока спецификацию пишут, обсуждают и критикуют в W3C, изготовитель браузера может решить добавить поддержку для каких-то свойств, чтобы опробовать их на практике. В последнее время такая практика стала естественной частью процесса, и обратная связь, получаемая во время экспериментального использования, часто применяется, чтобы внести поправки в спецификацию.
   С другой стороны, изготовитель браузера может захотеть ввести экспериментальное свойство, которое не входит ни в какой предложенный стандарт, но может получить такой статус когда-либо.
   Для такой экспериментальной поддержки свойств CSS часто вводятся браузерные префиксы – например, так:
 
   – webkit – border-radius
 
   Отбитое дефисом ключевое слово, стоящее перед названием свойства, помечает его как незавершенное, относящееся исключительно к реализации в конкретном браузере и к интерпретации развивающейся спецификации. Если экспериментальное свойство войдет в законченный модуль CSS3, браузер должен поддерживать беспрефиксное название свойства.
   У каждого изготовителя браузеров есть свой префикс, которым он в первую очередь помечает собственные экспериментальные свойства. Все остальные браузеры игнорируют правила, содержащие неизвестные им префиксы.
   В табл. 1.03 перечислены самые широко используемые браузеры и связанные с ними префиксы. Мы будем использовать префиксы WebKit, Mozilla и Opera в части, касающейся CSS3 в примерах из следующих глав.
 
   Таблица 1.03. Наиболее широко используемые браузеры и связанные с ними префиксы

Как работают браузерные префиксы

   Вот как CSS работает на практике с браузерными префиксами. Возьмем свойство border-radius в качестве примера. Положим, мы хотим скруглить углы элемента с радиусом 10 пикселей; вот как это делается:
 
   .foo {
    – webkit-border-radius: 10px;
    – moz-border-radius: 10px;
    border-radius: 10px;
    }
 
   Webkit (движок, используемый в браузерах Chrome, Safari, и в Safari для мобильных устройств) и Gecko (движок браузера Firefox) поддерживают свойство border-radius посредством собственных префиксных свойств; Opera поддерживает это свойство без префикса. IE9 также будет поддерживать border-radius без браузерного префикса.
   На момент подготовки издания (август 2012 года) все упомянутые браузеры поддерживают свойство border-radius без префикса, в том числе и IE9. Прим. ред.

Оптимальный порядок

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

Не пугайтесь браузерных префиксов!

   Первоначальная реакция читателя может быть примерно такой: «Ах, это запутанные и проприетарные штуки!» Но я уверяю вас, это не только шаг вперед, а еще и намного менее запутанное решение в сравнении с раздутыми кусками кода и отсутствием гибкости, которыми сопровождаются решения не на CSS3. Кроме того, это важная часть развития спецификации.
   Используя эти свойства сейчас с помощью браузерных префиксов, мы можем прозондировать почву и даже дать ценные комментарии изготовителям браузеров, прежде чем спе-цификация завершена. Также стоит помнить, что префиксы, как правило, добавляются к предложенным стандартам
   (а не к утвержденным). В этом заключается большое отличие от разнообразного хакерского CSS, который все мы иногда использовали, чтобы разрешить проблемы с кросс-браузерностью.
   Кто-то может сравнить браузерные префиксы с эксплойтами синтаксиса, которые многим из нас приходилось использовать, чтобы дать команду конкретным версиям браузеров (например, синтаксис w\idth: 200px или _width: 200px, который позволяет обращаться к конкретной версии IE). Но, напротив, браузерные префиксы – это важная часть процесса стандартизации, позволяющая развивать свойство, внедряя его для практического применения.
   Эрик Мейер, эксперт по CSS, объясняет разницу в статье «Префикс или постхак» на A List Apart (http://bkaprt.com/css3/2/)[3]:
   Префиксы дают нам контроль над нашей хакерской судьбой. В прошлом нам пришлось выдумать кучку ошибок парсера лишь для того, чтобы заставить несовместимые реализации работать одинаково – когда мы обнаружили, что они несовместимы. То был полностью реакционный подход. Префиксы – это подход с прицелом на будущее.
   Он продолжает, предполагая, что префиксы – это не только хорошая практика, но они также должны занимать более значимую роль в процессе стандартизации:
   …заставить производителей браузеров и рабочую группу трудиться вместе, чтобы разрабатывать тесты, необходимые для проверки интероперабельности. Затем эти тесты могут помочь тем (разработчикам браузеров. Прим. перев.), которые следуют за остальными, намного быстрее достичь интероперабельности. Они могут буквально выкатить реализацию с префиксом в одной публичной бета-версии и опустить префикс в следующей версии.
   Так что не беспокойтесь о браузерных префиксах. Пользуйтесь ими, зная, что вы становитесь частью процесса, который позволяет достичь результата сейчас и прокладывает дорогу к будущему, когда от префиксов можно будет отказаться.

А как насчет повторений?

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

2. Переходы в CSS

   Шел 1997 год; я сидел в плохонькой квартирке в красивом Оллстоне, в Массачусетсе. Обычная ночь просмотра исходников и изучения HTML, которой предшествовал день упаковывания компакт-дисков на местной звукозаписывающей студии, – практически бесплатно (потому и плохонькая квартирка). Уверен, вы понимаете.
   В одну торжественную ночь я ударил кулаком по столу в восторге от своей победы. Мне удалось написать на JavaScript код, который заменял одну картинку на другую при наведении курсора. Помните такие эффекты?
   Я по-прежнему помню свое изумление, когда видел, как наскоро сделанная кнопка сменяется другой, когда я наводил на нее курсор. Тогда я с трудом понимал, что делаю, но заставлять часть веб-страницы меняться динамически – это было, ну… магией.
   За последнее десятилетие мы прошли долгий путь в отношении взаимодействия и визуальных эффектов на веб-сайтах. Исторически сложилось так, что анимации, движение и взаимодействие создавались такими технологиями, как JavaScript и Flash. Но в последнее время, когда в браузерах появляется поддержка CSS-переходов и трансформаций, часть анимаций и улучшение взаимодействия могут быть перенесены в таблицы стилей.
   На первый скрипт для смены картинок в 1997 году у меня ушло несколько ночей; я написал много строк кода, который тогда мне казался совершенно чуждым, и пришлось использовать несколько картинок. Сейчас CSS3 позволяет строить намного более яркие и гибкие эффекты, создаваемые лишь несколькими строками кода. Такие решения корректно воспринимаются и теми браузерами, которые пока что не поддерживают новые свойства.
   Как упоминалось в первой главе, мы можем начать использовать CSS3 прямо сейчас при условии, что мы аккуратно выбираем те ситуации, где применяем новые свойства. То же самое справедливо и для CSS-переходов. Они определенно не заменят существующие технологии – Flash, Javascript или SVG
   (особенно без более широкой поддержки браузерами), – но в сочетании с ранее упомянутыми основными свойствами CSS3 (а также трансформациями и анимациями, о которых будет рассказано далее) ими можно пользоваться, чтобы сдвинуть взаимодействие немного вперед. Что самое важное, пользоваться ими сравнительно легко для того, кто уже знаком с CSS. Переход на CSS занимает лишь несколько строк кода.
   CSS-переходы описаны во второй главе, они будут применяться во многих примерах книги. Получить начальное представление о синтаксисе переходов и о том, как они работают, будет разумно, прежде чем мы окунемся глубже в изучение CSS3.

Хвост, который размахивает собакой

   Изначально разработанные исключительно командой,
   работавшей над движком WebKit для Safari, CSS-переходы теперь стали спецификацией в состоянии рабочий черновик в W3C. (У CSS-трансформаций и CSS-анимаций похожее происхождение; о них мы поговорим в главах 4 и 6 соответственно.)
   Это хороший пример того, как новшества браузеров становятся частью потенциального стандарта. Потенциального, потому что на сегодняшний день это всего лишь черновик. Однако Opera недавно добавила поддержку CSS-переходов в версии 10.5 и была обещана их поддержка в Firefox 4.0. Иными словами, хоть это и черновая спецификация, которая развивается, она достаточно стабильна, чтобы Opera и Firefox воспринимали ее всерьез и добавляли поддержку для нее. Что важнее всего, CSS-переходы больше не относятся к проприетарным экспериментам Safari.
   Давайте посмотрим на то, как работают переходы. Как и свойства CSS3, о которых говорилось в первой главе, я дам лишь определения и покажу основной синтаксис, чтобы у читателя было ясное понимание того, как работают переходы. Позже мы будем делать разнообразные классные штуки, пользуясь переходами, чтобы довести до блеска примеры из следующих глав, и будет ясно, как переходы становятся частью общей композиции.

Что такое CSS-переходы

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