Переведите свою работу на новый уровень с CSS3

Перевод статьи (1 часть)  Inayaili de León «Take Your Design To The Next Level With CSS3«

Каскадные таблицы стилей появились 13 лет назад, а наиболее распространенный стандарт CSS 2.1 существует уже 11 лет. Если взглянуть на сайты, созданные 11 лет назад, сразу становится ясно, что мы ушли от той эпохи  на много тысяч километров вперед. Поразительно, насколько быстро развивалась web-индустрия за эти годы, так, как мы в то время не могли себе даже представить.

Так почему же когда речь заходит о CSS, мы застреваем в прошлом и боимся экспериментировать? Почему мы продолжаем использовать неудобные CSS-хаки, и java-script зависимые техники для настройки стиля? Почему мы не используем богатые возможности и инструменты CSS3, доступные в современных браузерах, тем самым выводя качество нашей работы на более высокий уровень?

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

В этой статье мы познакомимся с достоинствами CSS3, и рассмотрим некоторые примеры того, как web-дизайнеры их используют. Ближе к концу мы получим представление о том, чего ожидать от CSS3 и как использовать новые возможности в своих проектах.

Использование специфических свойств браузера

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

Недостатком такого подхода, является конечно замусоренный файл стилей, разное отображение во всех браузерах. В конце концов, нам не нужно возрождать потребность в CSS-хаках для проприетарных браузеров. Internet Explorer знаменит тэгами <marquee>, <blink>  а также некоторыми другими, которые применялись во множестве стилей, и были широко известны в 1990 годах; эти тэги до сих пор делают сайты несообразными и даже нечитаемыми. И нам не стоит попадать в такую же ситуацию снова, верно?

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

Наиболее распространенные расширения используются в Webkit-браузерах (например Safari), которые начинаются с -webkit-, и Gecko-браузеры (например Firefox), которые начинаются с -moz-. Konqueror (-khtml-), Opera (-0-) и Internet Explorer (-ms-) имеют свои собственные проприетарные расширения.

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

1. Селекторы

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

Атрибутивные селекторы

Три новых вида атрибутивных селекторов, являются частью CSS3-спецификации:

• [att^=»value»]
  Выбирает элементы по атрибуту, который начинается с заданного значения.
• [att$=»value»]
  Выбирает элементы по атрибуту, который заканчивается заданным значением.
• [att*=»value»]
  Выбирает элементы по атрибуту, в котором содержится заданное значение.

tweetCC — использует атрибутивные селекторы для целевых ссылок, которые имеют атрибут title, заканчивающийся словами «tweetCC«

a[title$="tweetCC"] {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 140px;
    height: 140px;
    text-indent: -9999px;
    }

Поддержка браузеров: Единственный браузер, не поддерживающий CSS3 атрибутивные селекторы — это IE6. Все остальные, оба IE7 и IE8, Opera, Webkit- и Gecko- браузеры поддерживают. Поэтому вы спокойно можете включить эти селекторы в свои CSS-файлы.

Комбинаторы

Единственный вид комбинаторов, включенный в CSS3, это главный селектор одноуровневых элементов. Он предназначен для выбора всех элементов, имеющих одного родителя.

Например, чтобы добавить серую рамку всем картинкам, которые являются «братьями» конкретного div-элемента (и div и картинки должны иметь одного и того же родителя), достаточно написать в файле стилей следующее:

div~img {
    border: 1px solid #ccc;
    }

Поддержка браузеров: Все основные браузеры поддерживают главный селектор одноуровневых элементов, кроме нашего любимого IE6.

Псевдо-классы

Наверное самым обширным дополнением к CSS3, являются новые псевдо-классы. Далее представлены наиболее интересные и полезные из них:

• :nth-child(n)
  Позволяет отобрать элементы, на основе их позиции в родительском списке дочерних элементов. Можно использовать номер элемента, выражение или ключевые слова odd и even (для таблиц в стиле зебры). Например, если вы хотите получить группу из трех элементов, после четвертого, то можно использовать такую конструкцию:

  :nth-child(3n+4) { background-color: #ccc; }

  
  

• :nth-last-child(n)
  Работает по тому же принципу, что и предыдущий элемент, только выбирает последний дочерний элемент родителя. Например для получения последних двух параграфов в div, можно использовать следующий селектор:

  div p:nth-last-child(-n+2)

• :last-child
  Получает последний дочерний элемент родителя, является эквивалентом:

  :nth-last-child(1)

• :checked
  Получает отмеченные элементы, например чекбоксы.
• :empty
  Получает элементы, которые не имеют дочерних элементов, или пустые.
• :not(s)
  Получает все элементы, не содержащие объявленных условия(ий). Например, если нам нужно назначить черный цвет всем параграфам, не имеющим класса «lead», мы должны написать так:

  p:not([class*="lead"]) { color: black; }

На сайте Andrea Gandino используется псевдо-селектор :last-child для получения последнего параграфа в каждой записи блога, и применения к нему нулевых полей:

#primary .text p:last-child {
    margin: 0;
    }

Поддержка браузеров: Webkit-браузеры и Opera поддерживают все CSS3 псевдо-селекторы. Firefox 2 и 3 (Gecko-браузеры) поддерживают только :not(s), :last-child, :only-child, :root, :empty, :target, :checked, :enabled и :disabled, но в Firefox 3.5 заявлена широкая поддержка CSS3-селекторов. Все три браузера Internet Explorer не имеют практически никакой поддержки псевдо-селекторов.

Псевдо-элементы

