前端技术文章
-
前端列表从几百行涨到上万行后，滚动掉帧通常不是单个 CSS 属性造成的。本文用长列表筛选和滚动场景拆解 DOM 数量、批量渲染、可视窗口与主线程任务，给出可复现的 60 FPS 验收方法和回退边界。458 收藏 -
横向卡片滑动不应只停在 scroll-snap-type：用 scroll-snap-align、scroll-padding 和 scroll-snap-stop 组合出可控的触摸体验，再用键盘焦点、窄屏和快速甩动验收边界。404 收藏 -
文章 · 前端 | 3星期前 | 浏览器 · 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 收藏 -
用浏览器目录句柄完成选择与读写权限复查，配合安全上下文、用户手势和传统上传降级完成前端文件工作流。251 收藏 -
普通 CSS 自定义属性更像字符串，直接参与渐变时常常只能跳变。本文用 @property 注册颜色属性，说明 syntax、inherits、initial-value 的配合方式，并通过渐变、无障碍和旧浏览器降级检查完成验收。443 收藏