前段时间看到群里有不少同学在讨论，目前阶段哪些交互行为可以直接使用CSS来实现，而不再依赖JavaScript。后来想想，这应该也是一个值得我们探讨的话题，后来一想，要不这一期我们就来聊聊，哪些交互行为，可以不再依赖JavaScript，直接使用CSS来实现。

在这一期中咱们一起来聊聊HTML5中的表单。说到HTML，可能很多同学会说，HTML5有什么好聊的，不就是一些HTML的标签吗？事实上并非如此，就拿HTML中的表单中的input元素为例吧，input元素及其相关属性和类型的支持情况都会因为浏览器的不同而存在较大的差异。甚至在支持特定功能的各个浏览器之间，它们的行为也会有所不同。那这一期中，就来围绕着input说点事。

在上一期中我们提到了CSS的混合模式算法和滤镜相关的知识，正好在这周周会老板也提到滤镜相关的特性。主要使用滤镜来改变颜色和使用混合模式来让视频变得更有意思。那在这一期中，我们接着来聊CSS滤镜对颜色的处理以及滤镜对图标（图像）的处理。除了滤镜来改变颜色相关的知识之外，还会向大家介绍有关于CSS中Clipping的相关运用。

这是Web技巧系列的第五期，在这一期中围绕着CSS的混合模式、滤镜、渐变、暗黑模式和可动的CSS网格展开。介绍了混合模式的计算原理；如何通过滤镜实现一些特殊效果，比如Gooey效果；如何使用CSS来实现macOS的暗色模式和亮式模式之间的切换以及怎么来实现一个可动的网格，并且借助其实现一些常见的交互效果，比如off-screen。最后希望这篇文章对大家有所帮助。

在Web技巧第三期中，我们了解到了排版中断字连接符、原生的延迟加载、不规则阴影处理、Sass颜色函数和CSS自定义属性的结合以及CSS中对齐等知识点。在这一期中，我们将围绕着CSS中的布局来展开。在这一期中将会向大家介绍CSS Shapes给布局带来的变化（Web艺术）、在Flexbox和Grid布局中如何控制最后一行的剩余项以及如何使用Flexbox和Grid实现响应式布局、CSS怎么实现瀑布流布局、CSS怎么构建对角容器和两个还未得到支持的CSS特性：subgrid和带两个属性值的display。

又到了每周CSS技巧发布的时间了，在正式发布这期之前，先说一下，从这期开始将以Web技巧的标题来发布，因为今后发布的内容不再局限于CSS的方面，或涉及到Web的其他技术或特性。原则是同样的，将会以自己在本周看到的一些有关于Web技术有意思的知识，将每个知识点整理成文来发布。在上一期中，主要围绕着CSS的border来扩展故事。那么这一期将会涉及到哪些Web知识点呢？感兴趣的同学请继续往下阅读。

在写第一期有关于CSS技巧的时候立下过一个Flag，即每周末发布一篇有关于自己在本周看到过有关于CSS的小技巧(有意思的CSS)。但由于上周末去深圳参回第五届CSS Conf，没有如期整理发布，所以今天整理了发出来。在这期的小技巧中，大部分是与边框相关的故事。希望大家会喜欢。

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

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

CSS中的级联(cascade)在同一时间可谓是幸福的，也可以说是痛苦不堪的。通常能工作得非常好，但有问题的时候，也让人们都很激动，甚至事件中也离开不CSS。我们所涉及的不仅是CSS的级联也还涉及到CSS的权重。不是说碰到特殊问题才显得困难，可以说CSS的困难无处不在。在这篇文章中，我将通过一些示例来向大家展示一些CSS的小技巧，让你知道如何使用CSS的级联能变得更友好，也减少一些不必要的需求，从而也减少权重上遇到的麻烦。