各浏览器支持的方法

优雅降级与渐进增强

开发人员通常使用两种极端相反的开发理念来抵制不均衡的浏览器支持，并确保用户在所有浏览器中享有一定程度的一致性：优雅降级和渐进增强。

优雅降级意味着构建您的网站具有最新现代浏览器支持的全部功能和设计功能，然后逐步向下编码，通过剥离一层又一层，降级增强版本来为旧版浏览器提供支持。该网站的较低版本被剥夺了其增强功能和UI功能，但仍向用户提供基准版本。渐进增强与优雅降级完全相反。首先，创建网站的基本/基线版本，然后逐渐向上移动，为现代浏览器和更新版本添加高级功能和外观功能，以提供功能丰富的体验。

逐步增强被广泛认为是两者中的更好方法，因为它从基本版本开始，并在以后添加进一步的增强。它保证网站可以在任何浏览器中使用，无论是新的还是旧的，并且将在所有自动支持它的浏览器中呈现高级版本。它也被认为有利于搜索引擎的测试和爬取。

在JavaScript，Ruby和PHP等语言中，遇到错误时会终止执行。另一方面，CSS有一个名为“Fault Tolerance”的功能。每当浏览器遇到无法解释或理解的CSS代码行时，它就会忽略并跳过该行代码并跳转到下一行。例如，考虑一下这个例子。

我们选择元素div并将color属性更改为十六进制值“＃777”

由于我们已将“#ccc”中的颜色属性值设置为“＃000”，因此将使用第二个值。现在，如果我们使用无效的属性值，CSS将使用其容错功能，并将忽略它无法解释的CSS行。

因为foobar(10)不是有效的CSS值，浏览器无法解释此行，因此它只是忽略它。保留颜色值“＃777”。

我们可以利用CSS的这种容错功能来编写回退属性。使用这种技术，您不需要沉迷于创建两个单独的文件或编写令人困惑的条件语句的麻烦。您的网站不必发送两个单独的HTTP请求，首先是现代CSS文件，然后是IE修复文件，如下例所示：

现在我们已经讨论了跨浏览器兼容性问题，现在让我们来看看克服这一挑战的方法。我们将讨论的两个主要方法是：

浏览器检测特征检测1.浏览器检测

浏览器标识基于检测用户代理字符串。该NavigatorID.userAgent属性返回当前浏览器的用户代理字符串。用户代理请求标头包含一个特征字符串，允许标识应用程序类型，操作系统，软件供应商或软件版本等。

语法

var ua = window.navigator.userAgent;

Where ua存储当前浏览器的用户代理字符串值。

例如，这是Firefox UA字符串：

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

以下是常见Web浏览器的用户代理字符串 -

最常见的方法是使用JavaScript查询用户代理标头：

IE条件语句

检测或识别浏览器的另一种方法是使用Internet Explorer的条件注释。此语法扩展了标准HTML注释，并且是IE独有的。

条件语句是Internet Explorer特定的CSS规则，即它们仅被Internet Explorer识别并被所有其他浏览器忽略，因为它们将它们视为普通注释。请注意，在第二种情况下（目标除IE之外的其他浏览器），内容不在注释中。因此，它将被其他浏览器识别。

用户代理进行浏览器检测的最大缺点是开发人员需要不断跟踪浏览器支持。此外，浏览器检测不考虑新的浏览器版本更新。新的浏览器版本可能支持以前不受支持的功能，使您的额外代码冗余，或者新版本可能会删除对可能破坏您网站性能的功能的支持。即使新版本的浏览器可能支持该功能，也会显示后备代码。某些浏览器还使用虚拟用户代理来屏蔽原始内容。许多浏览器也开始欺骗用户代理字符串。随着时间的推移，用户代理检测中出现了一些严重的缺陷，因为IE从10版及更高版本中删除了对它的支持。特征检测

一种更好的浏览器检测方法称为“特征检测”。具有特征检测的CSS运行测试以确定当前浏览器是否支持所讨论的给定特征，然后有条件地运行不同的代码，具体取决于它是否执行或不执行吨。具有特征检测的CSS涉及测试浏览器是否能够运行给定的代码行，并且根据测试的结果，运行由浏览器支持的特定代码块，从而产生接近完美的一致性和跨浏览器兼容性。

这样，无论用户使用哪种浏览器，您都可以确保浏览器可以提供无缝且一致的用户体验。开发人员不必担心跟踪繁琐的浏览器支持图表和新版本更新。结合渐进增强的理念，开发人员首先对网站进行编码，以提供所有浏览器支持的基本版本，并根据新现代浏览器中的支持继续添加图层。如果您不遵循CSS的功能检测方法，那么不支持这些功能的浏览器将无法按预期显示您的网站，并且会带来糟糕的用户体验。除了提供跨浏览器兼容的CSS之外，它还可以帮助开发人员通过避免混乱的多行回退来编写干净可读的CSS。

浏览器检测和特征检测比较

请考虑以下测试方案。在这两种情况下，我们都准备好了缺少浏览器支持的后备。

左：浏览器检测，右：特征检测

如果浏览器配置已知并且用户代理按预期工作，即成功检测，则两种方法都有效。

