前端技术文章
-
fixed定位使元素脱离文档流并固定于视口，需显式设置top/right；sticky依赖可滚动祖先且受transform等影响；JS方案最可控但需节流和transform优化。349 收藏 -
HTMLPWA对原生APP无技术要求，但三类场景易致误解：企业用WebView壳加载、绕过应用商店时遇iOS限制、需原生桥接调用受限API；WebView加载PWA需满足JS启用、ServiceWorker配置、manifest正确引入等硬性条件。349 收藏 -
translate="no"仅在Chrome104+、Firefox115+、Safari16.4+中有效，作用于<p>、<div>等文本容器及<button>、<label>可见文本，对表单控件、placeholder、SVGtext及JS动态文本无效，且具有单向继承性。349 收藏 -
需在tailwind.config.js的theme.extend.keyframes和theme.extend.animation中配对注册自定义@keyframes，缺一不可；keyframes定义动画帧，animation映射类名与完整声明，且动画名须完全一致。349 收藏 -
闭包是JavaScript作用域机制的自然结果：函数记住并持续访问其定义时的作用域变量；每次调用createCounter()都创建独立词法环境，使c1与c2的count互不干扰。349 收藏 -
使用:focus伪类可实现输入框聚焦效果，通过改变边框颜色、添加阴影和过渡动画提升用户体验，建议保持样式统一并确保可访问性，该方法适用于textareaselect等表单元素。349 收藏 -
clear:both不能解决浮动塌陷，因其仅控制兄弟元素排版，不影响父容器高度；正确方案是clearfix伪元素或改用Flex/Grid布局。349 收藏 -
本文讲解如何修正温度转换计算器中“首次点击即计算0值”的常见问题，通过将事件从onclick改为oninput，并增加空值与类型校验，确保仅在用户真实输入数字时才执行转换逻辑。349 收藏 -
用CSSGrid可精准还原蒙德里安式非对称平衡网格，需手动定义行列尺寸（如200px1fr300px），禁用repeat()均分；色块为独立div平涂纯色，黑线亦为独立色块；慎用vw，推荐clamp()维持比例；务必清除所有冗余间距与样式。349 收藏 -
文章 · 前端 | 2星期前 | 前端 · javascript · URL参数 · 列表筛选 · 页面状态 · 前端 筛选条件 列表页 history.replaceState URLSearchParams 刷新还原
列表页筛选后刷新又回到默认结果，通常不是接口错了，而是筛选状态只存在内存里。本文从复现现象开始，逐步验证状态来源、URL 参数和刷新还原流程，整理一套稳定写法。348 收藏 -
浏览器多图上传需设multiple属性和accept="image/*"MIME类型，禁用点号后缀写法；预览优先用URL.createObjectURL()并及时revoke；多组件共存时用class+closest隔离DOM；缩略图布局推荐CSSGrid。348 收藏 -
应优先选用stylelint搭配postcss-reporter，因其规则细致、支持自定义性能规则（如禁用触发布局的hover、限制!important频次），并可导出JSON/HTML供CI阈值拦截；需手动启用stylelint-performance插件及对应规则，且须将其集成进PostCSS配置链路而非单独运行。348 收藏 -
浏览器按DOM顺序线性尝试<source>，首个可解码播放的即被采用，后续全部跳过；顺序错误、type属性缺失或不匹配、服务端MIME不一致，均会导致回退链断裂。348 收藏 -
navigator.language返回浏览器UI语言的BCP47标签（如"zh-CN"、"en-US"），不能直接当语言代码使用，需转小写、提取主语言码（如"zh"）并校验有效性后方可安全匹配翻译资源。348 收藏 -
TailwindCSS本地加载慢的根源是JIT未生效、content路径遗漏或预构建未包含tailwindcss插件；需确认终端显示“UsingJITmode”，删除purge/mode字段，修正content数组，移除postcss.config.js，并在vite.config.ts中显式配置optimizeDeps.include。348 收藏