Как проверить, поддерживается ли значение css браузером?

Я не очень хорошо разбираюсь в javascript, поэтому, пожалуйста, будьте терпеливы со мной. Safari 6 и ниже, а также более старые мобильные браузеры android и, возможно, больше не поддерживают значение css VH. Мой DIV # id или класс не является высотой окна просмотра. Ниже приведена ссылка на страницу, на которой я нашел некоторую полезную информацию, но я действительно не уверен, как использовать ее со значением css:

Проверьте, поддерживается ли значение css

Вот код, данный в качестве ярлыка для вас: 

if('opacity' in document.body.style) {  
   // do stuff
}

function isPropertySupported(property{
   return property in document.body.style;
 }

В комментариях ссылка, которую я прикрепил выше, кто-то спрашивает, Как проверить, поддерживается ли значение css, и ответ: "вы устанавливаете его, затем считываете значение обратно и проверяете, сохранил ли его браузер."Теперь я уверен, что это была бы полезная информация, если бы я знал больше javascript, который я только начал изучать.

Это то, что я имею в виду, но я действительно не уверен, как это сделать. Проверьте, если div#id или div.класс имеет значение VH css. Проверьте, поддерживается ли значение css браузером. Если его поддерживают тогда продолжайте заряжать. Если не поддерживается, измените идентификатор или класс.

Итак, чтобы подвести итог моему вопросу:

Как проверить, поддерживается ли значение css браузером, использующим javascript или jquery?

Руководство к ответу действительно ценится. Спасибо за вашу помощь.
5 11
javascript css jquery viewport

5 ответов:

Я предполагаю, что вы хотели проверить, поддерживается ли значение vh, а не несет ли его конкретно DIV#id?

function cssPropertyValueSupported(prop, value) {
  var d = document.createElement('div');
  d.style[prop] = value;
  return d.style[prop] === value;
}
cssPropertyValueSupported('width', '1px');
// => true
cssPropertyValueSupported('width', '1vh');
// => maybe true, maybe false (true for me)
cssPropertyValueSupported('width', '1foobar');
// => false
16

Есть новый API CSS.поддерживает . Поддерживается в большинстве браузеров, кроме IE .

console.log(
  // CSS.supports(property, value)
  1, CSS.supports("text-decoration-style", "blink"),
  2, CSS.supports("display", "flex"),
  3, CSS.supports('--foo', 'red'),
  4, CSS.supports('(--foo: red)'),

  // CSS.supports(DOMstring)
  5, CSS.supports("( transform-origin: 5% 5% )"),
  6, CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " 
  + "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )")
)

И есть аналогичная функция в CSS, @supports feature query selector, также поддерживается в большинстве браузеров, кроме IE: 

@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: right;
  }
}
5

Я вижу код, который у вас есть.

var styletotest = "PutStyleHere";

if (styletotest in document.body.style)
{
    alert("The " + styletotest + " property is supported");

} else {

    alert("The " + styletotest + " property is NOT supported"); 

}

Просто поместите свойство css, которое вы хотите проверить, в кавычки, где оно говорит

PutStyleHere

И когда вы загружаете файл, он покажет всплывающее окно, сообщающее Вам, работает он или нет.

Однако это кажется излишним.

Просто Гуглить:

[свойство] css W3

Где [property] - свойство, которое вы хотите знать о поддержке браузера.

Когда я искал

Непрозрачность Css W3

И затем нажал на ссылку W3... вы можете прокрутить вниз, и вы увидите раздел страницы с нужной вам информацией следующим образом:

поддержка браузеров

Источник

2

Я бы предложил использовать Modernizr.

Modernizr-это библиотека JavaScript, которая определяет, какие функции HTML5 и CSS3 поддерживает браузер вашего посетителя. При обнаружении поддержки функций он позволяет разработчикам протестировать некоторые из новых технологий, а затем предоставить резервные версии для браузеров, которые их не поддерживают.

Некоторые полезные ссылки:

1

Мы можем с некоторых пор тестировать из javascript, если правило css доступно в контексте с CSS.supports.

(Начиная С Firefox 22 / Chrome 28) 

console.log(
CSS.supports("( transform-origin: 5% 5% )"),
"\n",
CSS.supports("( display: flex )"),
"\n ",
CSS.supports("( background-color: #12233212 )")
)

CSS.статические методы supports() возвращают логическое значение, указывающее если браузер поддерживает данную функцию CSS, или нет.

Https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports

1