Найдите ссылки на стили, которых не существует
Есть ли инструмент, который найдет для меня все классы css, на которые я ссылаюсь в своем HTML, которые на самом деле не существуют?
т.е. если у меня есть <ul class = "topnav" /> в моем HTML, а класс topnav не существует ни в одном из упомянутых файлов CSS.
Это похоже на SO # 33242, который спрашивает, как найти неиспользуемые стили CSS. Это не дубликат, поскольку в этом вопросе задается вопрос, какие классы CSS не используются. Это противоположная проблема.
Открыт снова. Извините - я не понял, что вы задавали обратный вопрос.
Это оба правильные вопросы, но их можно было бы объединить, если бы они были сформулированы немного по-разному, поскольку они оба являются аспектами одной и той же проблемы. Просто мысль :)
Это точная копия этого потока: stackoverflow.com/questions/135657/…
@DavidHobs Нет, это не так. Это вопрос, противоположный тому, на который вы ссылались.
Ответы 4
Консоль ошибок в Firefox. Хотя он дает ошибки CSS все, так что вы должны его прочитать.
Инструмент Идея IntelliJ также делает это.
Вы можете поместить этот код JavaScript на страницу, которая может выполнить эту задачу за вас:
function forItems(a, f) {
for (var i = 0; i < a.length; i++) f(a.item(i))
}
function classExists(className) {
var pattern = new RegExp('\.' + className + '\b'), found = false
try {
forItems(document.styleSheets, function(ss) {
// decompose only screen stylesheets
if (!ss.media.length || /\b(all|screen)\b/.test(ss.media.mediaText))
forItems(ss.cssRules, function(r) {
// ignore rules other than style rules
if (r.type == CSSRule.STYLE_RULE && r.selectorText.match(pattern)) {
found = true
throw "found"
}
})
})
} catch(e) {}
return found
}
отличный фрагмент кода! Я просто схватил это, чтобы помочь мне найти классы CSS, на которые есть ссылки, которые не существуют. Конечно, проблема в том, что иногда атрибут class "перегружается", чтобы обеспечить хук JavaScript ;-), но теперь я могу по крайней мере увидеть, к каким из них не применены стили. Потрясающие!
Это расширение Firefox делает именно то, что вы хотите.
Он находит все неиспользуемые селекторы.
Это не та проблема, которую я пытаюсь решить, я хочу найти все атрибуты классов в HTML, которые не соответствуют именам классов в CSS.
Согласитесь с @Deeksy - я тоже однажды использовал dustmeselectors ... но он помечает то, что было определено, но использовалось где-то еще на моем сайте. Таким образом, вам необходимо собрать кучу данных с нескольких страниц, чтобы убедиться, что у вас действительно есть «мертвый» селектор. Ответ @islav - это круто.
Это дубликат SO # 33242 stackoverflow.com/questions/33242/…