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

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动效的一些事情。

今天在Twitter上看到@argyleink在伦敦（LondonCSS 2020）CSS第四次活动中分享的一个话题《What's new with CSS?》。看了一下这个主题的PPT，里面有些新东西还是蛮有意思的，稍微整理一下和大家一起分享。如果你感兴趣的话，请继续往下阅读。

一直以来，我们熟悉的图片格式或者说到目前运用到Web页面或Web应用的图片格式主要是.jpg、.png、.gif、.svg，以及.webp等，其实能运用到Web上的图片格式除了这些之外，还可以是JPEG 2000、JPEG XR等。但最近社区有关于图片格式讨论最多的是AVIF图像，它将是新一代图像压缩格式，该格式（AVIF）图像质量与压缩文件大小的比率要优于我们熟悉的JPEG、PNG，甚至Webp图像格式。那么AVIF是什么样的图像呢？我们在Web开发中可以使用这种格式图像？如果可以，我们又将如何使用呢？今天这篇文章我们就来一起探讨这方面的知识，如果你感兴趣的话，请继续往下阅读。

早在去年五月份就在《聊聊安卓折叠屏给交互设计和开发带来的变化》一文中和大家初次聊了安卓折叠屏给交互设计和开发将会带来的变化。随着一年多来的变化，在Web开发中也有相应的API专门服务于双屏幕和折叠屏幕，有关于这方面的介绍，前段时间在《可折叠Web可能会给我们带来的变化》一文中和大家有过初步的介绍。虽然这两篇文章从不同的时间段，不同的角度阐述了折叠屏中的开发模式，但我想很多同学还是会因此感到困惑，甚至不知道如何为多屏幕或折叠屏幕这样的设备做相应的Web开发。那么今天，在这篇文章中抛开概念，只聊一些Web API，即 可用于双屏幕和折叠屏的Web API。如果你感兴趣的话，请继续往下阅读。

CSS的容器模块指的是CSS Containment Module，到目前为止主要分为 Level 1 和 Level 2两个版本。在容器模块中主要包含了CSS的 contain 和 content-visibility 两个属性。这两个属性都可以帮助我们提高Web页面的性能，那么它们是如何工作的？我们在实际项目中又应该怎么使用呢？如果你感兴趣的话，请继续往下阅读。

CSS的border-radius属性是属于 CSS Backgrounds and Borders Module Level 3 的一部分。随着CSS技术的不断变革，border-radius除了我们熟悉的物理属性之外新添加了逻辑属性。而且border-radius取值不同，绘制的圆角效果也会有所差异。当然，在很多开发者眼中，border-radius已经是非常简单的一个特性，但试问一下，你真的理解了该特性呢： border-radius取不同值会发生什么？ 取值为%值时相对于谁计算？嵌套会发生什么？半径重叠时会发生什么？如果你不能非常明确的回答上面提到这几个问题，那么接下来的内容就值得你花时间阅读。

前段时间和大家一起探讨了在React框架体系下如何使用SVG和 构建SVG图标系统。不管是引入.svg文件当作React组件，还是通过工程能力将.svg文件转换成React组件，它们之间都有一定的共性，比如说无法修改SVG部分的外观特性等。但在SVG的内联使用中，我们是可以通过CSS的特性或调整SVG元素标签的属性，可以自定义SVG外观，甚至还可以添加动效。因此，今天想和大家探讨如何在React中使用自定义（个性化）的SVG。