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

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

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

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

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渐变相关的话题。

@property是CSS中新增的一个@规则的属性，是**CSS Houdini** 的 CSS属性和值 API Level 1 （CSS Properties and Values API Level 1）一个属性，可以用来自定义CSS属性，也被称为CSS的变量。为了能很好的区分CSS自定义属性，我更喜欢将其称为CSS Houdini的自定义属性（或变量）。你可能会好奇，它和原生的CSS自定义属性有何不同，又有何独特的特性，可以用来做什么？如果你感兴趣的话，请继续往下阅读。

在《图解CSS: 元素尺寸的设置》一文中主要介绍了W3C的 **CSS Box Sizing Module Level 3**的属性，即 用来设置元素大小的CSS的属性，比如我们熟悉的width、height、min-content等。在今年上半年（大约是2020年5月份）该规范新出了一个Level 4版本，该规范中新增了stretch，fit-content和 contain三个属性值，可以用于width、height等属性；新增了aspect-ratio属性用来指定容器宽高比；还有就是指定容器内部尺寸contain-intrinsic-size，有点像min-content和max-content能根据元素内容来决定元素大小。不过我们今天主要来和大家一起探讨其中的aspect-ratio属性，如果你感兴趣的话，请继续往下阅读。

告诉大家一个好消息，The Screen Fold API 已经进入 W3C规范的ED阶段 了。这个规范主要可以帮助我们以后为使用折叠屏设备用户提供一个更好的用户体验，即 为折叠屏设备在不同的折叠状态（“姿势”）提供相应的布局。这个规范主要由 三星（Samsung） 的 @Diego González 和 英特尔（Intel Corporation） 的 @Kenneth Rohde Christiansen 一起起草的，虽然目前只是处于规范的 ED 阶段，但这为我们今后在折叠屏设备上实现Web布局有了一定的理论依据。也许在未来，这里面的一些属性或API还会有所变动，但这并不影响我们去探究或参与讨论。或许说不定明年，或者后年你就在实际业务中需要面对折叠屏幕的适配需求。如果你感兴趣的话请继续往下阅读。

很多Web开发者更喜欢将 *CSS自定义属性 称之为 CSS变量。在2020年中社区中有关于CSS自定义属性的讨论到处可见，小站也有很多关于CSS自定义属性的相关教程，而且在很多Web应用中也可以看到CSS自定义属性的身影。虽然如此，但有很多开发者对CSS自定义属性了解的不多，甚至说不怎么理解，也用不好CSS自定义属性。这篇文章和以往介绍CSS自定义属性的文章有所不同，我从不同的角度来阐述CSS自定义属性，主要是希望这篇文章能让Web开发者更好地理解CSS自定义属性，以及如何更好的使用该属性。如果你对该话题感兴趣的话，请继续往下阅读。

过去一年来花了不少时间来研究CSS自定义属性相关的特性，而且在站上也发了多篇有关于CSS自定义属性相关的教程，其中有关于CSS自定义属性，也有涉猎CSS Houdini自定义属性相关的。但我想很多同学除了希望了解CSS自定义属性理论相关的知识之外还更想了解CSS自定义属性能做什么吧。在这篇文章中，我将整理一些有关于CSS自定义属性在实际开发中能做什么，并会在文章中提供相应的一些使用实际。希望能通过具体的实例帮助大家更好的理解和使用CSS自定义属性。