:before, :after, content IE7 polyfill

IE7 Polyfill : before, :after, 가상 선택자와 content 속성

단계적 기능향상을 추구하는 프로젝트에서는 IE7 을 고려해야 합니다. 그래서 :before 와 :after 와 같은 가상 선택자를 이용하여 clearfix 기법을 사용할 경우 크로스브라우징 문제에 봉착하게 됩니다.  물론 content 속성도 지원하지 않습니다.

이에 대한 해결책인 대체방안에 대해 알아보고자 합니다.

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

IE7 에서는 :before 와 :after 가상 선택자를 대체하기 위한 기법으로 새로운 요소를 생성하고 이에 클래스명을 부여하는 방법으로 사용합니다.

이 방법의 표현식은 자바스크립트와 같은 방식으로 요소를 생성하고 클래스명을 부여합니다.

다음의 아래 코드를 살펴보겠습니다.

html

<div class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, voluptatum!</div>

css

<style>
    .demo:before,
    .demo .ie7-before {
        display: block;
        width: 100px;
        height: 50px;
    }
    .demo {
        *zoom: expression(
            this.runtimeStyle['zoom'] = '1',
            this.insertBefore( document.createElement("i"), this.firstChild ).className = "ie7-before"
        );
    }
</style>

위의 코드를 살펴보면 IE7 에서만 적용하기 위해서 CSS hack * 을 사용하고 있으며,  inserBefore 메서드를 이용하여 선택한 요소의 첫번째 자식으로 새로운 요소를 생성, 위치시키고 있습니다. 

이 방법은 실제 마크업상에서 비어있는 division 과 같은 요소를 만들어 사용하는 방법과 비슷합니다. 

실제로 존재하길 바라지 않는 요소를 생성하게 됨으로써 접근성이 의도와 어긋날 수 있는 소지가 있지만 비어 있는 마크업을 사용하는 것 보다면 IE7 만을 위한 코드이기 때문에 좀 더 낫다고 판단되어 집니다.

:after 가상 선택자를 생성하는 방법도 이와 유사하면 표현식의 문자열만 바꿔주면 됩니다.

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

Content Property Polyfill

가상 선택자들과 함께 자주 이용되는 content 속성은 IE7 에서 역시 지원하지 않습니다.

이에 대한 대체방안은 위에서 이용한 IE 전용 표현식에 한가지 명령어를 추가하는 수준에서 이루어집니다.

.content {
  *zoom: expression(
        this.runtimeStyle['zoom'] = '1',
        this.innerHTML = 'content 블라블라~'
    );
}

innerHTML 로 실제 요소 안에 삽입될 내용을 출력하는 방법입니다.

일반적으로 content 속성이 실제 존재하지 않는 내용을 :before, :after 와 같은 가상 선택자를 이용해 삽입될 내용을 표현하는 용도로 사용되어 집니다.

우리가 가상 선택자를 이용하여 float 를 해제하는 clearfix 방법은 IE7 에서는 적용되지 않기 때문에 위의 코드를 이용하여 그 방안을 모색해 보겠습니다.

제가 아는한  현존하는 clearfix 방법은 5가지 정도로 그 방법 중 하나를 선택사용하는 것은 사용자들의 몫입니다.

참고로 최근 몇 년전에 부트스트랩에서 차용,사용하고 있는 micro-clearfix 가 마지막 다섯번째 방법입니다.

보일러플레이트에서도 마이크로 클리어픽스방법을 사용하고 있으며 이 방법도 가상선택자를 이용하는 방법 중 하나입니다.

이 글에서는 float 를 해제하는 방법을 다루는 내용이 아니기에 관심있는 분들은 이 곳(clearfix)을 참조하세요.

content 속성과 :after 가상 선택자를 이용하여 float를 해제하는 방법

다음의 코드는 IE7 과 그 외의 모던 브라우저에서 모두 작동되니 IE7 은 사용자의 로컬에서 테스트해 보시길 바랍니다.

See the Pen content, :after polyfill by jaeheekim (@jaehee) on CodePen.

위 코드는 li 가 플로팅 된 상태로 floating 해제하여 demo 박스가 옆으로 흐르지 않는 것을 IE7에서도 확인하실 수 있습니다.

IE7 까지 고려(단계적 기능향상)해야 하는 사용자는 이용해 보세요.

[참고자료] after and :before css pseudo elements hack for IE 7

[출처] WEBDIR - 흉내쟁이님

Jaehee's WebClub