Что есть новенького в CSS3?

Что есть новенького в CSS3?

Категория: HTML-верстка, Интересно почитать20 Октябрь, 2010

Сейчас многие переходят на CSS3. Хотя еще не все браузеры его поддерживают, но уже все стараются писать на CSS3 и находят разные хаки для разных браузеров, чтобы все новые функции и правила CSS3 работали кроссбраузерно! Что же новенького таит CSS3? Об этом далее…

За гранью. И внутри нее.

Благодаря CSS3 стилизация различных объектов HTML вышла на новый уровень. Вот некоторые возможности представленной новинки: border-radius - придает округлую форму краям HTML-компонентов; border-break - завершает границу объекта, размещенного в конце страницы, колонки, строки; border-image – позволяет использовать объект графики как границу (аналог стилизированных границ); box-shadow – наделяет объект тенью;

Многоколоночное расположение элементов предусматривает отображение данных в двух и более столбцах при использовании HTML-кода в ощутимо меньших объемах. (Под эту задачу в div-контейнере был создан вложенный контейнер column box – при этом смысловая часть многоколоночного сектора подчиняется принципу «от столбца к столбцу», параметры всех колонок одинаковы и зависят от выбранных свойств column-count и column-width);

Модуль «расположение элементов» призван отделить собственно информационную часть от ее представления, что значительно облегчает труд разработчика благодаря двум недоступным ранее способам – шаблонному позиционированию (распределение компонентов по звеньям схематичной матрицы) и отображению в виде закладок (этот метод делает доступными лишь активные компоненты);

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

Кроме того, в CSS3 появились новые селекторы. Остановимся более подробно на основных:

E:only-of-type определяет и делает активным ближайший sibling-компонент;

E:not(s) определяет все компоненты, не соответствующие простому селектору s;

E ~ F определяет компоненты F, идущие за компонентом Е;

E:nth-child(n) определяет n-ный по счету дочерний компонент;

E:nth-last-child(n) аналогичен E:nth-child(n) с той лишь разницей, что за точку отсчета берется последний компонент;

E:nth-of-type(n) определяет n-ный по счету sibling-компонент аналогичного типа.

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

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


Карта сайта


Информационный сайт Webavtocat.ru