从这周开始，我将会把每周看到有关于CSS有意思的技巧整合成一篇文章。将会在每周的星期天整理发布，每篇文章中将会以CSS的技巧为主线进行介绍，但每个技巧不会深入的阐述。主要目的给对CSS感兴趣的同学增强CSS的眼界，扩大知识面和使用场景。同时也希望能帮助大家将一些CSS技巧运用到实际项目中，另外提高自己在这方面的技术。如果感兴趣的话，可以持续关注，或者有你相关的技巧也可以和我们一起共享。

今天介绍了一些小技巧，主要涉及到响应式图片的处理、纵横比属性aspect-ratio、嵌套选择器、自定义属性配合计数器动态生成内容、借助HTML5的<details>和<summary>元素来做一个可点击的下拉菜单，滚动特性以及JS-in-CSS。其中aspect-ratio、 嵌套选择器和Js-in-CSS是较新的特性，特别是后两者，应该是最有为意思的部分。

CSS的mask（遮罩），有时也称CSS的蒙层，最早是苹果公司2008年提出的，并且添加到webkit引擎当中。遮罩提供一种基于像素级别的，可以控制元素透明度的能力，类型于png24位或png32位中的alpha透明通道的效果。2012年被纳入到W3C的草案中，但这个版本与苹果公司提出的版本是不同的。时至今日，该规范已经有多个版本，现在是CSS Masking Module Level1版本，属于TR阶段。据Caniuse.com统计来讲，该属性得到的支持度还是有一定的限制，仅部分属性被浏览器支持。虽然如此，但该属性还是非常的有意思，值得大家花点时间去探究，比如今天要聊的mask-composite属性就是非常有意思的一个属性。

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

在CSS的世界中，总是有很多实验性的属性先行，正因为这些先行者在不断的探索新的特性，才让CSS越来越强大。而这些实验性的特性并没有立马得到众多浏览器的支持，为了能让这些实验性特性能在部分支持的浏览器上运行，同时又能让不支持的浏览器做相应的降级处理。那么我们就会需要根据相关的条件进行判断。这也就是条件CSS的由来。

CSS 的值和单位是 CSS 另一个独立功能模块，到目前为止，该模块已到了 Level 4 阶段（CSS Values and Units Module Level 4）。今天我们就来聊聊这个模块里的内容。对于 CSSer 来说，对于 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中动态属性的例子，但是它们的解析方式在一些非常重要的方面还是有所不同的。至于为何不同，接下来的内容将向大家揭开。

在《理解CSS的逻辑属性和值》一文中，我们对CSS逻辑属性和值（CSS Logical Properties and Values Level 1）有所了解。事实上对于广大前端开发者而言，自从Web诞生以来，就习惯了使用用物理CSS属性。比如上、右、下和左，映射到CSS的盒模型就是margin、padding和border的top、right、bottom和left设置元素。但随着CSS的书写模式特性的出现，上、右、下和左的概念在某种程度上已经失去了其意义。

大家都知道，CSS只是一个声明式的语言，主要为标记语言服务。很多程序员鄙视它，有一部分原因是CSS并不像其他程序语言一样，具有一些逻辑能力以及函数功能等特性。随着CSS的不断变革，其慢慢地也变得越来越强大。时至今日，CSS中也有具有函数和运算相关的能力。比如我们今天要聊的CSS函数。在CSS Values and Units Module Level 4中把函数标记（Functional Natations）单独提取出来做为该规范的一部分。而这部分主要介绍了一些具有数学计算能力相关的属性值，比如大家熟悉的calc()和不怎么熟悉的min()和max()。而我们今天要聊的是CSS中的函数，其中就包括这些部分。如果大家感兴趣，欢迎继续往下阅读。

在Web页面或应用程序中都可能会有按钮的出现，甚至很多时候链接的样式看起来也像个按钮。那么我们应该怎么来美化按钮的样式呢？在这篇文章中，我们一起来聊聊按钮样式应该怎么才能更好的控制。