前端技术文章
-
replaceAll在现代环境（Chrome85+/Firefox78+/Safari13.1+/Node.js15.0+）原生支持，专用于全局字面量替换，不接受带g标志的正则，纯字符串匹配不转义元字符，简单替换更安全高效，复杂逻辑仍需replace。199 收藏 -
因为HSL的H值是0–360循环色相，从0线性过渡到360可平滑遍历全光谱；须用hsl()而非rgb/十六进制，且@keyframes起止设为hsl(0…)和hsl(360…)以确保完整一圈。247 收藏 -
本文详解如何解决React中搜索栏触发的图片异步请求因竞态条件（racecondition）导致显示上一次请求结果的问题，通过useCallback+依赖追踪+正确await链，确保每次搜索只渲染对应请求的最新图片数组。375 收藏 -
footer标签必须闭合，否则导致DOM错乱、JS获取失败、CSS失效；需正确嵌套于节根元素内，承载版权等元信息，语义明确且配合CSS实现贴底效果。145 收藏 -
rebeccapurple是CSS中唯一以真实人物命名的颜色，致敬EricMeyer之女Rebecca，无技术优势但具人文意义；色值固定为#663399，IE8及更早版本静默忽略，需谨慎评估兼容性与设计必要性。433 收藏 -
JavaScript正则校验邮箱用/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/，手机号用/^1[3-9]\d{9}$/；需trim()预处理、前后加^$保证全匹配，且后端必须二次验证。460 收藏 -
直接在打印前注入样式比@mediaprint更灵活，适合报表类页面；利用window.onbeforeprint动态插入专有CSS，并在onafterprint中清理，可实现主题切换、数据响应式样式及局部打印优化。232 收藏 -
直接用:lang(zh)重写字体变量行不通，因为:lang()伪类不支持动态重赋值CSS变量，且修改变量后font-family不会自动重新解析；正确做法是用[lang="zh-CN"]等属性选择器直接声明字体链。271 收藏 -
Subgrid目前不能用于解决常规嵌套容器对齐问题——它不被主流浏览器广泛支持，且仅适用于特定场景；应优先确认是否遗漏display:grid、误用margin:auto或轨道无高度空间等基础问题。369 收藏 -
CSS变量穿透ShadowDOM需宿主元素显式声明，否则var()解析失败；:host是唯一可靠注入入口，adoptedStyleSheets不传递变量作用域，iOSSafari16.4前存在继承bug。245 收藏 -
word-break:break-all需配合min-width:0、max-width及white-space:normal才生效；单独使用在Flex容器中常因min-width:auto失效，且必须避免flex-shrink:0和nowrap干扰。417 收藏 -
requestAnimationFrame仅负责调度，不提供物理计算；真正决定滚动丝滑度的是基于velocity、position、lastTime的衰减模型与边界处理逻辑。152 收藏 -
核心是将“今年生日”与“当前日期”转为Date对象计算毫秒差；若今年生日已过，则自动设为明年生日，再用Math.ceil(diffMs/86400000)得精确天数。492 收藏 -
slot属性仅在ShadowDOM中生效，需严格匹配大小写与层级结构，直系子元素才能被正确分发，否则内容静默消失。191 收藏 -
<s>标签专用于标记曾准确但现已失效的内容，如过期价格、停用功能名、废止条款；不支持cite/datetime属性，不可与嵌套混用，且需配合CSS增强可访问性。303 收藏