Превью некоторых селекторов из CSS4

Девид Уолш (David Walsh, американский веб-разрабочик, один из создателей MooTools), в однажды своем блоге рассмотрел некоторые потенциально интересные нововведения в CSS4, которые появились после последних обновлений спецификации. Я неровно дышу к будущему веба и не мог пройти мимо этого текста. Прочтя его, решил сделать перевод, потому что несмотря на интересность этой темы, многие могут пройти мимо, ведь вчитываться в спецификации — не самое веселое занятие.



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

$E > F

Этот интересный селектор предоставляет возможность применить стили к родительскому элементу ($E) на отталкиваясь от его дочернего элемента (F). Одним из примеров может быть такой:

/* style the LI element */
ul > $li > p { border: 1px solid #ccc; }

В этом случае стили применяются к элементу LI, а не к P. Это улучшение было столь необходимо для CSS, и наконец-то мы его получим! Этот селектор оставляет место для путаницы; рассмотрим следующую ситуацию:

$ol > li:only-child {
  list-style-type: none;
}

В этом примере стили применяются к элементу OL с уникальным элементом LI. Будет интересно посмотреть, как часто разработчики будут использовать синтаксис $; он несомненно будет очень полезен, но остается большой потенциал для неправильного употребления.

Псевдоклассы местоположения (Location Pseudo-Classes) — :any-link и :local-link

Эти псевдоклассы будут использоваться для определения местоположения элементов. Псевдокласс :any-link предназначен для определения общих ссылок, в то время как :local-link будет определять ссылки, которые ссылаются на страницы в пределах своего хоста (как противоположные внешним href).

Например, задаем иконку ко всем внутренним ссылкам внутри вашего сайдбара:

#sidebar a:local-link {
  background: url(internal.png) 0 0 no-repeat;
}

А теперь задаем другую иконку для всех внешних ссылок:

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

Эти псевдоклассы являются приятным дополнением к уже существующим, так как стилизация ссылок и их связь с расположением довольно важны.

Лингвистический псевдокласс (Linguistic Pseudo-Class) — :dir

Псевдокласс :dir идентифицирует отображение текста слева направо или справа налево:

p:dir(ltr) { /* left to right */
}

div:dir(rtl) { /* right to left */

}

Еще одно полезное дополнение, особенно для тех, кто использует несколько языков на своем сайте.

Комбинатор Reference

Этот комбинатор вводит интересную манипуляцию со слешами, определяя связь между связанными селекторами. Между слешами указываются определенные спецификацией имена (CSS qualified names. Пример:

label:matches(:hover, :focus) /for/ input {
  box-shadow: #fffea1 0 0 8px
}

В примере выше элемент INPUT подсветится, когда его произойдет фокус (focus) или наведение (hover) на связанный с ним LABEL; ассоциации сделаны для аттрибутов label. Естественно, подразумевается, что label и input связаны атрибутом id.

Good Enough?

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *