See You Again

前端聚焦周刊：第 432 期

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

原文：Frontend Focus issue 432

翻译及校对：richshaw2015，Yully Che

🚀 刊首

‘CSS X’——CSS 版本号的辩论

Remember the recent debate around CSS versioning and whether we should have a ‘CSS 4’ for marketing reasons? Here’s a good account from the W3C of just how CSS feature releases have worked up until this point. This piece also asks about the motives behind defining CSS versions for developers: How would it be defined in a useful way? How often should a new version be defined? And who could even define it?

来源：Bert Bos (W3C)

提升网站可访问性的 16 件事

Ensuring your sites are equally available to all is irrefutably the moral and right-minded approach to development (and it’s increasingly also a legal requirement too). Here, Bruce runs through over a dozen accessibility matters that you can address including technical, design and copywriting issues.

来源：Bruce Lawson

calc() 完全指南

CSS has a special calc() function for doing basic math — here, Chris Coyier runs through “just about everything there is to know” about it. A detailed guide with plenty of code snippet examples.

  1. html {
  2.   --H: 100;
  3.   --S: 100%;
  4.   --L: 50%;
  5. }
  7. .el {
  8.   background: hsl(
  9.     calc(var(--H) + 20),
  10.     calc(var(--S) - 10%),
  11.     calc(var(--L) + 30%)
  12.   )
  13. }

来源：CSS Tricks

▶ CSS 播客教程之 Box Model

A new podcast from the Chrome Developers team all about CSS. In the first episode Una Kravets and Adam Argyle discuss the CSS box model.

来源：Google podcast

互联网 31 岁生日快乐

The web turned 31 last week, a good reason to revisit Tim Berners-Lee’s original proposal for the Web.

“The goal of the Web is to serve humanity. We build it now so that those who come to it later will be able to create things that we cannot ourselves imagine.”

Sir Tim Berners Lee, computer scientist and inventor of the World Wide Web.

来源：Coralie Mercier

📙 文章、教程、观点

CSS :nth-of-class 选择符

This isn’t a real selector, but Bram Van Damme looks at some possible shortcomings with nth-child, leading to the conclusion that maybe we do need something like :nth-of-class.

来源：Bram Van Damme

你需要知道的新的媒体查询语法

