-
:focus伪类仅在元素获得焦点时生效，常见失效原因包括tabindex="-1"、disabled/readonly属性及旧版Safari对contenteditable支持不一致；border样式需协调width/style/动画，避免跳动，推荐聚焦时改色加阴影；placeholder颜色需与focus状态协同；移动端必须重置-webkit-appearance和appearance并添加touch-action:manipulation。
-
rotateY翻页动画歪转是因默认变换原点在元素中心，需设transform-origin:leftcenter或050%锚定边缘；左右页需独立旋转并配preserve-3d；卡顿需will-change、requestAnimationFrame及backface-visibility优化；移动端拖拽应分段映射角度并禁用默认滚动。
-
可用纯HTML+CSS实现Google首页静态视觉结构：顶部导航栏、居中搜索区（max-width:584px+flex居中）、底部flex布局的工具栏，关键用margin:auto、max-width和display:flex控制响应式布局。
-
HTML5中引入icon字体需通过<link>加载CSS文件，再用或<span>加类名渲染；不可用<img>加载字体文件。常见问题包括路径错误、类名不匹配、字体未加载或CSS冲突，应检查Network面板和Computed样式。
-
优化懒加载白屏的核心是让白屏“不可见”或“可接受”，关键靠骨架屏过渡、轻量动效、预加载策略及明确的错误反馈。
-
PKCE是移动端/SPA中替代client_secret的唯一合规方案，需用加密安全随机源生成43–128字符的code_verifier，经SHA-256哈希和Base64URL编码得code_challenge，授权请求带code_challenge与S256方法，换token时原样提交code_verifier。
-
懒加载是按需触发资源请求，非渲染完统一加载；loading="lazy"有兼容性差、无法监听状态等缺陷，推荐用IntersectionObserver实现，需注意保存引用、设置rootMargin、加载后取消观察及错误处理。
-
纯前端即可实现实时BMI计算：监听input事件，用parseFloat清洗输入，按中国标准分类并toFixed(1)显示，校验非正数防止NaN，textContent更新结果。
-
推荐使用EventSource（SSE）或WebSocket实现实时物流消息推送，禁用轮询；优先选EventSource（轻量、兼容好、单向），需后端支持text/event-stream；WebSocket适用于需双向通信的场景。
-
background-attachment:fixed在iOS和多数安卓WebView中被浏览器主动禁用以保性能，伪元素+position:fixed是可靠替代方案，需设top/left/right/bottom为0、z-index:-1、background-size:cover与center配合，并避免transform/filter干扰。
-
原生<inputtype="month">兼容性差、样式不可控、无校验和范围限制；推荐用flatpickr（12KB，支持月视图/本地化/禁用逻辑）或手写双下拉（年+月select）实现可靠月选择器。
-
顶部公告条需用position:fixed悬浮，body加padding-top避免遮挡，移动端适配box-sizing和内边距，localStorage持久化关闭状态，支持随机/轮播文案，兼容IE11与无障碍访问。
-
download属性仅对同源链接生效，跨域、BlobURL等场景会失效；真正可控的下载需用URL.createObjectURL配合a.download，或服务端设置Content-Disposition:attachment响应头。
-
自定义元素命名必须含连字符且全小写，如date-picker；constructor仅初始化，DOM操作须在connectedCallback中执行；样式必须注入ShadowDOM；attributeChangedCallback需配合observedAttributes监听属性变更。
-
现代分屏应优先用CSSGrid替代废弃的frameset和易跨域的iframe；同源iframe需设宽高、lazy加载、overflow:hidden；跨域通信必须用postMessage并校验origin。
