존재하지 않는 스타일 참조 찾기

내 HTML에서 참조하고있는 모든 CSS 클래스가 실제로 존재하지 않는 도구가 있습니까?존재하지 않는 스타일 참조 찾기

즉. 내 HTML에 < ul class = "topnav"/ >이 있고 topnav 클래스가 참조 된 CSS 파일에 존재하지 않습니다.

이것은 사용하지 않는 CSS 스타일을 찾는 방법을 묻는 SO#33242과 비슷합니다. 이 질문은 어떤 CSS 클래스가 사용되지 않는지 묻기 때문에 이것은 중복되지 않습니다. 이것은 반대의 문제입니다.

2008-09-17 Deeksy

이것은 (는) 모두 다음과 같습니다. # 33242 http://stackoverflow.com/questions/33242/how-can-i-find-unused-images-and-css-styles-in-a-website –

개봉. 죄송합니다 - 나는 당신이 그 다른 질문의 반대를 묻고 있다는 것을 깨닫지 못했습니다. –

두 질문은 모두 유효한 질문이지만 동일한 문제의 두 측면이므로 조금 다르게 단어를 병합하면 병합 될 수 있습니다. 그냥 생각 :) –

당신은 당신을 위해이 작업을 수행 할 수있는 페이지에서이 자바 스크립트를 넣을 수 있습니다 :

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 
}

출처

2008-09-17 02:48:38 mislav

훌륭한 코드 조각! 나는 CSS 클래스가 존재하지 않는 것을 찾는데 도움을주기 위해 이것을 잡았다. 물론 문제는 클래스 속성이 JavaScript 훅을 제공하기 위해 "오버로드"되는 경우가 있지만 이제는 스타일 정보가 적용되지 않는 클래스를 볼 수 있습니다. 굉장해! – scunliffe

Firefox의 오류 콘솔. 하지만 은 모두입니다. CSS 오류가 있으므로 읽어야합니다.

출처

2008-09-17 02:31:01

IntelliJ Idea 도구도 마찬가지입니다.

출처

2008-09-17 02:33:20 Swati

This Firefox extension 당신이 원하는 정확히 수행한다.

사용하지 않는 선택기를 모두 찾습니다.

출처

2008-09-18 22:29:48 Buzz

이것은 해결하려고하는 문제가 아니며 CSS의 클래스 이름과 일치하지 않는 HTML의 모든 클래스 속성을 찾고 싶습니다. – Deeksy

@Deeksy와 동의 - 나도 한번 dustmeselectors를 움켜 잡았다. .. 그러나 그것은 정의되었던 재료를 표시 할 것이다. 그러나 나의 사이트의 다른 곳에 사용했다. 따라서 여러 페이지의 많은 데이터를 집계하여 "죽은"선택기가 있는지 확인해야합니다. @ mislav의 대답은 강세입니다. – scunliffe

존재하지 않는 스타일 참조 찾기

답변

관련 문제