宁波有做网站的地方吗,静态网站的好处,淘宝客网站api,网站高并发前端怎么做本文翻译自#xff1a;https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处#xff1a;葡萄城官网#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务#xff0c;赋能开发者。 Sass和Less这样的预处理器#xff0c;让… 本文翻译自https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处葡萄城官网葡萄城为开发者提供专业的开发工具、解决方案和服务赋能开发者。 Sass和Less这样的预处理器让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性增强了动态编写CSS的能力从而减少重复代码也加快了我们开发速度。
近年来一些动态特性开始作为规范的一部分出现在CSS语言中。CSS变量(CSS variables)或者用它的官方称谓叫作自定义属性(custom properties)已经可用并且有非常棒的浏览器支持而CSS mixins也正在取得进展。
在本文你将学会如何使用CSS变量并把它集成到你的CSS开发流程中让你的样式表更好维护且减少重复。
让我们现在就开始吧 什么是CSS变量 如果你曾使用过某种编程语言那么你已经很熟悉变量这个概念了。变量用于存储和更新你的程序所需要的值以便使它运行。
例如考虑下面的JavaScript代码 let number1 2;
let number2 3;
let total number1 number2;
console.log(total); // 5
number1 4;
total number1 number2;
console.log(total); // 7
nubmer1和
number2是两个变量分别存储着数字2和3。total同样是变量存储着
number1与
number2之和。在这里它的值就是5。你可以动态地修改变量里的值并在程序中使用它们。在上面的代码中我把
number1的值更新为4然后再进行求和。使用相同的变量这个时候
total里存储的值就是5而不再是7了。使用变量的妙处在于它可以让你在一个地方存储值并且让你在后面能以各种理由去更新它。在程序中你不需要为不同的值再添加额外的字符表示任何值的更新都发生在同一个地方。正如在你定义的变量上。
CSS在很大程度上是一种声明式的语言而缺少动态能力。你也许会认为让CSS拥有变量几乎让上面的说法自相矛盾。如果前端开发仅仅是关于文字游戏那可以这么说。幸运的是Web的编程语言很像生活中的语言它们会随着周围环境和实践需要而不断进化与适应。CSS也同样如此。
简单的说变量已经成为CSS世界中激动人心的事实并且你即将亲自看到对于这个厉害的新技术学习和使用起来都非常直观。 使用CSS变量有什么好处 使用CSS变量的好处跟在其他编程语言中使用变量的好处没什么大的区别。
规范是这样描述这一点的
使用CSS变量给看似随机的值加上富有信息的名字从而使得大文件更容易阅读和编辑更少出错。因为你只需要在自定义属性中改变一次值所有应用了这个变量的地方都会自动跟着一起改变。W3C 规范
换句话说通过给变量起一个对你来说在项目中有意义的名字你能更容易的管理和维护你的代码。例如当你为项目中的主色调设置一个变量名
--primary-color那么你后面再修改这个主色调时只需要改动一处而不需要在不同位置的多个CSS文件中去手动修改多次值。CSS变量和预处理器中的变量有什么不同 你可能已经在CSS预处理器中尝试过使用变量而带来的好处了比如Sass和Less。
预处理器让你能设置变量以及在函数、循环、数学计算等等地方中使用它们。这是否意味着CSS变量已经无关紧要了呢
那可未必主要是因为CSS变量与预处理器中的变量其实是不同的东西。
这些不同基于一个事实CSS变量是浏览器中直接可用的CSS属性而预处理中的变量是用于编译成常规的CSS代码浏览器其实对它们一无所知。
这意味着你可以在样式表中在内联样式中在SVG的标签中直接更新CSS变量甚至可以在运行时用JavaScript直接修改它。而你是无法对预处理器中的变量做上面这些操作的。CSS变量开启了一个充满可能性的新世界大门。
不是说你必须要在两者间做出选择没有什么东西限制你你可以同时使用CSS变量和预处理变量并享有它们各自带来的巨大好处。 CSS变量语法 虽然本文为了简洁我使用了CSS变量(CSS variables)这个称呼但官方的规范把它们称作作为级联变量的CSS自定义属性(CSS custom properties for cascading variables)。*CSS自定义属性(CSS custom property)*的部分看起来像这样 --my-cool-background: #73a4f4;
在自定义属性前添加双横线前缀然后像给普通CSS设值一样给自定义属性设值。在上面的代码中我给一个叫做
--my-cool-backgroud的自定义属性设置了一个颜色值。而 级联变量(cascading variable) 的部分由通过
val()来使用你的自定义属性组成开起来像这样var(--my-cool-background);
自定义属性作用于CSS选择器中
val()可被当成一个真正的
CSS属性一样使用。:root {
--my-cool-background: #73a4f4;
}
/* CSS文件的其他部分 */
#foo {
background-color: var(--my-cool-background);
}
上面的代码片段把
--my-cool-background这个自定义属性的作用域定义在
:root这个伪类中这让该自定义属性能被全局访问到即在
html标签内部的任何地方。然后使用
val()函数把
ID为foo的容器的background-color设置为自定义属性的值这时该容器就有了浅蓝的背景色。这还没完。你可以用同样的浅蓝色给多个HTML标签的多种可以设置颜色值的地方设值比如设置它们的
color和
border-color。方法很简单就是通过
var(--my-cool-background)拿到自定义属性的值然后给合适的
CSS属性设置上去。当然在事情变得复杂之前我建议思考一下你的CSS变量命名规范p {
color: var(--my-cool-background);
}
示例1代码可点击查看。
你还可以从通过利用CSS变量获得另一个CSS变量的值。例如 --top-color: orange;
--bottom-color: yellow;
--my-gradient: linear-gradient(var(--top-color), var(--bottom-color));
上面的代码创建了一个
--my-gradient变量是一个渐变样式它的值被设为
--top-color的值和
--bottom-color的值组合的结果。现在你可以在任何时候修改你的渐变样式仅仅是修改变量的值就可以了而不再需要在样式表里满文件地去找用到这个渐变样式地方。示例2代码。
最后你可以在CSS变量中加入一个或多个备用值(fallback value/s)例如 var(--main-color, #333);
上面的代码中
#333是一个备用值。当自定义属性值无效或未指定(unset)时如果这时也没有指定备用值那么被继承的(inherited)属性值将会被使用。CSS变量是区分大小写的 与普通CSS属性不同CSS变量是区分大小写的。
例如
var(--foo)和
var(--FOO)是在求两个不同的自定义属性值分别是
--foo和
--FOO的。CSS变量受级联关系影响 和普通CSS属性一样CSS变量是可继承的。例如我们定义了一个属性值为
blue :root {
--main-color: blue;
}
当你给任意在
html标签里的元素指定
--main-color变量时它们都会继承到
blue这个值。当你在另一个元素里为改自定义属性设置了一个新值时那么所有该元素的子元素都会继承那个新值。例如 :root {
--main-color: blue;
}
.alert {
--main-color: red;
}
p {
color: var(--main-color);
}
--! HTML --
html
head
!-- head code here --
/head
body
div
pblue 的段落/p
div classalert
pred 的段落/p
/div
/div
/body
/html
在上面的标签中第一个
p段落会继承到全局的
--main-color值它是蓝色。在div标签中拥有
.alert类的段落会是红色因为它的值继承自局部作用域里的
--main-color。示例3代码
知道目前这些规则差不多够了。让我们开始写代码吧 如何在SVG中使用CSS变量 CSS变量和SVG配合得很好。你可以使用CSS变量去修改SVG中的样式以及和呈现相关的属性。
举个例子假设你想让你的SVG图标能跟随其所在父容器而拥有不同的颜色。你可以把CSS变量的作用域限定在父容器中然后给变量设置想要的颜色那么里面的图标就会继承父容器的颜色值。下面是相关代码 /* inline SVG symbol for the icon */
svg
symbol idclose-icon viewbox0 0 200 200
circle cx96 cy96 r88 fillnone strokevar(--icon-color) stroke-width15 /
text x100 y160 fillvar(--icon-color) text-anchormiddle stylefont-size:250px;x/text
/symbol
/svg
/* first instance of the icon */
svg
use xlink:href#close-icon /
/svg
上面的代码使用了
symbol标签它让你创建一SVG图形的不可见的版本。然后再使用
use标签生成一个可见的副本。这种方法可以让你根据自己的喜好创建任意多个自定义的图标也就是通过它的ID(
#close-icon)指向那个
symbol。这比一遍又一遍地写重复的代码创建图形更加简便。如果你想提高这方便的技术Massimo Cassandro在他的
Build Your Own SVG Icons中提供了一个快速教程。注意到SVG symbol中circle元素里的
stroke属性和text元素里的
fill属性它们都使用了CSS变量这里是
--icon-color。它被定义在
:rootCSS文件的选择器中像这样 :root {
--icon-color: black;
}
这是当前图标看起来的样子 这时如果你把同样的SVG图标放在不同的父容器中并且在父容器上给你的CSS变量设置各自的局部值那么你就会得到不同颜色的图标并且不用给你的样式表添加多余的规则。这很酷
为了展示这一点我们把同样的图标放在一个有
.success类的div里!-- html --
div classsuccess
svg
use xlink:href#close-icon /
/svg
/div
现在让
--icon-color变量局部化即把它放在
.success中并设置一个
green值。我们来看看发生的变化/* css */
.success {
--icon-color: green;
}
这个图标的颜色就变成了绿色 来看看一个完整的示例吧: 示例4代码。 如何在keyframes中使用CSS变量 CSS变量可以在CSS动画中使用即可用于常规HTML元素也可以用于内联的SVG。只需要记得你得知道让什么元素动把它视为目标元素然后创建对该目标元素的选择器在选择器的作用范围中定义你的CSS变量然后使用
val()获取这些变量把它们设置到
keyframes代码块中。例如让SVG中
.bubble类里面的
ellipse元素动起来你的CSS可能会看起来像这样.bubble {
--direction-y: 30px;
--transparency: 0;
animation: bubbling 3s forwards infinite;
}
keyframes bubbling {
0% {
transform: translatey(var(--direction-y));
opacity: var(--transparency);
}
40% {
opacity: calc(var(--transparency) 0.2);
}
70% {
opacity: calc(var(--transparency) 0.1);
}
100% {
opacity: var(--transparency);
}
}
注意到这是如何借助CSS的
calc()并用
var()函数进行计算的。它们增强了你代码的灵活性。这个例子简洁的地方在于利用CSS属性你可以简单的修改相应选择器里变量值而调整动画而不需要挨个去查找
keyframes里的属性了。这里有个完整的例子供你体验示例5代码。 如何通过JavaScript操作CSS变量 另一个超级酷的事情就是你可以直接通过JavaScript代码访问CSS变量。
假设在你的CSS文件中有一个叫做
--left-pos的变量作用在
.sidebar选择器中值为
100px.sidebar {
--left-pos: 100px;
}
那么通过JavaScript获取
--left-pos值会像下面这样// 缓存你即将操纵的元素
const sidebarElement document.querySelector(.sidebar);
// 缓存sidebarElement的样式于cssStyles中
const cssStyles getComputedStyle(sidebarElement);
// 获取 --left-pos CSS变量的值
const cssVal String(cssStyles.getPropertyValue(--left-pos)).trim();
// 将CSS 变量的值打印到控制台: 100px
console.log(cssVal);
如果想通过JavaScript设置CSS变量的值你可以像这样 sidebarElement.style.setProperty(--left-pos, 200px);
上面的代码将sidebar元素中
--left-pos变量的值设置为
200px。请看看CodePen中的如下示例你可以交互式地点击侧边栏修改blend mode属性和背景色。这些实现只用到了CSS变量和JavaScript。
示例6代码。 CSS变量的浏览器支持 除了IE11它不支持CSS变量所有主流浏览器都对CSS变量有全面地支持。
对于不支持CSS变量的浏览器一个变通的方案是使用具有虚拟查询条件(dummy conditional query)的
supports代码块:section {
color: gray;
}
supports(--css: variables) {
section {
--my-color: blue;
color: var(--my-color, blue);
}
}
考虑到
supports在IE/Edge里也起作用上面的方法是可行的。如果你在
val()函数中使用了备用值那么你的代码将更加可靠它能在兼容性不好的浏览器中实现优雅降级。对于上面的代码在Chrome和其他支持CSS变量的浏览器中
section标签里的文本将是蓝色在IE11中由于它不支持CSS变量页面将显示灰色文本: 可以查看在线的示例7代码。
此方法的一个缺点是如果你大量使用CSS变量而那些不支持CSS变量的浏览器在你的项目中有很高的适配优先级那么相应的代码会变得很复杂对于维护来说甚至是噩梦。
在这种情况下你可以选择使用带有cssnext的PostCSS它能让你在CSS代码中使用最新的特性并且让原本不支持这些属性的浏览器也能运行这些代码有点像JavaScript转换器做的事情。
备注这里可下载本文所有示列代码。 本文转载于:猿2048https://www.mk2048.com/blog/blog.php?idhajkh1jtitleCSS变量自定义属性实践指南
