前端聚焦周刊：第 420 期

这里是 Frontend Focus 的中文翻译项目，每周在 Oh My RSS 平台首发。

如有翻译错误或国外优质文章推荐，欢迎提交 issue。

原文：Frontend Focus issue 420

翻译及校对：richshaw2015，Yully Che

🚀 刊首

Z’s Still Not Dead Baby, Z’s Still Not Dead

这五个有趣的 CSS 属性（例如 background-blend-mode）可以给你的设计增加层次感和丰富性。

来源：Andy Clarke

Firefox 71 年末版本

增加了大量的开发者工具，包括 Web 套接字消息检查器、控制台的多行编辑器模式、事件日志以及网络面板的全文搜索等。

来源：Chris Mills (Mozilla)

Chrome 79 发布：支持冻结 TAB、后退缓存、诸多安全特性

最近发布的 79 版本支持钓鱼网站检测、实时的安全检测并内置密码检查工具。Google 的视频有完整介绍。

来源：Catalin Cimpanu

2020年值得关注的六种 Web 性能技术

作者认为不要对 5G 和 HTTP/3 抱太大希望，因为还有其他一系列技术将在未来十二个月对 Web 性能产生更大影响。

来源：Simon Hearne

雇佣残障人士进行可用性测试

本篇讲述了可用性测试方面的挑战，以及如何通过雇佣残障人士来改善测试流程。

来源：Becky Gibson

2019 Web 开发“出现日历”合集

这个是由开发人员发起的活动，即在12月的每天都发表一篇文章，直到圣诞节到来。

📙 文章、教程、观点

用于黑暗模式的 SVG 图标属性 prefers-color-scheme

Chrome 将很快支持 SVG 格式的 favicon，这意味着您将能够使用 CSS 和 prefers-color-scheme 生成媒体查询规则来适配系统的黑暗模式。这是一点演示。

来源：Thomas Steiner

不使用库的精致滚动体验

本篇讲述了在不借助第三方库的情况下如何控制网页的滚动行为，即使用相对较新的 CSS Scroll Snap 规范。

来源：Michelle Barker

▶ 在浏览器中构建响应式布局

Una Kravets 讲解了如何使用浏览器来帮助构建响应式布局。

来源：Google Chrome Developers

“Link In Bio” Is A Slow Knife

Thoughts on how the ‘link in bio’ phrase (often seen over on Instagram) can be seen as a subtle, and yet pervasive, attempt to “kill the web”.

来源：Anil Dash

以 Web 用户和开发者身份反抗 Google AMP

开发者社区持续反对 AMP，这篇文章是避免使用它的快速指南。

来源：Marko Saric

DNS 的工作原理

一个有趣的小漫画，它以直观的方式解释了输入网址后发生的事情。

来源：DNSimple

理解 CSS 分辨率和设备分辨率的区别

来源：Elad Shechter

使用 Netlify CMS 搭建开放授权的 JAMstack 站点

来源：Brian Rinaldi

🔧 代码、工具、资源

noUiSlider：支持多点触摸的轻量级滑块

其相当强大和灵活，查看完整示例。

来源：Leon Gersen

OpenLayers：高性能的前端地图库

在页面上放置动态地图，支持渲染不同数据源、矢量数据图层、标记等。视情况支持 Canvas 和 WebGL。

来源：OpenLayers

Falco：监视、分析和优化网站工具

这个开源的性能工具可以自动审计您的站点，并提供 WebPageTest 的结果或报告。

来源：Theodo.FR

谁可以使用您的颜色组合

色彩对比度会不同程度地影响有视觉障碍的用户，这个工具可以引起人们对此的关注和了解。

来源：Who Can Use

ResponsiveViewer

用于测试响应式网站的 Chrome 扩展，可在页面同时显示多个屏幕。

来源：skmail

💻 招聘

译者注：如需了解，请查看原文。

🗓 未来大事记

译者注：如需了解，请查看原文。