本文摘要：各浏览器支持的方法优雅降级与渐进增强开发人员通常使用两种极端相反的开发理念来抵制不平衡的浏览器支持，并确保用户在所有浏览器中享有一定水平的一致性：优雅降级和渐进增强。优雅降级意味着构建您的网站具有最新现代浏览器支持的全部功效和设计功效，然后逐步向下编码，通过剥离一层又一层，降级增强版原来为旧版浏览器提供支持。该网站的较低版本被剥夺了其增强功效和UI功效，但仍向用户提供基准版本。渐进增强与优雅降级完全相反。

各浏览器支持的方法优雅降级与渐进增强开发人员通常使用两种极端相反的开发理念来抵制不平衡的浏览器支持，并确保用户在所有浏览器中享有一定水平的一致性：优雅降级和渐进增强。优雅降级意味着构建您的网站具有最新现代浏览器支持的全部功效和设计功效，然后逐步向下编码，通过剥离一层又一层，降级增强版原来为旧版浏览器提供支持。该网站的较低版本被剥夺了其增强功效和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功效检测已经成为一种可行的，轻量级的。

本文关键词：具有,跨,浏览器,兼容,亚搏手机版app下载,性的,功效,检测,的,CSS

本文来源：亚搏手机在线登录入口-www.wjlift.com