具有跨浏览器兼容性功能检测的 CSS

2025-06-09

具有跨浏览器兼容性功能检测的 CSS

每个 Web 开发人员的首要目标都是构建具有现代直观设计的网站，无论使用哪种浏览器浏览网页，都能提供流畅无缝的用户体验。近几十年来，互联网经历了前所未有的蓬勃发展。截至 2018 年 12 月，全球互联网用户超过 41 亿，互联网上网站数量接近 19.4 亿。这意味着全球用户访问网站的方式也在不断扩展。这带来了跨浏览器兼容性难题，给开发人员带来了巨大的挑战。由于浏览器及其版本的数量每年都在快速增长，尝试让网站在所有浏览器中保持一致的显示和性能是每个开发人员的噩梦。然而，尽管跨浏览器测试繁琐耗时，但它却是每个测试周期中必不可少的阶段。虽然让网站在所有浏览器上都呈现相同的显示和运行方式几乎是不可能的，但仍有许多方法可以提供一致的用户体验并覆盖更广泛的目标受众。在本文中，我们将探讨什么是跨浏览器兼容性问题以及为什么会发生这些问题，以及如何使用具有功能检测的跨浏览器 CSS 更有利于浏览器检测。

为什么浏览器呈现内容不一致？

在深入研究跨浏览器 CSS 特性检测之前，务必先了解互联网浏览器的工作原理以及兼容性问题出现的原因。浏览网页时，每当您点击链接或在浏览器中输入 URL 时，都会引导浏览器向服务器发出请求，以加载您所需的内容并将其显示在浏览器窗口中。这是通过使用渲染引擎来完成的，渲染引擎负责解析HTML 和 CSS 代码，并将解析后的内容显示在屏幕上。由于每个浏览器都有自己的渲染引擎，因此内容在所有浏览器中的显示方式并不相同。因此，网站的布局和外观可能会存在明显的差异。

Safari 使用“Webkit”渲染引擎，Google Chrome 以及所有基于 Chromium 的浏览器（例如 Microsoft Edge 和 Opera）使用“Blink”（早期的 Webkit），Firefox 使用“Gecko”，Internet Explorer 使用“Trident”。旧版 Opera 使用“Presto”。

每个前端开发人员最害怕的敌人就是浏览器之间功能支持的不一致。这意味着网站在开发阶段可能在开发人员选择的浏览器上完美显示和运行，但在最终测试阶段，在其他浏览器上可能看起来完全混乱。

浏览器偏好偏差

无论否认的口吻多么强烈，每个开发者都暗藏着“浏览器偏好偏见”。开发者在网站开发过程中所依赖的浏览器是评估网站性能的标准。大多数开发者自然而然地偏爱谷歌浏览器，因为它在全球拥有领先的市场份额，并配备了最强大的开发者工具套件。这可能会导致开发者忽视甚至忽略 Mozilla Firefox、Safari、Opera 以及臭名昭著的 Internet Explorer 等浏览器。在任何情况下，开发者都不应忽视对任何可能被目标受众使用的浏览器的支持，哪怕目标受众中只有一小部分人使用。尽管谷歌浏览器、Mozilla Firefox 和 Safari 的市场份额接近 90-95%，但这个取决于网站性质和其他因素的统计数据可能会具有误导性。浏览器偏好会因地理位置和年龄人口统计的不同而有很大差异。例如，Safari 在美国以外的使用率要低得多，而 IE 仍然是老一代人的首选浏览器。

浏览器市场份额

谷歌浏览器 (Google Chrome) 以至少 67% 的市场份额遥遥领先，紧随其后的是火狐浏览器 (Firefox)，市场份额为 11%。值得注意的是，臭名昭著的 Internet Explorer 虽然经常被开发者忽视，但在 2018 年仍然保持着近 7-10% 的市场份额。这一事实进一步凸显了开发者重视跨浏览器兼容性的必要性。您还可以使用谷歌分析 (Google Analytics) 或任何其他网络分析工具来确定大多数网站访问者更喜欢哪些浏览器。如果某个浏览器或浏览器版本的市场份额低于 1%，那么开发者应该将其视为低优先级浏览器，而不是那些主要负责为您的网站带来流量的浏览器。

需要跨浏览器兼容的 CSS

