栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

IE11-CSS变量是否存在polyfill /脚本?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

IE11-CSS变量是否存在polyfill /脚本?

是的,只要您正在处理根级自定义属性(IE9 +)。

  • GitHub
  • NPM
  • 演示

从自述文件:

特征

  • 客户端将CSS自定义属性转换为静态值
  • 在现代和旧版浏览器中实时更新运行时值
  • 变换
    <link>
    <style>
    @import
    CSS
  • 将相对
    url()
    路径转换为绝对URL
  • 支持链接和嵌套
    var()
    功能
  • 支持
    var()
    功能后备值
  • 支持Web组件/阴影DOM CSS
  • 观看模式会自动更新
    <link>
    <style>
    更改
  • 提供UMD和ES6模块
  • 包含Typescript定义
  • 轻量级(至少6k + gzip)且无依赖

局限性

  • 自定义属性支持仅限于
    :root
    :host
    声明
  • var()的使用仅限于属性值(根据W3C规范)

以下是库可以处理的一些示例:

根级自定义属性

: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));}

后备值

p {    font-size: var(--a, 1rem);    color: var(--b, var(--c, var(--d, red))); }

变换

<link>
<style>
@import
CSS

<link rel="stylesheet" href="/absolute/path/to/style.css"><link rel="stylesheet" href="../relative/path/to/style.css"><style>    @import "/absolute/path/to/style.css";    @import "../relative/path/to/style.css";</style>

转换Web组件/阴影DOM

<custom-element>  #shadow-root    <style>      .my-custom-element {        color: var(--test-color);      }    </style>    <div >Hello.</div></custom-element>

为了完整性:w3c规格

希望这可以帮助。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/442449.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号