前端聚焦周刊：第 430 期

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

原文：Frontend Focus issue 430

翻译及校对：richshaw2015，Yully Che

🚀 刊首

为什么 GOV.UK 设计团队更改了数字输入类型

Highlights how the <input type="number"> element can be somewhat problematic in some scenarios, and offers up a solution.

来源：Hanna Laakso

From September 1, any new certificate valid for more than 398 days will be rejected by Apple’s Safari browser. While this is a Safari only move for now, if this catches on it might affect how you manage your TLS certificates.

来源：The Register

进化的编码规范

Covers the significance of establishing code guidelines and standards at the beginning of a project, and the importance of evolving those standards as a project progresses.

来源：Brad Frost

CSS 工作组发布了四个“首次公开草案”

This update briefly discusses the first drafts for four specs: CSS Color Module Level 5, Media Queries 5, CSS Transforms Level 2, and CSS Conditional Rules Level 4.

来源：W3C

Brave 浏览器自动将 404 页面指向历史版本

The web browser can now detect when a webpage is unavailable and will offer to search the Wayback Machine for a backup. The feature isn’t just for 404 errors though, as it will also trigger when hitting a 408, 410, 451, 500, 502, 503, 504, 509, 520, 521, 523, 524, 525, or 526 error.

:format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/66376265/brave_lCit4VijLK.0.png)

来源：Jon Porter

不要再叫 ‘Drop-Down’ 了

使用更精准的叫法，例如 select、ARIA Listbox、datalist、ARIA Combobox、Autocomplete、ARIA Menu、details/summary、Disclosure Widget、Accordion、Fly-out Navigation、Custom Display Selector、Otherwordingness。

This is a little opinionated because there does seem to be a place for the term, but getting the terminology right in the 11 instances discussed is important.

来源：Adrian Roselli

📙 文章、教程、观点

CSS 隐藏元素的十种方法

Each of the 10 methods has an accompanying chart that looks at various pros/cons including accessibility, browser support, layout/reflow, performance, and more.

来源：Craig Buckler

Currying in CSS?

The concept here is based on the fact that the values of CSS custom properties aren’t evaluated until they’re used. This kinda sorta resembles ‘currying’ in JS.

:root {
  --card-padding: 40px;
  --card-background: #FAFAFA;
}
.card {
  padding: var(--card-padding);
  background: var(--card-background);
}

来源：Trys Mudford

HTML：比较难用的部分

Dave has created a “living document” (that he intends to keep updated) that references different problems various sources have found with the accessibility of certain HTML elements.

来源：Dave Rupert

前端工程师应该了解的后端知识

Subjects discussed include request rates, down time, HTTP status codes, delegating business logic, CORS, and cache busting.

来源：Alexander Wang

CSS 的负边距

As the author points out, this might be the only article that covers negative margins in-depth (though it doesn’t go into flexbox and grid).

来源：PETER-PAUL KOCH

如何在 Vanilla JS 中使用 requestAnimationFrame()

If you’ve never really had a use for this feature, but want to know how it works, this is easy to follow with some simple demos.

window.requestAnimationFrame(function () {
    console.log('it ran!');
});

来源：Chris Ferdinandi

Vue 的组件构建思路

A step-by-step tutorial building a search bar component. Good for those already familiar with Vue but maybe want to see another developer’s perspective on component composition.

来源：Marina Mosti

使用 Vanilla.js 构建单页应用（SPA）

来源：Jeremy Likness

来源：Web Font of the Week

Shake 字体

There’s a deeply personal story behind this font initiative, and although finding a practical use for it may prove tricky, it has been created to raise awareness and fund Parkinson’s research.

💻 招聘

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

🗓 未来大事记

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

See You Again