Internet Explorer 11에서 CSS 변수를 어떻게 사용할 수 있나요?

IE11의 CSS 변수 호환성

CSS 변수는 CSS 코드에서 변수를 정의하고 재사용하는 편리한 방법을 제공하지만 기본적으로는 그렇지 않습니다. Internet Explorer 11(IE11)에서 지원됩니다. 이는 애플리케이션에서 이전 브라우저를 지원해야 하는 개발자에게 어려운 과제입니다.

해결책: CSS 변수 Ponyfill

다행히 다음과 같은 형태로 사용할 수 있는 솔루션이 있습니다. CSS Variables Ponyfill이라는 폴리필입니다. 이 라이브러리를 사용하면 IE11 및 이를 기본적으로 지원하지 않는 기타 브라우저에서 CSS 변수를 사용할 수 있습니다.

특징 및 기능

CSS 변수 Ponyfill은 다양한 기능을 제공합니다. , 다음을 포함:

• CSS 사용자 정의 속성을 정적으로 클라이언트 측 변환 값
• 최신 브라우저와 기존 브라우저 모두에서 런타임 값의 실시간 업데이트
• ,
• 체인 및 레거시 브라우저 지원 중첩된 var() 함수
• var() 함수 대체 지원 값
• 웹 구성 요소/shadow DOM CSS 지원
• 감시 모드는 및 변경 사항
• 경량(6k min gzip) 및 종속성 없음

사용

CSS 변수 Ponyfill을 사용하려면 간단히 다른 CSS보다 먼저 HTML 문서 파일:

<script src="https://unpkg.com/css-vars-ponyfill/dist/css-vars-ponyfill.min.js"></script>

예

다음은 CSS 변수 Ponyfill을 사용하여 IE11에서 CSS 변수를 만들고 사용하는 방법에 대한 몇 가지 예입니다.

루트 수준 사용자 정의 속성

:root {
    --a: red;
}

p {
    color: var(--a);
}

체인 사용자 정의 속성

:root {
    --a: var(--b);
    --b: var(--c);
    --c: red;
}

p {
    color: var(--a);
}

중첩 사용자 정의 속성

:root {
    --a: 1em;
    --b: 2;
}

p {
    font-size: calc(var(--a) * var(--b));
}

작성자 CSS 변수 Ponyfill을 사용하면 다음에서 CSS 변수의 이점을 활용할 수 있습니다. IE11을 사용하고 지원되는 모든 브라우저에서 웹페이지가 일관되게 렌더링되는지 확인하세요.

위 내용은 Internet Explorer 11에서 CSS 변수를 어떻게 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!