这一期中我们主要来聊聊全屏的事情。对于全屏的布局，大家可能首先想到的是100%（或100vw）来实现，但如果你要在一个限宽的容器中实现一个全屏效果呢？比如说，一个Banner区全屏显示。类似这样的效果在PC端是非常常见的一个效果。可能会有很多同学会说，这样的效果有什么好聊的，不是非常简单的Layout吗？其实还是有点事情可聊的。如果你感兴趣，不仿继续往下阅读。

很多场景我们是需要借助JavaScript相关的API来帮助我们处理Web页面中的CSS。CSSOM（CSS Object Model）中提供了一些JavaScript的API处理CSS。除此之外，还可以通过JavaScript来操作DOM元素中的attribute、样式和类来操作CSS。由于JSX和无数JavaScript框架等概念的出现，使得JavaScript API与DOM交互变得越来越流行，但是对CSS使用类似的技术似乎变得没有那么多人关注。当然， CSS-in-JS解决方案是存在的，但是最流行的方案都是基于编译的，在生产中输出CSS时不需要任何额外的运行时。这当然对性能有好处，因为使用CSS API可能会导至额外的重游，这使得它和使用DOM API一样需要。但这并不是我们想要的。如果我告诉您，您不仅可以操作DOM元素的样式和CSS类，而且还可以创建完整的样式，就像使用HTML和JavaScript一样，那会怎么样呢？

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

最近在项目中使用overflow属性的时候踩到了几个以前从未踩过的坑。在填坑的过程中发现，原来使用overflow的时候还是有不少的坑，而且这些坑都是因为自己对该属性不甚了解所造成的，或者说是和其他CSS属性在一起使用所触发的。那么在使用overflow应该怎么使用才能避开这些不必要的烦恼呢？或者说在使用overflow不应该和哪些属性结合在一起使用呢？为了解开这个迷我重读了有关于overflow的规范。今天将相关的理解和新的认知小结一下与大家共享，希望对于大家在实际使用的时候能尽可能的避开这些坑。

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

前面花了很长的篇幅在《探索CSS Masking模块：Clipping》和《探索CSS Masking模块：Masking》两文中分两部分详细介绍了CSS Masking Module Level 1中的Clipping和Masking的基础知识和相关特性，并且使用一些简单的小示例向大家演示了Clipping和Masking如何使用。

探索CSS Masking模块主要分为Clipping和Masking两个部分，在上一节中，花了很大的篇幅介绍了Clipping相关的特性，今天接着来学习或者聊聊Masking相关的知识点。从上一节中我们知道，在Masking中有一个遮罩层，这个遮罩层是一个图像，该层也被称为遮罩模式，主要有高亮和Alpha两种模式。其中Alpha模式带有alpha通道的图像，alpha通道包含在每个像素数据中的透明信息。最简单的示例就是带有黑色和透明区域的PNG图像，其中黑色部分将会显示，透明区域内容将会被隐藏。

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

最近业务中需要实现一些镂空的效果。看到这些效果我最初想到的是通过CSS的mask和clip-path来实现，甚至还想结合SVG相关的特性。为了验证自己的一些想法，开始着手撸码，但问题来了，在撸码的过程中，我发现自己对于mask的相关特性理解的还不够透彻。因此重新阅读CSS Masking Module Level 1规范中的文档和相关教程。才发现原来CSS Masking是如此的强大。下面是我自己对CSS Masking模块的一些理解，希望对大家学习和了解该功能模块有所帮助。

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