前端技术文章
-
CSS变量不能直接存储复杂阴影值，需拆解为--shadow-x、--shadow-y等参数分别定义后组合使用；若用单变量存多层阴影，必须用引号包裹并确保逗号空格正确。196 收藏 -
合格电子名片需语义化HTML结构（如header、section、address）、必加viewportmeta、用Flex+rem+媒体查询实现响应式，并慎用伪元素，优先内联SVG处理复杂图形。322 收藏 -
textarea不能用resize限制字数，它仅控制拖拽行为；字数限制必须用maxlength属性或JavaScript监听，两者功能完全独立。303 收藏 -
HTML5不支持原生Diffie-Hellman密钥交换，需依赖WebCryptoAPI实现ECDH（如P-256曲线），且必须在HTTPS/localhost安全上下文中运行；手动JavaScript实现DH存在精度、侧信道和中间人等严重风险。341 收藏 -
用canvas手动画极坐标图最可控：需手动计算极坐标点、平移原点、绘制网格线；Chart.js雷达图易配错选项；D3.js推荐用d3-polar；CSStransform伪极坐标不可靠。226 收藏 -
header代表语义上的“介绍性或导航辅助区域”，非视觉顶部；可嵌套于页面、文章或区块级作用域，须含恰当标题且与CSS布局解耦。103 收藏 -
flex-wrap:wrap换行失效主因是父容器无宽度限制或子元素默认min-width:auto导致强制撑宽；应设父容器width/max-width，避免flex:1，改用flex:00auto或固定宽+flex-shrink:0，并禁用white-space:nowrap；间距推荐用gap替代margin防换行错位。277 收藏 -
<metacharset="UTF-8">必须置于<head>最开头，否则浏览器会以错误编码解析前面的中文内容，导致乱码且无法挽回；<htmllang="zh-CN">影响读屏、SEO和翻译；语义化标签保障嵌套安全与可访问性；<metaname="viewport">是响应式刚需，缺之则移动显示异常。312 收藏 -
直接拼接HTML字符串极易引发结构错乱、编码异常、脚本失效等问题；推荐用BeautifulSoup提取各文件body子节点合并，或用jQueryload()动态加载，兼顾安全与可维护性。165 收藏 -
BEM通过block__element--modifier命名强制作用域隔离，降低样式覆盖成本；禁用复杂选择器、依赖工具链校验与编辑器支持，并需配合设计令牌管理全局变量。486 收藏 -
使用@keyframes统一box-shadow和border-color动画关键帧，结合will-change或translateZ启用硬件加速，通过CSS变量保持颜色一致性，并注意浏览器兼容性与prefers-reduced-motion适配，可解决闪烁、卡顿等问题，确保动画流畅同步。280 收藏 -
JavaScript类型系统基于值而非变量，需掌握隐式与显式转换规则；使用===避免意外转换，通过Object.prototype.toString.call()实现精确类型检测，理解falsy值（如0、''、null等）以提升代码健壮性。486 收藏 -
JavaScript数组方法核心是分清修改原数组（如push、sort）与返回新数组（如map、filter），避免状态意外变更；注意find/findIndex边界行为、异步操作陷阱及链式调用类型安全。472 收藏 -
aria-readonly仅向辅助技术传达只读语义，不改变交互行为；必须与原生readonly或事件拦截配合使用，否则会导致语义与实际行为错位。466 收藏 -
柯里化是让函数分步接收参数并返回新函数，直至参数齐备才执行，不改变原始逻辑而适配函数式编程；需按语义分层固化参数、用通用curry工具指定arity、结合闭包预置上下文，并自然融入pipe/compose数据流。128 收藏