工程笔记
写给真正
交付技术栈的人
关于 React、Node.js、TypeScript 与 AI 的文章。有译文正文时显示译文。没有时显示英文，并注明这一点。
标签：CSS
使用 Next.js 的 View Transitions API 实现流畅的类应用级导航体验
使用View Transitions API在Next.js中实现类似应用页面的过渡效果：无需依赖复杂的动画库即可在不同路由间实现共享元素的动态效果，附使用说明。
阅读约 4 分钟五个与链接rel属性相关的提示可提升首次内容绘制速度
在文档的头部使用 preconnect、preload、dns-prefetch、prefetch 和 modulepreload，无需重写应用程序即可预热连接并减少资源加载延迟。
阅读约 3 分钟使用 CSS :has() 根据内容为父元素设置样式
了解：has() 如何最终让选择器能够访问后代元素和兄弟元素，微前端外壳可在何处使用它，以及为何 Shadow DOM 加上类名约定仍然限制着这种模式的应用。
阅读约 6 分钟可被爬虫访问的React手风琴：使用CSS网格实现折叠，而非卸载组件。
构建嵌套的React手风琴组件，将内容保留在DOM中以便索引，通过网格行实现高度动画效果，每层仅允许同时展开一个，并在关闭时重置状态。
阅读约 8 分钟使用 content-visibility 和 contain-intrinsic-size 跳过屏幕外渲染
了解内容可见性功能如何通过自动裁剪来降低长页面的服务器渲染成本，为何必须使用“包含内在尺寸”选项，以及它与虚拟化技术的区别。
阅读约 12 分钟CSS attr() 函数：将 HTML 属性值直接用于样式设置
了解如何通过 typed CSS 的 attr() 函数将数据属性转换为长度、颜色和时间值，其备用方案为何会失效，url() 为何会被限制使用，以及如今该如何安全地实现这一功能。
阅读约 18 分钟谁应该负责控制UI行为？在HTML、CSS和JavaScript之间如何选择。
一个用于判断何时应使用原生HTML和CSS功能（如对话框、弹出层、:has()选择器以及容器查询）来替代JavaScript，以及何时不应如此的框架。
阅读约 15 分钟无需任何动画库的动态竖大拇指反馈按钮
仅使用HTML、CSS以及几行JavaScript，创建一个带有关键帧弹跳动画、激活状态以及数据获取功能的点赞和点踩反馈组件。
阅读约 7 分钟结构、样式与行为：HTML、CSS和JavaScript如何分工协作
一张适合初学者的地图，展示HTML、CSS和JavaScript在网页中的各自功能、它们之间的协作方式，以及哪些常见错误会混淆三者之间的界限。
阅读约 6 分钟
常见问题
关于这些文章
是。每篇都是为本站准备的英文原创改写。结构与代码跟随来源；正文重写并做过重合检查。
英文是来源。只有存在该语言的正文译文时才显示其他语言。缺失或空白的译文仍是英文，包括在本地化网址上。
草稿经编辑后进入发布队列。站点导入只收录新的或有变更的 slug，不会重复添加。
示例仅供说明。上线前请核对技术栈与许可。若需交付，请发来简报。