Martijn Cuppens 没有使用用户代理嗅探、CSS 技巧或任何类似的东西来创建这个怪异的 div。这只是一个普通的<div></div>，使用outline属性，类似于

div {
  outline: inset 100px green;
  outline-offset: -125px;
}

它在不同的浏览器中看起来不同，因为浏览器在这种奇怪的情况下确实以不同的方式渲染某些东西。

我偶然发现了 Reddit 用户 spidermonk33 的评论，他们在其中对偏移进行了动画处理以更好地理解它。我采用了这个想法，并制作了这段小视频来展示它们的行为比快照更奇怪…… 继续阅读 →

如果你想要一个随着你在一个非常长的页面上向下滚动而改变的渐变，你可以创建一个带有许多颜色停止点的渐变，将其应用于主体，它就会这样做。

但是，如果你不想要一个完全垂直的渐变怎么办？比如你只希望左上角改变颜色？Mike Riethmuller 重新利用了他自己从CSS 仅滚动指示器（A 级 CSS 技巧）中获得的技术，通过重叠两个渐变来做到这一点。“顶部”渐变是固定位置的，并且有点像留了一个洞，另一个更高的渐变在滚动时从下方窥视出来。

这是 Diana Mounter 关于 GitHub 设计系统团队的一篇漂亮的文章，详细介绍了团队的组建、面临的挑战以及他们如何在此过程中进行调整

当我于 2015 年底开始在 GitHub 工作时，我注意到有很多未记录的模式，我必须编写大量新的 CSS 来实现设计，并且没有明显的底层系统将所有部分连接在一起。我知道情况可以更好，我渴望做出改进——我很快发现我不是唯一有这种感觉的人。有几个人在努力改进事情，但没有一起工作。在设计主管的支持下，我们一群人开始定期开会讨论 Primer 的改进并确定工作优先级——这是设计系统团队的起源。

整篇文章都让我频频点头表示赞同，但有一点我特别注意到了：Diana 提到的她的团队如何决定使“样式的状态更加明显”，以便与团队的其他成员沟通更改。

最近，我注意到设计系统如何能够展示项目的进度，这非常棒。将这些对代码库的大量更改尽早且频繁地进行沟通，几乎是过度沟通，这在设计系统团队刚刚起步时可能是一个好主意。

HelloSign API 使将安全且具有法律约束力的电子签名直接嵌入到任何网站中变得简单。它的实施速度比其他电子签名解决方案快 2 倍，并且也是唯一允许客户完全白标集成的电子签名 API，这意味着我们的客户可以为其客户提供无缝的原生签名体验。HelloSign API 的三个关键功能是能够收集签名、请求签名以及直接在任何网站上格式化文档以供签名。借助 API 仪表板等工具，集成可以顺利进行，这是一个行业首创的功能，使开发人员能够轻松调试和查看有关 API 请求和响应的关键信息。使用 HelloSign API 节省的所有时间你打算做什么？

立即免费试用

我对尝试帮助支持人员的看法。

其中一部分与学习开发一样相关

写出工单将帮助你找出问题。

有时，当你需要花点时间收集你的想法并解释某些事情时，问题就会变得清晰，甚至可能找到解决方案。通常，错误就是错误，只需要修复即可——但有时你的支持工单实际上可能是你自身可以解决的事情，而写下这些内容可能是迈向这一目标的第一步。

你知道他们怎么说，学习某件事的最佳方法是教授它。

只需将“工单”替换为“论坛主题”或其他内容，例如在Spectrum 上。

<svg> 的一个很酷的功能是它本身就是一个文档，因此 SVG 内部 CSS 中的@media 查询是基于其视口而不是可能包含它的 HTML 文档。

多年来，这一独特的功能让人们可以随意尝试。Tim Kadlec试验了 SVG 格式以及哪些格式最可靠地尊重媒体查询。Sara Soueidan对此进行了更多实验。Jake Archibald在内部嵌入了画布并以此方式测试了跨浏览器兼容性。Estelle Weyl 利用这种能力在响应式图像出现之前就实现了响应式图像。

另一件真正引发人们关注的事情是使用该本地媒体查询功能来创建响应式徽标。最著名的是Joe Harrison 的网站，但Tyler Sticka、Jeremy Frank 和Chris Austin 也都尝试过。

Nils Binder 有最新的版本。Nils 的版本在如何使用<symbol>引用其他<symbol>以提高效率以及min-aspect-ratio媒体查询而不是神奇数字宽度方面特别巧妙。

需要说明的是，我们仍然非常需要 HTML 元素的容器查询。我知道这很难，但实施的难度和实用性是不同的。我更喜欢有趣的现代解决方案，而不是试图被劝阻。

阅读免费电子书无需注册。

构建连接到遗留系统或企业系统的现代应用（移动应用、PWA 或单页应用）是一件痛苦的事情。我们编写了一本电子书，讨论了使所有这些都能正常工作的各种选项。以下是其中一些章节内容

• 迁移到现代移动架构的挑战
• 迁移到移动的策略
• 迁移到云的策略
• 数据与移动应用
• 为您的现代化工作保驾护航

查看我们的移动现代化：架构手册

前几天我一直在摆弄一个可变字体，并且在最新版本的 Chrome 中注意到这个奇怪的渲染问题，其中某些字母形式的部分以非常奇怪的方式相互剪切。值得庆幸的是，Stephen Nixon 已经带着一个临时的技巧来解决这个问题，该技巧是在使用可变字体的文本上使用文本阴影

.variable-font {
  text-shadow: 0 0 0 #000; /* text color goes last here */
} 

完成后，你应该再也看不到字母形式中那些奇怪的剪切标记了。是的，这感觉很像黑客行为，但我相信这个渲染错误很快就会得到修复。据我所知，它似乎不会影响其他浏览器。

本教程将向你展示如何在 Gatsby 博客中添加实时评论。你将使用 Node 和 Express 创建一个简单的后端，允许用户即时添加和查看评论。