渐进增强和优雅降级是什么？browserslist、Autoprefixer 与 polyfill 如何配合处理兼容？
先理解原理和示例，再练习完整口述与追问。
回答要点
渐进增强先保证基础功能可用，再为能力强的浏览器叠加体验；优雅降级先按现代浏览器实现，再给旧环境可接受的回退。工程上用 browserslist 统一目标环境，Autoprefixer 补 CSS 前缀，Babel 转语法，core-js 等补运行时 API，再用特性检测兜底。
原理拆解
两者的差别在起点：渐进增强从“最低可用版本”出发，例如表单不依赖 JS 也能提交；优雅降级从完整体验出发，确保旧浏览器不崩溃、核心路径可用。实际项目两者常结合。
browserslist 配置一次目标浏览器，Babel preset-env、Autoprefixer、PostCSS preset-env、SWC 等工具都会读取。Autoprefixer 根据 Can I Use 数据决定加哪些厂商前缀；Babel 负责箭头函数、可选链等语法；Promise、Array.prototype.at 等 API 需要 polyfill，useBuiltIns: 'usage' 只引入用到的部分。运行时用 'IntersectionObserver' in window 和 CSS @supports 做特性检测，比解析 UA 可靠。
示例与推演
{ "browserslist": ["> 0.5%", "last 2 versions", "not dead", "iOS >= 13"] }
.card { display: block; }
@supports (display: grid) { .card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
不支持 Grid 的浏览器仍看到纵向排列的卡片，支持的浏览器得到网格布局，这就是渐进增强。
易错点
目标浏览器写得过宽会显著增大 polyfill 和产物体积；Babel 不能补齐所有 API，CSS 也不能靠前缀支持根本没实现的特性。兼容问题要在真机和错误监控中按 UA 验证。
参考回答可直接练习口述
渐进增强是先保证基础功能，再给支持新特性的浏览器增强；优雅降级是先按现代浏览器做，再保证旧环境有可接受的回退。工程上我用 browserslist 统一声明目标浏览器，让 Autoprefixer 补 CSS 前缀，Babel 转语法，core-js 按需补 API；运行时用特性检测和 @supports，而不是猜 UA。范围要根据真实用户数据确定，并在真机和监控中验证。