03.01.2020 в 22:42
LegGnom
Может ли быть :is полезным?
Каждый раз, когда у нас есть довольно повторяющиеся селекторы, у которых есть общий родительский элемент, это, вероятно, место, где мы можем использовать псевдоселектор :is().
Хольгер Бартель демонстрирует его так:
section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1 {
font-size: 20px;
}становится:
:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
font-size: 20px;
}У MDN есть очень драматичный пример:
ol ol ul, ol ul ul, ol menu ul, ol dir ul,
ol ol menu, ol ul menu, ol menu menu, ol dir menu,
ol ol dir, ol ul dir, ol menu dir, ol dir dir,
ul ol ul, ul ul ul, ul menu ul, ul dir ul,
ul ol menu, ul ul menu, ul menu menu, ul dir menu,
ul ol dir, ul ul dir, ul menu dir, ul dir dir,
menu ol ul, menu ul ul, menu menu ul, menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir, menu ul dir, menu menu dir, menu dir dir,
dir ol ul, dir ul ul, dir menu ul, dir dir ul,
dir ol menu, dir ul menu, dir menu menu, dir dir menu,
dir ol dir, dir ul dir, dir menu dir, dir dir dir {
list-style-type: square;
}:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
list-style-type: square;
}
Это меньше кода и легче воспринимается.
Кезз Брейси отмечает, что сопряжение с :not() также может быть приятным:
:not(article, section, aside) :is(h1, h2, h3, h4, h5, h6) {
font-weight: 400;
}
Поддержка браузеров только начинает поступать, а полифилы очень сложные, поэтому мы пока не достигли уровня повседневного использования. Держу пари, что это не так уж далеко.
