-
@mixin更适合现代CSS架构；它支持参数、条件逻辑、@content嵌套及动态生成，维护成本低且作用域清晰；@extend虽编译紧凑但易致样式污染、调试困难、隐式依赖强，且无法响应动态需求。
-
new.target无法防止异步构造函数被劫持，因JavaScript不支持asyncconstructor；它仅能防护new调用路径的入口伪造，需结合静态工厂冻结、环境校验、懒初始化和代码完整性校验等多层策略。
-
color()函数不支持印刷专色，device-cmyk()和color(cmyk...)均无效；唯一可用广色域空间是display-p3，需@supports检测且仅在P3屏幕生效；印刷场景应脱离CSS，交由专业印前流程处理。
-
动态注入CSS的核心方法是appendChild而非insertAdjacentHTML；前者通过document.createElement('style')创建元素更可控，支持后续操作与统一管理，后者仅适合一次性内联样式调试。
-
滚动透明需用scrollY输入、requestAnimationFrame节流、CSS变量驱动，避免直接改style导致卡顿；用--scroll-alpha配合transition实现平滑渐变，兼顾性能与可维护性。
-
object不能完全替代iframe，仅适用于同源静态资源嵌入；跨域HTML加载在Chrome/Edgev120+被禁用，且缺乏sandbox、referrerpolicy、loading="lazy"等关键能力。
-
document.timeline是WebAnimationsAPI提供的只读属性，返回当前文档默认的DocumentTimeline实例，用于统一动画时间基准；它在Chrome60+、Edge79+、Firefox73+中可用，但Safari（含17版）不支持，访问时返回undefined。
-
本文讲解如何在为DOM元素动态添加/切换CSS类的同时，可靠阻止其默认点击行为（如<a>标签跳转），解决preventDefault()失效的常见问题。核心在于正确绑定事件、精准选择目标元素，并用returnfalse统一处理阻止默认行为与停止事件冒泡。
-
可用的下拉框需用<selectname="xxx">包裹多个<optionvalue="val">文本</option>，name确保提交字段，value指定提交值，selected设默认项，disabled可禁用整体或单选项。
-
CSStransition对颜色插值默认采用RGB空间线性计算，即R、G、B三通道各自独立按时间比例插值，不感知人眼视觉均匀性；如#ff0000→#0000ff中途得#800080，而#ff0000→#00ff00会经过灰褐调的rgb(128,128,0)；目前无浏览器在transition中原生支持LCH/OKLCH插值，仅@keyframes（Chrome112+/Safari16.4+）在全用同色函数时才启用LCH空间插值。
-
图片懒加载与预加载结合可显著提升网页性能。1.懒加载通过IntersectionObserverAPI延迟加载视窗外图片，减少初始请求；2.预加载在空闲或用户操作前提前加载关键资源；3.首屏直接加载、非首屏懒加载并配合占位图与尺寸设置优化体验。
-
原生<inputtype="date">宽度无法直接用width:100%撑开，因浏览器为其设定了默认min-width（如Chrome约130px），需显式设置min-width:0和box-sizing:border-box才能生效；Flex布局中同样需min-width:0配合flex:1；Safari兼容性最差，建议优先考虑自定义方案。
-
用唯一键（如临时URL或内容哈希）关联Blob和File元数据，Map中只存业务元数据，封装统一接口处理类型转换与键生成，前端Map仅限当前会话，需结合服务端ID做持久化对齐。
-
使用相对单位和媒体查询实现按钮响应式，通过rem、em、%或vw设置尺寸，并结合@media调整不同屏幕下的字体与间距，确保适配各类设备。
-
iOSWebView中无法直接触发HTML5下拉刷新，需通过touchstart/touchmove拦截并e.preventDefault()阻止原生橡皮筋效果，配合overscroll-behavior-y:contain及正确滚动容器配置，同时用Math.abs(window.scrollY)<1替代scrollY===0避免iOS浮点误差。
