[CSS] :root 가상선택자를 통한 css 변수, IE 적용방법

익스플로러(IE)의 CSS변수 해결방법

root의 가상 선택자를 통해 css 변수를 사용하는 경우가 있습니다.

반복되는 css 코드 값의 반복을 줄여주기 때문에 코드 관리도 쉽고 유지보수 측면에도 좋습니다.

하지만 우리의 익스플로러는 역시 적용이 안됩니다. ^^

 

css 변수의 사용법을 모르신다면, 아래의 포스팅을 참고해주세요.

eunyoe.tistory.com/entry/CSS-CSS-%EB%B3%80%EC%88%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

 

 

브라우저 호환성

출저 : https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

익스플로러 빼고 다 호환이 되네요 :)

기껏 변수를 통해 적용했는데 ie 때문에 변수가 아닌 새로운 기존의 스타일을 추가하는 건

너무 비효율적이기 때문에 오늘은 간단하게 변수 css를 ie에 적용시키는 법을 알려드리겠습니다!

 

위의 사진처럼, root값을 입력해주시고 css도 입력을 해주었다면

 

<!-- ie css 변수적용 -->
    <script>
        window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');
    </script>

바로 상단의 코드를 html에 삽입해주시기만 하면 간단하게 해결됩니다 :)

IE11의 점유율이 낮아져, 이제 개발을 중단한 것 같지만 css 변수 안되는 이슈는 해결이 되네요!

더 자세한 사항은 하단의 링크 참고해주세요 :)

 

 

github.com/nuxodin/ie11CustomProperties