CSS 검사기: CSS 구문, 속성, 오류 검사
CSS 검사기는 css-tree로 CSS를 파싱하고 구문 오류를 줄과 열 위치와 함께 보고하며, 첫 번째 오류에서 멈추지 않고 계속 진행해 더 많은 문제를 찾을 수 있습니다. 또한 CSS 명세 표에 없는 속성 이름을 오타로 의심해 표시하고, 사용자 정의 속성(--*)과 벤더 프리픽스는 무시합니다. 결과와 함께 규칙, 선언, @규칙 개수를 확인하세요.
CSS 검사기는 css-tree로 스타일시트를 파싱하는 브라우저 기반 CSS 구문 검사기입니다. 구문 오류를 줄과 열 위치와 함께 보고하고 첫 번째 오류에서 멈추지 않고 계속 진행해 추가 문제를 검토할 수 있습니다. 또한 CSS 명세 표에 없는 속성 이름을 오타로 의심해 표시하고, 규칙, 선언, @규칙 개수를 보여줍니다.
검사 중에는 CSS가 파싱되고 구문 문제가 위치와 함께 보고됩니다. CSS 명세 표에 없는 속성 이름은 표시되지만, 사용자 정의 속성(--*)과 벤더 프리픽스는 해당 검사에서 무시됩니다. 따라서 검사기는 오타로 의심되는 것과 건너뛰도록 설계된 속성 이름 패턴을 구분하는 데 도움이 됩니다.
CSS는 스타일 규칙과 선언을 기술하고, 검사기는 제공된 스타일시트를 파싱할 수 있는지, 속성 이름이 CSS 명세 표에 나타나는지 확인합니다. CSS 검사기를 사용하면 CSS가 런타임에 실패하는 파서에 도달하기 전에 오류를 조사하고, 생성된 출력을 검증하며, 파일을 수동으로 뒤지지 않고 문제를 찾을 수 있습니다.
CSS 검사기는 브라우저에서 완전히 동작합니다. 입력은 사용자 기기 자체적으로 처리되며 서버로 전송되지 않습니다. 페이지가 로드된 후에는 오프라인으로 동작하므로 그 이후에는 연결 없이 사용할 수 있습니다. 무료로 사용할 수 있으며 개발자와 DevOps 엔지니어는 스타일시트를 검사하고 검사 결과를 살펴볼 수 있습니다.
1단계: CSS를 도구에 붙여넣거나 드래그하세요. 검사할 스타일시트를 포함하세요.
2단계: CSS 검사를 실행하세요. 도구가 입력을 파싱하고 발견한 구문 오류를 보고합니다.
3단계: 보고된 각 오류 위치를 확인하세요. 줄과 열 세부 정보로 CSS의 관련 부분을 찾으세요.
4단계: 속성 경고와 개수를 확인하세요. 도구가 인식되지 않은 속성 이름을 표시하고 규칙, 선언, @규칙 합계를 보여줍니다.
사용 사례: CSS 파일이 파서에 도달해 런타임에 실패하기 전에 검사하세요. 검사기가 구문 문제를 더 일찍 발견하는 데 도움이 됩니다.
사용 사례: 파일을 손으로 이분 탐색하지 말고 구문 오류의 줄과 열을 찾으세요. 보고된 위치를 확인해 조사 범위를 좁히세요.
사용 사례: 다른 도구의 출력이 그럴듯해 보이는 텍스트가 아닌 유효한 CSS인지 확인하세요. 파서가 발견한 구문 오류를 보고합니다.
사용 사례: 스타일시트에서 속성 이름 오타로 의심되는 것을 찾으세요. 검사기는 사용자 정의 속성과 벤더 프리픽스를 무시하면서 CSS 명세 표에 없는 이름을 표시합니다.
사용 사례: CSS를 생성하거나 편집한 뒤 규칙, 선언, @규칙 개수를 검토하세요. 합계로 스타일시트 내용을 빠르게 파악할 수 있습니다.
사용 사례: 사용자 정의 속성이나 벤더 프리픽스 속성을 사용하는 스타일시트를 검사하세요. 속성 이름 검사에서 무시되므로 알 수 없는 속성으로 표시되지 않습니다.