Debugging problems in CSS

CSS가 예상대로 작동하지 않는 상황에 처했을 때 다음의 순서에 따라 디버깅 해보자.

1. Do you have valid HTML and CSS?

브라우저는 매우 관대해서 마크 업 또는 스타일 시트에 오류가 있더라도 웹 페이지를 어떻게든 표시한다.
코드에 실수가 있는 경우 바로 알아차리기가 힘들뿐더러 두 개의 다른 브라우저가 서로 다른 방식으로 실수를 대처할 수 있다.
따라서 첫 번째 단계는 유효성 검사기를 통해 오류를 찾는 것이다.

• HTML validator

• CSS validator

2. Are the property and value supported by the browser you are testing in?

브라우저는 이해할 수 없는 CSS를 무시한다.
만약 사용한 프로퍼티나 값이 해당 브라우저에서 지원하지 않는다면, 그 CSS는 적용되지 않을 것이다.
해당 프로퍼티의 MDN 페이지로 가면 지원하는 브라우저가 나열되어있다.

파이어폭스의 개발툴에는 프로퍼티마다 지원하는 브라우저를 아이콘으로 표시해준다.
크롬은 왜 안함?

3. Is something else overriding your CSS?

speciticity의 수치에 따라 프로퍼티가 오버라이딩 될 수 있다.
오버라이딩된 프로퍼티는 브라우저의 devtools에 color:red으로 보여진다.

4. Make a reduced test case of the problem

위의 단계에서 해결되지 못했다면 가장 좋은 방법은 축소된 테스트 사례로 만드는 것이다.
축소된 테스트 사례는 관련 없는 주변 내용과 스타일을 제거한 상태에서 가능한 가장 간단한 방법으로 문제를 보여주는 코드 예제를 말한다.

테스트 케이스를 축소하는 방법은 다음과 같다.

1. CMS와 같은 프로그램을 통해 마크업이 동적으로 생성되는 경우 정적 버전을 따로 만든다.
   정적 코드는 코드펜에서 온라인으로 액세스할 수 있다.

2. js를 제거해서 문제가 해결되면 문제의 원인이 되는 부분만을 남긴채 가능한 한 많은 js를 제거한다.
   만약 js를 제거해도 안된다면 아예 포함하지 않는다.

3. 문제의 원인이 되지않는 HTML은 모두 제거한다.

4. 문제에 영향을 미치지 않는 CSS를 제거한다.

이 과정에서 문제의 원인을 찾거나 특정 항목을 제거하여 문제를 설정하거나 해제할 수 있다.
문제를 해결하는 데 여전히 어려움을 겪고 있다면 축소된 테스트 사례를 기반으로 다른사람들에게 도움을 요청한다.

[참고] : MDN