你知道有哪些不常用，但非常有用的css属性吗？😎😎😎

Khin
1,831 阅读4分钟

以下是 10 个 CSS 不常用但非常有用的属性，它们能解决特定场景下的复杂问题，甚至替代部分 JavaScript 功能，附带代码示例和应用场景：

1. aspect-ratio

浏览器最低版本备注
Chrome88
Firefox89
Safari15.4iOS 15.4+
Edge88
Opera74
兼容方案不支持IE可用padding-top: 56.25%回退

作用：强制元素保持固定的宽高比，无需手动计算高度。
示例：

.image-container {
  width: 100%;
  aspect-ratio: 16/9; /* 宽高比 16:9 */
}

应用场景：

  • 响应式图片/视频容器，避免布局抖动（CLS 问题）。
  • 统一卡片或广告位的比例。

2. gap（Flexbox/Grid 布局专用）

浏览器Grid支持Flex支持
Chrome66+84+
Firefox61+76+
Safari12.1+14.1+
Edge16+84+
注意IE/旧Edge需用grid-gap移动端Android 4.4+需内核升级

作用：直接在 Flexbox 或 Grid 容器中设置子元素间距，替代传统的 margin 方案。
示例：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* 同时设置行和列的间距 */
}

.flex {
  display: flex;
  gap: 10px; /* Flex 布局也支持！ */
}

应用场景：

  • 快速定义网格或弹性布局的间距，无需处理 margin 的边距重叠问题。

3. counter-reset 和 counter-increment

浏览器支持版本特殊说明
所有主流浏览器IE8+最安全的属性之一

作用：通过 CSS 实现自动计数（无需 JavaScript）。
示例：

ol {
  counter-reset: section;
}
li::before {
  counter-increment: section;
  content: "第" counter(section) "条: ";
}

应用场景：

  • 自动生成带前缀的列表编号。
  • 自定义复杂的序号系统（如法律文档条款）。

4. @supports（特性检测）

浏览器最低版本测试建议
Chrome28避免在IE（全系不支持）使用
Firefox22
Safari9

作用：根据浏览器是否支持某 CSS 特性加载样式（类似 JS 的 if 判断）。
示例：

@supports (display: grid) {
  .container { display: grid; }
}
@supports not (display: grid) {
  .container { display: flex; }
}

应用场景：

  • 渐进增强或优雅降级，兼容老旧浏览器。
  • 安全使用实验性 CSS 特性。

5. currentColor

浏览器支持情况
所有现代浏览器IE9+

作用：继承当前元素的文字颜色，实现动态颜色联动。
示例：

.button {
  color: #333;
  border: 2px solid currentColor; /* 边框颜色自动匹配文字颜色 */
}

应用场景：

  • 简化图标和组件的颜色管理。
  • 主题切换时减少重复代码。

6. scroll-behavior

浏览器支持版本移动端支持
Chrome61Android 61+
Firefox36
Safari❌全系不支持
替代方案使用scrollIntoView({ behavior: 'smooth' })

作用：让页面滚动变得平滑（替代 JS 滚动动画）。
示例：

html {
  scroll-behavior: smooth;
}

应用场景：

  • 实现“返回顶部”按钮的平滑滚动。
  • 锚点跳转时提升用户体验。

7. ::backdrop 伪元素

浏览器支持版本移动端支持
Chrome61Android 61+
Firefox36
Safari❌全系不支持
替代方案使用scrollIntoView({ behavior: 'smooth' })

作用：修改全屏元素（如 <dialog> 或 video）的背景遮罩样式。
示例：

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

应用场景：

  • 自定义模态框的背景模糊效果。
  • 增强全屏模式的视觉沉浸感。

8. isolation: isolate

浏览器支持版本层叠上下文方案
Chrome41替代position: relative + z-index
Firefox36
Safari8

作用：强制元素创建新的层叠上下文，避免 z-index 冲突。
示例：

.modal {
  isolation: isolate; /* 确保内部 z-index 不受外部影响 */
}

应用场景：

  • 解决弹窗被其他元素遮盖的问题。
  • 管理复杂层叠布局时减少 z-index 混乱。

9. text-underline-offset

浏览器支持版本替代方案
Chrome87可用border-bottom + padding
Firefox70
Safari12.1iOS 12.2+

作用：控制下划线与文字的距离（替代传统的 border-bottom 方案）。
示例：

a {
  text-decoration: underline;
  text-underline-offset: 4px; /* 调整下划线位置 */
}

应用场景：

  • 设计精细的文字装饰效果。
  • 避免下划线紧贴文字底部（如中文排版）。

10. line-clamp（多行文本截断）

浏览器支持版本必要前缀
Chrome23需-webkit-前缀
Firefox❌仅支持text-overflow: ellipsis
Safari14.1iOS 14.5+

作用：限制文本显示的行数，并自动添加省略号。
示例：

.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 最多显示 3 行 */
  overflow: hidden;
}

应用场景：

  • 新闻摘要、商品描述的截断显示。
  • 统一列表中文本块的高度。

兼容性策略建议

  1. 无脑使用组（兼容率>95%）：

    • aspect-ratio（需放弃IE）
    • gap（仅Grid布局）
    • currentColor

  2. 条件使用组：

    • @supports做特性检测
    • scroll-behavior添加JS降级方案

  3. 慎用组：

    • ::backdrop（Safari版本要求高）
    • line-clamp（Firefox不支持）

  4. Polyfill方案：

    <!-- 针对aspect-ratio的垫片 -->
<script src="https://cdn.jsdelivr.net/npm/css-aspect-ratio@1.0.3/dist/aspect-ratio.min.js"></script>

建议使用Autoprefixer自动处理兼容性前缀，并在构建流程中集成PostCSS提升兼容性处理效率。

总结

这些属性覆盖了布局优化、动态样式、交互增强等场景，能够显著减少代码复杂度，甚至替代部分 JavaScript 功能。例如：

  • aspect-ratio + gap：快速构建响应式网格布局。
  • scroll-behavior：一行代码实现平滑滚动。
  • currentColor：简化主题切换逻辑。

合理使用这些“隐藏技能”，可以让你的 CSS 代码更简洁、高效！

avatar
文章
阅读
粉丝