前端技术文章
-
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 收藏 -
在React中使用Flexbox水平展示SVG数组时，SVG尺寸随元素增减而缩放？关键在于禁用弹性伸缩行为——通过为每个SVG包裹容器设置flex:00auto并配合固定宽高（如width:"25%"或绝对像素值），即可实现等宽、不压缩、响应式排列。140 收藏 -
footer文字水平居中直接用text-align:center最稳妥，因footer是块级元素，该属性专管其内部行内内容排列；错误做法包括写在span上、与flex混用或误用margin:0auto。207 收藏 -
color-scheme不是深色模式开关，仅声明支持的系统配色方案；需通过<meta>或:root声明才能使原生控件适配系统偏好，且不影响自定义元素样式。266 收藏