CSS 변수(Variables)가 Explorer에서도 작동하게 하는 방법(css-vars-ponyfill)

qpress 2020년 1월 21일 48

CSS Custom properties(CSS Variables)를 통해 많은 것을 할 수 있지만, 가장 유용한 것이 CSS에서도 변수를 사용할 수 있다는 것이다.

그런데, 항상 문제가 되는 것이 Explorer와 같은 Legacy Browser가 CSS 변수를 지원하지 않기 때문에, 그 유용함에도 불구하고 섣불리 사용하기 어렵다는 점이다.

이 문제를 해결해 주는 유용한 JavaScript 라이브러리를 소개 하고자 한다.

css-vars-ponyfill

설치

요즈음엔 JavaScript 라이브러리를 서버에 직접 적용하기 보다는 해당 라이브러리가 제공하는 CDN을 사용하는 것이 가장 간편하다.

HTML 파일의 head 영역안에 다음과 같이 코드를 추가하면, 사실상 기본 환경은 끝.

<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>

사용설정

Html 문서의 하단(link된 css 파일과 html 코드가 모두 로딩 되었을때 작동 해야 하기 때문에 문서의 하단에 삽입 하는 것이 안정적임)에 아래와 같이 스크립트를 삽입하여 실제 작동하도록 설정한다.

<script>
cssVars({
    //Options
});
</script>

위의 코드는 아무런 옵션을 설정하지 않은 상태이며, 해당 문서에 있는 모든 CSS코드를 분석하여 변수 요소를 실제 값으로 변환하게 된다.

옵션 설정

Case 1. 링크된 CSS 파일들은 제외하고 순수히 Style 태그 내의 CSS 변수만 변환

cssVars({
  include: 'style'
});

Case 2. 링크된 파일도 포함하되 외부 파일은 제외하고 로컬 파일만 포함하고자 할 경우

cssVars({
  // Include only CSS from <style> elements and <link> elements
  // with an href that does not contain "//"
  include: 'style,link[rel="stylesheet"]:not([href*="//"])'
});

Case3. Style 태그와 특정 CSS 파일만 변환하고자 할 경우

cssVars({
    // Include only CSS from <style> elements and qp2.css
    include: 'style,link[rel="stylesheet"][href*=qp2]'
});

이 라이브러리는 CSS 변수를 해석할 수 있는 최신 브라으저에서는 작동하지 않고, 적용이 되지 않는 Legacy 브라우저로 접속할 경우만 작동하도록 기본 설정이 되어 있다. 그래서 이 라이브러리를 적용한다고 해서, 대부분 접속 경로인 스마트폰 등에서의 속도 부담은 없다고 볼 수 있다.