See You Again

前端聚焦周刊:第 425 期

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

原文:Frontend Focus issue 425

翻译及校对:richshaw2015Yully Che

🚀 刊首

三足鼎立时代结束

Edge 转为基于 Chromium 标志着浏览器三足鼎立时代的结束。这篇文章详尽的回顾了 IE 时代的各种怪异行为、技术以及微软的想法。在 Hacker News 上也引发了很多不错的讨论

来源:Christian Schaefer

不使用媒体查询实现四种 CSS 布局

你可能看过 Adam Argyle 的推文,展示了如何使用 flexbox 实现更多变的布局。这篇文章详细介绍了其工作原理。

<video src="https://polypane.app/blogs/rw-wo-mq/resize.mp4" autoplay="" loop="" controls="" class="breakout" width="100%"></video>

来源:Polypane

JavaScript 库引用后几乎就不会更新了

基于 CDNJS 的数据报告,分析了 JavaScript 库的引用时间以及是否进行了更新(正如标题所言 😉)。

来源:Zack Bloom (Cloudflare)

理解 CSS 网格:网格线

详解 CSS 网格布局规范,看看怎么使用网格线布局。

来源:Rachel Andrew

使用 SVG 重构所有元素——包括动画

详解如何使用 SVG 和 CSS 重构和优化代码(通过 <use> 元素、CSS 变量和动画)。

<video autoplay="" controls="" loop="" src="https://res.cloudinary.com/css-tricks/video/upload/q_auto/v1582755016//cubes.mp4" name="fitvid0" width="100%"></video>

来源:Mariana Beldi

📙 文章、教程、观点

微软正在帮助 Google 改善 Chrome 的窗口管理

微软和 Google 工程师一起工作的一个例子。

:format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/66172404/acastro_180416_1777_chrome_0001.0.jpg)

来源:Tom Warren

‘人类无法解析 URL,怎么去优化?’

Jake Archibald 认为人类是无法解析 URL 的,特别在安全性方面。Jake 和 Surma 列举了目前浏览器针对性的优化措施,是否有更好的解决方案?

来源:Google Chrome Developers

一项新的研究表明,“大多数”是否同意 Cookie 的弹窗工具会无视地区性的隐私法规。

来源:Natasha Lomas

CSS 的固有大小

尝试使用固有大小选项(例如 width: max-content;)的好处以及如何同 grid 及其他 CSS 属性配合。

来源:Ahmad Shadeed

你可以用纯 CSS 实现一个倒数计时器吗?

技术上是可以,但是使用 JavaScript 是更简单直接的方案。

来源:Chen Hui Jing

无障碍化的数字 BBC——2019年回顾

回顾英国广播公司在无障碍方面的进展。

来源:Emma Pratt Richens

如何使用 Three.js 生成云朵

效果非常令人信服(使用 React-Three-Fiber)。

来源:Robert Borghesi

Edge 的无障碍化举措

这篇列举了新的 Edge 中被增强的辅助功能。

来源:Microsoft

Mozilla 在过去两周内禁掉了近200个恶意插件

来源:Catalin Cimpanu

SVG 实现简单图像占位符

来源:Tyler Sticka

🔧 代码、工具、资源

Popper:悬停提示和弹窗引擎

这个流行的悬停提示和弹窗引擎库刚刚发布了 2.0 版本。此处阅读详细变更和新功能介绍

来源:Federico Zivolo

PurgeCSS 2.0:清理冗余 CSS

这个流行的 CSS 清理工具2.0版是用 TypeScript 写的,异步工作,支持删除 CSS 变量。

来源:Floriel Fedry

Mirage JS:面向前端开发人员的 API 模拟库

还没有达到1.0状态,但是看起来对于快速构建、测试和演示还没有后端 API 的 JavaScript 客户端还是不错的。

来源:MirageJS

我的浏览器

测试网站时需要一种快速的方法来共享你的(或他人的)浏览器信息?这个做法似乎很直接。

  1. {
  2. "id": "5e5ba59be4cbcc0015e7b675",
  3. "date": "2020-03-01T12:07:54.374Z",
  4. "browserInfo": {
  5. "browser": "Chrome",
  6. "version": "80.0.3987.122",
  7. "os": "Linux 64",
  8. "platform": "Linux",
  9. "dimensionsUnit": "px",
  10. "viewportWidth": 1536,
  11. "viewportHeight": 742,
  12. "screenWidth": 1920,
  13. "screenHeight": 1080,
  14. "cookies": "Available",
  15. "javascriptStatus": "Available"
  16. },
  17. "url": "http://mybrowser.fyi/report/5e5ba59be4cbcc0015e7b675/json"
  18. }

来源:Andy Bell

Screen:桌面、平板和手机的样式表

一个简单的样式表,但是已经包含了各种基础的样式。

来源:Georges Duverger

💻 招聘

译者注:如需了解,请查看原文

🗓 未来大事记

译者注:如需了解,请查看原文

2020-03-21 喜欢

Copyright © 2015-2022 BY-NC-ND 4.0

回到顶部 ↑