Зачем нам использовать CSS селектор :any() ?

[buddah]

Мой вольный перевод статьи молодого голландского блоггера Marco Kuiper

С тех пор, как состоялся релиз Firefox 4, появилась возможность использовать множество разных новых CSS-фишек. Очень радует, что Firefox - 2-й по популярности браузер в мире. А это означает, что больше людей будут иметь возможность лицезреть все ваши модные штуки, которые вы будете создавать посредством CSS.

Я недавно просматривал список CSS-селекторов, которые включены в Firefox 4 и нашел интересный селектор :any() (теперь он доступен и у Webkit). Сейчас мы с вами посмотрим, что может данный селектор и вообще, зачем нам с вами его использовать.

Имейте в виду, что :any() не является частью спецификации CSS3 (пока). Но с тех пор, как Webkit стал поддерживать этот селектор, я уверен, что в скором будущем другие браузеры последуют его примеру. Да, и еще одна вещь: чтобы заставить его работать в Firefox, используйте -moz- префикс (-webkit- для webkit-браузеров). Меньше слов - больше дела, посмотрим, что эта штука умеет.

Итак, у нас проблема:

А проблема заключается в большом количестве вложенных элементов разных уровней глубины. Вот например:

/* Общие ссылки на сайте */
/* Уровень 0 */
a { 
   color:#eee;
}

/* Специфичные ссылки в списках, навигации, header'e и footer'е */
/* Уровень 1 */
li a, nav a, header a, footer a {
   color:#555;
}

/* Еще одни специфичные ссылки, следующий уровень вложенности */
/* Уровень 2 */
section li a, section nav a, section header a, section footer a,
article li a, article nav a, article header a, article footer a,
aside li a, aside nav a, aside header a, aside footer a {
   color:#000;
}

/* Уровень 3 */
/* Ну, придумайте там что-нибудь сами  */

Как вы можете видеть, чем глубже по уровням мы продвигаемся, тем труднее читать/понимать наши CSS селекторы.

Решение проблемы:

Селектор :any() создавался для группирования нескольких таких вот вложенных селекторов вместе. Влияние селекторов на элементы остается тем же, единственное отличие: длинна и читабельность. Сравним:

/*Общие ссылки на сайте */
/* Уровень 0 */
a { 
   color:#eee;
}

/* Специфичные ссылки в списках, навигации, header'e и footer'е */
/* Уровень 1 */
:any(li, nav, header, footer) a {
   color:#555;
}

/*  Еще одни специфичные ссылки, следующий уровень вложенности */
/* Уровень 2 */
:any(section, article, aside)
:any(li, nav, header, footer) a {
   color:#000;
}

/* Следующий уровень, применим к заголовкам */
/* Уровень 3 */
:any(section, article, aside)
:any(li, nav, header, footer)
:any(h1, h2, h3) a {
   color:#aaa;
}

Я в курсе, что элемент hgroup больше подходит для последних элементов (вместо h1, h2, h3), но тут я предпочитаю использовать "старые" заголовки. Просто чтобы код был более понятным.

Мысли в слух:

Как можно видеть, вы можете группировать несколько специфичных селекторов вместе с помощью :any(). Так легче читать код, а значит легче вносить изменения в ваш HTML и CSS. Но существуют ли еще какие-либо причины использовать этот селектор?

Этот селектор особо полезен при использовании его в HTML5 тегах section, header, footer, nav, aside и т.д

Так как HTML5 пытается избавится от разделения (div) и сделать HTML5 более значимым, этот CSS селектор позволяет сделать следующий шаг в достижении этой цели. Чтобы решить задачу, описанную выше(с несколькими уровнями вложенности ), мы могли бы использовать определенные классы, которые сделали бы эту работу за нас. Но зачем нам это делать?

Вывод: данный селектор особенно полезен когда у нас есть четкий, лаконичный HTML5 с вложенными элементами, и когда мы не хотим использовать селектор class (или id). Правда, честно сказать, я пока не видел такое большое количество вложенных элементов на вебсайтах, так что не знаю, нужен ли нам пока селектор :any()?

А что вы думаете по этому поводу?

Edited June 23, 2011 by buddah

[psywalker]

А что вы думаете по этому поводу?

По этому поводу я лично думаю, что ты молодец и переводишь отличные и полезные статьи, да и вообще делаешь благое дело, уважаю!

[Softlink]

за статью +.

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

Хотя в html5 может этот селектор и будет полезным. А принцип его работы мне нравится.

[rash]

за статью +.

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

Хотя в html5 может этот селектор и будет полезным. А принцип его работы мне нравится.

Вообще селектор решает проблему, которой быть не должно.

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

Если приходится писать подобные селекторы, то явно стоит реорганизовать код. Не стесняться добавить классов.

Очень мне запомниась фраза на слайде какой-то англоязычной презентации, которая в вольном переводе звучит так: «вы не должны делать глупости только потому, что CSS позволяет вам это».

[buddah]

psywalker, спасибо) Мне самому очень интересно это делать.

Очень мне запомниась фраза на слайде какой-то англоязычной презентации, которая в вольном переводе звучит так: «вы не должны делать глупости только потому, что CSS позволяет вам это».

lol, мне нравится эта цитата

Edited June 23, 2011 by buddah

[Shift-Web]

Спасибо! Оч полезная фишка

[Softlink]

Вообще селектор решает проблему, которой быть не должно.

вот и я о том же