Nicolás Bevacqua 一年前写了这篇文章，我想说，经过一年的时间，他的观点更加正确了。模板字面量 总是更好。您不必再费心进行连接操作。您不必再费心转义其他引号。您不必再费心处理多行内容。我们应该始终使用它们，并调整我们的代码风格检查以帮助我们培养这种肌肉记忆。

除了少数您无法使用它们的情况（例如 JSON）之外，还有浏览器支持的问题。它很好，但例如 IE 11 不支持。您很可能无论如何都会使用 Babel 预处理您的 JavaScript，如果您真的足够聪明，可以创建两个包。

Mozilla 团队完成的非常棒的工作。令人好奇的是，他们已经有了CSS Grid 的 MDN 文档，这不仅是一个简单的参考，他们还有很多“指南”。并不是说我抱怨，这个设计和学习流程非常棒。当然，我喜欢“在 CodePen 上查看”链接；)

学习事物总是有很多方法。我非常喜欢 Rachel Andrew 的完全免费的视频系列和我们自己的指南。这个看起来也更像一个操场。

我们知道没有哪个 API 可以为您编写代码（不幸的是），但我们的 API 非常接近。凭借深入的文档、可自定义的功能以及使您的代码易于调试的仪表板，您将找不到比这更易于实施的电子签名产品。速度是其他电子签名 API 的两倍。

“我们希望 API 由一个像我们一样重视用户体验的团队构建。归根结底，我们选择 HelloSign 是因为它在这些功能、价格和用户体验方面实现了最佳组合。”  - Instacart 联合创始人 Max Mullen

立即免费试用 HelloSign API。

继续阅读 →

我们已经介绍了“刘海”以及从 HTML 和 CSS 角度处理它的选项。现在，可以直接从源头获取更多详细信息。

安全区域内边距不能替代边距。

…我们希望指定我们的填充应该是默认填充或安全区域内边距，以较大者为准。这可以通过全新的 CSS 函数min()和max()来实现，这些函数将在未来的 Safari Technology Preview 版本中可用。

@supports(padding: max(0px)) {
    .post {
        padding-left: max(12px, constant(safe-area-inset-left));
        padding-right: max(12px, constant(safe-area-inset-right));
    }
}

使用 @supports 进行功能检测 min 和 max 非常重要，因为它们并非在所有地方都受支持，并且由于 CSS 对无效变量的处理方式，因此不要在您的 @supports 查询中指定变量。

Jeremey Keith 的热门观点特别美味，例如

您可以添加一堆 Apple 凭空捏造的专有 CSS。

或者，您可以确保在 body 元素上设置背景颜色。

我推荐后者。

以及

这篇文章可以用一个词概括：不要。

更具体地说，不要为任何特定设备设计网站。

尽管如果这推动了对min()和max()作为通用函数的支持，那也很酷。

Marvin Visions 是一种新字体，其设计灵感来自您在 80 年代破旧的科幻小说中看到的那些字母。这个样本网站拥有非常漂亮的设计，值得探索并了解其背后的设计过程。

Storyblocks 为 CSS-Tricks 关注者提供 7 天的免费下载！从 Storyblocks 会员库中选择超过 400,000 张库存照片、图标、矢量图、背景、插图等。每天获取 20 次下载，持续 7 天。此外，在数百万张其他市场图像上节省 60%，艺术家可获得 100% 的销售额。您下载的所有内容都归您所有，并可永久使用——免版税。Storyblocks 定期添加新内容，因此总有一些新鲜事物可供查看。所有您心中渴望的库存！以极低的价格获取数百万张高质量的库存图片。立即开始您的 7 天免费下载！

继续阅读 →

Campaign Monitor 已完全更新了其电子邮件中 CSS 支持指南。尽管更新之间有四年的时间间隔（而且这个指南已经存在 10 年了！），但在设计和开发电子邮件时，我仍然经常参考它。

称其为更新低估了投入到其中的工作量。根据帖子内容

以前的指南包含 111 个不同的功能，而新指南涵盖了总共 278 个功能。

为 167 个新功能添加参考和测试结果非常了不起。即使是最近的功能，如 CSS Grid 也包括在内——而且，剧透警告，在现实环境中有一点点 Grid 支持。

这是对指南的整体重新设计，对于任何从事电子邮件设计或开发的人来说，都值得花时间仔细阅读。当然，测试工具对于整体电子邮件工作流程仍然非常重要，但这样的指南有助于在前期做出良好的设计和开发决策，这使得测试更多地关注…好吧，测试，而不是发现什么才是可能的。

Philip Walton 建议创建生产 JavaScript 的两个副本。使用基于 Babel 的构建流程很容易做到这一点。

<!-- Browsers with ES module support load this file. -->
<script type="module" src="main.js"></script>

<!-- Older browsers load this file (and module-supporting -->
<!-- browsers know *not* to load this file). -->
<script nomodule src="main-legacy.js"></script>

他为此创建了一个演示项目，您会看到文件大小节省了 50%。我认为通过直接使用现代 JavaScript 方法，还会有其他速度改进。

Mattias Geniar

许多（网络）开发人员使用本地 .dev 顶级域名进行自己的开发。… 在这些情况下，如果您浏览到 http://site.dev，您将被重定向到 https://site.dev，即 HTTPS 版本。

这意味着您的本地开发机器需要；

• 能够提供 HTTPs
• 已设置自签名证书以处理此问题
• 已将该自签名证书添加到您的本地信任存储区（您无法使用 HSTS 忽略自签名证书，它们需要得到您计算机的“信任”）

这可能通常是一件好事™，但在 Chrome 上被迫使用它有点令人讨厌。他们在抢占 .dev 顶级域名时完全知道自己在做什么。HSTS 不是基于整个域名，而不仅仅是顶级域名吗？

Ada Rose Edwards 考察了一些较新的浏览器 API 以及它们如何协同工作。

这些新的 API 本身功能强大，而且它们彼此完美地补充，CSS 自定义属性是贯穿其中的共同线索，因为它是对 CSS 的底层更改。

这篇文章本身就是它们的展示。

说到新的浏览器 API，那是几周前 ShopTalk 上的一个完整的话题。