快速了解,什么是CSS自定义属性?

CSS最大的魅力就是多样性。它既可以声明在整个项目中的样式,也可以让样式在特定未知失去作用。

An introduction to CSS custom properties - operation, design - 快速了解,什么是CSS自定义属性?

CSS经过长期发展,现在已经有很多成熟的工具和分支,比如用来提升速度的Sass。而今天我们介绍的是CSS中最有用的功能之一:自定义属性(Custom Properties)。

先来看一个简单的例子:

:root {
--color-red: #fc4752;
}

.site-navigation {
background-color: var(--color-red);
}

.site-footer {
color: var(--color-red);
}

开头的:root是伪选择器,会指向DOM中最高级别的父元素,因此支持所有元素访问。可以看到,CSS定义变量是以-开头,而后续可以在任何:root选择器的子元素内,通过var()在任意位置访问它。

color red - operation, design - 快速了解,什么是CSS自定义属性?

使用var()还可以同时定义一个默认值,即当var()内读取的第一个值不存在或无法访问时,则直接启用第二个值。

.site-navigation {
background-color: var(--color-red, red);
}

由于变量是从DOM层引用的,因此可以用一些特殊的引用方法,比如:

:root {
--color: red;
}

.site-navigation {
--color: green;

background-color: var(--color);
}

.site-footer {
color: var(--color);
}

在上述案例中,除了site-navigation下的var(–color)是表示绿色外,其他的var(–color)都表示红色。一般来说,在子对象层内覆盖掉父对象的默认值并不什么好办法,但有时候也需要这种解决方案。
这是个基础的例子,仍然可以延伸,比如在响应式设计中,可以针对手机端来定义。

:root {
--color-red: #fc4752;
--flex-layout: row;
}

@media (max-width: 640px) {
:root {
--flex-layout: column;
}
}

.site-navigation {
display: flex;
flex-direction: var(--flex-layout, row);

background-color: var(--color-red, red);
}

.site-footer {
color: var(--color-red);
}

这样,在触发了640像素的媒体样式后,site-navigation类的排序方向会变为column,让整个版面变成垂直的,而不是默认的水平(默认方向为row)。在这个例子中,其实对—flex-layout的初始赋值是不需要的,默认就是row。

amedia - operation, design - 快速了解,什么是CSS自定义属性?

这种代码很棒,但我们今天要讲的不止于此,它也存在一些问题。比如,媒体查询并非元素,因此不能用自定义属性来定义断点值(针对这个问题,CSS Working Group推出了env()查询的构想,但具体实施和浏览器支持可能还要等几年才能实现)。

不过没关系,我们继续讲我们能使用的。自定义属性也可以用来切换主题,比如你可以先定义一个基本主题,然后通过切换CSS的内容来完成整个主题的变更,浏览器会帮你完成一切的重渲染工作。
你可能会想到,某些Web应用内置了“夜间模式”就是这个例子的应用,在切换到夜间模式后,CSS文件并没有更换,而样式却大变样了。

<main>
      <nav class="site-navigation">
        <div>I love interwebs</div>
      </nav>
      <div class="site-footer">
        <label for="color-picker">Change color</label>
        <input type="color" id="color-picker">
      </div>
      <style>
        :root {
          --color: #fc4752;
        }
        
        body { margin: 0; padding: 0; }
        
        main {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100vh;
        }
        
        .site-navigation,
        .site-footer {
          padding: 12px;
        }
        
        .site-navigation {
          background-color: var(--color, red);
        }
        
        .site-footer {
          color: var(--color);
        }
      </style>
      <script>
        var colorPicker = document.querySelector("#color-picker");    
        colorPicker.addEventListener("change", function() { 
          document.documentElement.style.setProperty("--color", this.value);
      })
      </script>
</main>

代码中,使用拾取的颜色替换了原本的—color值,使得整个界面发生了更改。你也可以结合混合模式,比如使用Alpha通道色或png图片,这背后有无尽的可能性和乐趣。

dark - operation, design - 快速了解,什么是CSS自定义属性?

如今,CSS高度发展,很多网站的CSS全部使用自定义属性,甚至不再依赖第三方开发人员即可架设修改。除了变量之外,还有CSS模块这样的用法,通过模块或嵌套,允许你不再构建某些代码而是直接复用(比如很多字符CSS)。再比如,现在有很多CSS预处理器,在调试完成后,预处理器可以帮助你优化CSS,让它更快并获得更好的浏览器支持。
总而言之,不断学习知识是开发者成长的必经之路。

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注