Instant.Page 做了一件特殊的事情来使网站更快：当它非常确定你将要点击一个链接时（通过将鼠标悬停 65 毫秒或在桌面上的 mousedown，或在移动设备上的 touchstart），它会预加载下一页，因此当你完成点击（可能在几百毫秒后）时，加载速度会快很多。

理解这种方法、接受它、集成它并将它视为性能提升是一回事。 我在这里安装了它！

真正获得你自己的网站的数据是另一回事。 让我们来感谢 Tim Kadlec 变得聪明并对其进行 A/B 测试。 Tim 能够使用性能中立的 Netlify 拆分测试 进行 50/50 A/B 拆分。 一半加载 Instant.Page，另一半没有。 并且相同的半部分 告诉 SpeedCurve 它们属于哪一半，以便可以构建性能图表进行比较。

Tim 说它看起来还不错，但他的网站可能不是最好的测试

同样值得注意的是，即使结果看起来不错，仅仅因为它对我的网站有或没有影响并不意味着它不会对其他地方产生不同的影响。 我的网站通常具有较短的会话长度，并且页面非常轻量级：将此应用于更大的商业网站必然会产生截然不同的结果。

我非常希望看到有人在一个功能更强大的网站上这样做。 我属于怎么可能不更快？！阵营，但没有任何数据。

当 DevTools 告诉你一个声明无效时，这很有用。 例如，colr: red; 无效，因为 colr 不是有效的属性。 同样，color: rd; 无效，因为 rd 不是有效的值。 在大多数情况下，浏览器的 DevTools 会将声明显示为删除线带有警告 () 图标。 如果他们更进一步，告诉你哪个东西错了（或两个都错了）并建议可能的修复，那会很好，但嘿，我不想对送上门的好处吹毛求疵。

Firefox 正在开始更进一步地告诉你某些声明为什么无效，不是因为语法错误，而是因为它们不符合其他资格。 例如，我在一个随机的 <p> 上添加了一个 grid-column-gap: 1rem，然后我被告知以下内容，出现在一个小弹窗中

grid-column-gap 对此元素没有影响，因为它不是 flex 容器、网格容器或多列容器。

尝试添加 display:grid、display:flex 或 columns:2 之一。 了解更多

这太方便了。

Elijah Manor 在他的 博客文章 和视频中深入探讨了这一点。

继续阅读 →

只有 Firefox 支持它，但如果你返回带有以下头部的请求

Header add Link "<style.css>;rel=stylesheet;media=all"

…这将链接到该样式表，而无需你在 HTML 中执行此操作。 Louis Lazaris 深入探讨了它

[…] 我能想到的唯一能够在生产环境中使用此方法的理由是作为一种包含一些 Firefox 专用 CSS 的方法，Eric Meyer 在一篇关于这个主题的旧文章中提到了这种可能性。 但它并不保证总是只在 Firefox 中工作，所以这仍然是一个问题。

随心所欲地使用它，但它在实际项目中极不可能有任何用处。

我喜欢一些经典的 CSS 技巧。

在刚刚 玩了 apsect-ratio 并对它的直观性感到惊喜之后，这里有一个 CSS 行为不直观的示例

如果你在页面上有一个固定元素，这意味着它在滚动时不会移动，你可能会意识到，如果你在其最近的祖先元素上应用 CSS 滤镜，它将不再是固定的。 来试试吧，在 CodePen 上试试看。

这是因为在固定元素的直接父元素上应用 filter 会使它成为包含块，而不是视窗。

Hui Jing 在这篇文章中还有更多关于滚动、渲染性能以及使用伪元素来避免问题的技巧。

我认为这类东西是最难理解的 CSS 概念，就像 块级格式化上下文 (BFC)。 BFC 是布局中的迷你布局。 🤯

我觉得科技行业有时对自己过于认真。 我对所有的摆姿势和守门行为感到沮丧——“除非你使用 x 框架，否则你不是真正的开发人员”，“CSS 不是真正的编程语言”。

