欢迎来到 HTMLcat，这是一个值得记住的小巧原生网页技巧集合。每个 post-it 都将一个有用的平台功能与一个最小示例以及重要的注意事项配对。笔记涵盖了 HTML、CSS 和 JS 中的稳定、受限和实验性功能。请检查支持标签，保留后备方案，并在真实浏览器和辅助技术中进行测试。\n\n特色技巧包括：设备类型检测、隐藏滚动条、空标签、CSS 居中、`clamp()`、平滑滚动、滚动边距、`classList.toggle()`、电话和电子邮件链接、文本选择高亮、`:has()` 关系选择器、使用 `::marker` 样式列表标记、使用 `Intl.NumberFormat` 本地化价格、使用 `inert` 禁用子树、`:target` 伪类、`translate` 属性、`prefers-color-scheme`、容器尺寸查询、`<dialog>` 元素、使用 `text-wrap` 更好地换行、描述列表对齐、使用 `accent-color` 的原生表单颜色、CSS 自定义高亮 API、跨输入类型的悬停检测、使用 `color-mix()` 的透明颜色、滚动捕捉事件、`light-dark()`、`contrast-color()`、使用 `@scope` 的作用域 CSS、`:where()`、滚动驱动动画、CSS 轮播、`corner-shape`、CSS 自定义函数、CSS Grid Lanes、Popover API、View Transitions API、容器样式查询、使用 `details` 名称的专属手风琴、使用按钮命令控制对话框，以及使用 `hidden=until-found` 的可搜索折叠内容。\n\n所有示例均可按标题和内容搜索。请记得验证浏览器支持并为生产环境提供后备方案。
来源: Hacker News · 由HeadlinesBriefing整理摘要