本文整理了CSS中已废弃或不推荐的属性，分为完全废弃、部分废弃、浏览器前缀废弃及即将废弃属性，并提供了替代方案。
完全废弃属性 ：如HTML的
<font>、align、bgcolor等，应使用CSS的font-family、text-align、background-color替代。
2. 部分废弃属性 ：如带前缀的border-radius、box-shadow，建议使用标准属性；clip被clip-path取代。
3. 浏览器前缀属性 ：如-moz-border-radius，现代浏览器已支持标准语法，无需前缀。
4. 即将废弃属性 ：如grid-column-gap改为gap，Flexbox中的justify-self可能废弃。
建议：
- 新项目避免使用废弃属性，旧项目逐步迁移；
- 使用工具如Stylelint检测代码，确保兼容性与可维护性。
- 遵循CSS标准演进，采用渐进增强策略。
CSS已废弃属性分类总结
下面通过表格整理CSS中已被废弃或即将废弃的属性，这些属性不应该在新项目中使用，并提供了替代方案。
一、已完全废弃的属性（不推荐使用）
这些属性已被现代CSS标准废弃，浏览器可能不再支持或支持有限。
| 废弃属性 | 替代方案 | 废弃原因/说明 |
|---|---|---|
<font>相关属性 |
已由字体相关CSS属性替代 | |
font-face |
@font-face规则 |
语法和功能已完全改变 |
font-family (元素属性) |
CSS font-family属性 |
使用CSS而不是HTML属性 |
font-size (元素属性) |
CSS font-size属性 |
使用CSS而不是HTML属性 |
font-color |
color属性 |
从未成为标准属性 |
| 布局与显示 | ||
align (HTML属性) |
CSS text-align或vertical-align |
使用CSS进行对齐控制 |
valign (HTML属性) |
CSS vertical-align |
表格单元格垂直对齐 |
center元素 |
CSS text-align: center |
语义化不足，使用CSS替代 |
big元素 |
CSS font-size调整 |
语义化不足 |
strike元素 |
CSS text-decoration: line-through |
语义化不足 |
u元素(无语义使用) |
CSS text-decoration: underline |
仅当有语义时使用 |
| 背景相关 | ||
bgcolor (HTML属性) |
CSS background-color |
使用CSS而不是HTML属性 |
background (HTML属性) |
CSS background属性 |
使用CSS而不是HTML属性 |
text (HTML属性) |
CSS color属性 |
使用CSS而不是HTML属性 |
link, vlink, alink |
CSS :link, :visited, :active |
使用CSS伪类 |
| 其他HTML属性 | ||
width, height (在表格等元素上) |
CSS width, height属性 |
使用CSS进行尺寸控制 |
border (HTML属性) |
CSS border属性 |
使用CSS而不是HTML属性 |
cellpadding, cellspacing |
CSS padding, border-spacing |
表格样式控制 |
二、部分废弃/不推荐的CSS属性
这些属性虽然可能还有浏览器支持，但已被新标准替代或不推荐使用。
| 废弃/不推荐属性 | 替代方案 | 状态与说明 |
|---|---|---|
| 文本与字体 | ||
text-shadow (早期非标准) |
标准text-shadow |
早期浏览器前缀版本已废弃 |
font-weight: lighter/bolder |
具体数值(100-900) | 相对值不如数值精确 |
| 背景与边框 | ||
border-radius (带前缀) |
标准border-radius |
现代浏览器已无需前缀 |
box-shadow (带前缀) |
标准box-shadow |
现代浏览器已无需前缀 |
background-size (带前缀) |
标准background-size |
现代浏览器已无需前缀 |
| 布局与定位 | ||
clip |
clip-path |
clip功能有限且已从标准移除 |
zoom |
transform: scale() |
非标准属性，兼容性差 |
marquee-direction |
CSS动画或JS实现 | 早期跑马灯效果属性 |
| 列表与表格 | ||
list-style-image (URL内联) |
使用CSS url()函数 |
语法更新 |
| 打印相关 | ||
page-break-* |
break-*属性 |
新标准属性 |
page-break-before |
break-before |
|
page-break-after |
break-after |
|
page-break-inside |
break-inside |
|
| 其他 | ||
ime-mode |
无直接替代 | 控制输入法编辑器，因安全原因废弃 |
blink (值或元素) |
CSS动画 | 可用性差，分散注意力 |
三、特定浏览器前缀的废弃属性
这些属性曾用于特定浏览器，现已不必要或不推荐。
| 前缀属性 | 标准属性 | 适用浏览器 | 状态 |
|---|---|---|---|
-moz-border-radius |
border-radius |
Firefox | 已废弃，使用标准属性 |
-webkit-border-radius |
border-radius |
Chrome, Safari | 已废弃，使用标准属性 |
-ms-border-radius |
border-radius |
IE | 已废弃，使用标准属性 |
-o-border-radius |
border-radius |
Opera | 已废弃，使用标准属性 |
-moz-box-shadow |
box-shadow |
Firefox | 已废弃，使用标准属性 |
-webkit-box-shadow |
box-shadow |
Chrome, Safari | 已废弃，使用标准属性 |
-webkit-gradient() |
linear-gradient(), radial-gradient() |
Chrome, Safari | 旧语法已废弃 |
四、即将废弃/处于废弃过程的属性
| 属性 | 替代方案 | 当前状态 |
|---|---|---|
grid-column-gap, grid-row-gap |
gap, row-gap, column-gap |
已重命名，原属性仍支持 |
justify-self, justify-items (在Flexbox中) |
Flexbox自有对齐属性 | Flexbox中可能废弃 |
overflow-scrolling |
标准滚动行为 | 仅iOS Safari需要，可能废弃 |
五、已废弃的CSS值
有些属性本身仍有效，但某些特定值已废弃。
| 属性 | 废弃值 | 替代值 | 说明 |
|---|---|---|---|
display |
box, inline-box |
flex, inline-flex |
旧Flexbox语法 |
font |
caption, icon, menu, message-box, small-caption, status-bar |
具体字体设置 | 系统字体关键字，不推荐 |
cursor |
hand |
pointer |
标准化指针光标 |
text-align |
<string>值 |
其他对齐方式 | 对齐到特定字符的功能已移除 |
background |
scroll (默认值) |
显式指定background-attachment |
默认值无需指定 |
六、最佳实践与迁移建议
| 情况 | 建议 | 示例 |
|---|---|---|
| 旧项目维护 | 逐步替换废弃属性 | 将bgcolor改为CSS background-color |
| 新项目开发 | 完全不使用废弃属性 | 使用Flexbox/Grid而非表格布局 |
| 浏览器兼容 | 使用现代CSS并提供回退 | 对旧IE使用条件注释或polyfill |
| 代码检查 | 使用CSS Lint或Stylelint | 配置规则检测废弃属性 |
七、检测工具推荐
| 工具 | 用途 | 链接 |
|---|---|---|
| Stylelint | CSS代码质量检查 | stylelint.io |
| CSS Lint | CSS错误检测 | github.com/CSSLint/csslint |
| Can I Use | 属性兼容性查询 | caniuse.com |
| MDN | 官方文档与状态 | developer.mozilla.org |
总结
-
分离内容与样式：避免使用HTML样式属性，改用CSS
-
使用标准属性：避免浏览器前缀，除非必要
-
渐进增强：从简单样式开始，逐步增加高级特性
-
持续学习：CSS标准持续演进，关注新属性和废弃通知
通过避免使用已废弃属性，可以确保代码的长期可维护性、更好的性能以及更广泛的浏览器兼容性。