当年很流行，现在已经淘汰的移动前端技术，请不要再继续学了！

大家好，我是宝哥。

最近有点感慨，前端变化太快了。一些曾经红极一时的CSS技术，如今已经逐渐被淘汰，成为了技术的过去时。今天，就让我们一起回顾这些曾经的风采，同时着眼未来，拥抱更加现代化的移动前端技术。

CSS过时的技术

1. 表格布局

• 介绍: 在CSS流行之前，表格布局几乎是唯一的网页布局手段。这种方法通过<table>标签来创建网页的布局结构，虽然在那个时代能够实现复杂的布局，但随着Web标准的发展，表格布局因为其语义不明确、灵活性差而被淘汰。

• 问题: 表格布局不利于SEO，因为搜索引擎更偏爱语义化明确的HTML标记；它也不支持响应式设计，无法适应多种设备屏幕。

• 示例:

  <table>
    <tr>
      <td>左侧栏</td>
      <td>主内容</td>
    </tr>
  </table>
  这段代码展示了使用表格来布局页面的一个简单示例，现在这种做法已不被推荐。

2. 内联样式

• 介绍: 内联样式是直接在HTML元素上通过style属性指定样式。这种方式虽然简单直接，但它破坏了内容与表现的分离原则，使得项目难以维护。

• 问题: 使用内联样式会使得样式重用变得困难，增加页面的复杂性，并且对于大型项目来说，维护成本极高。

• 示例:

  <div style="color: red; font-size: 14px;">这是内联样式的示例</div>
  这段代码展示了一个使用内联样式的HTML元素，现在推荐使用CSS类或ID来代替内联样式。

3. 浮动布局

• 介绍: 在Flexbox和Grid出现之前，浮动布局是实现网页布局的主要手段。通过float属性，开发者可以将元素向左或向右浮动，以实现并排布局。

• 问题: 浮动会导致父元素高度塌陷问题，需要清除浮动来解决；此外，浮动布局的灵活性和可维护性相比现代布局技术大大降低。

• 示例:

  .left { float: left; width: 50%; }
  .right { float: right; width: 50%; }
  这段CSS展示了使用浮动来实现两栏布局的传统方法。

4. 定位布局

• 介绍: 定位布局通过position属性（如absolute, relative）来控制元素的位置。这种方法适用于小范围的布局调整，但不适合作为主要的布局方式。

• 问题: 过度依赖定位布局会导致布局的灵活性差，特别是在需要响应式设计的情况下，定位布局的缺陷变得更加明显。

• 示例:

  .parent { position: relative; }
  .child { position: absolute; top: 10px; left: 10px; }
  这段代码展示了如何使用绝对定位在父元素内定位一个子元素。

5. 雪碧图

• 介绍: 雪碧图是一种性能优化技术，通过将多个小图标合并到一张大图上，使用CSS背景定位显示各个图标，以减少HTTP请求。

• 问题: 随着HTTP/2的普及，服务器可以更高效地加载多个文件，雪碧图的优势不再明显。同时，SVG图标和字体图标提供了更好的替代方案。

• 示例:

  .icon {
    background-image: url('sprites.png');
    background-position: -10px -10px;
    width: 20px;
    height: 20px;
  }
  这段CSS代码展示了如何从雪碧图中定位并显示一个图标。

CSS过时的属性

6. CSS表达式

• 介绍: CSS表达式允许将JavaScript代码直接写入CSS属性中，这一技术主要在早期的IE浏览器中使用。它提供了动态计算CSS属性值的能力，但由于性能问题，已被弃用。

• 问题: CSS表达式会导致页面性能下降，因为每次页面渲染或者窗口大小调整时，表达式都会被重新计算。此外，它破坏了CSS和JavaScript的分离原则，增加了代码的复杂性。

• 示例:

  /* 以下是一个CSS表达式的例子，现在不推荐使用 */
  div { width: expression(document.body.clientWidth > 600 ? "600px" : "auto"); }

7. CSS伪元素::selection的前缀

• 介绍: 在过去，自定义用户文本选择的样式(::selection)需要浏览器特定的前缀，比如::-moz-selection和::-webkit-selection。

• 问题: 随着CSS标准的发展和浏览器兼容性的提高，大部分现代浏览器已经支持无前缀的::selection伪元素，使用前缀已经不是必须的。

• 示例:

  /* 过去的写法 */
  ::-moz-selection { color: red; }
  ::-webkit-selection { color: red; }
  /* 现代的写法 */
  ::selection { color: red; }

8. clip属性

• 介绍: clip属性曾用于设置元素的裁剪区域，但它仅适用于绝对定位的元素，并且只能裁剪矩形区域。

