实践
Popover API 原生弹层与可访问性治理实践
以 Popover API 构建原生弹层与提示组件,内置焦点与可访问性语义,结合键盘导航与关闭策略实现稳定交互并降低自定义实现的复杂度与风险。
View Transitions API 跨路由动画与状态保留实践
基于 View Transitions API 构建跨路由一致动画与状态保留方案,验证在 SPA 场景下的性能与可访问性收益。
View Transitions API 页面过渡与导航动画实践
利用 View Transitions API 为 SPA 导航与组件级切换提供稳定、一致的页面过渡效果,并通过受控布局与图片过渡提升用户体验与核心指标。
CSS ScrollTimeline-ViewTimeline 滚动驱动动画实践 进度条-元素入场
使用 ScrollTimeline 与 ViewTimeline 构建滚动驱动的进度条与元素入场动画,在不依赖 JS 的前提下实现高性能视觉反馈并保持可访问性退化。
CSS View Transitions 跨路由过渡与图片列表到详情实践 startViewTransition-@view-transition
使用 CSS View Transitions 在 Next.js 15 中实现跨路由过渡与列表到详情的丝滑动画,结合选择器样式治理与还原机制,提升导航体验而不破坏可访问性与性能。
Cookie 前缀 __Secure- 与 __Host- 治理实践
使用浏览器认可的 Cookie 安全前缀(__Secure- 与 __Host-)强化会话与配置的安全属性,结合路径与域治理,降低被滥用与跨站风险。
Next.js 15 CSP 与 Trusted Types 实践 nonce-policy-脚本注入防护
在 Next.js 15 中配置严格 CSP 与 Trusted Types,通过 nonce、策略与受信脚本治理,系统性降低 XSS 风险并保持可维护的脚本加载方式。
Next.js 15 Edge Middleware 签名 Cookie 与 JWT 校验实践 路由保护-重定向
在边缘校验签名 Cookie 与 JWT,实施路由保护与登录重定向,在 Next.js 15 中构建低延迟且一致的访问控制方案。
Next.js 15 Edge Middleware 速率限制与机器人防护实践 Token Bucket-User-Agent-挑战
在边缘使用 Middleware 实施速率限制与机器人防护,基于 Token Bucket、User-Agent 与路径挑战策略降低恶意流量并保障服务稳定性。
