-
现代浏览器默认原生支持HTML5,无需安装或开启;确认特性需检测具体API(如typeoflocalStorage),而非笼统查“HTML5支持”;页面不工作多因新特性兼容性、file://协议限制、MIME错误、隐私模式或权限问题。
-
tap-highlight-color仅在iOSSafari及微信内置浏览器中对<a>和可聚焦元素生效,需加-webkit-前缀、设为transparent,且不能写在伪类中;Android浏览器完全忽略,跨平台应禁用系统高亮并自定义触摸态。
-
用浏览器另存为PDF最简单:按Ctrl+P→选“另存为PDF”→保存;需确保页面完全加载,勾选“背景图形”,注意CSS分页控制和文件校验。
-
用flex布局父容器可让多个grid容器横向并排,因grid-template-columns仅控制单个网格内部列,不影响容器间排列;inline-grid不稳定,嵌套Grid更适合同一布局内的功能区块划分。
-
JavaScript模块系统天然实现单例行为:同一路径模块仅加载执行一次,导出对象被所有导入者共享引用;这是由Node.js的require.cache或ESM的ModuleRecord等加载器缓存机制强制保证的底层契约,而非手写单例模式。
-
HTML5input[type="datetime-local"]的min和max为什么没生效?因为值格式不匹配——min/max要求严格按YYYY-MM-DDThh:mm格式(秒可选,但必须补零),且时区隐含为本地。浏览器一发现格式不对,直接忽略整个属性。错误写法:min="2024-01-01"(缺T和时间部分)正确写法:min="2024-01-01T00:00"或min="2024-01-01T00:00:00"注意:不能写成min="2024/01/01"或带空格的
-
使用CSSfilter结合transition或animation可实现图片悬停时的自然变色、褪色或特效,通过grayscale、brightness等函数控制视觉效果,配合过渡动画使变化流畅,避免生硬切换,提升用户体验。
-
line-clamp在Firefox中不生效,因其原生仅被WebKit/Blink内核支持;需同时满足display:-webkit-box、-webkit-box-orient:vertical和line-clamp:N三条件才在Chrome/Safari/Edge生效。
-
直接双击打开index.html会因file://协议限制导致fetch、ServiceWorker、相对路径资源加载失败,页面白屏或样式丢失;必须通过本地HTTP服务器(如VSCodeLiveServer)运行才能正常预览。
-
WebAnimationsAPI是浏览器原生JavaScript接口,用于编程创建、控制CSS/SVG动画;支持animate()启动、play/pause/reverse/cancel等精细控制,以及finish/cancel事件监听,性能优于rAF且可与CSS动画协同。
-
只倾斜容器不扭曲文字需用伪元素或反向skew抵消:对父容器skew(),子容器用skew(-xdeg);注意热区仍为原矩形,可用clip-path修正。
-
必须同时设置object-fit:cover、object-position:center、明确宽高及避开移动端Safari的vh坑,否则视频会偏移、裁切关键区域或底部留白。
-
font-display:swap需配合preload、font-size-adjust和min-height容器兜底才能缓解移动端CLS,单独使用反而加剧布局跳动。
-
preload仅用于浏览器发现过晚但首屏必需的资源,如CSS中@font-face字体、内联样式中的首屏图片、module脚本依赖的主chunk及Hero区域关键图片;as属性必须准确匹配资源类型,否则降级为普通请求。
-
CSS3的新特性一览:如何使用CSS3改变表格样式简介:CSS(层叠样式表)是用来控制网页样式和布局的标准语言。随着CSS3的推出,我们可以实现更多的图形效果和交互效果。本文将重点介绍如何通过CSS3的新特性来改变表格样式。一、圆角表格在CSS3中,我们可以通过border-radius属性实现圆角效果。通过将border-radius设置为一个较大的值,我