近年来，我们见证了 CSS 中不断推出的强大新功能，它们催生了新的现代设计趋势。然而，由于跨浏览器兼容性问题，大多数这些新推出的强大 CSS3 属性并未得到所有主流浏览器的普遍支持。由于缺乏回退机制，这些属性不会被浏览器解释并被完全忽略，这可能会对您的网站在较旧且不受支持的浏览器（尤其是可怕的 IE 浏览器）上的设计造成严重破坏。CSS Grid、Flexbox、CSS 混合模式、3D 变换等令人兴奋的新功能将网页设计推向了新的高度。然而，许多开发人员由于对跨浏览器 CSS 支持持怀疑态度，因此一直不愿采用这些新功能。没有人愿意冒险为客户构建大多数浏览器无法正确呈现的网站。

以下简要介绍不同浏览器不支持的 CSS 属性。您可以使用“ Can I Use ”平台了解不同浏览器及浏览器版本支持和不支持的元素。

  • 最新版本的 Internet Explorer（v 11）不支持 CSS 属性

  • 任何最新版本的 Firefox 都不支持 CSS 属性

  • Google Chrome 的任何最新版本均不支持 CSS 属性

  • CSS 属性不受任何最新版本的 Opera 支持

除此之外，某些 HTML 元素和属性甚至不被某些浏览器支持。例如，表单属性“placeholder”不受任何版本的 IE 和 Edge 支持。不过 Chrome 和 Firefox 却支持它。

应对浏览器支持不均衡的方法

优雅降级 VS 渐进增强
开发人员通常使用两种截然相反的开发理念来应对不均衡的浏览器支持并确保用户在所有浏览器中享受一定程度的一致性 - 优雅降级和渐进增强。

  • 优雅降级方法是指在构建网站时，先使其具备最新现代浏览器所支持的全部功能和设计特性，然后逐步向下编码，通过逐层剥离代码，逐步降级增强版本，从而支持旧版浏览器。网站的低版本会剥离其增强功能和外观特性，但仍向用户提供基准版本。
  • 渐进增强是优雅降级的逆向或对立面。首先，创建网站的基础/基线版本，然后逐步向上移动，为现代浏览器和更新版本添加高级功能和外观特性，以提供功能丰富的体验。

渐进增强普遍被认为优于优雅降级，因为它首先从通用基础版本开始，然后在此基础上针对现代浏览器进行进一步的增强。它保证网站能够在任何新旧浏览器中正常运行，并在所有支持该功能的浏览器中自动渲染高级版本。此外，它也有利于搜索引擎机器人/蜘蛛的测试和抓取。

什么是 CSS 容错？

在 JavaScript、Ruby 和 PHP 等语言中，遇到错误时执行就会终止。而 CSS 则拥有“容错”的特性。每当浏览器遇到无法解释或理解的 CSS 代码行时，它就会忽略并跳过该行代码，然后跳转到下一行。例如，请考虑以下代码示例：

我们选择元素 div，并将颜色属性更改为十六进制值“#777”

div {
    颜色：#777；
}

现在看下面的代码：
div {
    颜色：#777；
    颜色：#000；
}
由于我们将颜色属性值从“#ccc”设置为“#000”，因此将使用第二个值。现在，如果我们使用无效的属性值，CSS 将使用其容错功能，并直接忽略它无法解释的 CSS 行。 
div {
    颜色：#777；
    颜色：foobar（10）；
}
由于 foobar(10) 不是有效的 CSS 值，浏览器无法解释此行，因此会直接忽略它。颜色值“#777”被保留。我们可以利用 CSS 的这种容错特性来编写 fallbacks 属性。使用这种技术，您无需费力创建两个单独的文件或编写令人困惑的条件语句。您的网站无需像本例一样发送两个单独的 HTTP 请求：首先请求现代 CSS 文件，然后请求 IE 修复文件： 
<link href="modern.css" rel="stylesheet" />
<!--[如果 lte IE 8]>
    <link href="legacy.css" rel="stylesheet">
<![endif]-->

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

  • 浏览器检测
  • 特征检测

浏览器检测

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

句法：var ua = window.navigator.userAgent;

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

例如，Firefox UA 字符串：Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

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

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

