自从多列布局，Flexbox布局和Grid布局得到浏览器支持之后，就可以使用这些特性来实现瀑布流的布局，但这些布局或多或少都存有一定的缺陷。前两天看到CSS 布局模块Level 3已经进入到 ED（Editor’s Draft）阶段，该规范就是为瀑布流布局而生的，这个模块中介绍了瀑布流布局，并且作为CSS网格容器的附加布局模式。接下来和大家一起来一探其究竟，另外在文章末尾顺便介绍了如何给不支持瀑布流布局的降级以及如何使用CSS Houdini来实现瀑布流布局。感兴趣的同学，请继续往下阅读。

这一年多来一直在探讨Web可访问性相关的知识，在小站上也陆续输出了一些有关于Web可访问性相关的技术文章。构建Web可访问性应用或页面涉及到的知识领域绝不仅是某个方面，从设计开始，到Web开发中的HTML、CSS、JavaScript各方面都有，甚至领域还可以更小，比如颜色，工具，ARIA以及一些属性的使用。但是对于很多从未接触过Web可访问性开发的同学来说，他还是会感到困惑。那么今天这篇访问就是来帮助开发者解惑的。因为文章主要就是和大家一起探讨，Web开发者可以根据下面提到的内容或者说手段来对Web可访问性进行优化。如果你对这方面感兴趣的话，请继续往下阅读。

很多Web开发者一直都认为使用WAI-ARIA是增强Web可访问性的最佳方式，但是对于了解或者说经常构建可访问性Web应用的开发同学来说，WAI-ARIA其实对于Web可访问性来说是一种“毒药”。这么说是有一定道理的，即：“滥用WAI-ARIA还不如不使用”。这句话的意思是说，如果你对WAI-ARIA不了解，随意使用的话不但不能给Web可访问性带来好处，反而会让Web可访问性更差。你可能会为这种观点感到困惑，如果真是如此，那么接下来的内容你很有必要阅读。

Web动效在Web应用中所起的作用就不说了。有人说，Web动效可以给Web起到锦上添花效果，也有人说，Web动效可以增加用户的粘性和吸引力。就目前来说，在Vue框架体系下，可以使用<transition>组件来构建Web动画效果，其实在React体系下，也可以使用类似的方式来给Web元素添加动画效果。接下来，就和大家一起探讨，在React框架如何将CSS的trasition和animation运用到元素中，让Web元素动起来。如果你对这方面知识感兴趣的话，欢迎继续往下阅读。

今天要和大家聊的leading-trim既是一个简单的属性，但又是一个复杂的体系。为什么这么说呢？如果我们从CSS属性的角度出发，那他是一个简单的属性，我们只需要知道他有哪几个值，每个值的作用是什么，这样就有实现需要的效果。如果我们从排版的角度出发，那他又是一个复杂的体系，因为要彻底的掌握他们，我们需要掌握的东西太多，有设计方面的，有文字排版方面的，也有CSS的其他属性等。但是，leading-trim的确能帮助我们Web开发者解决一些排版上的烦恼，特别是行与行间距方面的烦恼。如果你对这方面感兴趣的话，欢迎继续往下阅读。

众所周之，React目前是前端领域最为流行的JavaScript框架之一，很多Web开发都是基于React进行Web开发。但据 WebAIM Million统计分析可得知“使用React框架开发的Web应用或Web页面就可访问性方面而言，其错误要比一般的主页多出5.7%”。而且在社区中普遍认为，基于React开发的Web应用对于Web可访问性本来就差，而且开发者无法很好的基于React框架开发出具有可访问性的Web应用。事实上这是一种错误的认知，基于React能不能开发出具有可访问性的Web应用和React本身并没有太多的关系，因为开发一个具有可访问性的Web应用更多的是和HTML和WAI-ARIA有着紧密的关联。换句说，基于React开发具有可访问性的Web应用，应该注意些什么，以及如何更好的开发更具可访问性的Web应用。这是今天要和大家一起聊的话题。

近一年来一直以来都在致力让手淘互动项目更有温度，虽然借助自己所掌握的有关于A11Y（Web可访问性）相关的理论知识，让互动项目更具可访问性，但其中有很多细节还是有待于完善，特别是焦点冗余部分，更是令我感到头痛。为了优化这方面的细节，我尝试着通过 WAI-ARIA 中 aria-label、 aria-labelledby 和 aria-describedby 属性来进行优化，却事与愿违，而且这几个属性一直令我感到困惑。为了彻底的能搞清楚这几个属性，我打算花一些时间来和大家一起探讨它们。如果你对这几个属性感兴趣的话，请继续往下阅读。

CSS媒体查询（CSS Media Queries）是CSS基本特性之一。它的作用就是让我们在相同的HTML基础上可以以不同的CSS实现适配各种终端的UI效果（比如，桌面端、iPad、双屏幕、折叠设备和移动手机等）。也就是说，我们可以为它们（不同的终端设备）使用相同的HTML，而不是为智能手机维护一个网站，为笔记本电脑、台式机维护另一个网站。但是它们是如何工作的，有哪些是你应该使用的呢？这就是我们接下来要和大家一起探讨的。

变开动效他有一个专业名词，叫作 Morphing Animation，简单地说从一种图形平滑过渡到另一张图形，也就是把两个（或多个）图形在变化时间上作线性的内插。而这种动画效果在Web上的使用也越来越频繁，比如说，两个状态下图标变形有一个动画效果。既然变形动效越来越受青眯，那么今天就来和大家聊聊如何创建变形动效的效果。

clip-path是CSS属性之一，只不过很多同学都担心浏览器对他的兼容性，因此不怎么使用该属性。其实clip-path已经得到很好的支持，可以说现在主流浏览器对他的支持已经很好了。事实也是这样，就我自己而言，早在去年中开发的项目就已经有clip-path的身影了。在CSS的世界中，clip-path是一个很有意思的属性，他可以帮助我们绘制很多不同规则的图形（除了常见的圆形，椭圆形，矩形，三角形等），而且结合CSS的transition或animation的话，clip-path能帮助我们实现一些很有意思的动画效果。接下来，就和大家聊聊使用clip-path制作Web动效的一些事情。