• 问题: clip属性已经被更灵活的clip-path属性所替代，clip-path不仅支持多种形状（圆形、椭圆、多边形等），还可以应用于任何CSS盒模型，而不仅仅是绝对定位的元素。

• 示例:

  /* 过时的clip属性 */
  .element { clip: rect(10px, 20px, 30px, 40px); }
  /* 现代的clip-path属性 */
  .element { clip-path: circle(50% at 50% 50%); }

9. font-variant

• 介绍: font-variant属性允许开发者调整字体的变体，但其东亚字体特征值（如font-variant-east-asian）的使用受限，因为它们依赖特定的字体支持。

• 问题: 对于国际化的Web开发，依赖特定字体的特性来调整文本样式可能不是最佳实践。现代Web设计更推荐使用可靠的字体堆栈和CSS特性来实现设计效果，确保在不同环境下的一致性。

• 示例:

  /* 过去可能会尝试使用的font-variant东亚特性 */
  .text { font-variant: ruby; }
  /* 现代方法是使用具体的字体和样式调整 */
  .text { font-family: 'MyCustomFont', sans-serif; }

10. border-radius的百分比值

• 介绍: 在早期，border-radius属性接受百分比值时的行为在不同浏览器中可能会有差异，这导致了一些兼容性问题。

• 问题: 随着CSS规范的发展和浏览器实现的统一，border-radius属性的百分比值现在已经得到了广泛支持和一致的解释，但在设计时仍需注意其在不同容器尺寸下的表现。

• 示例:

  /* 过去可能会因兼容性问题避免使用 */
  .box { border-radius: 50%; }
  /* 现在这种用法已经广泛支持，可用于创建圆形元素 */
  .circle { width: 100px; height: 100px; border-radius: 50%; }

CSS过时的兼容

过去为了兼容性而常用的一些CSS前缀属性和IE特有的hack，这些在现代浏览器开发中已经变得不那么重要了：

1. -webkit-前缀: 用于Chrome、Safari等WebKit引擎的浏览器。随着标准化的推进，如-webkit-border-radius现在只需写为border-radius。

2. -moz-前缀: 专为Firefox浏览器设计。例如，-moz-border-radius已被标准的border-radius取代。

3. -o-前缀: 曾用于旧版Opera浏览器，如-o-transition，现代浏览器已广泛支持无前缀的transition属性。

4. -ms-前缀: 专为Microsoft的浏览器，比如IE和早期的Edge。例如，-ms-transform现在可以直接使用transform。

5. filter: 用于为IE6-8提供透明度效果，如filter: alpha(opacity=50);，现代浏览器直接使用opacity属性。

6. box-sizing的兼容写法: 虽然box-sizing现在被广泛支持，但早期开发者需要写多个版本以确保兼容性，现在一般只需要标准写法。

7. ::before和::after的单冒号写法: IE8及以下版本只支持单冒号(:before, :after)，而现代标准推荐双冒号写法。

8. border-radius: 早期需要多个前缀来支持不同浏览器，现在绝大多数浏览器都支持无前缀写法。

9. Hack语法：如*html、_等前缀用于IE6/7特有的CSS规则，这些技巧在现代开发中已经不再需要。

10. zoom: 1;: 用于触发IE下的hasLayout，解决一些布局问题。在现代CSS布局技术（如Flexbox和Grid）中，这个hack已经完全过时。

这些曾经为兼容性战斗的前缀和hack，在现代浏览器的环境下，已经大大减少了使用的必要性。开发者可以更加专注于使用标准的CSS属性，而不是花费大量时间在兼容性调试上。

总结

随着Web技术的不断进步，一些老旧的技术自然会被淘汰，而新的技术则不断涌现，为前端开发带来更多可能。拥抱变化，学习和掌握现代前端技术，将使我们能够构建更快、更好、更响应式的网页应用。

码字不易，如果觉得我的分享不错，就点个赞吧！

关于我

我是宝哥，微信：caibaojian89（蔡宝坚89年）

35+的老程序员，每日分享前端技术，关注下面二维码，围观我的朋友圈，看看失业落魄的程序员是如何搞副业年入10万+。

备注【文章群】可以进文章分享群，

备注【技术群】可以进技术交流群，

备注【副业群】可以进程序员副业群。

关注下方公众号加星标，送我的电子书资料

• 回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF

• 回复「Vue脑图」获取 Vue 相关脑图

• 回复「思维图」获取 JavaScript 相关思维图

• 回复「简历」获取简历制作建议

• 回复「简历模板」获取精选的简历模板

• 回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。

• 回复「知识点」下载高清JavaScript知识点图谱

• 回复「读书」下载成长的相关电子书

失业前端求点【分享、点赞、在看】三连吧，让更多的人也看到~