Как проверить, поддерживается ли значение 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 VALUE, и ответ: "Вы его установили, затем прочитайте значение обратно и проверьте, сохранил ли браузер его". Теперь я уверен, что это была бы полезная информация, если бы я знал больше javascript, который только что начал изучать.

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

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

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

Руководство к ответу действительно оценено. Благодарим за помощь.

Ответы

Ответ 1

Я предполагаю, что вы хотели проверить, поддерживается ли значение 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

Ответ 2

Существует новый API CSS.supports. Поддерживается в большинстве браузеров, кроме 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 )")
)

Ответ 3

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

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

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

Однако это кажется ненужным.

Просто Googling:

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

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

Когда я искал

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

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

Источник

Ответ 4

Со временем мы можем протестировать из 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 )")
)

Ответ 5

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

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

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

Ответ 6

Это мой код, который учитывает полностью неподдерживаемые свойства, проверяя наличие реквизитов Camel-Case в стиле, и использует CSS.supports, если он доступен.

const prefixes = ['', '-webkit-']

function supports(prop, value) {
  if ('CSS' in window && 'supports' in window.CSS) {
    for (let i = 0; i < prefixes.length; i++) {
      const property = prefixes[i] + prop

      if (window.CSS.supports(property, value) ) { return true }
    }
    return false
  }

  const el = document.createElement('div')

  let found = false
  prefixes.forEach((pr) => {
    if (found) return
    const p = '${pr}${prop}'
    const Prop = p.replace(/-(.)/g, (m, s) => s.toUpperCase())
    if (!(Prop in el.style)) return
    el.style[p] = value
    found = el.style[p] == value // can just check if it not empty actually
  })
  return found
}