前端聚焦周刊：第 435 期

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

原文：Frontend Focus issue 435

翻译及校对：richshaw2015，Yully Che

🚀 刊首

Firefox 75 中可能影响开发者的变化

Version 75 of Firefox dropped yesterday, bringing with it support for lazy loading, additions to the Web Animations API, implementation of the min(), max(), and clamp() CSS functions, plus a handful of accessibility wins. All of the user-facing features are detailed in the release notes here.

来源：Mozilla

为什么有些 HTML 元素废弃了

An in-depth look at what factors influence obsolete and deprecated elements (such as <acronym> and <strike>), and a discussion of the subtleties around elements that seem like they should be deprecated but aren’t.

来源：Ryan Grist

Stack Overflow 是如何适配黑暗模式的

Building a ‘dark mode’ for a site as complex as Stack Overflow isn’t just about switching some colors around in the CSS. Here’s the process they went through.

@2x @2x-1.png" alt="">

来源：Aaron Shekey

Version 2 just launched, details here. Tests now run isolated in web workers, ability to save and fork to/from local storage, works cross-browser, and more.

来源：luke jackson

探索 CSS 的极限

This is a bit of a history lesson on CSS, specifically dealing with how some in the community have done things with CSS that at one time nobody thought would be possible.

来源：Rina Diane Caballar

📙 文章、教程、观点

Web 联系人选择器 API 介绍

A look at the new Contact Picker API, a Chrome only API (for now) that allows web apps to resemble native ones in allowing users to select entries from their contact lists and share the details with a web page.

来源：Phil Nash

使用 OffscreenCanvas 渲染图表

Rendering charts can be an intensive operation for browsers, but what if you could delegate such work to a Web Worker? This post looks at what performance improvements you can realistically expect.

来源：Chris Price

▶ Hacking Digital Style Guides for Accessibility: Type, Colour, Imagery

A mindful primer on how to approach certain accessibility considerations in your next project.

来源：Tatiana Mac

▶ How to Sing a Song with the Speech Synthesis API and `async`/`await`

A fun little project if you want to play along.

来源：Jad Joubran

让 JavaScript 和 CSS、Sass 通讯

Despite being bedfellows for years, sharing data between JavaScript and CSS has not always been the simplest task.

来源：Marko Ilic

用 CSS 创建加载文本动效

A neat little effect, getting text to move up and down like a wave.

来源：Cody Pearce

10 Headless CMS Options for your JAMstack Website

A detailed and comprehensive overview of the headless CMS landscape that, including pros and cons of each option. (FYI, we’ve launched a new JAMstack focused newsletter if you dabble in that world.)

来源：Nebojsa Radakovic

使用 CSS Flexbox 居中内容

Fairly basic for those well-versed in Flexbox, but a great start for beginners (includes an accompanying screencast).

来源：Chris Sevilleja beginner

🔧 代码、工具、资源

Accessible UI Component Libraries Roundup

A good list of options for libraries that are built with accessibility in mind.

来源：Raghavendra Satish Peri

MVP.css：最小化的 HTML 样式

No class names, no frameworks, just semantic HTML. 7kb.

来源：Andy Brewer

Meanderer: A Micro-Library for Scaling CSS Motion Path Strings

Generates scaled (i.e. resized proportionally) CSS offset-paths, which is a feature that allows you to animate an object along a custom path.

来源：jhey tompkins

A CSS ‘Grab n Go’ Visual Editor

Generates valid CSS (or SASS, SCSS and LESS) code for border-radius, border, box-shadow, text-shadow, filter and transform properties.

来源：Veliov Group

A CSS Animation-Delay Demo

Consider this a little interactive guide to the different effects you can achieve with delays and variables.

来源：Jhey Tompkins codepen

Alata (or on Google Fonts)

Designed by Spyros Zevelakis & Eben Sorkin, this low contrast sans-serif font features geometric styling, drawing influence from early 20th C poster lettering and Greek mono line letters. Supports over 130 languages.*

💻 招聘

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

🗓 未来大事记