See You Again

前端聚焦周刊:第 450 期

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

原文:Frontend Focus issue 450

翻译及校对:richshaw2015Yully Che

🚀 刊首


I don’t really hear the term “pixel perfection” as much as I used to, but the author says it still pops up enough. Here, he compares what this phrase really means today versus what it used to, and suggests how we should move beyond it.

来源:Ahmad Shadeed

将设计线框图转换成友好的 HTML/CSS

Harris Schneiderman walks you through the process of analyzing a wireframe and making coding decisions to optimize for accessibility.

来源:Smashing Magazine

用现代的 CSS Grid 方案解决通用布局问题

How CSS grids can solve responsive layout issues and enable you to create sites that flow with screen sizes without having to worry about breakpoints.

来源:Kevin Pennekamp

Web 组件不同实现方式对比

Compare coding style, bundle size and performance of 33 different ways to make a Web Component.

来源:div riots

3D 图书封面生成器

A neat little tool to create a 3D book cover that lets you customize perspective, animation duration, thickness of the book, rotation on hover, URL, etc. then grab the CSS code. I remember when we used to have to pay for tools like this :-)

来源:Sebastien Castiel

⚡️ Quick bits:

📙 文章、教程、观点

CSS 的渲染顺序

If you’ve ever been baffled by z-index positioning, the example shared here is worth remembering. “things inside a stacking context are painted together, as a unit

来源:Martin Robinson

UI 字体设计的细节

A good half-hour look at how you can enhance type legibility, accessibility, and consistency across your UI.

来源:Apple Developer

什么时候使用 inline-block?

Chris Coyier asked how folks use the inline-block value. Here’s a run through some common answers, and some issues that may crop up.

来源:CSS Tricks

Bootstrap 5:去掉 jQuery 支持的用法调整

Yep, the latest version of Bootstrap (currently in alpha) does away with jQuery in favour of using vanilla JS. Here’s a few pointers on using it.

来源:Zoltán Szőgyényi


These mailto: links are everywhere and yet browsers and operating systems don’t really make them easy to use.

来源:Adam Silver and Amy Hupe

How We Achieve “Simple Design” for Basecamp and HEY

The core approach here is dubbed ‘Fisher Price’ design - keeping things obvious and simple.

来源:Jonas Downey (Basecamp)

用纯 CSS 创建有动画效果的下划线

  1. a {
  2. color: #dfe5f3;
  3. text-decoration: none;
  4. background-image: linear-gradient(#222b40, #222b40), linear-gradient(
  5. rgb(176, 251, 188),
  6. rgb(176, 251, 188)
  7. ), linear-gradient(#feb2b2, #feb2b2);
  8. background-size: 20px 2px, 100% 2px, 0 2px;
  9. background-position: calc(20px * -1) 100%, 100% 100%, 0 100%;
  10. background-repeat: no-repeat;
  11. transition: background-size 2s linear, background-position 2s linear;
  12. }
  13. a:hover {
  14. background-size: 20px 2px, 0 2px, 100% 2px;
  15. background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%;
  16. }

来源:Nicky Meuleman


来源:Sarah Drasner

🔧 代码、工具、资源

mailgo:mailto:tel: 链接的另一种概念实现

Add this script to convert mailto: and tel: links into a modal that appears on click that gives the user a choice to open in Gmail, Outlook, copy the link, etc.

来源:Matteo Manzinello

Wikimedia FontCDN:注重隐私的 Google 在线字体搜索和代理 CDN

Google Fonts is a hugely popular way to bring custom fonts on to Web sites but if you’re feeling uneasy about giving Google all that user data, consider this. (You could, of course, also host the fonts yourself.)


css-media-vars:编写响应式 CSS 的新方式

Full explainer here but this basically uses CSS variables that are added to the <html> element and act as universal mixins.

  1. .breakpoints-demo > * {
  2. --xs-width: var(--media-xs) 100%;
  3. --sm-width: var(--media-sm) 49%;
  4. --md-width: var(--media-md) 32%;
  5. --lg-width: var(--media-gte-lg) 24%;
  6. width: var(--xs-width, var(--sm-width, var(--md-width, var(--lg-width))));
  7. --sm-and-down-bg: var(--media-lte-sm) red;
  8. --md-and-up-bg: var(--media-gte-md) green;
  9. background: var(--sm-and-down-bg, var(--md-and-up-bg));
  10. }


doom-scroller.js - 防止在社交媒体网站无意义的滚动

Find yourself scrolling mindlessly through junk on social media? This Doom-inspired library may help. 😅

来源:Chris Johnson

🍰 CSS Is Cake

Because what isn’t cake?

来源:Jhey Tompkins codepen

💻 招聘


🗓 未来大事记


2021-01-18 喜欢

Copyright © 2015-2021 BY-NC-ND 4.0

回到顶部 ↑