CSS-Tricks网站是一个非常优秀的网站，特别对于CSSer而言，该网站不断的在更新一些优秀的教程和技巧，为前端社区做出了具大的贡献。她一直是我的偶像，也是我学习的榜样，因为我从该网站上学到了很多新技术，让我在CSSer方面的眼界扩展的更大。今年1月份改版之后，整个社交媒体的响应非常的热烈，很多人都为新版赞赏。而我这次参加中国第五届CSS Conf大会之前和@裕波聊过，该和社区的同学聊什么样的话题呢？经过讨论下来，要不就聊聊CSS-Tricks网站这次改版运用的一些新特性，这些新特性又为用户体验带来什么样的改变，甚至为前端开发者又带来什么样的改变？所以借此机会，以我自己的视角来聊聊相关的话题。

从这周开始，我将会把每周看到有关于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中都是较为重要的部分。当然，今天要提的知识点并不是什么非常新的知识点，但也是有创意和创新的知识点。比如不通过媒体查询实现响应式布局，比如说容器单位构建强大的布局，比如说动画函数（缓动函数）的反转。听听这些是不是觉得非常有意思，如果你和我也一样，请继续往下阅读。

这两天票圈被@Winter大大在极客时间平台推出的《重学前端》刷屏了，而且在微信群和知乎上都有相关讨论。讨论中各种声音都有，可算是热闹了。今天我也凑个热闹，来聊聊我对这个课程的看法。

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中动态属性的例子，但是它们的解析方式在一些非常重要的方面还是有所不同的。至于为何不同，接下来的内容将向大家揭开。

今年花了不少的时间在学习DOM相关的知识，经过这段时间的学习，可以通过一些JavaScript的API操作和处理Web页面上的HTML元素。在Web中除了DOM之外还有另外一个对象模型：CSS对象模型（即CSSOM）。或许你已经在项目中已经用过了，只不过没有意识到这一点而以。今天这篇文章中，我们主要来一起探讨有关于CSSOM相关的特性。

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