主页 / 问题 / 710801
Accepted
Yuri
Asked:2020-08-26 17:55:55 +0000 UTC2020-08-26 17:55:55 +0000 UTC

如何了解浏览器对 CSS 属性的支持？

  • 772

我想制作一个在大多数浏览器中看起来都正确的网站。但是在创作的路上，遇到了跨浏览器兼容的问题。也就是说，一个浏览器支持这个 CSS，而另一个不支持。

我如何知道给定的浏览器是否支持指定的 CSS 属性？是否有可能在一个 CSS 中知道这一点？

javascript

2 个回答

  1. Best Answer

    使用单个 CSS

    您可以使用名为@supports的 CSS 指令了解给定浏览器是否支持指定的 CSS 属性。

    该指令的工作方式与@media 相同。

    /* Узнаём, поддерживает ли браузер display: flex; */
@supports (display: flex) {
   /* Стили */
}

    如果浏览器不支持指定的 CSS 属性，也可以设置属性

    /* Узнаём, поддерживает ли браузер display: flex; */
@supports not (display: flex) {
   /* Стили */
}

    您还可以使用运算符一次检查多个属性and

    /* Узнаём, поддерживает ли браузер display: flex; и flex-wrap: wrap; */
@supports (display: flex) and (flex-wrap: wrap) {
   /* Стили */
}

    如果我们需要至少一个工作属性，我们可以使用操作符or

    /* Узнаём, поддерживает ли браузер display: flex; */
@supports (display: flex) or (display: -webkit-flex) {
   /* Стили */
}

    但请记住，该指令是新指令，在 IE 中根本不起作用。

    此外，为确保不存在跨浏览器兼容性，您可以使用供应商前缀。

    用JS

    这个任务，用JS，我知道有两种解决方法：

    1. 仅在 JS 上使用 CSS @Supports 的类似物 - 功能CSS.supports()

      // Узнаём, поддерживает ли браузер display: flex;
CSS.supports("display", "flex"); // true/false

      就像在 CSS 中一样，您可以指定多个属性。

      // Узнаём, поддерживает ли браузер display: flex; и flex-wrap: wrap;
CSS.supports("( display: flex ) and ( flex-wrap: wrap )"); // true/false

      但就像在 CSS 中一样，这种方法是新的，在 IE 中根本不起作用。

    2. 通过 JS 应用样式进行验证。

      这种方法的本质是浏览器不能将元素的属性设置为它不支持的值。因此，如果在通过 JavaScript 将新值应用于属性后，它没有改变，则浏览器不支持该值。

      因此，我们有以下功能：

      var SupportsCSS = function (property, value) {
   try {
      // Создаём новый элемент
      var element = document.createElement('span');
      // Проверяем, есть ли такое свойство в браузере
      if (element.style[property] !== undefined) 
         element.style[property] = value; // Если есть, то присваиваем
      else 
         return false; // Если нет, то false

      // Если браузер поддерживает данное значение для указанного свойства, то значения будут равны
      return element.style[property] === value;
   } catch (e) {
      // В случае со старым IE, при присваивании значения, которое не поддерживается, вылетает ошибка
      return false;
   }
};

      这就是它的工作原理：

      var SupportsCSS = function (property, value) {
    try {
        var element = document.createElement('span');
        if (element.style[property] !== undefined) 
            element.style[property] = value;
        else 
            return false;

        return element.style[property] === value;
    } catch (e) {
        return false;
    }
};

// Проверяем
console.log( SupportsCSS('display', 'flex') );
console.log( SupportsCSS('display', '-webkit-box') );
console.log( SupportsCSS('display', 'Lol :)') );
console.log( SupportsCSS('flex-wrap', 'wrap') );
console.log( SupportsCSS('-webkit-flex-wrap', 'nowrap') );

      注意：如果您通过现代浏览器模拟器检查旧浏览器中的属性支持，那么此方法将在不支持的值上显示true 。

      这种方法的优点是它适用于所有浏览器。

      在 Safari 5.17 中运行脚本的示例：

      在此处输入图像描述

    特殊服务

    为了不打扰，可以在特殊网站上查看支持。例如，最受欢迎的网站之一是http://caniuse.com/

    你可以在这里阅读更多：https ://habrahabr.ru/post/336466/

    • 18

  2. 现代化

    Modernizr是一个 JavaScript 库，它了解用户的浏览器可以在 HTML5 和 CSS3 中执行的操作。

    简而言之，该库将类添加到您的类<html>中，您可以根据这些类选择元素将使用的属性：

    .block { display: flex; }
html:not(.flexbox) .block { display: block; }

    js的方法：

    if(Modernizr.touchevents) {
  // do something ...
}

    还测试某些浏览器功能，例如，选择“是否启用 polyfills”：

    Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

    更多细节可以在关于 Habré - Modernizr：实际应用的文章中找到

    • 6

相关问题