Боже, я смешной.
Каждый раз, когда у нас есть довольно повторяющиеся селекторы, у которых есть общий родительский элемент, это, вероятно, место, где мы можем использовать псевдоселектор : is () .
Хольгер Бартель демонстрирует так:
секция h1, секция h1, секция h1, секция nav h1,
статья раздел h1, статья статья h1, статья в стороне h1, статья nav h1,
в сторону секции h1, в сторону статьи h1, в сторону h1, в сторону nav h1,
навигационная секция h1, навигационная статья h1, навигация в стороне h1, навигационная навигация h1 {
размер шрифта: 20 пикселей;
}
становится:
: is (раздел, статья, навигация)
: is (раздел, статья, в стороне, nav) h1 {
размер шрифта: 20 пикселей;
}
Адам Аргайл продемонстрировал так:
#CSS
: селектор is () 🎉
наследник: any () и: match ()Пик пробежки в нашем выступлении. Вот хороший рисунок, который я сделал с XD и показывающий, на что способен синтаксис селектора: is (). будьте в восторге от Chrome Dev Summit y'all! https: //t.co/0r2CcUx9Hv pic.twitter.com/wSuGOsDLvZ
— Адам Аргайл (@argyleink) 7 ноября 2019 года
У MDN есть очень драматичный:
ол ол ул, ол уль ул, ол меню, ол ди ул,
Старое меню, Старое меню, Старое меню, Старое меню,
ol ol dir, ol ul dir, ol menu dir, ol dir dir,
ул ол ул, ул уль ул, уль меню ул ул, ул ди, ул,
меню ul ol, меню ul ul, меню ul ul, меню ul dir,
ул ол дир, уль уль дир, уль меню дир, уль дир дир,
меню ol ul, меню ul ul, меню menu ul, меню dir ul,
меню, меню, меню, меню, меню,
меню dir, меню ul dir, меню menu dir, меню dir dir,
ди ол ул, ди уль ул, ди меню, ул дир ул ул,
Меню DIR, меню DIR, меню DIR, меню DIR,
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) меню,
: is (ol, ul, menu, dir): is (ol, ul, menu, dir) dir {
list-style-type: square;
}
Это меньше кода и легче рассуждать.
Кезз Брэйси отмечает, что сопряжение с : not () также может быть хорошим:
: нет (статья, раздел, в стороне): есть (h1, h2, h3, h4, h5, h6) {
вес шрифта: 400;
}
Поддержка браузеров только начинает поступать, а заполнение политикой сложно, поэтому мы пока не достигли уровня простоты использования. Могу поспорить, что это не слишком далеко.
Загрузка...
