TablesNG — Chromium 中表格渲染的改进
阅读评论
当我最近写博客文章“使表格具有粘性标题和页脚变得更容易”时，我提到“粘性”改进只是 Chrome 中 <table> 得到改进的功能之一，这是 TablesNG 升级的一部分。我并不是唯一一个对此感到兴奋的人。
但 Bramus 将其提升到极致，并查看了所有表格增强功能。每一个都非常棒。这类事情让 CSS 稍微不那么令人沮丧了。
我们正在阅读并有一些想法的网络上的内容。是否有我们应该知道的链接？告诉我们！
我们是否正处于一个新的网页设计时代？我们称之为？
阅读评论
Una 称之为新的响应式设计。向我们无疑身处的时代，响应式设计时代致敬。响应式设计包括流体网格、灵活的媒体和媒体查询，而新的响应式设计也包含这些内容，但被置于更广泛的范围内：用户偏好查询、视口和外形尺寸、宏布局和容器样式。
有用和无用的代码注释
阅读评论
如果有人说注释没有增加任何价值，我会问：对谁而言？
就我个人而言，我从来不喜欢写显而易见的注释是不好的做法这一建议——可能是因为我一直都在写显而易见的注释。
Jim 展示了一些“与代码本身具有相同保真度的代码注释”的示例。这些是代码注释中最难处理的。
// this function adds two numbers
function add(a, b) {
return a + b;
}很容易指出这一点并将其称为无用。我倾向于不留下这种类型的注释，但 Jim 质疑这一点是公平的。注释可以用于可能在某些时候与该代码交互的各种人员，所以为什么要限制它呢？
[…] 注释在被阅读时和被编写时可以发挥非常不同的作用。它们几乎是两种不同的活动。
我想补充一点，当重新访问旧代码与积极工作时，它们的作用也不同。当您尝试进行代码审查与直接贡献时，它们也不同。
媒体查询在 @container 时代
阅读评论
Max Böck 接受了我的挑战，即查看代码库并查看有多少 @media 查询最终可以成为 @container 查询。
我接受了挑战，查看了一些我的项目——是的，我今天使用
@media的大部分内容可能在某个时候可以通过@container实现。尽管如此，我还是提出了一些我认为媒体查询仍然必要的场景。
Max 没有明确说明将替换多少，但我感觉大约是 50/50。
这两种技术的结合可能是最佳的途径。
@media可以处理大局问题、用户偏好和全局样式；@container将处理组件本身的所有微调。完美的团队！
我还认为，重构现有 CSS 代码库时我们所做的事情与从头开始构建时我们所做的事情之间会有很大差异。当我们第一次获得容器查询时，以及多年后新的模式稳定下来时，我们所做的事情也将有所不同。我一直看好组件是前端开发的正确抽象。感觉最近所有事情都将我们推向这个方向，从 JavaScript 框架和原生组件到容器查询和样式作用域。
CSS-Trickz：使用 Netlify 的按需构建器的实验
阅读评论
WordPress 网站默认情况下具有 API。想要查看此网站的最新帖子，只包含特定数据集… 以 JSON 格式？给你。Alex Riviere 创建了一个玩笑网站来使用它。
最初，该网站会在加载时客户端从该 API 获取数据。很好，但如果我们认真对待它，对于访问该网站的人来说效率非常低（即比服务器渲染的 HTML 慢），而且 API 请求也不高效。因此，Alex 使用 Netlify 函数重写了它。然后，Netlify 函数将从 API 获取数据（在云中的 Node 中）并提供预渲染的 HTML。这可能稍微好一点，但正如 Alex 所说
这实际上给我们带来了一个新问题，即每次有人访问该网站时，函数都会在我的费用下运行。
Netlify 函数的免费层每月可提供 125,000 次慷慨的请求，对于像这样的小型网站来说应该足够了，但正如 Alex 所说，他“宁愿不成为互联网流行的受害者”。
时机正好，因为 Netlify 刚刚发布了 按需构建器，这使得缓存此类内容的结果非常容易。它就像创建任何其他函数一样，只是签名如下所示
const { builder } = require("@netlify/functions")
async function myfunction(event, context) {
// logic to generate the required content
}
exports.handler = builder(myfunction);我喜欢 Andrew 在我们的 ShopTalk D-D-D-Discord中所说的话——这个概念普遍适用于 API 使用。免费博客文章想法：使用按需构建器最大限度地利用您的 API 免费层。
以用户为中心的前端开发原则
阅读评论
• 可访问的 — 使用语义 HTML，并确保我们至少满足 WCAG 2.1 AA 标准，并且它适用于辅助技术（这与 DWP 可访问性手册并存）
• 无关的 — 构建移动优先，并使其适用于各种设备和用户环境
• 健壮的 — 使用渐进增强，确保我们构建的内容能够优雅地失败
• 高性能的 — 针对各种网络和设备优化我们的代码/资产，以获得最佳性能
• 安全的 — 创建保护用户隐私的安全服务。使用严格的内容安全策略并防止常见的 OWASP 攻击。
我可以使用 :has() 吗？
阅读评论
我刚刚开玩笑说我们基本上正在以超快的速度获得 CSS 中的所有想要的东西（主要指的是 容器查询，天哪，你能想象它们真的要来了吗？）。现在我们可能真的会得到父选择器？！就像 .parent:has(.child) { }。传统上一直是不，太慢了，浏览器无法做到。Brian Kardell
Igalia 工程师一直在研究这个问题。我们一直在与 Chromium 开发人员进行讨论，研究 Firefox 和 WebKit 代码库，并进行一些 初步原型和测试，以真正了解它。通过此，我们提供了 大量关于我们已拥有内容的性能数据以及我们认为挑战和可能性所在的位置。我们已经开始草拟一个解释器，其中包含我们所有设计笔记和关联的疑问
就像我在 2010 年所说的那样：想要！
proxy-www
阅读评论
我喜欢好技巧。如果… 一个 URL 是… 一个承诺… 它会获取该 URL？
www.codepen.io.then((response) => {
console.log(response);
});这就是 @justjavac 使用 JavaScript 代理所做的。一个巧妙的技巧。不要因为实用性而 @ 我。技巧，伙计们。
DevTools 应该教授 CSS 级联吗？
阅读评论
Stefan Judis，在我谈论特异性时使用 (X, X, X, X) 发表评论的两天前，发表了一篇很棒的博文，不仅使用了这种格式，还提倡浏览器 DevTools 应该通过选择器向我们显示该值。
我认为上述补充可以极大地帮助教育开发人员了解 CSS。我能想到的唯一缺点是额外信息可能会让开发人员不知所措，但我愿意冒这个风险，让更多人正确地学习 CSS。