网页浏览器一直在网站上。 事实上，浏览器是浏览您的网站的体验或人物的重要组成部分 - 但并非所有浏览器都是平等创建的。 客户在浏览器中查看您的网页是完全可能的（而且实际上很可能），这些浏览器非常陈旧，并且缺少更新式浏览器中的功能。 当您努力开发利用网站设计和开发最新进展的网站时，这可能会造成重大问题。 如果有人使用其中一种复古浏览器访问您的网站，并且您的最新高级技术不适合他们，那么您可能会导致整体糟糕的体验。 渐进式增强是针对不同浏览器处理网页设计的策略，即那些缺乏现代支持的旧浏览器。
渐进式增强是设计网页的一种方式，因此用户代理支持的功能越多，网页的功能就越多。 这与被称为优雅退化的设计策略恰恰相反。 该策略首先为最现代的浏览器构建页面，然后确保它们在功能较差的浏览器中也能够很好地工作 - 体验“优雅地降级”。 渐进式增强始于首先不太能力的浏览器，并从那里构建体验。
如何使用渐进增强
当您使用渐进式增强功能创建网页设计时，首先要做的是创建一个适用于Web浏览器最低公共标准的设计。 从核心上看，渐进式增强功能表示，您的内容应该可供所有网络浏览器使用，而不仅仅是一个子集。这就是为什么您从支持这些陈旧，过时和功能较差的浏览器开始。如果您创建的网站运行良好对他们来说，你知道你已经创建了一个基线，它应该为所有访问者提供至少可用的体验。
当首先使用功能最弱的浏览器时，您需要确保所有HTML都应该有效并且语义正确。 这将有助于确保最广泛的用户代理可以查看页面并准确显示。
请记住，使用外部样式表添加视觉设计样式和整体页面布局。 这确实是渐进增强的地方。 您可以使用样式表创建适用于所有访问者的网站设计。 随着用户代理获得功能，您可以添加其他样式来增强页面。 每个人都可以获得基线样式，但对于任何支持更先进和更现代风格的新闻浏览器，他们都会获得一些额外的功能。 您“逐步增强”可支持这些样式的浏览器页面。
有几种方法可以应用渐进式增强。 首先，如果浏览器不理解一行CSS，就应该考虑浏览器的作用 - 它会忽略它！ 这实际上对你有利。 如果您创建了所有浏览器可以理解的基线样式集，则可以为新浏览器添加其他样式。 如果他们支持这些风格，他们会应用它们。 否则，他们会忽略它们，只使用这些基线样式。 在这个CSS中可以看到渐进增强的一个简单例子：
.main-content {
背景：＃999;
背景：rgba（153,153,153，.75）;
}
这种风格首先将背景设置为灰色。 第二条规则使用RGBA颜色值来设置透明度级别。 如果浏览器支持RGBA，则它将覆盖第一个样式。 如果没有，只有第一个会被应用。 您已经设置了基线颜色，然后为更现代的浏览器添加了额外的样式。
使用功能查询
您可以应用渐进式增强的另一种方式是使用所谓的“功能查询”。 这些与媒体查询类似，这是响应式网站设计的一个重要部分。 当媒体查询特定屏幕尺寸的文本时，功能查询将检查是否支持某个功能。 您将使用的语法是：
@supports（display：flex）{}您在此规则中添加的任何样式仅在该浏览器支持“flex”（这是Flexbox的样式）时才可用。 您可以为每个人设置一套规则，然后仅使用功能查询为选定的浏览器添加额外的规则。
Jennifer Krynin的原创文章。 由杰里米吉拉德于12/13/16编辑。