티스토리 뷰
발생일: 2014.11.21
키워드: IE, explorer, css, limit,
문제:
이번 스프린트의 언제부턴가 IE8에서 렌더링이 깨져보였다.
스크립트 오류도 없고 동작도 잘 된다.
다른 작업도 있고 이 테스트 장비에서만 그런가… 싶어서 미뤄두고 있었는데, J가 원인을 찾아냈다!
해결책:
이번 스프린트에 새 작업이 추가되면서 CSS 파일의 사이즈가 커졌는데,
IE8에서는 CSS 파일 하나 당 룰 수가 제한되어 있어서 발생한 거였다.
IE9 이하에서는 CSS 파일 하나 당:
- 룰은 4095개까지만 적용된다. (이후의 룰은 무시한다)
- @import 구문은 31개까지만 적용된다.
- @import 구문은 4단계까지만 중첩된다.
다행히 룰이 적용되지 않은 부분이 눈에 띄는 메뉴라 잘 찾을 수 있었는데,
숨겨져있거나 노출 빈도가 낮은 메뉴였다면 찾아내는데 더 어려웠을 뻔 했다.
빌드 과정 중에 CSS 룰의 수를 미리 체크해두면 좋겠다고 생각했는데,
똑똑한 J가 이미 해당 모듈도 찾아뒀다.
좋구만~!
든든하다.ㅎㅎ
참고:
- (D가 만든) 룰이 4095개 이상인 경우의 테스트: http://jsbin.com/yajibu/1
반응형
댓글
공지사항