我认为这种说法往往会让新开发人员望而却步，而那些没有望而却步的人更倾向于跳过学习语义标记和可访问性，转而学习最新的框架。

对 HTML 和 CSS 的更深入的了解往往被贬值。

确实，摆姿势和守门行为。 我还没有见过任何讨论什么才是或不是“真正的”编程的谈话对任何人都能带来益处。

---

Mehdi Zed 关于 PHP 的相关观点 来自 Mehdi Zed 关于 PHP 的观点

大多数讨厌 PHP 的开发人员是因为精英主义或无知。 无论哪种方式都很愚蠢。

Snook 展示了一个经典设计，顶部是一个超大的标题，而内容区域“拉入”到该标题区域。 我的想法与之相同

从历史上看，我用负边距来做到这一点。 标题的高度会为底部添加一些填充，然后主体会获得一个 margin-top: -50px 或任何设计要求的数值。

如果你将 margin 和 padding 与这种情况相匹配，它并不完全是魔数，但对我来说仍然感觉不好，因为它们仍然是需要你在完全不同的元素之间保持同步的数字。

他的想法是什么？ 用 CSS 网格构建它。 感觉确实强大得多。

巧合的是，我正在阅读 Chen Hui Jing 的 “黑色和橙色的那一个” 文章，并且该模式也出现在那里。

（我最终 做了一个关于这个的视频）。

使用预处理器（如 Sass），构建一个逻辑上的“执行此操作或不执行”设置非常简单

$option: false;

@mixin doThing {
  @if $option {
    do-thing: yep;
  }
}

.el {
  @include doThing;
}

我们可以在原生 CSS 中使用自定义属性来做到这一点吗？ Mark Otto 展示了我们可以做到。 只不过稍微不同而已。

继续阅读 →

太搞笑了:

经过仔细考虑，我们决定将我们的平台重新架构为使用 $FLASHY_LANGUAGE 和 $HYPED_TECHNOLOGY。 $FLASHY_LANGUAGE 不仅根据 Stack Overflow 开发人员调查显示很受欢迎，而且它也是跨平台的；我们也正在使用它来重新实现我们的移动应用程序。 重写我们的核心基础设施相当简单：由于我们拥有的工程师比我们可能需要的还要多，甚至多到不知道该怎么办，我们只是简单地停止处理错误报告，并将我们的工作重点转移到 $HYPED_TECHNOLOGY 上。 我们最初在适应 $FLASHY_LANGUAGE 的一些怪癖方面遇到了一些麻烦，并且在 $HYPED_TECHNOLOGY 中遇到了几个错误，但总的来说，它们强大的新功能使我们能够消除以前解决方案必须处理的一些复杂性。

Saagar Jha 绝不可能是在嘲讽 这个 或 这个。

Diana Smith 创作了另一幅令人惊叹的纯 HTML & CSS 画作。

我喜欢这些作品在“我应该用 CSS 绘制这个吗？”曲线上占据着特殊的位置。 像 简单形状 这样的东西无疑属于曲线上的“是”方。 然后，有一个很大的谷底，在那里，用这种方式绘制东西变得不太实际，而使用其他图像格式（例如 SVG）更有意义。

Diana 的作品将曲线拉回到了“是”方。 这不仅因为它是 CSS 可以成为一个令人惊叹的表现主义艺术工具的证明，而且从性能的角度来看也是如此——它只有 2 KB 的 HTML 和 10 KB 的 CSS。

Manuel Matuzović 详细介绍了 10 个关于关闭按钮的糟糕 HTML 模式。 你知道，就像这样

<a class="close" onclick="close()">×</a>

为什么这不好？ 那里没有 href，所以它实际上不是一个链接（关闭按钮不是链接）。 更不用说缺少 href 使这个“占位符链接”无法聚焦。 此外，该符号将被读作“乘法”或“乘号”，这并没有帮助（“x”也没有帮助）。

你使用什么代替它？

继续阅读 →