在Web页面或Web应用程序的开发中，有些元素是需要被隐藏起来。让一个元素隐藏起来的实现方案会有很多种，比如说在《图片替换文本CSS方法》一文中所聊的图片替代文本的方案都适合于元素的隐藏，只不过每种不同的技术方案实现的原理和最终呈现给用户的渲染方式会有所不同。如果你是一个有情怀的前端开发者的话，在开发应用的时候很多时候还会考虑无障碍（可访问性）设计相关的细节。那么隐藏元素的不同技术手段对读屏软件之类的也是有所不同的。在这篇文章中，我们就一起来聊聊Web中隐藏术。

很多场景我们是需要借助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一样，那会怎么样呢？

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

前面花了很长的篇幅在《探索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的mask和clip-path来实现，甚至还想结合SVG相关的特性。为了验证自己的一些想法，开始着手撸码，但问题来了，在撸码的过程中，我发现自己对于mask的相关特性理解的还不够透彻。因此重新阅读CSS Masking Module Level 1规范中的文档和相关教程。才发现原来CSS Masking是如此的强大。下面是我自己对CSS Masking模块的一些理解，希望对大家学习和了解该功能模块有所帮助。

很多年前，前端同学都觉得PC端的适配（兼容处理）难，都认为移动端的时代适配会容易得多，也无需考虑那么多的事情。事实并非如此，移动端的时代同样面临着各种适配的处理。特别是刘海机的出现，前端需要考虑刘海机适配。而如今随着三星Galaxy Fold和华为Mate X折叠屏手机的面世，前端同学接着又要处理折叠屏幕的适配。就我们团队而言，在上个月就接到相关的通知，需要处理折叠屏的适配。碍于真机难得，前段时间就通过模拟机，做了一些简单的适配测试，不过幸运的是，今天拿到了真机（三星Galaxy Fold) ，写了一个简单的Demo，做了一些适配的测试。特此将相关心得和大家一起共享，希望对大家有所帮助。

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

Vue使用的模板语言是HTML的超集。在Vue的模板中除了使用插值（{{}}）之外还可以使用指令。在上一节中，我们主要学习和探讨了Vue模板相关的知识，在这一节中，我们将一起来了解Vue中的指令。在Vue中，指令基本上类似于添加到模板中的HTML属性。它们都是以v-开头，表示这是一个Vue特殊属性。Vue中的指令主要分为内嵌的指令和自定义指令。另外有一些指令还带有相应的修饰符。接下来我们主要围绕着这些点来展开，咱们先从内嵌的Vue指令开始。

Web颜色是Web应用程序或页面中不可或缺的一部分，对于CSS处理颜色总是非常的简单和单一。但很多时候我们需要一些特殊的效果，比如随机色等。那么我们就需要借助JavaScript来完成。在学习如何使用JavaScript操作CSS颜色之前，我们需要对CSS如何设置颜色有一个基本的了解。CSS设置颜色模式有多种，最为常见的模型有：RGB和HSL。我们先来看一下这两种颜色模式。