[Disclaimer: Данная статья была переведена в рамках "Конкурса на лучший перевод статьи" на сервисе Quizful. Ссылка на оригинал находится внизу страницы.]
На прошедшей в сентябре 2008 года конференции “Web Direction South” в Сиднее, Джина Болтон представила доклад “Создание Эффектных Таблиц Стилей” (Creating Sexy Style Sheets), который продемонстрировал ряд новых возможности CSS 3. О том, что именно из стандарта CSS обсуждалось, и расскажет эта статья.
Фон и границы
CSS3 позволяет разработчикам по-новому стилизировать фон и границы HTML-элементов. Ниже представлены CSS-свойства, которые позволяют это сделать:
- border-radius – позволяет закруглять границы (border) HTML-элементов
- border-break – заканчивает границу элемента, которая была рассположена в точке разрыва (конец страницы, колонки, cтроки)
- border-image – устанавливает изображение как границу (вместо использования стилизированных границ)
- box-shadow – добавляет тень элементу
Многоколоночное расположение элементов
Данная возможность CSS3 позволяет отображать информацию в нескольких колонках, с помощью меньшего количества HTML-кода. Специально для этого добавлен новый вид контейнера - column box.
Содержание в многоколоночном элементе распределяется по принципу: от колонки к колонке. Сolumn box находится в родительском div-контейнере, содержащему контент. Свойства сolumn-count и column-width определяют количество колонок и их ширину. Все колонки равны по ширине, высоте и имеют определенное расстояние между собой.
Расположение элементов
Главная задача данного модуля CSS - разделение контента и представления. CSS3 упрощает позиционирование элементов двумя новыми методами: шаблонное позиционирование (Template Based Positioning) и отображение в виде закладок (Tabbed Displays). Шаблонное позиционирование позволяет расположить элементы в ячейках условной сетки. Отображения с помощью закладок распологает элементы в виде закладок, показывая только выбраный элементу.
Позиционирование по сетке
Цель этого модуля CSS - упрощение позиционирования элементов: мы создаем сетку и выравниваем элементы внутри ячеек.
Сетка может иметь один из следующих типов:
- Явная сетка – сетка с явно заданными столбцами и строками.
- Естественная сетка – создается автоматически, например в многоколоночных элементах (края с обеих сторон колонки создают границы сетки).
- Сетка по умолчанию - элементы, которые не подходят под вышеперечисленные определения, рассматриваются как имеющие сетку с одной единственной ячейкой.
Новые селекторы CSS3
В CSS3 были добавлены новые виды селекторов. Некоторые из них приведены ниже:
- E:only-of-type - выбирает элемент, который является ближайшим sibling элементом того же типа
- E:not(s) - возвращает любой элемент, который не соответствует простому селектору s
- E ~ F - возвращает элемент F, который следует после элемента E
- E:nth-child(n) - возвращает элемент, который является n-ым по счету дочерным элементом исходного
- E:nth-last-child(n) – выполняет то же, что и предыдущий селектор, но счет идет от последнего элемента
- E:nth-of-type(n) - возвращает элемент, который является n-ым по счету sibling элементом того же типа
Расширенная поддержка медиа-устройств
Цель нововведения - расширить поддержку различных типов медиа путем добавления css-свойств, вычисляемых с учетом текущего типа медиа. Некоторые из них могут быть использованы для задания высоты, ширины и цвета элемента в зависимости от медиа типа. Это позволит настраивать внешний вид страницы для различных устройств без переключения режимов отображения страницы.
Выводы
Целью обзора было показать, новые возможности CSS 3, которые ожидают веб-разработчиков после утверждения спецификации CSS 3 и после того, как поддержка CSS 3 будет внедрена во все современные браузеры. За дополнительной информацией рекомендуем Вам обратиться к самой спецификации CSS 3.
----------
Оригинальный текст статьи: What's new in CSS 3?
