HTMLcat：42个值得记住的Web原生技巧
Small, native web tricks worth remembering
HTML、CSS和JavaScript能做到的事情远超我们的想象。HTMLcat 项目收集了42个实用且值得铭记的Web原生技巧，每个技巧都配有简洁示例和关键注意事项。从隐藏滚动条到使用 :has() 关系选择器，从本地化价格显示到容器查询，这些技巧覆盖广泛，既有成熟方案也有实验性特性。作者提醒开发者在应用时需检查浏览器兼容性，保留降级方案，并真实测试辅助技术表现。无论你是前端新手还是资深开发者，这份清单都能帮你重新发现平台原生的强大能力。
HTML、CSS和JavaScript能做到的事情远超我们的记忆。
HN 评论区
58- m-s-y
每次去汽车经销商那里，能读到各种车型的介绍，我都特别开心。尤其是当那些车其实根本不在那儿的时候。事实上，连一张车的照片都没有。没错，这就是我的菜。
- moontear
这里有一些不错的描述和小贴士，但网站真正需要的是示例。光看代码对我帮助不大。而且描述大多太短了，完全可以直接做成主页上的工具提示。
整个页面的主旨是收集“值得记住的 Web 技巧”，我实在想不明白 bash（例如 `du -hd 1 . | sort -hr`）为什么会出现在这里。
- zeroq
也许只是我个人的感觉，但这看起来像是巨大的时间浪费（或者换个积极的说法——是巨大的潜力浪费）。
就拿第一个示例“JS 中的设备类型”来说。
“粗指针并不意味着‘移动设备’，细指针也不能保证是‘桌面设备’。与其根据用户代理猜测设备，不如直接询问浏览器的输入能力。”
const input = {
finePointer: matchMedia('(any-pointer: fine)').matches,
coarsePointer: matchMedia('(any-pointer: coarse)').matches,
canHover: matchMedia('(any-hover: hover)').matches,
};
所以它并没有告诉我如何识别设备类型。甚至没有运行代码，让我能迅速对比手机和桌面设备的结果，从而建立一个基准。
- apples_oranges
求求了，别把滚动条藏起来 :)。
- herrherrmann
真不错！我喜欢这种带有主观观点的列表，尤其是当它们易于浏览且能让人挑出有用内容的时候。不过如果能说明一下这些功能的兼容性就更好了。特别是对于较新的 CSS 特性，很容易高估它们在各大浏览器中的就绪程度。
为此，可以直接添加指向相关 MDN 和/或 caniuse.com 页面的链接。