但是，当浏览器配置未知或不正确时，浏览器检测方法会完全失败，无法正确呈现页面。另一方面，特征检测以更加无缝的方式处理这一挑战。具有特征检测的CSS运行测试并确定浏览器能够显示功能A，但是当它无法支持功能B时，它只依赖于功能B的后备并成功地以开发人员想要的方式呈现页面。

CSS特征检测

@supports功能查询

开发人员可以使用多种工具来实现跨浏览器兼容性，如Modernizr和polyfill。我们可以通过使用CSS功能查询来实现相同的结果，而不是使用第三方工具。这些是条件规则，允许我们根据浏览器支持将不同的样式应用于同一元素。功能查询类似于@ media，@ document或@import条件语句。与使用基于屏幕大小的条件的@media查询不同，功能查询基于浏览器的CSS支持创建条件。如果浏览器理解并支持要素查询中的属性，则将应用查询括号内的所有CSS样式规则。否则，它将被忽略并跳过。

@supports规则

@supports是一个条件组规则，用于测试浏览器是否支持CSS属性值对。浏览器执行跨浏览器测试以检查是否支持某个CSS属性或值。结果确定是否应用了一段CSS代码。语法类似于媒体查询，但我们将CSS声明设置为验证跨浏览器兼容CSS的测试条件，而不是媒体查询。浏览器根据该条件执行CSS样式。

@supports语法

例：

请考虑以下涉及vmax width属性的示例：

@supports查询测试用户浏览器是否支持vmax。如果支持，则容器的高度将设置为100vmax，否则，如果不支持该功能，则容器的高度将设置为100％。

另一个测试浏览器是否支持CSS网格的示例。

在支持网格功能的浏览器中，div元素的背景颜色将设置为绿色（因为条件解析为true），而对于不支持网格的浏览器，div的背景将设置为黄色。

@supports 逻辑运算符

我们可以使用多个逻辑运算符来增强@supports功能以创建复杂的条件测试

(a). not 运算符

(b). And 运算符

(c). Or 运算符

支持使用Javascript进行检测

功能查询也可以与JavaScript一起使用。JavaScript提供了 CSS.supports() 方法可以通过两种方式实现的方法：

CSS.supports（propertyName.value）;例： CSS.supports("text-decoration-style", "blink");CSS.supports（testCondition）;例： CSS.supports("display: flex");

浏览器支持功能查询

使用@supports功能查询的一个难点是在一些旧的古老浏览器中缺乏浏览器支持。

没有版本的Internet Explorer（包括版本11）支持功能查询。Safari推出了对功能查询的支持，但仅限于最新版本。但必须注意的是，如果浏览器无法识别@supports规则，CSS会优雅地降级，它只会忽略整个代码块而不会破坏网页。因此，最好的方法是首先编写每个浏览器可以处理的基本CSS样式。然后使用@supports功能查询来覆盖具有更高级功能和外观的基本样式，以便处理这些功能的现代浏览器。

一些寻求IE浏览器支持的开发人员更喜欢使用Modernizr，Post-CSS和其他polyfill等工具来满足他们的跨浏览器兼容性需求。

使用Modernizr进行CSS特征检测

Modernizr是一个非常有用的JavaScript库，有助于在用户的浏览器中自动检测下一代HTML和CSS功能的可用性。Modernizr不依赖于用户代理嗅探，而是依赖于CSS特征检测，以允许开发人员根据用户的浏览器功能提供特定的用户体验。它在用户的浏览器上运行测试，以检查它是否支持特定功能。如果该功能被视为“不受支持”，则开发人员可以提供适当的脚本或功能来模仿不受支持的功能。与使用@supports功能查询的CSS功能检测不同，Modernizr还允许构建自定义测试。

Modernizr与特征查询

Modernizr几乎所有可以想象的浏览器都支持，不像功能查询，任何Internet Explorer版本都不支持，包括11.排除IE后，功能查询已经被广泛实现，占全球用户的91.68％。与浏览器本机支持的功能查询不同，Modernizr需要首先下载并在JavaScript中执行，这会降低页面加载速度并影响排名子SERP。Modernizr仍然没有覆盖像@support查询那样的完整CSS属性。

跨浏览器测试是不可或缺的

如果开发人员甚至无法检测到跨不同浏览器和浏览器版本的渲染问题，那么通过使用功能查询功能检查或单独使用Modernizr来实现跨浏览器兼容性是不可思议的。您验证网站的浏览器和浏览器版本越多，您的UI就越健壮。这不仅有助于为您的客户提供无缝体验，还有助于为开发人员提供成就感和宽慰。这就是使用跨浏览器测试工具至关重要的原因。如果没有跨浏览器测试，开发人员将无法验证他们为实现浏览器兼容性所做的更改是否按预期工作。

结论

毫无疑问，跨浏览器兼容性是Web开发不可或缺的维度，不能再被忽视。然而，与流行的看法相反，网站不需要在每个浏览器上看起来和功能完全相同。至关重要的是要理解完全的100％兼容性根本无法实现。因此，每个开发人员的关键目标应该是使他们的网站可以在不同的浏览器上访问，并为尽可能多的用户提供愉快，无缝的查看体验。到目前为止，开发人员社区依靠JavaScript（尤其是Modernizr）来解决他们的跨浏览器兼容性问题。但是最近CSS功能检测已经成为一种可行的，轻量级的。