一直以来，我们熟悉的图片格式或者说到目前运用到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。

Icon图标在Web应用或Web页面中起着至关重要的作用。它除了起到一定装饰作用之外，还可以在不添加任何文本信息的情况之下向用户传达正确的含义。在当今的Web开发中，有许多不同的方式将图标运用于Web应用或Web页面上。同样，在社区中也有很多介绍Icon图标系统构建的方法，比如早期的雪碧图，字体图标以及SVG Sprites等。但是今天我想从不同的角度来和大家聊聊，如何基于React框架下构建属于自己的SVG图标系统。感兴趣的同学，欢迎继续往下阅读。

在Web的世界当中，SVG并不是什么新的语言，只不过早年前SVG在Web的应用并不太广泛。不过近年来，它在Web的应用越来越广泛。最为常见的就是一些Icon图标，复杂一点是一些矢量图（比如不规则的图形），甚至还可以使用SVG的滤镜、动效等功能，实现一些复杂的UI效果。不过这些并不是今天要和大家聊的主题，今天想和大家聊的是 SVG在前端框架中的应用，比如React框架。

在《图解SVG的核心概念》一文中，花了很长的篇幅和大家深入的探讨了SVG中的几个核心概念。有了这些基础概念之后，对于学习和理解SVG方面的知识会变得更容易。时至今日，设计SVG的应用软件也越来越多，比如我们熟悉的Adobe Illustrator以及近几年较为流行的Sketch和Figma等。不过今天，我想结合Sketch软件帮助大家更好的理解SVG的一些基础知识。如果您感兴趣的话，请继续往下阅读。

在SVG中，对于很多初学者或者使用SVG有一段时间的同学来说，有几个概念总是会相互混淆。比如，SVG的画布、视窗（Viewport）、ViewBox等。这几个概念对于学习或掌握SVG来说是非常必要的。在此我们一起来学习和了解这几个概念。

CSS中的单位有很多类型，不同类型单位计算方式也有所不同，特别是百分比（%）单位，它的计算和使用的属性有着直接关系。其中最为重要的是：百分比是一定要有其对应的参照值，也就是说，百分比值是一种相对值，任何时候要分析它的计算值，都需要正确的找到它的参照值。言外之意，CSS中的百分比单位值最终计算出来的值是可变的。在这篇文章中，我们主要来看看百分比单位在不同使用场景中计算方式。在CSS中能运用%值的属性很多，为了能让大家更好的理解使用%的规则，我们从最熟悉和最简单地属性开始。