-
浏览器支持NotificationAPI需同时满足：Notification构造函数存在（typeofNotification!=='undefined'）且Notification.permission可读；Safari旧版、IE不支持，Edge18+、Chrome、Firefox、新版Safari支持。
-
暗黑模式需结合CSS变量与data-theme类控制，媒体查询仅作初始兜底；必须同步localStorage与HTMLclass，所有颜色须用语义化变量，避免硬编码。
-
background:rgba()不等于磨砂玻璃效果，因其仅实现半透明色块而无模糊；真磨砂需transparent背景+backdrop-filter:blur()，并确保背景固定、容器不遮挡、文字对比度达标且避开iOS硬件加速陷阱。
-
<main>标签必须且只能出现一次，是强制规范而非建议，用于确保屏幕阅读器和键盘用户能准确定位页面唯一核心内容，缺失或错误使用将导致无障碍访问严重受损。
-
必须显式传入radix，因省略时JavaScript依前缀自动推断进制，导致Number.parseInt("010")在不同环境结果不一致；显式指定如Number.parseInt("010",10)可确保行为确定。
-
clamp()是现代CSS实现字体自适应最稳方案，支持Chrome88+、Firefox79+、Safari14.1+，通过min/preferred/max三值约束缩放边界，避免vw单位在极端屏幕下的可读性或溢出问题。
-
stroke-dashoffset动画卡顿的主因是路径长度未对齐，需用pathLength强制标准化单位；设pathLength="100"后统一按100计算偏移，禁用getTotalLength()，否则混用会导致节奏错乱。
-
keygen的challenge属性仅作为任意字符串嵌入CSR的attributes字段供后端关联上下文，不参与加密或密钥生成；Chrome65+、Firefox69+等已彻底废弃该元素，须改用WebCryptoAPI手动构造含challenge的PKCS#10CSR。
-
Flex布局与MediaQuery结合可高效实现响应式设计，简化传统布局复杂性；2.Flex通过display:flex、flex-direction、justify-content等属性实现子元素自动伸缩与对齐，适应不同屏幕尺寸。
-
line-height是控制行距的唯一正确属性，应使用无单位数值；段落间距用margin-bottom；外边距折叠是规范行为；避免滥用p标签破坏语义。
-
JavaScript进制转换核心是parseInt（支持radix参数），parseFloat仅处理十进制浮点数且不支持进制；parseInt按radix解析开头有效数字，自动识别0x/0b/0o前缀，而parseFloat遇非法字符即停并返回NaN。
-
HWB颜色模式是CSSColorModuleLevel4引入的新特性，语法为hwb(色相白度黑度/透明度)，通过调节色相、添加白黑成分直观调色，语义清晰，适合设计柔和色彩，相比HSL更接近传统绘画调色方式，主流浏览器已逐步支持，推荐配合RGB等回退方案使用。
-
$grid-columns默认为12是兼顾整除性与实用性的折中选择：可被1、2、3、4、6、12整除，支持span3/4/6等常见等分；8栏无法三等分，24栏导致类名冗长、CSS膨胀。
-
fixed导航栏遮挡锚点内容是因浏览器将目标元素顶部对齐视口顶部，而scroll-padding-top（设于html）可精准偏移滚动终点，仅影响滚动逻辑不破坏布局，Chrome89+/Firefox90+/Safari15.4+原生支持。
-
JS动态改样式卡顿的根源是强制同步布局、无效图层提升及重绘未GPU加速；Performance面板中Layout/Paint/CompositeLayers异常、Rendering面板层边框缺失或红色闪烁、Styles面板Compositedlayer为false均指向具体优化点。
