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

Сейчас многие переходят на 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 окажется полезным для каждого, кто ждет окончательного внедрения новинки. С более тонкими нюансами Вы можете ознакомиться, изучив соответствующую спецификацию.

Позавчера ходил по магазинам электроники, хотел ноутбук купить. Ни один не понравился. Теперь подумываю насобирать денег на хороший ПК. Одна негативная особенность, что его таскать с стобой нельзя.