Есть ли способ найти все глобальные стили, применимые к веб-странице?

Как компания, мы используем компоненты (Angular, Vue и React) для создания наших приложений, но у нас по-прежнему имеется большое количество глобальных стилей, которые мы унаследовали от нашего устаревшего приложения.

например:

.active {
  background: red;
}

Будет применяться к любому элементу в любом месте страницы с классом активных.

Есть ли способ в браузере создать список всех правил стиля (например, не именных имен), которые применяются к странице, учитывая, что они могут присутствовать внутри сторонних библиотек или другие разные устаревшие Java-скрипты?

Ответы

Ответ 1

Единственная опция для оценки стилей CSS текущей страницы - использовать document.styleSheets. Он вернет список CSSStyleSheet s.

Вы хотите сосредоточиться на document.styleSheets[n].cssRules, где n равно той таблице стилей, которую вы хотите оценить. Это даст вам список всех стилей, применяемых этой таблицей стилей. Каждая таблица стилей будет иметь свойство cssText и selectorText.

Если вы просто хотите прокрутить, чтобы найти, какие стили "не именуются", вы, вероятно, должны просто использовать свойства selectorText.

Ниже приведена дополнительная информация о MDN о document.styleSheets.

Вот пример (нажмите "Выполнить фрагмент кода", чтобы увидеть результаты):

var selectors = [];

var sheets = Array.from(document.styleSheets);

sheets.forEach(function(sheet) {
  // Only Stylesheets from a same-origin domain expose `cssRules` for security reasons
  try {
    var rules = Array.from(sheet.cssRules);
    rules.forEach(function(rule) {
      selectors.push(rule.selectorText);
    });
  } catch (e) {
    // Do something with external stylesheets if you want
  }
});

console.log(selectors);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Stylesheets</title>
  <style>
    .hello-world {
      background: url(none.gif);
    }
  </style>
  <!-- Won't work as it is not a same-original stylesheet -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <style>
    .foo {
      background: url(none.gif)
    }
    
    .bar {
      background: url(none.gif);
    }
  </style>
</body>

</html>

Ответ 2

Я не уверен, что это может помочь, но попробуйте. Если вы используете Chrome, попробуйте следующее:

Осмотреть (открыть инструменты разработчика) > Аудит (вкладка) > Выберите "Аудит текущей стадии" > Нажмите "Запустить"

Chrome отобразит все неиспользованные правила CSS.

EDIT:

Также стоит попробовать: осмотрите (чтобы открыть инструменты для разработчиков) > щелкните по 3 вертикальным точкам рядом с вкладкой "Консоль" > "Покрытие".

Он отобразит список загружаемых файлов CSS/JS и выделит, какие линии используются (зеленые) и не используются (красные). Подробнее

Ответ 3

Попробуйте этот script, чтобы все селектора отображали таблицы стилей как внутренние, так и внешние

for(var i=0; i<document.styleSheets.length; i++) {
   var s = document.styleSheets[i];
   for(var j=0; s.cssRules && j<s.cssRules.length; j++) {
      var c = s.cssRules[j];
      console.log(c.selectorText);
   }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.test{color:red;}
</style>

Ответ 4

    var rulesArr = [];
    var styles = document.styleSheets;

    for ( i=0; i<styles.length; i++ ){
      //iterate styleSheets.

      if(styles[i].rules){
      //Must be a rule to continue.

        for ( x=0; x<styles[i].rules.length; x++ ){
        //iterate rules, an object in styleSheets.

        rulesArr.push(styles[i].rules[x].selectorText);
        //appends selectorText i.e. css class names to our variable.
        }
      }
    }
    console.log(rulesArr);