前端聚焦周刊：第 447 期

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

原文：Frontend Focus issue 447

翻译及校对：richshaw2015，Yully Che

🚀 刊首

▶ Google web.dev 直播开始了

It started yesterday but Google is running a three day (June 30-July 2) online event focused on the Web development community covering new tooling and techniques. If you want to watch the talks from yesterday, they’re all here.

来源：web.dev

当 Sass 和新 CSS 特性冲突

CSS has added plenty of cool new features (such as custom properties) of late, but they don’t come without their own problems. Here, Ana Tudor explains why she still finds preprocessors, like Sass, necessary.

来源：CSS Tricks

Chrome 85 中开发者工具的新特性

Style editing for CSS-in-JS frameworks, Lighthouse 6.0, support for new JavaScript features, and more.

来源：Jecelyn Yeen (Google Developers)

▶ Safari 和 WebKit 中针对开发者的新特性

A 40-minute video looking at the latest features and improvements announced at WWDC for Safari and WebKit, including updated web APIs, CSS and media features, JavaScript syntax, and more. This video looking at changes to the Safari Web Inspector is also worth a look.

来源：Jon Davis (Apple)

Firefox 78 的新特性：开发者工具及大量更新

Version 78 landed yesterday, bringing with it a new regex engine, updates to the ECMAScript Intl API, new CSS selectors, enhanced support for WebAssembly, and many improvements to the dev tools. These are the highlights, but if you want to dig into the full list of developer-facing changes, that’s here.

const lf = new Intl.ListFormat('en');
lf.format(["apples", "pears", "bananas"]):
// → "apples, pears, and bananas"
const lfdis = new Intl.ListFormat('en', { type: 'disjunction' });
lfdis.format(["apples", "pears", "bananas"]):
// → "apples, pears, or bananas"

来源：Florian Scholz, Harald Kirschner (Mozilla)

⚡️ Quick bits:

• Last week we linked to a report on how Safari may start blocking Google Analytics, turns out that isn’t quite right, as Simo Ahava explains.

• Related to the above item, here’s Apple’s own explainer on how tracking prevention tech works in WebKit.

• Chrome will be enforcing a 398-day validity period for TLS certificates issued after September 1.

• Apple declined to implement 16 Web APIs in Safari due to privacy concerns.

📙 文章、教程、观点

使用结构化的请求头提升 HTTP

Highlights the benefits of the new Structured Fields library — a collection of well-defined data types designed to help assure interoperability, remove some HTTP header headaches, and introduce some network level performance gains.

Example-Header: "blue"; websafe, "sort of red"; author="sue", "green"
Example-Header: people=(joanna stacy), places=("new york" "rome")

来源：Mark Nottingham

▶ 什么是 CUBE CSS？ (Smashing Podcast Episode 19)

Drew McLellan talks to Andy Bell, the creator of CUBE CSS, to find out how this CSS methodology differs from BEM, SMACSS, and OOCSS.

来源：Smashing Magazine podcast

使用 Chrome 的 UX 报告接口

Learn how to use the recently released Chrome UX Report API to get easy, RESTful access to real-user experience data across millions of websites (and compare your Core Web Vitals measurements).

来源：Rick Viscomi and Shane Exterkamp

Svelte 极速入门

A quick way to learn the core parts of JavaScript framework Svelte.

来源：Per Harald Borgen

如何动态获取页面上的所有的自定义 CSS 属性

Some fun DOM and stylesheet wrangling on display here.

来源：Tyler Gaw

你使用 SVG 格式的图标了吗？附现代浏览器指南

<link rel="icon" href="favicon.svg">

来源：Antoine Boulanger

Styling Layout Wrappers In CSS

来源：Ahmad Shadeed

🔧 代码、工具、资源

emoji-picker-element：现代的轻量级的 Emoji 选择器

See a live demo here. Some cool performance advantages for this: It’s a web component and it’s built on Svelte and IndexedDB.

来源：Nolan Lawson

Bootstrap Icons Alpha 5

The fifth and final alpha release of Bootstrap Icons, featuring 300 new glyphs (taking the total past 1,000 icons).

来源：Mark Otto, Jacob Thornton, and Bootstrap contributors

Tragopan：最小化无依赖的缩放库

Try it out here. Claims to work faster due to use of native browser scrolling for panning (left/right/up/down) and transform/scale for zooming.

<div id="viewport">
<div id="content">
    <!-- your pan/zoomable content here -->
</div>
</div>
<script>
const tragopan = new Tragopan({
    viewport: document.querySelector('#viewport'),
    content: document.querySelector('#content')
});
</script>

来源：team.video

Stitches: An Atomic CSS-in-JS Library

Another option in the CSS-in-JS world that includes abstractions for React, Vue, and Tailwind UI.

来源：Christian Alfoni

Checkboxland：用复选框渲染任意图形

This frivolous experiment is equal parts terrifying and impressive. It’s a JS library that displays animations, text, and arbitrary data using nothing but HTML checkboxes and, to be fair, they’ve presented it really well!

来源：Bryan Braun

如何区分邮件客户端

A crowdsourced list of email development techniques for singling out email clients and platforms.

[class^="apple-mail"] .foo

来源：Dylan Smith

💻 招聘

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

🗓 未来大事记

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