这一期中我们主要来聊聊全屏的事情。对于全屏的布局，大家可能首先想到的是100%（或100vw）来实现，但如果你要在一个限宽的容器中实现一个全屏效果呢？比如说，一个Banner区全屏显示。类似这样的效果在PC端是非常常见的一个效果。可能会有很多同学会说，这样的效果有什么好聊的，不是非常简单的Layout吗？其实还是有点事情可聊的。如果你感兴趣，不仿继续往下阅读。

自从响应式设计的概念的提出至今也有近10年的时间了，虽然不乏看到响应式设计的身影，但还是有很多同学不太了解什么是响应式设计或响应式设计中常会碰到的问题以及如何解决。特别是流式（自适应）排版和响应式设计难以分清楚，但这两种排版都为我们提供了很多机会来更好的设计Web页面，而且更能完善阅读体验，但与此同时，也带来一些潜在的问题，比如字体大小无法控制，图片等比缩放难处理，甚至还有一些潜在的问题，比如可访问性问题。在这一期中，我们就来聊聊排版中的一些技巧，希望大家能喜欢。

前段时间在项目使用div元素模拟body时使用了will-change时触发了一个奇特的问题，最终以删除will-change而解决。那么这一期中我们先来聊聊will-change、transform和层有关的事情，然后再和大家一起分享几个在Web中的JavaScript相关的API，比如全屏API、MediaStream API、MediaRecorder API、scrollIntoView API 和 分享 API等。感兴趣的同学请继续往下阅读。

这一期中我们将围绕着Web中的font来展开。在现代Web中除了能使用font-family属性给Web应用指定字体之外，还有其他一些用于字体的特性，比如@font-face可以加载非系统的字体，字体变体属性font-variation-*让Web上排版和印刷上排版之间的差距在逐渐拉小，font-display属性来决定非系统方面字体的加载策略，提高性性能，font-palette用来选择字体配色，@font-palette-values自定义字体配色等。如果你感兴趣的话，请继续往下阅读。

任何一门语言都有自己的小技巧和新特性，比如Web的三大基石HTML、CSS和JavaScript，在各自的社区中总是有同学在不同的时候梳理一些相关的新特性和小技巧。让这些特性更好的服务于社区，尽量的让大家更好的理解和掌握。另外一个目的是，让更多的同学能把这些新特性运用于自己的项目中。在这一期中，将围绕着JavaScript的一些新特性来展开。希望对大家有所帮助。

前段时间在微信群聊了一个动效的话题： 鼠标悬浮的时候，三个区块依次显示；鼠标移开时，三个区块反向依次消失。如果使用CSS的triansition是否可以实现？借此话题，在这一期中就围绕着Web的动效来展开。Web动效不管是从设计到实现都有很多的话题可聊，比如，动画的设计、交互、实现等等。甚至是实现的技术方案或工具。

上一期咱们围绕着Web动画展开，其中有的动画对部分用户群体会造成不良的反应，会引起癫痫。为此，为了避免这种现象出现，可以使用条件CSS中@media中的prefers-reduced-motion条件来做处理。除此之外，prefers-reduced-motion在<picture>元素中还有一些小技巧，可以帮我们做一些其他有意义的事情。这一期，就从这个特性开始讲起。

上个周末因为自己要写PPT而没来得急整理，所以又错过了一期。在这一期中，大部分内容将围绕着@Bill Mei的《Top 10 most deadly CSS mistakes made by new and experienced developers》文章中提到观点来展开。这里面的一些观点虽然不完全对，但还是有相应的参考价值，取舍由大家自己来决定。如果你在这方面也有相关的经验，也欢迎在下面的评论中分享。另外在后面会简单的整理几个最近觉得有意思的新东西。感兴趣的同学，请继续往下阅读。

上周又断档一期了，这周不能再断了。这两天翻阅了@hj_chen在新家坡组织的Talk.css沙龙中的一些PPT，有些内容还是蛮有意思了。国外氛围真不错，其实国内也有不少同学在搞沙龙。前面社区活动也不少，这周参加了腾讯Live前端大会。下个月@裕波在成都举办第五届FEDay。

自 @Ahmad Shadeed 去年在博客上发表了《The Just in Case Mindset in CSS》的时候，我自己也有一种冲动，也想整理一篇这方面的文章，但一直未动笔（说实话，整理一篇这样的文章真的很费时间）。去年年底在内网看到 @克军 老师发了一篇有关于“防御式CSS开发”的文章（外网 @Ahmad Shadeed 同样发了一篇有关于"防御式CSS开发"）之后，这种冲动就更大了。我想我也应该写一篇这方面的文章。希望大家能从文中获益！