前端聚焦周刊：第 429 期

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

原文： Frontend Focus issue 429

翻译及校对： richshaw2015， Yully Che

🚀 刊首

一起来定义 CSS 4

It seems whether CSS 4 should be a “thing” is a hot button issue right now, with most of the chatter seemingly around branding it as such for marketing reasons. Here’s Jen Simmons with her take, and the position of the CSS Working Group. This GitHub thread is open to comments from developers and designers for their thoughts.

来源：World Wide Web Consortium

data 属性完全指南

Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.

<!-- They don't need a value -->
<div data-foo></div>
<!-- ...but they can have a value -->
<div data-size="large"></div>
<!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside -->
<li data-prefix="Careful with HTML in here."><li>
<!-- You can keep dashing if you like -->
<aside data-some-long-attribute-name><aside>

来源：Chris Coyier

▶ 让事情变得更好之重新定义 CSS 的技术可能性

In this excellent hour-long talk Rachel Andrew explores what recent advances in CSS layout have given us, what things are on the horizon and how they may change the way we see web design, plus a bit on what she hopes to see in the future.

来源：An Event Apart

oldweb.today：使用虚拟浏览器浏览旧网站

An impressive browser-based tool that allows you to browse public web archives in a recreation of a legacy browser of your choice.

来源：Rhizome

Crimson Text

Certainly one of the classier options available on Google Fonts. Even if you don’t like to use serif fonts for body text, it can add an interesting touch to headlines and sits well alongside neutral sans serifs.

📙 文章、教程、观点

设计漂亮的按钮样式

A thorough look at the finer details of the button element, plus how to style it to ensure it works great on all browsers.

来源：Ahmad Shadeed

页面可见性 API

Modern browers generally handle page visibility stuff on their own nowadays, but you can do a little more with the API, which has excellent browser support.

const video = document.querySelector('video');
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState !== 'visible') {
    video.pause();
  }
})

来源：John Au-Yeung

如何用 CSS 创建倾斜布局

View an interactive demo of the effect. Uses transforms, pseudo-elements, and custom properties to achieve the layout.

来源：nils binder

▶ 避免失去用户注意力的 UX 技巧

A look at a variety of design principles for drawing attention, complete with examples (covering both the web and apps), in a 40 minute talk.

来源：Chris Atherton

如何为 React 设置 Webpack 和 Babel 7

If you’ve learned to get a React project up and running using create-react-app, this is a nice detailed tutorial to take that to the next level using two popular tools.

来源：Ismile Hossain

MDN 浏览器兼容性问卷

This survey from Mozilla is looking to find out what your pain points are in regards to browser compatibility.

来源：Mozilla

Google PageSpeed 解读：评分 100/100 的真相

来源：Brian Jackson

▶ 使用 Chrome DevTools 延迟加载图片

来源：Umar Hansa

Safari 技术预览版 101 发行说明

来源：Jon Davis

🔧 代码、工具、资源

Blisk：面向开发者的加速应用测试的浏览器

Has a number of built-in testing features including multiple device views, URL and scroll sync, auto-refresh, screenshots, and screen recorder.

来源：Blisk Team

Paged.js：格式化成适合 PDF 输出的 HTML

I think this project’s site could win an award for sheer elegance, but it’s not just elegant, there’s tons of well formatted documentation too. Or.. if you prefer, the GitHub repo.

来源：Cabbage Tree Labs

Svelte-grid：Svelte 的可拖动可调整大小的响应式网格布局

The on-page demo works really nicely. You can easily resize the elements to fit after dragging them around. It’s basically a customizable masonry layout.

来源：Vahe Araqelyan

Lion：高性能、灵活、可用性好的 Web 组件库

From ING, known for their work with components, this is a set of feature-complete web components for kickstarting web projects. Announcement post is here.

来源：ING Bank

Hex Engine：面向浏览器的现代 2D 游戏引擎

Still in early development. A TypeScipt- and Canvas-based game engine designed to feel similar to React.

来源：Lily Scott

monica.css

A really tiny set of helper classes to make it easier to work with flexbox layouts.

* {box-sizing: border-box}
[hidden] {display: none !important}
[disabled] {pointer-events:none; opacity: 0.3}
.horizontal {display: flex; flex-direction: row; justify-content: space-between}
.vertical {display: flex; flex-direction: column}
.center {justify-content: center; align-items: center}
.flex {flex: 1}
html {
  --spacing-xs: 8px;
  --spacing: 24px;
  --spacing-s: 12px;
  --spacing-m: 36px;
}

来源：Monica Dinculescu

💻 招聘

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

🗓 未来大事记

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