<!DOCTYPE html>
    <html>
    <主体>
    <p>使用用户代理查找浏览器的名称</p>
    <button onclick="myFunction()">尝试一下</button>
    <p id="demo"></p>
    <脚本>

    函数 myFunction() {
       如果（navigator.userAgent.indexOf（“Chrome”）！= -1）
    {
        alert('您的浏览器是 Google Chrome');
    }
    否则，如果（（navigator.userAgent.indexOf（ “Opera”）|| navigator.userAgent.indexOf（'OPR'））！= -1）
    {
        alert('您的浏览器是 Opera');
    }
        否则，如果（navigator.userAgent.indexOf（“Safari”）！= -1）
    {
        alert('您的浏览器是 Safari');
    }
    否则，如果（navigator.userAgent.indexOf（“Firefox”）！= -1）
    {
         alert('您的浏览器是 Firefox');
    }
    否则，如果（（navigator.userAgent.indexOf（“MSIE”）！= -1）||（!!document.documentMode == true））//如果IE> 10
    {
      alert('您的浏览器是 Internet Explorer');
    }  
    别的
    {
       alert('未知浏览器');
    }
    }
    </script>
    </body>
    </html>

IE 条件语句
另一种检测或识别浏览器的方法是使用 IE 的条件注释。此语法扩展了标准 HTML 注释，并且是 IE 独有的。
条件注释是 IE 特有的 CSS 规则，只有 IE 可以识别，而其他浏览器会将其忽略，因为它们会将其视为普通注释。请注意，在第二种情况下（目标浏览器为 IE 以外的其他浏览器），内容不在注释内。因此，其他浏览器可以识别它。

  1. 针对所有 IE 浏览器版本

    <!--[如果是 IE]>
将内容放置在这里以针对所有 IE 用户。
<![endif]-->

  2. 针对非 IE 浏览器

    <![如果 !IE]>
将内容放置在此处以针对所有不使用 Internet Explorer 的用户。
<![endif]>

  3. 针对特定的 IE 版本

    <!--[如果是 IE 6]>
将内容放置在这里以针对所有 IE 版本 6 的用户。
<![endif]-->

  4. 目标 IE 版本大于或等于 7

    <!--[如果 gte IE 7]>
将内容放在这里以针对 IE7 或更高版本的用户。
<![endif]-->

  5. 目标 IE 版本低于 7（即 6 或更低）。

    <!--[如果 lt IE 7]>
将内容放置在此处以针对 IE6 或更低版本（小于 7）的用户。
<![endif]-->

浏览器检测的缺点：

  • 通过用户代理进行浏览器检测的最大缺点是开发者需要持续关注浏览器支持情况。此外，浏览器检测不会考虑新浏览器版本的更新。新浏览器版本可能会支持之前不支持的功能，导致您的额外代码冗余；或者新版本可能会移除对某些功能的支持，从而影响您网站的性能。
  • 即使新版本的浏览器可能支持该功能，也会显示回退代码
  • 一些浏览器还使用虚拟用户代理来掩盖原始内容。
  • 许多浏览器也开始伪造其用户代理字符串。IE 10 和 11 之后的浏览器也不再支持 UA 检测。

特征检测

一种比浏览器检测更好的替代方法称为“功能检测”。
带有功能检测的 CSS 会运行测试，以确定当前浏览器是否支持给定的功能，然后根据功能是否支持有条件地运行不同的代码。简单来说，带有功能检测的跨浏览器 CSS 会测试浏览器是否能够运行给定的代码行，并根据测试结果运行浏览器支持的特定代码块，从而实现近乎完美的一致性和跨浏览器 CSS 兼容性。

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

浏览器检测和功能检测比较

请考虑以下测试场景。在这两种情况下，我们都已准备好应对浏览器不支持的情况。

如果已知浏览器配置并且 User-Agent 按预期工作且检测成功，则这两种方法都可以。

然而，当遇到未知或不正确的浏览器配置时，浏览器检测方法会完全失效，无法正确呈现页面。而功能检测则能以更加无缝的方式应对这一挑战。跨浏览器 CSS 功能检测会运行测试，并确定浏览器能够显示功能 A，但当浏览器无法支持功能 B 时，它只需依靠功能 B 的回退，就能按照开发人员想要的方式成功呈现页面。

跨浏览器 CSS 特性检测 – @supports Feature Query

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

@supports 规则

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

句法：

@supports（测试条件）{
    /* 应用规则 */
}

示例：
考虑以下涉及 vmax 宽度属性的示例。

。容器 {
    高度：100%；
}

@supports（高度：100vmax）{
    。容器 {
        高度：100vmax；
    }
}

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

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

div {
  背景颜色：黄色；
}

@supports（显示：网格）{
  div {
    背景颜色：绿色；
  }
}

@supports 运算符

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

a. 非运算符

