精华内容
下载资源
问答
  • CSS变量

    2018-04-23 22:27:58
    CSS:root{ // css变量的作用域,这里是根元素 --font-size: 20px; // --开头的属性就是CSS变量}div{ font-size: var(--font-size, 24px) // 使用CSS变量,--font-size无效时使用默认值24px --color: blue;}div....

    CSS

    :root{ // css变量的作用域,这里是根元素

        --font-size: 20px; // --开头的属性就是CSS变量

    }

    div{

        font-size: var(--font-size, 24px)  // 使用CSS变量,--font-size无效时使用默认值24px 

        --color: blue;

    }

    div.test{

        color: var(--color) // --color的作用域包括div和div之下的元素

    }

    HTML

    style里也可以定义CSS变量

    JS

    element.style.setProperty("--bg", "black") // 设置 CSS变量

    展开全文
  • CSS变量-源码

    2021-02-13 07:23:01
    CSS变量
  • css变量制作心动的果冻效果(css变量

    千次阅读 多人点赞 2020-05-20 21:59:38
    CSS自定义属性也被称为CSS变量。变量就是拥有合法标识符和合法的值,可以被使用在任意的地方。通过var()函数使用变量。 1.声明一个局部变量: .jelly { --main-bg-color: #e91e63; } 2.使用一个局部变量: .jelly {...

    变量的声明

    CSS自定义属性也被称为CSS变量。变量就是拥有合法标识符和合法的值,可以被使用在任意的地方。通过var()函数使用变量。

    1.声明一个局部变量:

    .jelly {
      --main-bg-color: #e91e63;
    }
    

    2.使用一个局部变量:

    .jelly {
      background-color: var(--main-bg-color);
    }
    

    3.声明一个 全局 CSS 变量:

    :root {
      --global-color: #666;
    }
    

    3.使用一个 全局 CSS 变量:

    .jelly{
       color: var(--global-color);
    }
    

    var()

    var() 函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。

    color: var(--color);
    

    变量名大小写敏感,--header-color--Header-Color是两个不同变量。

    变量作用域

    所在选择器优先级高的变量声明会覆盖优先级低的。

    body {
        --color: red;
    }
    
    p {
        --color: black;
    }
    

    与 calc 结合使用

    height: calc(100vh - var(--header-height));
    

    第二个参数不处理内部的逗号或空格,都视作参数的一部分。

    js操作css变量

    读取变量的值:

    const dom = document.querySelector('selector');
    dom.style.getPropertyValue('--color');
    

    修改css变量的值:

    const dom = document.querySelector('selector');
    dom.style.setProperty('--color', 'white');
    
    

    同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的"层叠"(cascade)规则是一致的。

    element.style.getPropertyValue("--my-var");
    
    getComputedStyle(element).getPropertyValue("--my-var");
    
    element.style.setProperty("--my-var", jsVar + 4);
    
    

    javascript 检测浏览器支持

    const isSupported =
      window.CSS &&
      window.CSS.supports &&
      window.CSS.supports('--a', 0);
    

    超可爱的果冻效果:

    	<div class="jelly-box">
    		<div class="jelly jelly1"></div>
    		<div class="jelly jelly2"></div>
    		<div class="jelly jelly3"></div>
    		<div class="jelly jelly4"></div>
    		<div class="jelly jelly5"></div>
    		<div class="jelly jelly6"></div>
    	</div>
    
    .jelly {
    	--x: 84;
    	--y: 75;
    	--size: 128;
    	width: 10rem;
    	height: 10rem;
    	min-width: 6em;
    	min-height: 6em;
    	background: var(--color, #aaa);
    	border: 0 solid transparent;
    	box-sizing: border-box;
    	margin: .5em;
    	opacity: .7;
    	--dx: calc(var(--size) - var(--x));
    	--dy: calc(var(--size) - var(--y));
    	opacity: 1;
    	cursor: pointer;
    	border: calc(2px + .65vw) solid rgba(255, 255, 255, .5);
    	border-radius: calc(var(--x) / var(--size) * 100%) calc(var(--dx) / var(--size) * 100%) calc(var(--dx) / var(--size) * 100%) calc(var(--x) / var(--size) * 100%) / calc(var(--y) / var(--size) * 100%) calc(var(--y) / var(--size) * 100%) calc(var(--dy) / var(--size) * 100%) calc(var(--dy) / var(--size) * 100%);
    }
    

    第一个果冻(设置css变量值,覆盖掉默认值)

    .jelly1 {
    	--color: #f44336;
    	--x: 160.71999999999997;
    	--y: 90.72;
    	--size: 192;
    }
    
    

    其他果冻

    /* 第2个果冻 */
    .jelly2 {
    	--color: #e91e63;
    	--x: 155.82;
    	--y: 97.01999999999998;
    	--size: 192;
    }
    /* 第3个果冻 */
    .jelly3 {
    	--color: #9c27b0;
    	--x: 160.71999999999997;
    	--y: 101.22;
    	--size: 192;
    }
    /* 第4个果冻 */
    .jelly4 {
    	--color: #2196f3;
    	--x: 78.11999999999999;
    	--y: 107.51999999999998;
    	--size: 192;
    }
    /* 第4个果冻*/
    .jelly5 {
    	--color: #4caf50;
    	--x: 55.71999999999999;
    	--y: 100.51999999999998;
    	--size: 192;
    }
    /* 第5个果冻 */
    .jelly6 {
    	--color: #ff9800;
    	--x: 130.62;
    	--y: 88.61999999999999;
    	--size: 192;
    }
    
    

    counter-increment 添加元素编号

    所有主流浏览器都支持counter-increment属性。

    使用方式:

    .jelly-box .jelly {
    	counter-increment: number;/* 给每个元素编号 */
    	counter-reset: number;/* 重置元素编号,即重复一个编号 */
    }
    
    .jelly:after {
    	content: counter(number); /*在content里面放置编号*/
    	/* 其他属性省略 */
    }
    
    

    制作精致的卡片效果

    html

    <!-- Grid+css变量 -->
    <div class="variables-wrraper">
    	<div class="variables-box variables-box1">
    		<div class="variables"></div>
    	</div>
    	<div class="variables-box variables-box2">
    		<div class="variables"></div>
    	</div>
    	<div class="variables-box variables-box4">
    		<div class="variables"></div>
    	</div>
    	<div class="variables-box variables-box5">
    		<div class="variables"></div>
    	</div>
    </div>
    
    

    Grid+css变量:

    .variables-wrraper {
    	--i: var(--wide, 1); /* 由于wide未定义,所以会取第二个值 */
    	--j: calc(1 - var(--i)); /* 由于wide未定义,i为1,由此j取值为0 */
    }
    
    

    解释

    由于wide未定义,i第二个值,而j依赖于i,所以j为0;而一旦wide定义了变量,i,j随着改变;

    .variables-box {
    	--p: var(--parity, 1);
    	--q: calc(1 - var(--p));
    	--s: calc(1 - 2*var(--p));
    	display: grid;
    	grid-template: calc(var(--j)*2.5em) 5em 1fr/calc(var(--i)*(var(--q)*13.5em + var(--p)*5em) + var(--j)*3.5em) 1fr calc(var(--i)*(var(--p)*13.5em + var(--q)*5em) + var(--j)*3.5em);
    	overflow: hidden;
    	margin: 1em auto;
    	max-width: 39em;
    	min-height: 10em;
    	border-radius: calc(var(--i)*10em);
    	box-shadow: 15px 15px 17px rgba(0, 0, 0, 0.25);
    	background: linear-gradient(#f0f0f0, #fafafa 5em, #eaeaea 0, #dadada) 0 100%/100% calc(100% - var(--j)*2.5em);
    	counter-increment: idx;
    }
    
    

    解释

    display: grid指定一个容器采用网格布局。

    grid-template,CSS属性简写,用以定义网格中分区

    counter-increment 添加元素编号 ,见第一个实例。

    .variables-box:before,
    .variables-box :after {
    	--m: 0;
    	box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.65);
    	transform-origin: calc(var(--p)*100%) calc((1 - var(--m))*100%);
    	transform: skewx(calc(var(--i)*var(--s)*(1 - 2*var(--m))*27deg));
    	background: linear-gradient(calc(var(--s)*(1 - 2*var(--m))*90deg), HSL(var(--hsl0)), HSL(var(--hsl1)));
    	content: "";
    }
    
    

    解释:

    transform-origin 设置旋转元素的基点位置 ( 默认值 : 50% 50% 0 )

    语法:transform-origin: x-axis y-axis z-axis;

    x-axis( 定义视图被置于 X 轴的何处):left,center,right,length,%

    y-axis( 定义视图被置于 Y 轴的何处):top,center,bottom,length,%

    z-axis( 定义视图被置于 Z 轴的何处):length

    .variables-box:before,
    .variables-box .variables {
    	grid-row: 1/calc(2 + 2*var(--i));
    	grid-column: calc(1 + 2*var(--i)*var(--p))/span calc(1 + 2*var(--j));
    }
    
    

    解释

    grid-rows grid-rows属性指定在网格中的每一行的高度。

    如: 定义为100像素的标题行,必要的并添加许多附加的30和60像素的高度:

     div{
     		grid-rows:100px (30px 60px);
     } 
    
    

    解释grid-columns grid-columns 属性网格中每列的宽度。

    如: 在 div 元素中部添加一个网格行,距右侧 200 像素处添加另一个,在余下空间的中间再添加一个:

    div{
    	grid-columns:50% * * 200px;
    }
    
    
    .variables-box:after {
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	font-size: calc(var(--i)*1.5625em + var(--j)*1.75em);
    	content: attr(data-icon);
    }
    
    
    .variables-box:nth-of-type(odd) {
    	--parity: 0;
    }
    
    

    解释:

    :nth-child(even) 选中偶数位置的子元素

    :nth-child(odd) 选中奇数位置的子元素

    .variables {
    	display: grid;
    	grid-template: repeat(calc(var(--i) + 1), 2em)/repeat(calc(var(--j) + 1), 3.5em);
    	align-items: center;
    	justify-content: center;
    	position: relative;
    	z-index: 1;
    	padding: calc(var(--i)*1.75em) calc(var(--i)*var(--q)*2.05em) 0 calc(var(--i)*var(--p)*2.05em);
    	color: #fff;
    	font-size: 1.25em;
    	font-weight: 400;
    	text-transform: uppercase;
    }
    
    
    .variables:before {
    	font-size: calc(var(--i)*2em + 1em);
    	font-weight: 500;
    	content: counter(idx, decimal-leading-zero);
    }
    
    

    解释

    decimal-leading-zero该标记是一个带有前导零的数字(01、02、03 等)

    listStyleType属性: listStyleType 属性设置或返回列表项标记的类型。

    设置listStyleType 属性:Object.style.listStyleType="*value*"

    返回listStyleType属性:Object.style.listStyleType

    .variables:after {
    	--m: 1;
    	position: absolute;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	left: 0;
    	z-index: -1;
    }
    
    

    第一个展示标签

    .variables-box1 {
    	--hsl0: 49, 100%, 54%;
    	--hsl1: 33, 96%, 50%;
    	--idx: 0;
    }
    
    

    第二个展示标签

    .variables-box2 {
    	--hsl0: 82, 81%, 52%;
    	--hsl1: 104, 56%, 51%;
    	--idx: 1;
    }
    
    

    第三个展示标签

    .variables-box3 {
    	--hsl0: 169, 50%, 44%;
    	--hsl1: 191, 99%, 27%;
    	--idx: 2;
    }
    
    

    第四个展示标签

    .variables-box4 {
    	--hsl0: 332, 94%, 67%;
    	--hsl1: 338, 101%, 59%;
    	--idx: 3;
    }
    
    

    参考文档

    1.CSS Grid 网格布局教程

    2.CSS 变量技术

    3.CSS变量是什么?

    4.CSS 变量教程

    5.MND

    展开全文
  • 当我们在讨论中提到CSS时,我们通常将其... CSS变量不仅是开发人员的实际选择,而且还可以在动画场景中使用。 还在怀疑吗? 继续了解更多! 可变基础 CSS变量是用于在样式表中重用的存储值。 使用自定义var()函...

    css 变量

    当我们在讨论中提到CSS时,我们通常将其称为愚蠢的语言。 一种声明性语言,缺乏逻辑和洞察力; 但这不是真实的现实。 多年来,开发人员一直渴望标准CSS中的变量,长期以来一直被诸如LESS和Sass之类的预处理器所破坏。 CSS变量不仅是开发人员的实际选择,而且还可以在动画场景中使用。 还在怀疑吗? 继续了解更多!

    可变基础

    CSS变量是用于在样式表中重用的存储值。 使用自定义var()函数可以访问它们,并使用自定义属性符号进行设置。

    :root {
      --main-color: goldenrod;
    }
    
    div {
      background-color: var(--main-color);
    }

    :root内定义的变量是全局变量,而选择器内定义的变量特定于该选择器。

    div {
      --module-color: goldenrod;
      background-color: var(--module-color);
    }

    在上面的示例中,任何div都将接受该变量,但是我们可以使用诸如classid class定位方法来命名更具体。

    var()函数也可以接受后备值。

    .nav {
        background: var(--navbg, blue);
    }

    这在尚未定义变量或使用自定义元素和Shadow DOM的情况下很有用。

    CSS变量还没有为黄金时间做好准备,但是随着许多领先的浏览器已经实现该规范 ,对未来的展望非常光明。 可以毫无疑问地使用它们只是时间问题,而且时间越来越快。

    动画变量

    有许多将CSS变量与动画结合在一起的选项。 考虑一下上下文,例如音频可视化,JavaScript事件驱动的场景,甚至是CSS驱动的事件,例如hoverfocustarget 。 从理论上讲,Apple Watch可以连接到API,同时使用基于CSS变量的跳动心脏动画。 然后,我们有了加速度计,设备倾斜API甚至游戏手柄API,但是为什么我们应该考虑完全使用CSS变量进行动画处理呢? 原因如下:

    • 易于调试。
    • 没有过多的DOM操作。
    • DOM节点独立。
    • 主题化
    • 与SVG一起使用。

    CSS中的操作确实是整个动画难题的关键部分。 CSS函数(例如calc可以在运行时接受值,并执行运算符(例如乘法,除法,加法,减法,将值变异为新值)。 这有助于使CSS变量动态化。

    JavaScript中CSS变量

    现在我们知道了CSS变量的外观以及它们可以做什么,现在是时候了解JavaScript如何适合所有这些情况了。

    document.documentElement.style.getPropertyValue('--bgcolor');
    document.documentElement.style.setProperty('--bgcolor', 'red');
    document.documentElement.style.removeProperty('--bgcolor');

    上面显示的方法用于设置,获取和删除属性值。 它们可以用于我们的典型CSS属性( background-colorfont-size等),但也可以用于CSS变量。 这些选项将为全局定义的属性设置新值,该属性在CSS中也称为:root

    它们也是对CSS变量进行动画处理的真正秘诀,因为我们的JS方法可以在运行时动态获取,设置或删除变量!

    var element = document.querySelector('div');
    
    element.style.getPropertyValue('--bgcolor');
    element.style.setProperty('--bgcolor', 'red');
    element.style.removeProperty('--bgcolor');

    如果需要,还可以为特定元素设置新值。 在上面的示例代码段中,我们要处理一个附加到div选择器而不是全局附加的变量。

    野外演示

    有很多很棒的,非常有才华的开发人员使用CSS变量来构建和试验这些React式和基于主题的动画的概念。 这里只是几支钢笔,您可以深入了解引擎盖下发生的事情。

    日落日出

    大卫•霍希尔德(David Khourshid)

    此示例显示了以基于主题的方式使用CSS可变动画的功能。 在没有CSS变量的情况下执行此演示程序的代码通常是原来的两倍,而如果要超过两个主题,则需要更多的代码。

    CSS变量动画

    灰色幽灵

    这是另一个示例,该示例在JavaScript中使用鼠标事件来驱动圆的位置。

    每次您移动鼠标时,JavaScript都会更新我们声明的变量,从而允许圆相对于光标移动位置。

    亚历克斯CSS Husky

    大卫•霍希尔德(David Khourshid)

    这与上面演示的原理相同,但用于另一种情况。

    注意移动鼠标时会发生什么? 太酷了吧?

    带有CSS变量的动画

    Wes Bos撰写

    如何以其他方式更新变量的值? 让我们看一下Wes Bos的以下演示,它使用滑块来更新图片的位置。

    随意移动滑块。 注意到随之而来的凉爽吗? 简单但神奇的是,每次调整滑块时,它所做的就是更新变换位置的变量。 Suuuuhhhweeet!

    Single Div手风琴(带有CSS变量动画)

    丹·威尔逊(Dan Wilson)着

    那里的音乐家有些不同吗? 看看Dan Wilson的这款手风琴手风琴。

    哇! 看着那些键动起来! 这似乎有些令人生畏,但从根本上讲,这只是JavaScript更新CSS变量。 仅此而已。

    CSS变量+变换=单个属性(带有输入)

    丹·威尔逊(Dan Wilson)着

    在此演示中,使用输入范围来修改每个变换属性并见证它们的平滑程度,即使您在过渡过程中更改了属性也是如此。

    CSS变量的副作用

    由于CSS变量始终是可继承的属性,因此它们可能导致子代的样式重新计算,从而对过程的性能产生不利影响。 这是您必须衡量的,而不是根据您的上下文进行猜测。

    这是Shaw 在Work Slack 动画小组上发布的一个演示,用于进行测试: CSS变量重新计算样式性能测试

    在测试期间(Chrome58。Mac10.12),发现当触发“ 设置CSS Var”按钮直到浏览器绘制背景时,重新计算时间为52.84ms,渲染时间为51.8ms。 切换到CSS属性测试发现了一个截然不同的结果。 从触发“ 设置CSS属性”按钮开始直到背景画完为止,大约有0.43毫秒的重新计算和0.9毫秒的渲染时间。

    如果将background切换为color则将获得等效的测量值,因为在子级中可能存在或可能不存在currentColor (向David Khourshid喊)。 任何可继承的属性将始终导致所有子代的样式重新计算。 属性background-color不可继承,因此与始终可继承CSS变量之间存在巨大差异。 通常,默认情况下inherit CSS属性在大多数情况下会导致样式的大量重新计算。 仍需注意,不断更改CSS变量可能会浪费性能。 避免这种情况的一个好习惯是在最特定的级别(或最深的级别)设置CSS变量的动画,以防止大量儿童受到影响。 您可以通过Google的“ Web基础知识”页面详细了解如何减少样式计算的范围和复杂性

    结论

    我鼓励大家参与并亲自测试该演示,并做出自己的结论/更改/自定义测试,并在评论中分享您的结果。 所有这一切的主要收获是CSS变量提供了巨大的灵活性,但是在具有大量子代的父代上设置CSS变量将对性能产生影响。

    特别感谢“ Animation At Work Slack”频道中的帮派,他们正在进行的测试,反馈和讨论( David KhourshidJoni KorpiDan WilsonShaw )。

    翻译自: https://webdesign.tutsplus.com/tutorials/how-to-use-css-variables-for-animation--cms-28868

    css 变量

    展开全文
  • CSS变量(也被称作自定义属性或者级联变量)是由CSS开发者自定义的,它包含的值可以在整个文档中重复使用。通过两根连词线( -- )声明CSS变量(如:--footer-color: blue;),由var()函数获取值(如:background-...

    目录

    1、CSS变量是什么?

    2、CSS变量和预处理器中的变量有什么不同?

    3、使用CSS变量

    1、声明css变量

    2、读取CSS变量

    2、CSS变量在拼接计算中引用

    3、CSS变量有效性

    4、CSS变量兼容性

     5、JS获取修改CSS变量

    1、获取css变量

    2、setProperty()修改css变量

    2、注意事项

     


    1、CSS变量是什么?

         CSS变量,即CSS variable。官方的名称是级联变量的CSS自定义属性,即CSS custom properties for cascading variables 。通过两根连词线( -- )声明CSS变量(如:--footer-color: blue;),由var()函数获取值(如:background-color:var(--footer-color);)。适当的使用CSS变量可以使得代码更易于阅读、管理和维护,因为看起来随意的、固定的值有了一个变量名作为提示信息。就如上面的代码一眼就能看出是设置页脚背景色为蓝色,后面如果需要修改页脚背景色只需修改--footer-color的值即可。

    2、CSS变量和预处理器中的变量有什么不同?

    CSS变量是运行在浏览器中的动态CSS属性,而预处理器变量会被编译成普通的CSS代码。

    • 浏览器原生特性,无需经过任何转译就可直接运行
    • DOM对象一员,极大便利了CSS与JS之间的联系
    • CSS变量不同于预处理器变量,css变量只能用于属性值,不能用于属性名

    3、使用CSS变量

    1、声明css变量

    声明一个css变量,变量名要以两根连词线(--)开始,变量值则可以是任何有效的CSS值,CSS变量写在规则集{}之内,如下:

    body{
        --main-bg-color: black; /**声明一个变量名为--main-bg-color,变量值为black的CSS变量*/
    }
    

    同时CSS变量是大小写敏感的,--Main-bg-color和--main-bg-color 是两个不同的css变量。

    • 属性名可以包含数字,字母,以及下划线或者短横线,也可以是中文,日文或者韩文

    2、读取CSS变量

    var()函数用于读取变量

    var(第一个参数,第二个参数),第一个参数是CSS变量,第二个参数是可选的,表示默认值

    body{
        --main-bg-color: black; /**声明一个变量名为--main-bg-color,变量值为black的CSS变量*/
    
        background-color:var(--main-bd-color);/**读取变量--main-bd-color的值 */
    }

     var()函数还可以使用第二个参数,表示变量的默认值。如果该变量未声明、未赋值,就使用这个默认值

    body{
        --main-bg-color: black; /**声明一个变量名为--main-bg-color,变量值为black的CSS变量*/
    
        background-color:var(--main-bg-color,#FFFFFF);
        /**读取变量--main-bg-color的值 ,
        如果变量--main-bg-color只声明了变量名、未设置变量值,或者忘记声明该变量时,浏览器就会使用var()的第二个参数作为背景色*/
    }

     CSS变量备用值,通过把var()函数作为var()函数的第二个参数,可以设置多个备用值,例如:

    .two {
      color: var(--my-var, red); /* 如果--my-var 未定义,则color为红色 */
    }
    
    .three {
      background-color: var(--my-var, var(--my-background, pink)); /* 如果--my-var,--my-background未定义,则background-color为pink */
    }
    
    .three {
      background-color: var(--my-var, --my-background, pink); /* 这种写法是无效的,var()函数只能存在两个参数 */
    }

    2、CSS变量在拼接计算中引用

    如果变量都是字符串,可以直接拼接

    :root{
        --text-one:'hello';
        --text-two:'world'
    }
    
    .box:after{
        content: var(--text-one)' 'var(--text-two);
    }

    变量和单位不能直接拼接

    :root{
        --size-one:14;
    }
    
    .box{
        font-size:var(--size-one)px; /**无效**/
    }

    计算结果将是

    font-size: 14 px;

    由上可知,变量和单位直接拼接会多出一个空格,正确的拼接方式是借用calc()函数,进行计算

    {font-size:calc(var(--size-one)*1px);}

    当然,calc也可以用作CSS变量值当中

    {--size-two:calc(20px * 2);}

     

    也可以在CSS变量中使用另一个CSS变量

    body{
    --top-color: orange;
    --bottom-color: yellow;
    --my-gradient: linear-gradient(var(--top-color), var(--bottom-color));
    }

     

    3、CSS变量有效性

     在没有CSS变量以前,CSS有效性和属性是绑定的,但这对CSS变量来说并不适用,因为当CSS变量被解析,浏览器不知道它们什么时候会被使用,所以会默认这些值都是有效的。而且通过var()函数调用时,也要根据上下文环境确定是否有效。

    当CSS属性-值对中存在语法错误,该行则会被忽略。然而如果自定义属性的值无效,它并不会被忽略,从而会导致该值被覆盖为默认值。

    点我查看css变量有效性示例

    • 优先级别:内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

    常见默认值:

    • background 默认值是 transparent
    • width 默认值是 auto
    • position 默认值是 static
    • opacity 默认值是 1
    • display 默认值是 inline

    4、CSS变量兼容性

    虽然现在主流浏览器都已支持css变量,但顽强的 ie11仍未支持,所以为了代码的健壮性,需要检测一下当前浏览器对css变量是否支持。

    1、@supports命令

    
    @supports ( (--a: 0)) {
      /** 支持css变量字体为蓝色**/
      section{
        --my-color:blue;
        color:var(--my-color);
      }
    }
    
    @supports ( not (--a: 0)) {
      /* 不支持css变量字体为灰色 */
      section{
        color:gray;
      }
    }
    

    2、使用具有虚拟查询条件(dummy conditional query)的@supports代码块

    section {
      color: gray;
    }
    
    @supports(--css: variables) {
      section {
        --my-color: blue;
        color: var(--my-color, 'blue');
      }
    } 

     

    3、JS检测是否支持

    const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--masterColor', 'red');
    if (isSupported) {
    	/* supported */
    	console.log('当前浏览器支持CSS变量')
    } else {
    	/* not supported */
    	console.log('当前浏览器不支持CSS变量')
    }

     5、JS获取修改CSS变量

    1、获取css变量

    getPropertyValue()获取CSS变量

    document.documentElement.style.getPropertyValue('--testColor')

    注意:上面语句只能获取到内联样式的css变量值,要想获取任意位置的CSS变量可以使用下面方法

    getComputedStyle(document.documentElement).getPropertyValue('--testcolor')

    获取某一标签上的css变量

    var divEle=document.querySelector('div');
    var divSty=window.getComputedStyle(divEle);
    var diveleVal=divSty.getPropertyValue('testcolor');

    上面代码展示了获取定义在div标签中testcolor变量的值。 

    2、setProperty()修改css变量

    document.documentElement.style.setProperty('--testcolor', color);

    上面代码展示了修改属性名为 testcolor的值。需要注意的是当定义了多个同名css变量,在对变量值修改时需要指明具体修改变量,代码如下

    body{
    --testcolor:red;
    }
    div{
    --testcolor:black;
    }
    
    document.querySelector('div').style.setProperty('--testcolor', yellow);

     上述代码把div里的testcolor值修改成了黄色,因为body,div有同名css变量testcolor,所以在修改的指明了只修改div里的。

    2、注意事项

    1.document.querySelector(':root') === document.documentElement
    2.优先级: js设置值>内联样式>:root选择器>html选择器
    3.document.documentElement.style.getPropertyValue只能获取内联样式的值,而且document.documentElement.style.setProperty('--rect', '7px');方式设置CSS变量会添加到内联样式中去

    如果CSS变量不是内联样式定义,document.documentElement.style.getPropertyValue就获取不到
    4.getComputedStyle(document.documentElement).getPropertyValue获取到的始终是实际的值
    5.四种方式赋值时,如果值包含多个空格,都是总会把多余空格变成一个空格。应该是类似于html页面的元素会把多余空格变成一个空格。

    展开全文
  • CSS变量 示例: 以在 vue 项目为例: 在行内的 style 属性中定义 CSS 变量 赋值为 JS 变量 在 CSS 中使用行内定义好的 CSS 变量 <!--html--> <div class="container"> <div class="test" :style=...
  • CSS变量初体验

    2014-06-30 03:49:00
    根据Mozilla软件工程师Cameron McCormack的透露 火狐浏览器从V29版开始支持一种新的CSS特征 CSS变量 下面这个视频可以让你大概的了解一下CSS变量的基本情况
  • CSS变量 描述 :memo: 使用html和css创建css变量的小练习。 安装 :wrench: 1.-将存储git clone https://github.com/junix7/variables-css.git到目录git clone https://github.com/junix7/variables-css.git 2.-在...
  • 因为最近在重构个人官网,不知道为什么突然喜欢用上CSS变量,可能其自身隐藏的魅力,让笔者对它刮目相看。 谈到为什么会在CSS中使用变量,下面举个栗子,估计大家一看就会明白。 /* 不使用CSS变量 */ .title {
  • 标量CSS变量。 使用一致的值来快速原型化接口很有用。 从提取。 安装 $ npm install css-scale 用法 安装请执行以下操作: @import 'css-scale' ; h1 { font-size : var ( --h1 ); } . title { padding : var ( ...
  • 刚开始的“css变量”,经扩展之后,称为“css自定义属性” 当各种预处理器满天飞的时候,css变量已经开始渐渐普及 在特定的应用场景,css变量确实发挥了很大的作用 下面开始学习css变量。 正文 一、变量的声明和使用...
  • tailwindcss CSS变量 翻译文件 语 文档链接 英语 文献资料 土耳其
  • Sass mixin准备切换到使用CSS自定义属性(又名CSS变量
  • 转换您CSS包以支持CSS变量,计算和旧版浏览器的将来CSS。 产品特点 在后台使用PostCSS。 使用postcss-preset-env转换将来CSS。 使用postcss-custom-properties和postcss-calc转换CSS变量和postcss-calc 。 可以...
  • 那么这里再来一种方法,设置css变量(var),通过js去改变这个变量来实现。 示例:改变div的hover背景色 <!-- css --> <style type="text/css"> :root { --divHoverColor: red; } div { width: ...
  • CSS变量实践 变量是用CSS创建的,但可以用Javascript控制。 用户现在可以更改图像的间距,背景色和模糊滤镜的“模糊度”。
  • PostCSS CSS变量 插件可将语法转换为静态表示形式。 该插件提供了使用大多数CSS变量功能(包括选择器级联和一些警告)的一种面向未来的方式,因为它只能看到CSS,而不能看到应用CSS的潜在动态HTML和DOM。 安装 npm ...
  • CSS变量Polyfill CSS变量/自定义属性的基本polyfill 这是对非常基本的 polyfil的尝试。 实际上,这更多是部分polyfill,因为它不会覆盖变量内部的变量,DOM作用域或其他任何“奇特的”东西。 只需获取在CSS中任何...
  • // 在js中设置css变量 let myStyle = ` --bg-color:red; --border-radius:50%; --wid:200px; --hgt:200px; ` let chageStyle = ` --bg-color:red; --border-radius:50%; --wid:300px; --hgt:300px;
  • 使用redux模式控制CSS变量。 您提供了redux风格的reducer,它们可以在更改时设置变量值,从而允许您以多种新方式设置应用程序的样式。 目前,此操作仅适用于顶级documentElement。 如果您在较高级别上定义变量,...
  • 主要介绍了JavaScript检测浏览器是否支持CSS变量代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • css 变量 --*

    2019-04-24 23:46:45
    何为css变量 随着各种css预编译工具sass,less,stylus的逐渐流行,css中引入变量已经成为一种趋势,因此原生(不知道能否用这个词,权当是css本身好了)css也加入了变量的定义方式 优点 在编写css过程中使用变量无非是...
  • 定义自定义 css 单元并将它们转换为 CSS 变量。 输入: : root { --cusomt-base-unit : 1 vw ; } div { width : 100 rpx ; } 输出: div { width : calc ( var ( --cusomt-base-unit ) * 100 ); } 安装 ...
  • Vue使用css变量更换主题色Vue使用css变量更换主题色css 变量用法在Vue中使用css变量 Vue使用css变量更换主题色 使用css变量更换主题色。 一般会提供几个主题色供用户选择,或者直接使用拾色器让用户选择喜欢的颜色。...
  • 用于降级CSS变量的插件。 : root { --primary-background : # fff ; --green-color : # 0f0 ; } . class { background : var ( --primary-background ); background-image : linear-gradient (to top , var ...
  • 此扩展有助于自动完成全局共享CSS变量。 仅扩展files配置中提供的文件中存在的那些变量将被视为全局变量。 支持的配置: 以下是默认值,您可以在User settings.json或Workspace settings.json覆盖它们。 cssvar....
  • 尾风CSS变量 将Tailwind配置文件转换为CSS变量。 :warning: 此版本仅适用于Tailwind v2及更高版本,如果仍使用旧版本的tailwind,请使用v2.0.0版本。 安装 将插件添加到您的项目中 # Install via npm npm install -...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 263,703
精华内容 105,481
关键字:

css变量