前端技术文章
-
直接写transition-duration:0.3s无效，因必须与transition-property或完整transition简写共用；硬编码导致维护混乱，应使用语义化CSS变量（如--transition-fast）并按场景选用。436 收藏 -
VueRouter的通配符/:pathMatch(.*)*无法捕获已匹配动态路由（如/movie/:id）的非法参数请求，需结合参数正则约束、服务端响应拦截与路由守卫实现真正可靠的404处理。363 收藏 -
dir属性是HTML原生方向开关，必须显式设于根元素或容器，不可被CSS的direction替代，因其触发Unicode双向算法，影响光标、表单、焦点流及屏幕阅读器解析。108 收藏 -
本文详解解决自定义光标（img元素）在mouseleave事件中无法隐藏的问题，核心在于为光标图像添加pointer-events:none，避免其遮挡父容器事件捕获。146 收藏 -
replaceAll是同步方法，无法用于异步流式脱敏；它仅适用于轻量静态文本处理，大文本或流场景需用状态机+缓冲+WebWorker等流式策略替代。329 收藏 -
html-loader的sources选项需用对象配置，在list中显式声明自定义标签/属性规则（如{tag:"my-component",attribute:"data-image"}），配合urlFilter过滤CDN路径，并为srcset单独设type:"srcset"规则。376 收藏 -
纯前端多语言切换的核心是用data-i18n标识元素，通过语言包映射替换textContent/innerHTML及src等属性，配合localStorage持久化语言偏好，并在DOM渲染前完成初始化以避免闪屏。313 收藏 -
根本原因是GPU双线性插值处理文字纹理导致发虚；应优先采用整数像素对齐策略，如用left/top+margin替代translate(-50%,-50%)，或JavaScript四舍五入坐标，避免非整数缩放。127 收藏 -
Firefox对空白字符处理更严格，严格遵循HTML5规范导致排版错位；应使用white-space:pre-wrap等CSS属性控制，避免混用不换行空格与普通空格对齐，调试时须查看computedstyles中的white-space值。111 收藏 -
allow-popups不直接启用window.open()，仅赋予弹窗能力；真正弹出需同时配置allow-popups-to-escape-sandbox，且调用必须由用户手势触发，否则会被浏览器拦截或静默失败。375 收藏 -
linear-gradient()是background-image的值，需配合颜色停止点使用；方向可写toright或45deg等，不写默认tobottom；颜色透明度表达方式须统一；简写background会清空渐变，应单独设background-image或将渐变置于background值最前。312 收藏 -
GSAP的Timeline可精确控制动画时序，通过位置参数实现串联、延迟、重叠；支持播放、暂停、倒放、跳转等交互控制，并可用标签提升复杂动画的可维护性。158 收藏 -
推荐用data-ext属性存小写后缀并配合[data-ext$="pdf"]选择器，避免href路径干扰；图标用::before+content插入字体图标或Unicode，需设display和font-size；注意大小写敏感，JS提取后缀时应转小写。456 收藏 -
普通函数直接调用时，非严格模式下this指向全局对象（如window），严格模式下为undefined；箭头函数无this，继承外层作用域；call/apply/bind可手动指定this，bind返回的新函数this不可再被call/apply更改；对象方法赋值后调用会丢失this绑定；new调用时this指向新创建的实例。248 收藏 -
主题颜色变量未生效的四大原因：变量定义位置错误、构建流程未读取新配置、CSS选择器权重不足、运行时主题切换未清除旧样式缓存，需逐一排查。104 收藏