오해하지 마십시오. IE는 최신 IE8을 포함하여 CSS3 고급 선택기를 지원하지 않지만(자세한 내용은 "CSS 선택기에 대한 브라우저 지원" 참조) CSS 선택기는 실제로 작업을 크게 단순화하고 코드를 개선할 수 있습니다. 효율성 덕분에 유지 관리가 용이한 페이지를 쉽게 만들 수 있습니다.
그러나 IE의 고급 CSS 선택기, 특히 CSS3 선택기 지원으로 인해 CSS 선택기의 적용을 홍보할 수 없었습니다. 그러나 브라우저의 시장 점유율을 통제할 수는 없지만 일부 기술을 통해 작업을 개선할 수 있습니다. 또한 다른 기술을 사용하여 IE가 위장된 CSS3 선택기를 지원할 수 있습니다.
영국의 웹 개발 엔지니어인 Keith Clark은 IE가 CSS3 선택기를 지원할 수 있도록 하는 JavaScript 솔루션을 개발했습니다. 이 스크립트는 IE5에서 IE8까지 다양한 버전을 지원합니다.
용법
다음과 같이 Robert Nyman의 DOMAssistant 스크립트와 ie-css3.js를 다운로드하여 페이지의 head 태그로 가져오기만 하면 됩니다.
<머리>
지원되는 선택기
ie-css3의 일부 제한 사항
어떻게 작동하나요?
ie-css3.js는 페이지의 각 스타일 파일을 다운로드하고 CSS3 의사 선택기를 구문 분석합니다. 선택기가 발견되면 동일한 이름의 CSS 클래스로 대체됩니다. 예를 들어 div:nth-child(2)는 div._iecss-nth-child-2가 됩니다. 그런 다음 Robert Nyman의 DOMAssistant를 사용하여 요소의 CSS3 선택기와 일치하는 DOM 노드를 찾은 다음 해당 CSS 클래스를 여기에 추가합니다.
결국 요소의 스타일 시트는 새 버전으로 교체되고 CSS3 선택기를 사용하여 해당 요소에 해당 스타일이 추가됩니다.
IE의 CSS 인터프리터를 피하세요
W3C에 따르면 브라우저는 인식하지 못하는 CSS 규칙을 무시해야 합니다. 이는 문제를 야기합니다. 스타일시트 파일에서 CSS3 선택기를 활용해야 하지만 IE에서는 이를 무시합니다.
이 문제를 방지하기 위해 각 스타일 파일은 XMLHttpRequest를 통해 다운로드됩니다. 이를 통해 스크립트는 브라우저에 내장된 CSS 인터프리터를 우회하고 원시 CSS 파일을 읽을 수 있습니다.
대안
분명히 이것은 완벽한 솔루션은 아닙니다. Ajax 웹사이트의 경우 생성된 스타일 시트가 적용된 후 DOM을 변경하는 것이 효과적이지 않기 때문에 기본적으로 사용할 수 없습니다. 그러나 실제로는 ie-css3를 직접 사용자 정의할 수 있습니다. 이것은 이것만큼 똑똑하지 않습니다.