前端技术文章
-
用 View Transitions API 给列表新增、删除和筛选加上稳定的视图过渡，同时保留不支持浏览器和减少动态效果用户的可用回退。441 收藏 -
首屏图片明明已经压缩，LCP 仍然偏慢，常见原因是资源发现晚、优先级被误用或懒加载挡住了关键图。本文用 fetchpriority、loading、preload 和 DevTools 网络瀑布建立一套可验收的加载顺序。476 收藏 -
前端列表从几百行涨到上万行后，滚动掉帧通常不是单个 CSS 属性造成的。本文用长列表筛选和滚动场景拆解 DOM 数量、批量渲染、可视窗口与主线程任务，给出可复现的 60 FPS 验收方法和回退边界。458 收藏 -
横向卡片滑动不应只停在 scroll-snap-type：用 scroll-snap-align、scroll-padding 和 scroll-snap-stop 组合出可控的触摸体验，再用键盘焦点、窄屏和快速甩动验收边界。404 收藏 -
文章 · 前端 | 1个月前 | 浏览器 · javascript · scheduler.postTask Prioritized Task Scheduling TaskController 前端任务调度
用 scheduler.postTask 把用户可见工作与后台任务分开，讲清优先级、TaskController 取消、能力检测和不支持时的 setTimeout 降级边界。372 收藏 -
CSS color-mix() 可以从基础主题色派生 hover、浅底和边框状态，但混合空间与透明度会改变最终观感。本文用 token、对比度和 fallback 验收一套可落地的主题色方案。465 收藏 -
从输入事件顺序、中文输入法组合态和浏览器 undo 栈三个角度，排查表单撤销失效，并给出可验收的实现边界。186 收藏 -
网页里同时存在 dialog、抽屉和自定义浮层时，可用 CloseWatcher 统一接收 ESC 或系统返回关闭请求，再把焦点恢复、脏数据确认和旧浏览器回退放进同一条关闭链路。126 收藏 -
用 CSS @container style() 读取组件祖先的自定义属性，让同一组件在浅色、深色和高对比主题下保持局部样式一致，并补上浏览器降级与可访问性检查。136 收藏 -
当 hover 位移、入场缩放和循环旋转同时写进一个元素时，animation-composition 可以明确 transform 的叠加方式。本文用 add、accumulate 和 replace 拆开关键帧冲突，并给出兼容降级与验收方法。210 收藏 -
搜索框快速输入时，慢请求可能晚于新请求返回，旧结果就会覆盖当前关键词。本文用请求序号、AbortController 和有限并发预算拆解竞态边界，并给出取消、回收和键盘操作下的验收办法。260 收藏 -
用 Intl.Segmenter 按用户感知的词、句和字素边界处理中英文标题截断，讲清中文分词、emoji、浏览器能力检测与稳定降级方案。433 收藏 -
CSS :has() 让父元素可以根据子元素状态切换样式，适合表单错误提示、选中卡片和条件高亮。文章用 :user-invalid、:checked 与 @supports 说明最小写法、边界和旧浏览器降级。340 收藏 -
CSS corner-shape 可以在 border-radius 的基础上实现 bevel、scoop、notch 和 squircle 等异形圆角，但目前仍需配合 @supports 和普通圆角降级。本文用卡片组件说明写法、参数边界与验收方法。155 收藏 -
CSS reading-flow 可以在特定布局场景下调整 Grid 或 Flex 子项的阅读与 Tab 顺序，但它仍是实验性能力，必须优先保持合理 DOM 顺序，并用浏览器能力检测安排降级。124 收藏