Блог

У меня есть куча селекторов CSS, которые содержат псевдокласс с префиксом поставщика Mozilla :-moz-any .

Целевая аудитория использует последнюю версию Firefox.

Поскольку :is теперь он полностью поддерживается в Firefox, я думаю, что лучше заменить все вхождения :-moz-any на :is в коде CSS.

Есть ли какие-либо проблемы с этим (например, то, что выбирается при изменении, или какие-либо изменения в специфике)?

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

Из : -moz-any () группировка селекторов, сообщение в блоге Дэвида Барона 2010 года, объясняющее новую функцию в Firefox:

:-moz-any() разрешено содержать селекторы с несколькими простыми селекторами (используя определение простых селекторов css3-selectors, а не определение CSS 2.1), но не разрешается содержать комбинаторы или псевдоэлементы. Таким образом, вы можете написать :-moz-any(p.warning.new, p.error, div#topnotice) или :-moz-any(:link, :visited).external:-moz-any(:active, :focus) , но вы не можете поместить « div p » или « div > p или» :first-letter » внутри :-moz-any() .

(Выделение жирным шрифтом и курсивом мое)

Здесь вы можете видеть, что ни с псевдоэлементами, ни с комбинаторами не работали :-moz-any() .

Однако запись спецификации W3C Selectors Level 4 is() гласит следующее:

Псевдокласс matches-any, :is() , является функциональным псевдоклассом, принимающим список селекторов в качестве своего аргумента. Он представляет элемент, который представлен его аргументом.

Если вы нажмете на ссылку список селекторов, вы увидите, что она ссылается на объяснение «списка простых / составных / сложных селекторов»:

Список простых / составных / сложных селекторов представляет собой разделенный запятыми список простых, составных или сложных селекторов. Это также называется просто списком селекторов, когда тип либо неважен, либо указан в окружающем prose; если тип важен и не указан, по умолчанию это означает список сложных селекторов.

Поскольку в is() разделе не указан тип списка селекторов, мы предполагаем, что это сложный список селекторов, как объясняется в приведенном выше абзаце. Этот список включает следующее, в частности:

Сложный селектор представляет собой последовательность одного или нескольких составных селекторов, разделенных комбинаторами.

(Выделение жирным шрифтом и курсивом мое)

Итак, как вы можете видеть, теперь мы должны иметь возможность использовать комбинаторы с. is() Кроме того, единственное предостережение, которое он дает, касается псевдоэлементов; в нем ничего не говорится о невозможности использования комбинаторов:

Псевдоэлементы не могут быть представлены псевдоклассом matches-any; они недопустимы внутри :is() .

Если мы проверим это, мы увидим, что Firefox в настоящее время поддерживает комбинаторы как внутри :is() , так и вне его в одном селекторе:

 :is(div, div > p) > span { 
  color: green;
}  

 <h1>is():</h1>

<div>
  <span>This should be green.</span>
</div>

<div>
  <p>
    <span>This should be green too.</span>
  </p>
</div>

<div>
    <main>
        <p>
            <span>This should not be green.</span>
        </p>
    </main>
</div>

<p>
  <span>This should not be green either.</span>
</p>