CSS的渐变主要分布在 CSS Images Module Level 3 和 CSS Image Values and Replaced Content Module Level 4 两个规范模块中，其中Level 4 和 Level 3相比，新增了conic-gradient()和repeating-conic-gradient()两个属性。在CSS中，CSS的渐变相当于图像，我们可以使用线性渐变（linear-gradient()和repeating-linear-gradient()）、径向渐变（radial-gradient()和repeating-radial-gradient()）和锥形渐变（conic-gradient()和repeat-conic-gradient()）。事实上这三种渐变就相当于背景图像，而且渐变通常是一种颜色渐变到另一种颜色，但是CSS允许你控制渐变发生的每一个方面，从方向、形状到颜色，以及它们如何从一个渐变到另一个渐变。在这篇文章中，主要和大家一起探讨有关于CSS渐变相关的话题。

自从多列布局，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 属性来进行优化，却事与愿违，而且这几个属性一直令我感到困惑。为了彻底的能搞清楚这几个属性，我打算花一些时间来和大家一起探讨它们。如果你对这几个属性感兴趣的话，请继续往下阅读。

最近一直在思考一个问题：“在互动团队这么多年了，什么样的互动项目是有温度的呢？又应该如何构建有温度的互动项目呢”？想了很久，接下来以我自己角度的理解来尝试着回答，如果回答不对之处，还请路过的大婶拍砖指正。一直以来，自己都在探索Web可访问性相关的技术，不过大部分经验都是停留在PC端，而如今天是移动端的天下，所以想看看在移动端上如何来做Web可访问性。特别是在这样的互动项目（带有游戏化）又应该如何做Web可访问性？带着这样的问题，开始征程。但在2019年双11的时候，主互动多人PK项目上线了，公关部的同学看到支付宝的有无障碍方面的能力，希望我们的项目也能具备无障碍方面的能力。

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