[特殊字符]真正高级的前端，早就用这 10 个 CSS 特性干掉 80% 冗余代码

一键夜间模式告别手动配置暗主题你是否还在单独写变量控制夜间模式使用 prefers-color-scheme媒体查询结合filter属性实现一键切换夜间模式无需单独配置暗黑色值。/* 夜间模式查询可选 */ media (prefers-color-scheme: dark) { body { /* 一行代码搞定 */ filter: invert(1) hue-rotate(180deg); background-color: #000 } /* 图片还原真实颜色避免被整体反色影响 */ img { filter: invert(1) hue-rotate(180deg); } }2. 一键适配纯 CSS 搞定 REM 自适应clamp()calc()实现 16-22px 根字体流体排版style html { font-size: clamp(16px, calc(16px 2 * (100vw - 375px) / 39), 22px); } /style p39是(768-375)/6 ≈ 39的简化, 所以公式等价 , 只是写法不同 /p3.currentColor 一行实现智能换肤借 color: inherit 继承主题色currentColor关联 color [data-theme] 属性区分不同主题section classmodule h4模块标题/h4 content ulli文字描述/lili文字描述/lili文字描述/li/ul button了解更多/button /content /section section classmodule>p 宝贝 span classemphasis爱你/span span classemphasis比心/span /p style .emphasis { /* 强调装饰符 */ -webkit-text-emphasis-style: ❤; text-emphasis-style: ❤; /* 控制文字方向 */ writing-mode: vertical-rl; text-emphasis-position: over right; } /style7. 增强版滚动scroll-behavior: smooth 让上下滚动更顺滑!-- HTML -- div classbox div classlistinput idone readonly1/div div classlistinput idtwo readonly2/div div classlistinput idthree readonly3/div div classlistinput idfour readonly4/div /div div classlink label classclick forone1/label label classclick fortwo2/label label classclick forthree3/label label classclick forfour4/label /div style /* 核心CSS */ .box { width: 20em; height: 10em; /* 平滑滚动scroll-behavior: smooth,.box 中的 scroll-behavior: smooth 是体验优化 让浏览器滚动到聚焦元素的过程是 “平滑过渡”而非瞬间跳转提升交互体验。 */ scroll-behavior: smooth; overflow: hidden; } .list { height: 100%; background: #ff4c4c; text-align: center; position: relative; } .listinput { position: absolute; top: 0; height: 100%; width: 1px; border: 0; padding: 0; margin: 0; clip: rect(0 0 0 0); } /style8. 阻止连带滚动内部滚动牵动外部滚动是常见坑overscroll-behavior : contain 可限定滚动域防止穿透!-- 阻止连带滚动 -- zxx-scroll 你想了解 overscroll-behavior: contain 和 -ms-scroll-chaining: contain 这两个 CSS 属性的作用以及它们在实际开发中的价值我会用通俗易懂的方式拆解这两个属性的核心功能、使用场景和差异。 核心作用: 解决 “滚动穿透” 问题 这两个属性的核心目标是阻止滚动行为的 “链式传递” ( 俗称 “滚动穿透” ) 简单说: 当你在一个可滚动的小容器 ( 如弹窗、侧边栏 ) 内滚动到顶部 / 底部时继续滑动页面的外层容器 ( 如整个网页 ) 不会跟着滚动 没有这个属性时小容器滚动到底部后再滑动会触发整个页面的滚动破坏交互体验 ( 比如弹窗内滑动导致背景页面滚动 ) 。 逐属性拆解 1. overscroll-behavior: contain ( 标准属性 ) 定位: W3C 标准 CSS 属性现代浏览器 ( Chrome/Firefox/Safari/Edge ) 均支持 核心值: contain: 限制滚动行为在当前元素内不会传递给父元素 auto ( 默认 ) : 允许滚动穿透 none: 不仅阻止滚动穿透还会禁用浏览器的默认滚动反馈 ( 如 iOS 的弹性回弹 ) 。 /zxx-scroll !-- 连带滚动 -- p classtest你想了解 overscroll-behavior: contain 和 -ms-scroll-chaining: contain 这两个 CSS 属性的作用以及它们在实际开发中的价值我会用通俗易懂的方式拆解这两个属性的核心功能、使用场景和差异。 核心作用: 解决 “滚动穿透” 问题 这两个属性的核心目标是阻止滚动行为的 “链式传递” ( 俗称 “滚动穿透” ) 简单说: 当你在一个可滚动的小容器 ( 如弹窗、侧边栏 ) 内滚动到顶部 / 底部时继续滑动页面的外层容器 ( 如整个网页 ) 不会跟着滚动 没有这个属性时小容器滚动到底部后再滑动会触发整个页面的滚动破坏交互体验 ( 比如弹窗内滑动导致背景页面滚动 ) 。 /p p /p style * { margin: 0; padding: 0; box-sizing: border-box; } zxx-scroll { display: block; width: 180px; height: 100vh; padding: .5em 1em; border: solid deepskyblue; overflow: auto; /* 核心css */ overscroll-behavior: contain; -ms-scroll-chaining: contain; } .test { width: 180px; height: 300px; overflow: auto; } /style9. 丝滑滚动急停使用scroll-snap-type 和 scroll-snap-align 属性实现滚动时的自动对齐效果。!-- scroll-snap-align: center定义图片在滚动容器中的吸附对齐点center 居中还可设 start/end 配合容器的scroll-snap-type实现滑动后图片自动居中对齐。 -- div classscroll-x img src./图片/风景.webp img src./图片/image.png img src./图片/image copy.png img src./图片/image copy 2.png /div style .scroll-x { max-width: 414px; height: 420px; margin: auto; scroll-snap-type: x mandatory; white-space: nowrap; overflow-x: auto; overflow-y: hidden; } .scroll-x img { width: 300px; height: 400px; scroll-snap-align: center;/* 图片居中吸附 */ } /stylescroll-snap-type设置滚动容器的吸附类型scroll-snap-align设置子元素的吸附对齐点强制吸附实现滚动后的精确定位10. 滚动锁定急停使用 scroll-snap-type 的不同值实现不同的滚动吸附效果。section h4垂直滚动 - mandatory/h4 div classscroll scroll-y mandatory img srcwallpaper-1.jpg img srcnature-1.jpg img srcwallpaper-3.jpg img srcnature-2.jpg /div /section section h4垂直滚动 - proximity/h4 div classscroll scroll-y proximity img srcwallpaper-1.jpg img srcnature-1.jpg img srcwallpaper-3.jpg img srcnature-2.jpg /div /section style .scroll { overflow: auto } .scroll-y { max-width: 300px; height: 150px } .mandatory { scroll-snap-type: y mandatory } .proximity { scroll-snap-type: y proximity } .scroll img { scroll-snap-align: center } /stylescroll-snap-type: mandatory强制吸附到最近的对齐点scroll-snap-type: proximity仅在接近对齐点时吸附垂直滚动实现类似轮播图的效果