Будущее CSS 4

2 июля '12

Прежде всего, не стоит потирать свои ручки — CSS 4 это всего лишь черновик, всего лишь наброски. И внедрится в веб он еще не скоро. Хотя, благодаря гонке браузеров, кто знает, кто знает... CSS 3 также не является на сегодняшний день законченным стандартом, однако все современные браузеры в той или иной степени поддерживают эти спецификации. Так чего же ждать в будущем от CSS 4?

Селекторы родителей

Эта возможность была бы кстати уже давно. Иногда, при верстке сложных макетов, возникает необходимость применить стиль к предку. Например, вам нужно выделить блок, внутри которого есть класс .hot:

$section a.hot {
    border: 1px solid red;
}

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

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

a:local-link {
    color: blue;
}

А все ссылки, ведущие на другие сайты, так:

a:any-link {
    background: url(other.png) no-repeat;
}

Или так:

:not(:local-link) {
    background: url(other.png) no-repeat;
}

Здесь использован псевдокласс отрицания из CSS 3, который можно применять только к простым селекторам, но не к их комбинациям (nav .link, ol > li и т. п.). В CSS 4 эти ограничения уже не будут важны.

Лингвистический псевдокласс

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

p:dir(ltr) { 
    /* Стили для текста слева направо */
}

div:dir(rtl) { 
    /* Стили для текста справа налево */
}

Псевдокласс группировки

Иногда приходится задавать стили для нескольких псевдоклассов элемента, например:

li a:link, li a:hover, li a:visited, li a:focus {
    color: red;
}

В CSS 4 можно будет делать проще:

li a:matches(:link, :hover, :visited) {
    color: red;
}

Или пример, когда часто нужно подсвечивать текстовое поле при фокусе его метки:

label:matches(:hover, :focus) /for/ input {
  box-shadow: red 0 0 5px;
}

Будет подсвечиваться поле, id которого совпадает с атрибутом for текущей метки.

Это далеко не все «плюшки» новой версии каскадных таблиц. Со своей стороны мы следим за развитием веба и CSS 4 в частности. Как только браузеры станут поддерживать эти спецификации, мы начнем применять возможности CSS 4 на практике. Чего и вам желаем :-)

Ссылки: