Обнаружение поддержки flex-wrap в браузерах

Я работаю над проектом, в котором у меня есть отзывчивая сетка, которую я достиг с помощью свойства flex wrap. Поскольку я поддерживаю IE9 и более низкие версии Firefox, версии 28 и ниже, как мне узнать, через javascript, поддержку того же самого. В настоящее время я только смог идентифицировать браузер IE9 через условный оператор, но теперь кто-нибудь может определить для Firefox более старые версии через javascript.

10
css flexbox javascript jquery

4 ответов

Я не знаю, как вы это делаете сейчас, но на самом деле нет причин изобретать колесо.

Modernizr (http://modernizr.com/) был построен для этого и широко используемая библиотека для обнаружения объекта. Глядя на функции CSS, они поддерживают обнаружение flexbox (http://modernizr.com/docs/#features-css) и будет работать до самого IE6.

9

я обнаружил, что это самый простой способ:

var d = document.documentElement.style
if (('flexWrap' in d) || ('WebkitFlexWrap' in d) || ('msFlexWrap' in d)){
  alert('ok');
}

пробовал hasOwnProperty но это не работает в IE и FF. Так зачем использовать 40 КБ modernizr, когда вы можете иметь только 3 линии js ?

31

обнаружение свойств CSS

простой метод обнаружения свойств CSS заключается в том, чтобы проверить его непосредственно на элементе и проверить, возвращает ли он undefined как ниже

element.style.<propertyName> != undefined.

самый простой метод (но ограниченная поддержка)

вышеуказанный метод непосредственно проверяет свойство и должен быть достаточным для большинства распространенных свойств (не для flex-wrap).

function isStyleSupported(el, property) {
	  return el.style[property] != undefined;
}
var testEl = document.getElementById('test');
testEl.innerHTML = (isStyleSupported(testEl, 'flexWrap')) ? "Flex Wrap is supported" : "Flex Wrap is NOT supported";
<div id="test"></div>

вы можно добавить немного больше кода, чтобы проверить, поддерживается ли свойство с префиксами dom,

немножко обширный для лучшей поддержки (работ для гибк-обруча)

var domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');

function toCamelCase(cssProp) {
  return cssProp.replace(/-([a-z])/gi, function(s, prop) {
    return prop.toUpperCase();
  });
}

function isStyleSupported(el, property) {
  if (el.style[toCamelCase(property)] != undefined) {
    return true;
  } //supported
  property = toCamelCase("-" + property);
  for (var i = 0; i < domPrefixes.length; i++) { //check with dom prefixes			
    if (el.style[domPrefixes[i] + property] !== undefined) {
      return true; //supported with dom prefix
    }
  }
}
var divEl = document.getElementById('result'), textEl = document.getElementById('textbox');
document.getElementById('checkSupport').onclick = function() {
  divEl.innerHTML = (isStyleSupported(divEl, textEl.value)) ? textEl.value + " is supported" : textEl.value + " is NOT supported";
};
<input type="text" id="textbox" value="flex-wrap" />
<button id="checkSupport">Check</button>
<div id="result"></div>

это действительно усложняется, когда вы решаете обобщить это для любого свойства во всем браузере. Это то, куда мы решили пойти для modernizr, который имеет расширенную поддержку обработки исключений.

CSS.поддерживает

появился новый CSS API CSS.supports который возвращает логическое значение, чтобы проверить, поддерживается ли определенная функция CSS браузером. Однако это новый API, поэтому мы все еще используем плагины, такие как modernizr пока не появится поддержка, необходимая для более старого браузера.

вывод:

используйте самое простое обнаружение стиля element.style.<property> != undefined или domPrefixes если ваше требование. Вы всегда можете настроить его немного больше как ваша потребность, но если она сложна и обширна, то пойдите для modernizr который имеет расширенный код для обнаружения функций.

8

расширение ответа @AndresTet, если вы не хотите полного modernizr build, вы можете создать заказ, или экстракт и рефакторинг на основе соответствующих тестов, что кажется:

function testPropsAll(prop, prefixed, elem) {

    var ucProp = prop.charAt(0).toUpperCase() + prop.slice(1),
        props = (prop + ' ' + cssomPrefixes.join(ucProp + ' ') + ucProp).split(' ');

    if (is(prefixed, "string") || is(prefixed, "undefined")) {
        return testProps(props, prefixed);

    } else {
        props = (prop + ' ' + (domPrefixes).join(ucProp + ' ') + ucProp).split(' ');
        return testDOMProps(props, prefixed, elem);
    }
}

tests['flexbox'] = function() {
    return testPropsAll('flexWrap');
};

tests['flexboxlegacy'] = function() {
    return testPropsAll('boxDirection');
};
3