-
无法直接对HTML画中画（PiP）原生控件进行样式化，因为浏览器出于安全、用户体验一致性和技术实现复杂性的考虑，严格限制了对系统级UI元素的样式控制，尤其是画中画窗口本身不属于网页DOM结构，导致CSS无法直接作用于其内部控件；真正的解决方案是构建自定义视频播放器UI，通过JavaScript调用requestPictureInPicture()和exitPictureInPicture()方法来控制画中画状态，并结合自定义按钮和样式实现完全可控的视觉效果；而:pseudo-classpicture-in
-
纯CSS无法自动根据background-color计算反色，需通过CSS变量预设配对色值、媒体查询或JS判断明暗后设置class；推荐用data-theme控制多套主题色，避免filter:contrast()等误用。
-
capture是布尔属性，需配合type="file"和精确accept值（如image/*）才能触发原生设备；iOSSafari要求input静态存在于DOM、用户手势直触且禁用桌面模式；Android行为不一，微信X5基本不支持；应以getUserMedia+MediaRecorder为可靠替代方案。
-
用<linkrel="icon">实现图标预览面板，需提取其href值作为<img>源（推荐转为.png/.svg），或用fetch()+BlobURL可靠加载并处理.ico/SVG；配合IntersectionObserver懒加载、rel属性精准搜索及错误缓存机制。
-
浮动图片下方空白是因img作为inline元素在IFC中按基线对齐，预留降部空间所致；设display:block可彻底解决，使其脱离基线对齐逻辑。
-
::marker是CSS中用于选中列表项前默认符号的伪元素，可单独设置颜色、字体、内容等样式，但仅对display:list-item元素生效且兼容性有限。
-
HTML与JavaScript必须协同工作：HTML提供DOM节点，JavaScript才能操作；document.getElementById是最稳的获取方式，但需判空防错；querySelector/All更灵活但有陷阱；内联onclick是维护雷区；script放置位置决定DOM可用性。
-
原生单选框无法直接设置border-radius或background-color，因浏览器对其样式强封装；需隐藏原生input（用opacity:0+position:absolute+pointer-events:none），再通过label::before/after绘制自定义样式，并确保HTML中input在label前且id/for匹配。
-
需同时配置viewport元标签、调用FullscreenAPI、用CSS强制铺满并监听屏幕变化：1.viewport设width=device-width、initial-scale=1.0且禁缩放；2.手势触发requestFullscreen()并兼容前缀；3.CSS用fixed+100vh/vw+overflow:hidden模拟全屏；4.监听resize/orientationchange动态调整高度。
-
根本原因是加载顺序和作用域隔离：:root变量仅在定义它的CSS文件内生效，且必须在使用前被解析；跨文件需将变量集中于独立variables.css并作为首个<link>引入。
-
main标签用于定义页面核心内容，提升语义化与可访问性，一个页面仅能使用一次，不可嵌套在header、footer等元素内，应排除导航、页脚等公共部分。
-
用Sass@for循环生成多层linear-gradient实现精准等距条纹，每层独立控制position避免重叠漏缝；推荐px单位统一、显式设置背景尺寸；复杂场景用map管理配置；background-blend-mode需与所有图层同声明且顺序严格对应。
-
屏幕阅读器适配核心是语义化DOM结构，原生标签（如<button>、<nav>、<h1>–<h6>）优先于ARIA；表单需显式关联label；动态内容须用aria-live；skip-link必须首个可聚焦且锚点有效。
-
只有noopener和noreferrer会影响浏览器安全行为：noopener阻止新页面通过window.opener访问原页面，noreferrer还禁发Referer头；二者必须配合target="_blank"才生效，其他rel值如nofollow、external对安全无实质作用。
-
最简方案是在<body>顶部放带id的loading元素并用内联样式隐藏，JS立即控制显隐；请求时严格对齐生命周期显隐，推荐纯CSS旋转图标；SPA需覆盖路由、组件加载等多链路，以异步收敛点为退出时机。