“not” 运算符可以与 @supports 一起使用来检查是否不支持。

@supports not (display: flex) {
    div { display: inline-block; } /* 如果不支持 display:flex，则使用替代样式 */
}

b. 与运算符

“与”运算符可用于同时检查多个测试条件。只有所有条件都成立时，结果才为真。即使只有一个条件为假，结果布尔值也为假。

@supports（mix-blend-mode：overlay）和
  （背景：线性渐变（rgb（45，145，245），rgb（20,120,220）））{

  .包装器{
    背景：线性渐变（rgb（45，145，245），rgb（20，120，220））；
  }

  .包装器图片{
    混合模式：叠加；
  }

}

c. 或运算符

“或”运算符可用于检查多个条件中至少有一个条件是否为真。只有当所有条件都为假时，结果才为假。

@supports（display：-webkit-flex）或
          （显示：-moz-flex）或
          （显示：弹性）{

    部分 {
      显示：-webkit-flex；
      显示：-moz-flex；
      显示：弹性；
      浮点数：无；
    }
}

支持使用 Javascript 进行检测

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

  1. CSS.supports(propertyName.value);
    例如：result =CSS.supports("text-decoration-style", "blink");

  2. CSS.supports(testCondition);
    例如：result =CSS.supports("display: flex");

有点偏离主题，但是如果您正在努力解决与 Javascript 相关的内存泄漏问题，那么我还写了一篇关于消除 Javascript 中的内存泄漏的详细博客。

使用 CSS @supports 为 CSS Grid 创建后备

现在，我们可以利用功能查询为画廊或作品集版块创建一个功能齐全的迷你布局。我们可以采用渐进式增强的方法，先创建一个基础布局版本，然后再添加浏览器对 Flexbox 和 CSS 网格的支持。









 

    

    
    
网格卡 1

    
Lorem ipsum dolor sat amet consectetur adipisicing elit。 Ipsam amet laudantium maxime suscipit。理性，eos。

    

    

    
    
网格卡 2

    
Lorem ipsum dolor，请坐 amet consectetur adipisicing elit。 Deleniti veniam quod consectetur mollitia quam voluptas。

    


    

    
    
网格卡 3

    
Lorem ipsum dolor sat amet consectetur adipisicing elit。 Quisquam ipsam Accusantium v​​oluptas！天意，万能非！

    


    

    
    
网格卡 4

    
Lorem ipsum dolor，请坐 amet consectetur adipisicing elit。 Ratione deleniti praesentium delectus quas maiores perferendis！

    


    

    
    
网格卡 5

    
Lorem ipsum dolor，请坐 amet consectetur adipisicing elit。 Architecto cum quia tempore totam a！解释一下？

    

    

    
    
网格卡 6

    
Lorem ipsum dolor sat amet consectetur adipisicing elit。 Quae recusandae quidem，nihil maxime dicta suscipit。

    

    

    
    
网格卡 7

    
Lorem ipsum，dolor sat amet consectetur adipisicing elit。阻碍 odit saepe，面对 adipisci aliquam？

浏览器对功能查询的支持

使用@supports功能查询的一个症结是一些旧的浏览器缺乏浏览器支持。

包括 11 版在内的所有 Internet Explorer 版本均不支持功能查询。Safari 浏览器也仅在较新版本中推出了对功能查询的支持。但必须注意的是，由于 CSS 的优雅降级，如果浏览器无法识别 @supports 规则，它将直接忽略整个代码块，而不会破坏网页。因此，最好的方法是先编写每个浏览器都能处理的基本 CSS 样式。然后使用 @supports 功能查询覆盖这些基本样式，并为能够处理这些功能的现代浏览器提供更高级的功能和外观。

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

使用 Modernizr 进行跨浏览器 CSS 特性检测

Modernizr是一个极其实用的JavaScript 库，它能够自动检测用户浏览器中下一代 HTML 和 CSS 特性的可用性。Modernizr 不依赖于用户代理嗅探，而是依靠跨浏览器 CSS 特性检测，从而允许开发者根据用户浏览器的性能提供特定的用户体验。它会在用户的浏览器上运行测试，以检查其是否支持特定特性。如果浏览器认为该特性不受支持，开发者可以编写所有必要的回退代码来镜像不支持的特性。与使用 @supports 特性查询进行特性检测的跨浏览器 CSS 不同，modernizr 还允许构建自定义测试来验证跨浏览器兼容性。

