我们已经 在博客中谈论了响应式表格 多年了。 有多种技术，你选择哪种应该取决于表格中的数据和你想要实现的 UX。 但是它们中的许多都依赖于将表格元素的自然显示值重置为其他值，例如 display: block。 史蒂夫·福克纳警告我们

当在表格元素上设置 CSS display: block 或 display: grid 或 display: flex 时，会发生不好的事情。 表格不再在可访问性树中表示为表格，行元素/语义也不再以任何形式表示。

他认为浏览器在这里通过更改这些语义犯了一个错误，但由于它们确实更改了，所以最好知道可以用 (一系列) ARIA 角色 来修复它。

这是来自 Adrian Roselli 的更多信息，包括一个带有正确标记的演示。

最近发布了两个非常有趣的视频，它们使用 Chrome DevTools 的“本地覆盖”功能，以便在不触及原始源代码的情况下玩转 Web 性能。

• Umar Hansa：使用本地覆盖和 font-display 提高 Soylent.com 的性能
• Harry Roberts：使用 Chrome 的“本地覆盖”测试性能假设

最重要的是，你可以直接编辑 CSS 并重新加载页面，你的更改会保留。 意味着你可以使用 DevTools 中的其他性能测试工具来查看你的更改是否产生了你想要的效果。 非常适合向客户展示更改，而无需他们为你设置整个开发环境。

我已经考虑 Isabel Lee 的这篇文章几周了——它都是关于我们在 Sketch 中进行设计时应该更加周到。 他们认为，如果我们正确地命名图层、画板和页面，我们更有可能在工作中看到真正的效率和组织改进。 Isabel 写道

保持一个超级有序的 Sketch 文件帮助我简化了设计流程，并在尝试查找特定组件或了解存档设计时节省了时间。 例如，我正在寻找六个月前使用过的图标，并且（相对）很容易找到，因为我的所有画板和图层都命名良好，并按逆时间顺序分组。 我还能够将其与当时会议记录交叉引用。 如果我没有做任何这些工作（感谢过去的我！），我可能不得不翻遍我所有旧的设计并查看每个图层。 或者更糟的是——我不得不重新创建那个图标。

自从我读完这篇文章以来，我一直都在做同样的事情，并且有效地用页面的命名做“每日提交”，当回顾我已经忘记的工作时，它真的很有帮助。 但是，我最喜欢这个整理过程的是，Isabel 描述了她如何轻松地回顾她的工作，找出设计流程中的弱点，以及如何成为一名更好的设计师

除了让查找变得更容易之外，它还帮助我在想要分析我的旧作品并查看哪些地方可以改进时培养良好的文档习惯。 我重新审视了我其中一个旧的 Sketch 文件，意识到我在深入研究最初想法的无数迭代之前没有做足够的调查。

Google、Airbnb、Slack、MailChimp、Facebook、Etsy、IBM、Dropbox…现在每个人都有一个设计网站。

我最近一直在看很多自然纪录片。 我喜欢你既可以非常仔细地关注它们，也可以用它们作为背景电视。 我是最初《蓝色星球》的忠实粉丝，所以观看最近发布的《蓝色星球 II》剧集，就是一个例子。 典型的自然纪录片总是会有一些“看看我们是如何搞砸环境的”的转折，这是传达这种信息的最完美时机和地点。

说到最完美时机和地点，为什么不用占位符图像提醒我们所有濒危动物呢！ 这就是 濒危物种占位符 的作用。 就像 PlaceKitten，但致力于环境保护。

我还偶然发现了这个 灭绝动物的免费图标集。 😢

我记得之前看到过 Vox 的这些可访问性指南，但今天再次查看它们仍然很有趣，看看在改进可访问性方面，我的流程中是否缺少什么。

而且有很多东西要记住！ 颜色对比度、alt 文本、键盘导航、焦点状态和 ARIA 属性只是我们在设计网站时应该注意的所有事项的一小部分，因此此清单当然有助于我们不时地提醒自己。

此外，值得记住的是，我们可以进行 一些小的调整，并且可以 倡导 在我们的项目中改善可访问性。

无头 CMS 是技术领域的新宠。 有人说这是唯一前进的道路，而另一些人则称它为没有未来的时尚。 因此，我们决定进行一项研究，看看人们对 无头 CMS 的看法以及他们想要使用它的原因。 无头 CMS 有未来吗？

与我们分享你对无头 CMS 的看法，并有机会赢得 50 美元的亚马逊礼品卡。

开始调查

继续阅读 →

我们如何说服 Web 开发人员，React Native 已经为他们解决了许多最难的 GUI 问题？ 回到过去并在 React DOM 之前发布 React Native？ 有没有更简单的方法…

— Nicolas (@necolas) 2018 年 3 月 1 日

就像这个 Twitter 线程中的许多人一样，我并没有真正理解 React Native 实际上是用来做什么的。 我认为它是一种用 React 编写代码来构建原生移动应用的方式。 但是，Nicolas 有一个完整的 “适用于 Web 的 React Native”仓库，解释了情况并非如此。 还有一个会议演讲。

这可能并不能帮助我们，因为它的宣传语是“使用 JavaScript 和 React 构建原生移动应用。” 我想，它确实可以做到（例如，构建一个 iOS 或 Android 应用），但它也可以构建你的 Web 应用，这意味着…单一代码库？

许多回复都提到了“更好的 DOM”，这很有趣。 或者，正如 Nicolas 指出的那样，它有点像“Web：好的部分”，因为它的很多内容都是有意限制的，涉及到的平台的子集，以便简化操作并使其能够互操作。

显然，这并不适用于所有项目。 但是，如果你已经有一个基于 React 的网站，并且已经有一个或想要一个原生移动应用，那么似乎值得探索一下。

这是 Rob Weychert 关于色彩理论、层次结构以及如何在设计系统中实现这些颜色的精彩小文章。 听到 Rob 对 HSL 的看法尤其有趣，HSL 是 CSS 中设置元素颜色的另一种方式

对于颜色调整，HSL 为这个过程带来了其他颜色系统所缺乏的细粒度控制。 对于实现来说，Sass 允许我将颜色值分配给变量，这使得系统范围的迭代变得快速且轻松。

…因为第三方任何东西真的都不安全。 Jake Archibald

如果你担心用户会诱使你的网站加载第三方资源，你可以使用 CSP 作为安全网，限制图像、脚本和样式可以从哪里获取。

我们已经 讨论 使用和管理第三方脚本的安全性问题很长时间了，但最近在回应一个使用 通过 CSS 进行键盘记录 的“技巧”时，提到了第三方 CSS 中的安全性问题。

Jake 的文章值得一读，因为它从高层次的角度审视了所有第三方资产及其带来的风险。