在Web技巧的第五期中专门提到一个有关于CSS实现黑暗模式和高亮模式的技术方案。即使用新的媒体查询条件prefers-color-scheme的值dark和light来进行切换，这是从最底层也是最原生的解决方案，除此之外还可以通过CSS的混合模式属性来模拟。当然，除了期刊中提到的技术方案之外，还有其他的一些解决方案。今天我们就来一起学习一下，如何实现黑暗模式和高亮模式之间的切换。

好久没有整理有关于CSS方面的文章了，说实在心理还是痒痒的，但取舍有度。不过最近看了几篇有关于CSS的文章还是蛮有意思的。两篇是关于页面布局的，另外一篇是关于动画函数的。事实上，布局和动画在CSS中都是较为重要的部分。当然，今天要提的知识点并不是什么非常新的知识点，但也是有创意和创新的知识点。比如不通过媒体查询实现响应式布局，比如说容器单位构建强大的布局，比如说动画函数（缓动函数）的反转。听听这些是不是觉得非常有意思，如果你和我也一样，请继续往下阅读。

CSS自定义属性相关的教程在互联网上可以说是铺天盖地，从简单的介绍，到使用指南的整理，以及相关的经验之谈等等。时至今天而言，CSS的自定义属性是一项很成熟的CSS特性，在很多方面都可以给前端开发者带来诸多的益处。而且在现代浏览器中也得到了较好的支持。当然，虽然CSS自定义属性已得到很好的支持，但很多同学还在担心其是否可以运用于生产环境，甚至也有不少的同学还在排斥该特性。虽然如此，我还是想花点时间再和大家聊聊今天的主题。这个主题来自于@Ana tudor大神在去年年底发布的两篇文章，可以说是把CSS自定义属性运用的淋漓尽致。

变量对于CSS而言是这两年大家关注的一个话题。对于变量而言，最早是出于CSS的一些处理器语言当中，比如Sass、LESS之类的。随着CSS的发展，变量的概念也被引入到CSS中。时至今日，在CSS中的变量不被称作变量，而被称为CSS自定义属性。该特性让我们维护CSS、编写CSS变得更易。而事实上呢？在CSS最早的变量之一是currentColor。该特性也可以更好的帮助我们编写CSS和扩展CSS。那么今天我们来开另一个话题，currentColor和CSS自定义属性又有何差异呢？接下来的内容，我们就来一起探讨这方面的细节。currentColor和自定义属性之间还是存在一些有趣的区别。这两个都是CSS中动态属性的例子，但是它们的解析方式在一些非常重要的方面还是有所不同的。至于为何不同，接下来的内容将向大家揭开。

视窗单位一直都存在争议，部分原因是因为移动端浏览器对如何实现视窗单位有着自己的看法，这样就让本来简单的事情变得更加复杂化。一个典型的示例是：vw的计算是否要包含浏览器的滚动条？那么网站的导航或页面控件呢？这些应该算在计算中吗？还有一些设备本身的物理属性（比如iPhone X的刘海）是不容忽视的。

CSS自定义属性有很大的潜力可以改变我们编写和组织 CSS 的方式，并且在一定程度上改变 JavaScript 与 UI 组件的调用方式。我并不关心语法和它们的工作方式（为此，我建议你阅读“《是时候开始使用自定义属性》这篇文章。同时我想更深入地研究如何充分使用 CSS 自定义属性。

这里所说的绘制是指CSS图像，即使用HTML元素和CSS属性绘制的图像。它们看起来像是Adobe Illustrator绘制的svg，但它们是在浏览器中渲染出来的。我所见过的一些技巧是使用border、box-shadow和clip-path来绘制图像。如果你在Codepen搜索“daily css images”，你会发现有很多优秀的案例。我自己也画了一些，也做过一些极限挑战，就是在一个元素上使用background和尽量使用其他属性来绘制图像。

最近项目中使用到一个Loading效果，其实是一个很简单的效果，主要是因为这个Loading出现在不同的场景之中，而且大小也不一致。对于这样的效果，往往都会想通过组件的方式来处理，其出发点就是更易维护，易扩展。当然，这对于前端的同学而言并没有什么复杂性，也没有多少技术含量。不过我还是希望把这个过程记录下来。

假设我告诉你，我可以使用一个HTML元素和五个CSS属性实现下图的效果。而且这个效果没有使用任何一行SVG代码，也没有使用图像（只是在html元素上使用了background设置了一个背景图片，只是为了表明这个元素有一些透明的部分），同样也没有使用JavaScript代码。你一定会觉得很神奇，对吧！有好奇之心，对于我们做前端的同学而言，应该一直都有，只有这样才能做出很多我们一直以为实现不了的效果，比如接下来要介绍的内容。

记得@Lea Verou的《CSS Secrets》一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果。我也尝试着借助Vue的能力，把这种效果构建成一个Vue组件。我把这种效果定义为外切口。而今天将要聊的是与其刚好相反的一个效果：CSS如何实现内凹角的效果。