IE7에서 :before, :after 선택자와 content 속성 대체방안

IE7을 고려해야하는 페이지를 제작하는 경우, :before 나 :after 와 같은 가상 선택자를 지원하지 않아 애를 먹곤 합니다. 설상가상으로 content 속성까지 지원하지 않지요. 이에 대한 대체방안을 모색해봅니다.

:before, :after 선택자 대체방안

IE7에서는 :before 와 :after 가상 선택자를 대체하기 위해서 새로운 요소를 생성하고 이에 클래스명을 부여하는 방법이 사용된다. 아래의 예시와 같이, 이 표현식은 자바스크립트와 같은 방식으로 요소를 생성하고 있다.

.example:before,
.example .ie-before {
    display: block;
    width: 100px;
    height: 50px;
}

.example {	
    *zoom: expression(
        this.runtimeStyle['zoom'] = '1', 
        this.insertBefore(document.createElement("i"), 
        this.firstChild).className="ie-before"
    );
}

IE7에서만 적용하기 위해서 * 핵을 사용하고 있으며, 선택한 요소의 첫번째 자식으로 생성한 요소를 위치 시키고 있다. 물론, 위와 같은 방법은 실제로 존재하길 바라지 않는 요소를 생성하게 됨으로써 접근성이 의도한 바와는 다를 수 있다.

:after 선택자를 생성하는 방법도 이와 유사하며 표현식의 명령어만 바뀌게 된다.

.example {
     *zoom: expression(
        this.runtimeStyle['zoom'] = '1', 
        this.appendChild(document.createElement("i")).className="ie-after"
    );
}

content 속성 대체방안

IE7에서는 또한, CSS의 content 속성도 지원하지 않는다. 이는 가상 선택자들과 함께 자주 사용되는 속성이기에 이를 대체하는 방법 또한 알아본다. 위에서 사용한 IE 전용 표현식에 단순히 명령어를 추가하는 수준에서 이루어진다.

.love {
    *zoom: expression(
        this.runtimeStyle['zoom'] = '1',
        this.innerHTML = 'LOVE'
    );
}

innerHTML로 실제 요소의 안에 출력하는 방식이다. 대부분 content 속성이 실제 존재하지 않는 내용을 :before 나 :after 같은 가상 선택자를 이용해 삽입될 내용을 표현하는 용도로 사용된다.

content 속성과 :before 선택자의 결합 예제

IE7과 그 밖의 브라우저에서 모두 작동하도록 코드를 작성해보자.

<p class="welcome">World!</p>

<style>
.welcome:before,
.welcome .ie-before {
    content: "Hello~";
    margin-right: 5px;
}

.welcome {
     *zoom: expression(
        this.runtimeStyle['zoom'] = '1', 
        this.insertBefore(document.createElement("i"), 
        this.firstChild).className="ie-before",
        this.firstChild.innerHTML = "Hello~"
    );
}
</style>

굳이 IE7을 배려해야 하고 생략할 수 없는 필수적인 요소들에는 이렇게 표현식을 사용해서라도 원하는 목적을 달성하도록 하자.