A look through some of the most interesting new media queries in the Media Query Level 5 spec, and how to use them.

  1. @media (light-level: dim) {
  2.   :root {
  3.     --text-color: white;
  4.     --background-color: black;
  5.   }
  6. }
  7. @media (inverted-colors) {
  8.   img { filter: invert(1); }
  9.   * { box-shadow: none !important; text-shadow: none !important; }
  10. }
  11. @media (prefers-color-scheme: dark) {
  12.   body { background: #1e1e1e; color: white; }
  13. }
  14. @custom-media --medium-devices (min-width: 50rem);
  15. @custom-media --large-landscape (min-width: 70rem) and (orientation: landscape);
  17. @media (--medium-devices) {
  18.   .container { max-width: 40rem; }
  19. }

来源：Kristofer Selbekk

Learning CSS Box Alignment

A comprehensive look at concepts in box alignment in CSS, which are useful for learning both Flexbox and Grid.

来源：Ahmad Shadeed

‘Snackbars’ 的问题及替代方案

Snackbars (those little ‘toast’ notification messages) are a popular way to inform users about something they just did, but Adam thinks they can cause lots of problems for users. Here he explains why that is and what to use instead.

来源：Adam Silver

使用 AnimeJS 创建 CSS 和 SVG 动画

AnimeJS is a JavaScript animation library with various features like SVG morphing animations and CSS animations. Here’s a look at how to use it.

  1. anime({
  2.     targets: ".cool-svg path",
  3.     duration: 1000,
  4.     easing: "easeInOutSine",
  5.     d: [
  6.         {
  7.             value:
  8.                 "M53,234c143.452,-81.953,313.407,-167.554,430,-107c116.592,45.554,70.404,361.126,236,472c235.595,95.873,447.977,-197.535,477,-306"
  9.         },
  10.         {
  11.             value:
  12.                 "M53,434c143.452,181.953,213.407,267.554,330,107c56.592,-125.554,70.404,-161.126,236,-172c235.595,-55.873,447.977,-197.535,500,206"
  13.         }
  14.     ]
  15. });

来源：Developer Bacon

如何使用 CSS Scroll Snap

A straightforward tutorial showing how to add a scroll to your page without having to rely on JavaScript libraries.

来源：Nada Rifki

开发一个 Node.js 工具来对比 Google Lighthouse 结果

来源：Luke Harrison

Here’s How HTML Microdata Helps With Accessibility

  1. <article itemscope itemtype="http://schema.org/BlogPosting">
  3.   <header>
  4.     <h1 itemprop="headline">My Blog Post Title</h1>
  5.     <p itemprop="description">A little extra on what this post is about</p>
  6.     <ul>
  7.       <li>
  8.         Written by
  9.         <span itemprop="author" itemscope itemtype="http://schema.org/Person">
  10.           <span itemprop="name">Scott</span>
  11.         </span>
  12.       </li>
  13.       <li>
  14.         <time datetime="2020-01-09" itemprop="dateCreated pubdate datePublished">
  15.           January 9th, 2020
  16.         </time>
  17.       </li>
  18.     </ul>
  19.   </header>
  21.   <img src="article-image.jpg" alt="" itemprop="image" />
  23.   <div itemprop="articleBody">
  24.     <p>
  25.       Lorem ipsum dolor sit ame, consectetur adipiscing elit. Donec a quam rhoncus, tincidunt ipsum non, ultricies augue…
  26.     </p>
  27.     <!-- … -->
  28.   </div>
  29. </article>

来源：Scott Vinkle

🔧 代码、工具、资源

纯 CSS 实现的风景画——‘An Evening in Southwold’

This is quite the achievement in realistic CSS art — and you can tweak it. Open up the editor view and alter the color of the sun for your very own personalised sunset.

来源：Ben Evans

Web 性能测试工具列表

If you need to identify performance issues with your site this list of tools is a good place to start.

来源：Shawn Wang

Iconset：一个快速的 SVG 图标管理工具

This is a smart looking native Mac/Windows app to collect, customize, and manage all your icons.

来源：Iconset Creative

broider：画出自己的边框

A browser-based tool for making “9-patch” border patterns. Chris Coyier has done an accompanying write up on this.

  1. .broider {
  2.     border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAB0klEQVR4Xu3bUa7CMAwF0XT/iwZV4oO2QGR5LMV03h967cU5cUkJsI0xHuP4t50ezx5Gz48ef37+7Pmz8UT/f6hnx8sWGD0/erygkykWFAb6e9Doa4bH/xCILkBiTgQEhVtEUEFhATjODhUUFoDj7FBBYQE4zg4VFBaA4+zQG4JmN1NgskvcZT+0+gmz+YJmBU/nCyooK9Cqo8YY6MKMhr3mRVC2QdMf+sHl/F6V7dA8d+kVVHHJ54fcOEFQePIEFRQWgOPs0Dxou/fy+SHXJggK+woqKCxQGeeiBOsKKigsAMcRXwmHS+odJyg8f4IKCgvAccQqX7phC4/3Uxxav6D532kdJklQQfEXgeUueXyEzQLdbYInTFBBYQE4zg6FQfHbpsr62mUT96HtBl1ZsKCwrrtNgsICcJwdKigsAMe5KAkKC8BxdqigsAAcV9Gh6IYtPN49rrQ+Qf3hV7pn7dA04TGgHLT0CQCM1eu77IeuXvDq9QkKXDVfIzpsjrTr0MoJu112xX3o7RDfBywoPP2CCgoLwHF2qKCwABxnhwoKC8BxdqigsAAcZ4cWgK62+ZCtJ3p+9PjzFFy+cJsNhOc4/SFadDzR4wWdzLigMBAK+gR/OGBBOfNrrwAAAABJRU5ErkJggg==") 28 /  28px / 0 round;
  3.     border-width:  28px;
  4.     border-style:  solid;
  5. }

来源：Max Bittker

IBM Plex 字体

This typeface from IBM presents a neutral and friendly style across the entire family (made up of a Sans, Sans Condensed, Mono, and Serif variants). The Mono is well suited to displaying code snippets.

💻 招聘

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

🗓 未来大事记

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

2020-06-18 喜欢

Copyright © 2015-2022 BY-NC-ND 4.0

回到顶部 ↑