Единственный псевдо-элемент, представленный в CSS3, это ::selection. Он позволяет получить элементы, которые были выделены пользователем.

Поддержка браузеров: Ни одна из версий Internet Explorer или Firfox, не поддерживает псевдо-элемент ::selection. Safari, Opera и Chrome поддерживают.

RGBA и Прозрачность

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

На своем сайте Tim Van Damme использует RGBA-цвета для эффекта наведения; например для ссылок на домашней странице:

#networks li a:hover,
#networks li a:focus {
    background: rgba(164, 173, 183, .15);
    }

При настройке  RGBA-цвета, мы должны указать значения цветов: красный, синий и зеленый, либо целое число от 0 до 255, или значение в процентах. Альфа-значение доложно быть между 0.0 и 1.0; например 0.5 для 50% прозрачности.

RGBA отличается от opacity только тем, что применяет прозрачность к определенному элементу, без наследования ее к дочерним элементам.

Вот пример назначения 80% прозрачности к div:

div {
    opacity: 0.8;
    }

Поддержка браузеров: RGBA поддерживается Webkit-браузерами. Internet Explorer не поддерживает ее вообще. В Firefox есть поддержка, начиная с версии 3, в Opera c версии 9.5. Opacity подерживается во всех браузерах, кроме Internet Explorer.

Многоколончная раскладка

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

tweetCC отображает вступительный текст на домашней странице в виде четырех колонок. Четрые колонки не используют плавающие div-ы, вместо этого web-дизайнер использует CSS3-многоколончную раскладку, следующим образом:

.index #content div {
    -webkit-column-count : 4;
    -webkit-column-gap : 20px;
    -moz-column-count : 4;
    -moz-column-gap : 20px;
    }

С этим селектором, мы можем описать три параметра: число колонок (column-count), ширину каждой колонки (column-width, не используется в примере) и расстояние между колонками (column-gap). Если значение column-count не задано, браузер разместит максимальное число колонок, на сколько ему позволит ширина.

Чтобы добавить вертикальный разделитель между колонками, можно использовать свойство column-rule, которое работает точно так же как свойство border:

div {
    column-rule: 1px solid #00000;
    }

Браузеры, не поддерживающие эти свойства, возвращают контент в виде простого текста, как будто колонок нет.

Связанные свойства: column-break-after, column-break-before, column-span, column-fill.

Поддержка браузеров: Многоколончная раскладка поддерживается Safari 3 и 4, а также Firefox 1.5+.

4. Множественные фоны

CSS3 позволят применять множественные бэкграунды к элементу, используя множественные свойства, такие как: background-image, background-repeat, background-size, background-position, background-origin и background-clip.

Самый простой способ добавить множественный фон к элементу — использовать короткий код. Вы можете установить все выше перечисленные свойства в одной строке, но наиболее используемые из них, это: image, position и repeat.

div {
    background: url(example.jpg) top left no-repeat,
        url(example2.jpg) bottom left no-repeat,
        url(example3.jpg) center center repeat-y;
    }

Первое изображение будет наиболее «близким» к пользователю.

Более коплексная версия того же свойства, может быть такая:

div {
    background: url(example.jpg) top left (100% 2em) no-repeat,
        url(example2.jpg) bottom left (100% 2em) no-repeat,
        url(example3.jpg) center center (10em 10em) repeat-y;
    }

В этом примере, (100% 2em) это значение background-size; фоновая картинка, в верхнем левом углу будет расятнута в полную ширину div-а, и высотой 2em.

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

Поддержка браузеров: Множественные бэкграунды работают только в Safari и Konqueror.

5. Word Wrap

Свойство word-wrap позволяет предотвратить вылезание за границы длинных слов. Оно может иметь одно или два значения: normal и break-word. Значение normal (по умолчанию) разбивает слова только в допустимых точках, как дефисы. При использовании break-word, слово, при необходимости, будет разделено, с учетом свободного пространства.

В админке WordPress, свойство word-wrap используется для элементов в таблицах; например в списке записей и страниц:

.widefat * {
    word-wrap: break-word;
    }

Поддержка браузеров: word-wrap поддерживается Internet Explorer и Safari. Firefox будет поддерживать его в версии 3.5.

6. Text Shadow

Несмотря на существование text-shadow в CSS2, свойство не получило широкого применения. Но весьма вероятно, что все-таки получит в CSS3. Свойство дает дизайнерам новый кросс-браузерный инструмент для добавления аспектов дизайна и выделения текста.

Вам следует убедиться, что текст на вашем сайте остается читаемым, даже если в браузере пользователя нет расширенной поддержки CSS3 свойств. Назначьте цвет текста и фона различными, специально для браузеров, не понимающих свойства text-shadow.

BeakApp.com использует свойство text-shadow для контента, добавив глубину и объем тексту, тем самым выделив его без использования изображений. Это свойство видно только в Safari и Google Chrome.

CSS основной навигации сайта показывает следующее:

.signup_area p {
    text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

Здесь мы видим цвет тени (используется RGBA, представленный выше), далее вправо (x координата) и вниз (y-координата), и наконец, радиус размытия.

Чтобы применить множественные тени к тексту, нужно разделить тени запятой. Например:

p {
    text-shadow: red 4px 4px 2px,
        yellow -4px -4px 2px,
        green -4px 4px 2px;
    }

Поддержка браузеров: Webkit-браузеры и Opera 9.5 поддерживают text-shadow. Internet Explorer не поддерживает вообще и Firefox поддерживает только в версии 3.5.