Frontender Magazine

«Котик» и «Домик» — новые CSS‑селекторы

Один из самых сложных аспектов использования CSS, инкапсулированного в теневом дереве — это определение того, что именно наследуется из CSS родительского документа. Изначально предполагалось, что разработчики будут сами определять элементы, которые наследуют CSS родительского документа с помощью атрибута part, но этот метод оказался недостаточно гибким. Сейчас считается, что границы теневого дерева должны предотвращать ненамеренную стилизацию элементов, которые она содержит, и допускать осознанную. И это как раз тот самый момент, когда вам могут пригодится новые CSS-селекторы «котик» и «домик».

Поддержка

Если вы хотите попробовать примеры, вам нужен Chrome Canary версии 33 и выше.

Также убедитесь, что у вас включены экспериментальные функции веб-платформы (Experimental Web Platform features) на внутренней странице настроек хрома chrome://flags.

«Домик»

Селектор «Домик», он же одиночный циркумфлекс ( ^ ), позволит применить стили, заданные в родительском документе к элементам, которые находятся на верхнем уровне теневого дерева. Если вы работаете с элементом, у которого есть только один корневой узел теневого дерева, вы можете стилизовать любой его дочерний элемент, используя селектор «Домик».

/* Замечание: работает только в Chrome Canary. */
/* Включите экспериментальные функции веб-платформы */
/* на странице настроек chrome://flags */

/* «Домик» применяет стили, заданные в родительском */
/* документе, к элементам из верхнего уровня теневого дерева */
x-foo ^ h2 {
  color: red;
}

See the Pen «Домик» — новый CSS-селектор by Vladimir Starkov (@matmuchrapna) on CodePen

«Котик»

Селектор «Котик», двойной циркумфлекс ( ^^ ), намного мощнее. Он позволяет проникать на любое количество уровней в глубину теневого дерева. Поэтому, если у вас есть одна теневая модель внутри другой (так часто бывает, когда используются вложенные элементы, содержащие теневую модель), вы сможете оформить все элементы разом.

/* Замечание: работает только в Chrome Canary. */
/* Включите экспериментальные функции веб-платформы */
/* на странице настроек chrome://flags */

/* «Домик» применяет стили, заданные в родительском */
/* документе, к элементам из верхнего уровня теневого дерева */
x-foo ^ h2 {
  color: red;
}

/* «Котик» применяет стили, заданные в родительском */
/* документе, к элементам на всех уровнях теневого дерева */
x-foo ^^ h2 {
  font-family: Courier;
}

See the Pen «Котик» — новый CSS‑селектор by Vladimir Starkov (@matmuchrapna) on CodePen

Стилизация нативных элементов

@Volker_E спросил могут ли селекторы ^ и ^^ быть использованы для стилизации нативных элементов таких, как, например, <video>. Как оказалось, данные селекторы это умеют, что не может не радовать.

/* Замечание: работает только в Chrome Canary. */
/* Включите экспериментальные функции веб-платформы */
/* на странице настроек chrome://flags */

/* «Котик» также работает и на нативных элементах */
video ^^ input[type="button"] {
  background-color: red;
}

See the Pen Стилизация нативных элементов с помощью селектора «Котик» by Vladimir Starkov (@matmuchrapna) on CodePen

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Rob Dodson
Автор:
Rob Dodson
GitHub:
robdodson
Twitter:
@rob_dodson
Сaйт:
http://robdodson.me/
Google Plus:
+RobDodson
Владимир Старков
Переводчик:
Владимир Старков
Сaйт:
http://iamstarkov.com
Twitter:
@iamstarkov
GitHub:
iamstarkov

Комментарии (4 комментария, если быть точным)

Автар пользователя
dmitrienkop

^^

Автар пользователя
iamstarkov

=^_^=

Автар пользователя
mikeyakimenko

=^_^= А вообще чувствую на мучаемся мы еще коллеги, с этим теневым документом.. :)

Автар пользователя
akost

В оригинале The Cat and the Hat CSS Selectors — отсылка к популярной детской книге (и мультсериалу) The Cat in the Hat.