Чем нас радует CSS3

Продолжение статьи «HTML5 и CSS3 — наступает время пользоваться»

Одной разметкой сайт жив не будет, нужна одёжка!  Каскадные таблицы стилей третьего стандарта дают нам новые возможности для того, чтобы одеть сайт.

Множество неожиданных и загадочных вещей появилось в css. Например, новые селекторы, связанные с пространством имён, другие связаны со структурой документа, псевдо-класс отрицание, псевдо-классы состояния, и т.д. Появились эффекты, которые облегчат жизнь верстальщикам. Теперь не нужно рисовать тени и выделять для них лишние дивы или скруглять углы, с помощью четырёх картинок. Сейчас у вас есть возможность скомандовать и тексту и блокам разметки:  “Отбрасывайте тени или станьте немного прозрачными!”, а блокам: “Скруглите углы!”.

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

Ещё одна типографская фишка — возможность включения нестандартных шрифтов, используя правило @font-face.

Ну и для того, чтобы глаза совсем разбежались в стороны — поддержка цветовых моделей HSL (Hue, Saturation and Lightness — Тон, Насыщенность и Яркость) и RGBA (Red, Green, Blue, and Alpha — Красный, Зеленый, Синий и Прозрачность).

Новые селекторы

Все мы давно используем селекторы, привязанные к реальным сущностям. С элементом документа у нас ассоциируется селектор типа. Элемент документа абзац, тег <p>, это селектор p, которому можно указать любое оформление, например p {color: black} (цвет всех параграфов будет чёрным). Чтобы выборочно указать некоторым параграфам серый цвет текста, задействуйте атрибут class
<p class=”silvered”>, соответствующий селектор с правилом будет выглядеть так:
.silvered {color: #aaa}. Кроме того, можно воспользоваться атрибутом id
<p id=”antivampir”>, тогда селектор и правило будут такими #antivampir {color: #aaa}.
Перечисленные селекторы можно комбинировать, чтобы более точно указывать нужные элементы документа.

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

Селекторы атрибутов

В этих селекторах используется обращение к атрибутам тегов.

E[foo^=»bar»]
Выбирается элемент Е, foo атрибут которого начинается именно со строки bar

Например: img[title^=”fire”] — этот селектор будет соответствовать всем картинкам, у которых значение в title начинается с fire.

E[foo$ =»bar»]
Выбирается элемент Е, foo атрибут которого заканчивается именно строкой bar

E[foo*=»bar»]

Выбирается элемент Е, foo атрибут которого содержит подстроку bar

Структурные псевдо-классы

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

E:root
С помощью такого селектора, вы всегда сможете обратиться к корню документа, для HTML-документа это будет тег <html>, при этом E любой элемент документа

E:nth-child()
В скобках может быть указано либо выражение an+b, либо значения odd(нечётные) или even(чётные). a и b это целые числа, а n показывает изменение номеров элементов начиная с нуля.

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

Например: li:nth-child(2n) или li:nth-child(even) — будут выбраны все чётные элементы списков на странице. li:nth-child(3n) — каждый третий элемент.

E:nth-last-child()
Похож на предыдущий селектор, но отсчёт идёт с конца списка.

Например: p:nth-last-child(1) — таким образом обращаемся к последним абзацам.

E:nth-of-type()
По действию похож на селектор nth-child, отличительной чертой является учёт типа элемента. То есть при выборе дочерних элементов параграфы и заголовки будут реагировать на селектор независимо. Используя этот селектор вы сможете перечислить, например, только картинки.

Например: img:nth-of-type(odd){align:left} img:nth-of-type(even){align:right} все нечётные картинки, внутри некоторого контейнера, будут выровнены по левому краю, все чётные по правому.

E:nth-last-of-type()
По действию похож на селектор nth-last-child, учитывается тип элемента.

E:last-child
Выбирается элемент Е, который является последним дочерним элементом (Обратите внимание, что E:first-child был ранее определён в CSS2)

E:first-of-type
Выбирается элемент Е, который является первым потомком своего типа.

E:last-of-type
Выбирается элемент Е, который является последним потомком своего типа

E:only-child
Выбирается элемент Е, который является единственным дочерним элементом своего родителя, если у родителя будет больше дочерних элементов, то на их всех селектор уже не подействует

E:only-of-type
Выбирается элемент Е, который является единственным потомком своего типа

E:empty
Выбирается элемент Е, который не имеет дочерних элементов (Обратите внимание, включая текстовые узлы)

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

E:target
Выбирается элемент Е, который является целью указывающего URI. В качестве такого элемента может быть <a> с атрибутом name или элемент с атрибутом id. Значения этих атрибутов должны соответствовать URI.

Например: div:target{background-color: #efe;} это правило сработает в том случае, если на странице будет присутствовать элемент <div id=”about-me”>…</div>, на который происходит переход, при этом URI должен выглядеть так /index.html#about-me

Псевдо-классы состояний

E:enabled
Выбирается активный (через который можно управлять) элемент управления веб-страницы Е, например текстовое поле или флажок

Например: input[type=”text”]:enabled{border: #0f0 1px solid} у всех активных одно-строчных текстовых полей границы станут зелёными

E:disabled
Выбирается неактивный элемент Е

E:checked
Выбирается элемент Е (переключатель или флажок), отмеченный пользователем или включенный по умолчанию

Псевдо-класс отрицание

E:not(s)
Выбирается элемент Е, который не соответствует простому селектору s. В качестве простого селектора может быть: класс, идентификатор, атрибут, псевдо-класс, тег, звёздочка.

Например: span:not(.progs) {color: green} в тегах <span>, которым не назначен класс progs, текст станет зелёным.

Обобщённый родственный комбинатор

E ~ F
Выбирается элемент F, который находится после элемента E, при этом оба должны принадлежать одному предку, в дереве документа.

Например: p:not(.trg) ~ div {background-color:#f00} фон у блока div, который расположен после абзаца без класса trg, будет красным.

Выше перечисленные селекторы будут прекрасно работать в последних версиях популярных браузеров. И если вы захотите, чтобы старые браузеры тоже не остались в долгу, вам придётся это решать с помощью дополнительных средств html- или css-хаков.

Новые эффекты

Мы просто перечислим здесь некоторые замечательные инструменты, которые появились в CSS3. Именно они позволят сбросить напряжение с верстальщиков, уменьшая количество блоков для создания нужных дизайнерских эффектов:

  • background (теперь вы можете использовать множество фонов)
  • background-clip (определяйте вид фона под границей блока)
  • background-origin (позиционирование фона, не работает когда background-fixed: fixed)
  • background-size (задаёт алгоритм установки размера фоновой картинки)
  • border-radius (закругленные углы)
  • border-image (можно использовать картинку для создания границ блока)
  • border-color (есть возможность сделать градиент параллельный границе)
  • box-shadow (задаёт тень у блоков)
  • box-sizing (изменяет алгоритм расчёта размеров блока)
  • opacity (тут всё ясно — прозрачность)
  • outline-offset (линия вокруг блока, не входит в его размер)
  • resize (определяет возможность менять размеры текстовой области)
  • text-shadow (текст отбрасывает тень)
  • word-wrap (перенос в блоке по словам)

Мы с вами обязательно поупражняемся с этими эффектами попозже.

Многоколоночные макеты

Журналы и газеты выработали удобное представление текста — в колонках. Такой вариант макета, без дополнительных усилий, создаётся с помощью CSS3. Перечислим два доступных способа.

  1. С помощью свойства column-width (ширина столбца). Вы только определяете, какая будет ширина каждого столбца, при этом число столбцов вычисляется на основе ширины контейнера и ширины столбца.
  2. Используя column-count (количество столбцов). Вы определяете число столбцов, для вашего текста, при этом их ширина будет вычисляться в зависимости от ширины контейнера.

Кроме этого, у вас есть возможность определить column-gap (разрыв между колонками), однако он будет действовать когда используется метод column-width. Ещё одним полезным дополнением является свойство column-rule, которое позволяет размещать границу между колонками. Наконец, есть свойство column-space-distribution, которое определяет, как оставшееся пространство должно быть выделено между колонками.

Многоколоночные макеты в настоящее время поддерживаются браузерами Firefox, Chrome и Safary. Однако, названия параметров нужно немного дополнить, чтобы нужный эффект заработал. Для Firefox нужен префикс -moz, а для Chrome -webkit.

Веб-шрифты

Некоторые из вас скажут — что удивительного и нового, веб-шрифты стали доступны уже в CSS2 и хорошо работали в Microsoft Internet Explorer, начиная с версии 5. Да, это так, однако есть парочка “НО”. Первое (влияющее на второе), необходимо использовать проприетарный формат шрифтов .eot (Embedded Open Type). Второе, в следствии этого ни один из других браузеров не поддерживает этого. В результате веб-шрифты никогда не использовались на сайтах, основанных на CSS2.

Однако, теперь в последних версиях Firefox, Safari, Chrome и Opera, вы можете использовать правило @font-face, используя шрифт любой лицензии .ttf (TrueType) или .otf (OpenType) на вашей веб-странице.

Например: @font-face {font-family: Alexa; src: url(‘Alexa.otf’);}. После этого  используйте этот шрифт в ваших правилах CSS, таких как: article p {font-family: Alexa, Arial, Helvetica, sans-serif;}.

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

Другие новые функции

CSS3 также включает много других новых функций. К ним относятся: поддержка новых цветовых моделей, в частности, HSL (Hue, Saturation, Lightness — Тон, Насыщенность, Яркость) и две с альфа-каналом — RGBA (Red, Green, Blue, Alpha — Красный, Зеленый, Синий, Альфа) и HSLA (Hue, Saturation, Lightness, Alpha).

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

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

Это была вторая часть статьи. Продолжение следует …

Понравилась статья? Посоветуйте другу

Количество коментариев: 0

Добавить комментарий



[ Ctrl + Enter ]