设置Modernizr

旧版本的 modernizr 提供了两种下载文件的选项：开发版和生产版。然而，在最新版本的 modernizr 中，不再提供单一开发版 modernizr.js 文件。

  1. 访问下载页面，自定义选择项目中所需的功能。这有助于减小文件大小并提高网页加载速度。
  2. 将文件插入❬head❭部分。❬script src =”modernizr.js type =”text / javascript❭❬ / script❭
  3. Modernizr 默认在根 ❬html❭ 标签上添加许多 CSS 类。Modernizr 生成的这些类取决于浏览器的功能。如果浏览器支持某个功能，则会将相应的类添加到该标签；如果不支持某个功能，则会在相应的类中添加一个前缀为“no-”（例如 .feature 或 .no-feature）的类。❬html class=” js flexbox flexboxlegacy csstransforms no-csstransforms3d csstransitions”❭
  4. 将 no-js 类添加到 ❬html❭ 标签。❬html class=”no-js”❭如果用户的浏览器不支持 JS，则必须执行此步骤。可以使用此类添加必要的后备功能。但是，如果浏览器支持 JavaScript，Modernizr 会将 no-js 类替换为 js。

假设我们想要一张背景图片，并在其上叠加线性渐变。我们可以使用 Modernizr 检测浏览器是否支持线性渐变功能，并在不支持时编写必要的回退代码。根据 modernizr 对特定浏览器的 CSS 特性检测，结果可能是“html class=”cssgradients”❭ 或“html class=”no-cssgradients”❭。借助 modernizr 的类，我们可以使用渐进式增强方法轻松实现这两种情况。

.no-cssgradients .header {
  背景：url（“https://unsplash.it/640/425?image=44”）；
}

.cssgradients .header {
 背景图像：url（“https://unsplash.it/640/425?image=44”），线性渐变（红色，黄色）；
}

使用 Javascript 进行 Modernizr 特征检测

我们还可以使用 Modernizr 和 JavaScript 来测试浏览器功能，语法如下：

我很快将发布另一篇博客来详细讨论 Modernizr。

Modernizr 与功能查询

Modernizr 几乎支持所有能想到的浏览器，而功能查询则不支持所有版本的 Internet Explorer（包括 11）。除 IE 外，功能查询已被广泛实施，覆盖了全球 91.68% 的用户。与浏览器原生支持的功能查询不同，Modernizr 需要先下载并在 JavaScript 中执行，这会提高页面加载速度并影响 SERP 排名。此外，@supports 功能查询比 modernizr 涵盖了更广泛的 CSS 属性。

跨浏览器测试不可或缺

仅使用跨浏览器 CSS、功能查询功能检测或 Modernizr 来实现跨浏览器兼容性是不可想象的。如果开发人员甚至无法检测到不同浏览器和浏览器版本之间的渲染问题。您在越多的浏览器和浏览器版本上验证您的网站，您的 UI 就越健壮。这不仅有助于为您的客户提供无缝的体验，而且还有助于为开发人员带来成就感和轻松感。这就是为什么使用跨浏览器测试工具至关重要的原因。如果没有跨浏览器测试，开发人员将无法验证他们为实现浏览器兼容性所做的更改是否按预期工作。LambdaTest 是一个基于云的工具，提供 2000 多种浏览器和浏览器版本来验证和测试您的网站的跨浏览器兼容性。

结论

毫无疑问，跨浏览器兼容性是 Web 开发中不可或缺的重要方面，不容忽视。然而，与普遍的看法相反，网站并不需要在每个浏览器上都拥有完全相同的外观和功能。我们必须认识到，100% 的完全兼容性是不可能实现的。因此，每个开发者的主要目标应该是让他们的网站能够在不同的浏览器上访问，并尽可能为尽可能多的用户提供流畅愉悦的浏览体验。到目前为止，开发者社区主要依靠 JavaScript（尤其是 JavaScript 的现代化）来解决跨浏览器兼容性问题。但近年来，CSS 特性检测作为一种可行、轻量且易于使用的替代解决方案应运而生，并逐渐成为主流，并在开发者中越来越受欢迎。

原文来源：LambdaTest 博客

鏂囩珷鏉ユ簮锛�https://dev.to/lambdatest/css-with-feature-detection-for-cross-browser-compatibility-3adh
Devto 翻译
PREV
2019年了！让我们结束关于图标字体与SVG图标的争论吧
NEXT
初学者的 Vue 助手