7个实用CSS兼容性处理和其他技巧

1.Autoprefixer 自动加前缀

npm install autoprefixer postcss-cli -D

// postcss.config.js
module.exports = { plugins: [require('autoprefixer')] };

自动添加浏览器前缀，支持 IE11+。

2.Grid 降级方案

.grid {
  display: flex;
  flex-wrap: wrap;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

为旧浏览器提供基础布局。

3.CSS 计数器

.counter { counter-reset: item; }
.item::before { content: counter(item); counter-increment: item; }

自动生成有序列表编号。

4.隐藏滚动条但保留滚动功能

.scrollable {
  overflow: auto;
  -ms-overflow-style: none; /* IE */
  scrollbar-width: none; /* Firefox */
}
.scrollable::-webkit-scrollbar { display: none; }

适用于模态框或特殊设计需求。

5.文本方向适配 RTL 语言

.rtl { direction: rtl; unicode-bidi: embed; }

支持阿拉伯语、希伯来语等右向文字。

6.CSS Regions 多列文本

.region {
  flow-into: my-region;
}
.container {
  flow-from: my-region;
  column-count: 3;
}

实现报纸式多列排版，需浏览器支持。