前端技术文章
-
用 border-radius 先建立圆角区域，再通过 CSS corner-shape 绘制 notch、bevel、scoop 等卡片边角，并用 @supports 保留旧浏览器的圆角降级。331 收藏 -
WebTransport datagrams 适合传递可丢失、可乱序但追求时延的实时状态。本文从连接、发送、接收、序号过滤和背压边界出发，给出浏览器端的最小实现与通道选型清单。331 收藏 -
围绕 Web Performance Long Tasks 讲清 50ms 判定边界、PerformanceObserver 记录方式、任务归属分析，以及用批次和让出主线程拆分同步工作的实用方法。330 收藏 -
JavaScript 的 getClientRects() 返回多个矩形，通常是因为元素是跨多行的行内元素，每一行都有自己的 CSS border box。本文说明 DOMRect 的视口坐标、滚动影响、空列表与零尺寸矩形的区别，并给出与 getBoundingClientRect() 的选择方法。330 收藏 -
通过 navigator.locks.request 为同源多标签页使用稳定锁名，把刷新或同步任务放进异步回调；本文说明排队等待、自动释放、ifAvailable 和 AbortSignal 的边界。329 收藏 -
讲清 Web Animations API 的 Animation.commitStyles() 如何把动画当前计算值写入目标元素的 style 属性，并说明 finished、fill: forwards、cancel() 与兼容策略。324 收藏 -
CSS text-emphasis 是给文字添加着重标记的简写属性。本文从最小用法开始，说明 filled、open、dot、circle、sesame 和自定义单字符的选择，再解释颜色、位置、继承、行高影响以及保留普通文本可读性的降级思路。323 收藏 -
IndexedDB 对象仓库迁移应在 onupgradeneeded 的升级事务中完成。本文用任务库版本 1 升到 2 的例子，说明 oldVersion 分支、游标补字段、索引创建、事务中止及旧标签页阻塞处理。321 收藏 -
Service Worker 缓存优先先读本地缓存，网络优先先请求网络并按约定回退。本文用两个公开资源搭建对比实验，说明更新、断网、HTTP 错误、缓存清理和注册生命周期的区别。320 收藏 -
文章 · 前端 | 8小时前 | 前端 · javascript · Web API Fetch AbortController AbortSignal abort(reason) signal.reason
AbortController.abort(reason) 可以把用户主动取消、页面切换和超时等原因写入 AbortSignal。本文用 fetch 示例说明如何读取 signal.reason、区分取消与真实错误，并排查 signal 复用、响应体读取和 AbortSignal.any 的边界。318 收藏 -
View Transitions API 可以为多页应用的普通导航增加页面连续感。本文从 @view-transition、pageswap、pagereveal 和 view-transition-name 的关系讲起，给出最小 CSS、共享元素命名、过渡伪元素、兼容性与 prefers-reduced-motion 降级方案。315 收藏 -
通过卡片主题覆盖失效的示例解释CSS :is()的最大特异性规则，给出同类分组、组合符保留与:where()默认样式方案，避免合并选择器改变覆盖契约。315 收藏 -
用片段内节点重排示例说明 moveBefore 的用法，区分保留对象与保留状态，并解释同根约束、参考节点、null 末尾位置及兼容降级。314 收藏 -
文章 · 前端 | 2星期前 | 前端 · javascript · JavaScript input textarea setRangeText selectionStart selectionEnd
setRangeText 替换 input 或 textarea 文本后，如何使用 preserve、select、start、end 控制选区，以及怎样区分当前选区与显式替换区间。313 收藏 -
CSS anchor positioning 的关键不只是把浮层贴到锚点，还要用 position-try-fallbacks 处理靠近视口边缘时的换位。本文给出 flip、position-area、@position-try、自定义间距与兼容降级的实现方案。313 收藏