AI 摘要： 本文探讨了 ChatGPT 在提供 CSS 解决方案时，生成的代码中包含过时和冗余的问题，特别是在 CSS 渐变文本动画的实现上。作者通过分析 ChatGPT 提供的代码，指出其使用了早已不必要的 WebKit 前缀和无效的属性（如 -webkit-text-fill-color），并追溯了 CSS 渐变文本技术的发展历史，揭示了这些过时方案的起源与现代浏览器的兼容性现状。文章还批评了 AI 工具在生成代码时未能根据当前技术标准优化方案的缺陷，呼吁开发者审慎使用 AI 生成的代码，并结合现代工具（如 @supports）来确保代码的高效与兼容性。

• 引言：ChatGPT 生成代码的问题
• 文章以一个网友询问如何实现类似 ChatGPT“搜索中”效果的 CSS 渐变文本动画为切入点。
• ChatGPT 提供的代码看似有效，但包含冗余和过时的 CSS 属性，在现代浏览器中毫无必要。
• 核心问题：ChatGPT 的代码未能反映现代 CSS 标准，包含了至少五年前已解决问题的过时解决方案。

• 代码分析：ChatGPT 方案的缺陷
• 提供的 CSS 代码使用 -webkit-background-clip: text 和 -webkit-text-fill-color: transparent，这些前缀和属性在当前浏览器中已无必要。
• 代码中 background-size 和 background-position 的设置方式冗长且未使用简写，未能优化。
• 对比优化后的代码，作者展示了如何用更简洁的方式实现相同效果，且在所有浏览器中均无兼容性问题。

• CSS 渐变文本的历史与演变
• 回顾了 CSS 渐变文本技术的发展历程，从 2009-2010 年 WebKit 浏览器独占的支持，到 2016 年所有主流浏览器对 background-clip: text 的支持。
• 解释了 -webkit-text-fill-color 的历史用途：最初用于解决 2010 年非 WebKit 浏览器不支持渐变文本时文本透明度问题。
• 指出该属性现已成为冗余，因为现代浏览器已全面支持相关标准，且 ChatGPT 代码同时设置了 color: transparent，完全违背了当初使用前缀的初衷。

• 浏览器兼容性与前缀问题的历史
• 讨论了 WebKit 前缀（如 -webkit-）在非 WebKit 浏览器（如 Opera、Firefox、IE）中的支持历史，及其导致的混乱和兼容性问题。
• 提到 2010-2015 年间浏览器厂商对前缀的支持策略变化，以及如何导致开发者编写过多或不足的前缀代码。
• 强调现代浏览器已不再需要这些前缀，ChatGPT 提供的代码未反映这一现实。

• 代码优化建议
• 提出使用现代 CSS 特性（如 @supports）来处理兼容性问题，而非依赖过时前缀。
• 优化 background-size 和 background-position 的设置，省略不必要的参数，使用简写形式。
• 改进页面布局代码，避免 height: 100vh 导致的滚动条问题，推荐使用 display: grid 等现代布局方案。
• 建议设置更美观的字体，并使用 clamp 函数让字体大小自适应视口。

• 不仅仅是 ChatGPT 的问题
• 指出其他 AI 工具（如 Gemini）同样存在生成过时或错误代码的问题，原因是它们倾向于引用互联网上较旧但流行度高的解决方案。
• 强调 AI 生成代码缺乏时间上下文，开发者难以判断其是否过时，建议查阅原始资源或验证代码的适用性。

Frontend Masters

ChatGPT and the proliferation of obsolete and broken solutions to problems we hadn’t had for over half a decade before its launch

It was a lovely day on the internet when someone asked how to CSS animated gradient text like ChatGPT’s “Searching the web” and promptly got an answer saying “Have you tried asking ChatGPT? Here’s what it told me!” – well, maybe not these exact words, but…