See You Again

前端聚焦周刊:第 444 期

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

原文:Frontend Focus issue 444

翻译及校对:richshaw2015Yully Che

🚀 刊首

CSS :is() and :where() 很快就来了

Šime Vidas explains how these new CSS pseudo-classes can be used (for reducing repetition, and keeping specificity low respectively).

Current browser support for ‘is()’ via

来源:Web Platform News

CSS 媒体查询完全指南

A solid, thorough guide on all things CSS media queries, good as a primer, or worth revisiting for a refresher.

  1. @media <media-type> and (media feature) {
  2. /*...*/
  3. }


Animate.css v4: Just-add-water CSS Animations

This is one of the most popular of the ‘drop-in’ CSS animation libraries, and they’ve now moved to version 4. Significantly, among the changes is a prefix on classes.

来源:daniel eden

一些炫酷的针对博客的 CSS Grid 小技巧

An exploration of how you can use CSS Grid, along with properties such as auto-fit and auto-fill, to produce some nifty looking image galleries.

来源:Ana Tudor


Whilst the legal action here is specifically to do with ebooks, it’s important to underline the excellent preservation work of the Internet Archive (which includes the Wayback Machine) and how hugely important it is to the long-term conservation of the web as a whole.

来源:Colin Dwyer (NPR)

⚡️ Quick bits:

📙 文章、教程、观点

Service Worker 生命周期的解释

Explaining the lifecycle of Service Workers in PWAs and how to update them as fast as possible.

来源:Felix Gerschau About

布局用 Grid,组件用 Flexbox

Ahmad looks at the key differences between these two layout options, and although there’s no right or wrong here, he recommends some use-cases for where you may want to use each.

来源:Ahmad Shadeed

Mad 杂志的 CSS 翻页折叠效果

An impressive CSS-only recreation of the Mad magazine fold-ins (where folding a printed page would reveal a hidden message in the artwork).

来源:Thomas Park


A few simple pointers to improve the High Contrast Mode experience for Windows users.

来源:Sarah Higley


You’ll need to see the demo to get it, but it’s a neat visual effect well suited for when you’ve got a variety of photos to illustrate a concept.

来源:Mary Lou

使用 CSS Counters 定制有序列表

How to use CSS counters to customize the appearance of numbers in an ordered list.

  1. div.list {
  2. counter-reset: list-number -1;
  3. }

来源:Supun Kavinda

CSS Viewport 单位快速指南

Covers vh, vw, vmin and vmax.

来源:Asha Laxmi and Maria Antonietta Perna

Sass Color Functions in CSS

  1. :root {
  2. --color-primary-h: 30;
  3. --color-primary-s: 100%;
  4. --color-primary-l: 50%;
  5. }
  6. /* desaturate the primary color */
  7. .element {
  8. background-color: hsl(
  9. var(--color-primary-h),
  10. calc(var(--color-primary-s) - 20%),
  11. var(--color-primary-l)
  12. );
  13. }

来源:Jim Nielsen

🔧 代码、工具、资源

CSS Grid:生成报纸排版

This is an excellent demo showing how Grid can be used to create a responsive newspaper-style layout.

来源:Olivia Ng codepen


A bundle format for frontend applications that unify static sites, SPAs, server-side rendering (SSR), and server-side logic in a single format that’s easy to deploy.

来源:Frontend Application Bundles


A lightweight, advanced table plugin that can work alongside React, Angular, Vue, or, well, nothing. Check out some of the examples for more on how to use it. It uses Preact under the hood.

  1. new Grid({
  2. columns: ['Name', 'Email'],
  3. data: [
  4. ['John', ''],
  5. ['Mike', '']
  6. ]
  7. }).render(document.getElementById('table'));

来源:Afshin Mehrabani

Quotebacks: Embed Quotes Without Losing Context

This is a small library that can embed a quote in an attractive format within the source context. Can also be used as a Chrome extension that saves to local storage.

  1. <blockquote class="quoteback" darkmode="" data-title="Quote the web with Quotebacks" data-author="@ness_labs" cite="">
  2. The ethos behind Quotebacks is one of the reasons why I love the product. Yes, it’s a great addition to my thinking toolkit, allowing me to store quotes without polluting my note-taking and thinking system. But it’s also a tool which aims at making the Internet a more generous place. If you regularly write online, give it a try!
  3. <footer>@ness_labs<cite> <a href=""></a></cite></footer>
  4. </blockquote><script note="" src=""></script>

来源:Tom Critchlow and Toby Shorin

Sorted CSS Colors: A Way to Navigate CSS Colors By Hue

This feels like quite a natural way to navigate the over 100 ‘named’ CSS colors (like Gainsboro, Firebrick, and LawnGreen).

来源:Mustafa Enes


Bills itself as ‘a beautiful replacement for JavaScript’s “alert”’

来源:Tristan Edwards et al.

μJam: A Minimalistic Jamstack Approach for Creating GitHub-Pages Hosted Sites

Use Visual Studio Code as a lightweight authoring and publishing tool for small to medium websites.

来源:Stefan Goessner

💻 招聘


🗓 未来大事记


2020-08-12 喜欢

Copyright © 2015-2021 BY-NC-ND 4.0

回到顶部 ↑