Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.01.2017, 03:45
Новичок на форуме
Отправить личное сообщение для ergonomic Посмотреть профиль Найти все сообщения от ergonomic
 
Регистрация: 23.01.2017
Сообщений: 3

Проверка поддержки CSS браузером через element.style.property vs DOM.property
Привет всем!
Возник вопрос. Как лучше проверить поддержку свойства CSS и значения свойства. Какой из вариантов наиболее корректен?
function cs(p, v) {
	var e = document.createElement('p');
	e.style.cssText = p + ':' + v; // добавляем к элементу свойство через cssText с целью экранировать ошибку, если значение свойства не поддерживается браузером
	return e.style[p] === v; // проводим сравнение и возвращаем true/false
}

var fx = ['flex', '-webkit-flex', '-webkit-box', '-moz-box', '-ms-flexbox']; // набор значений с вендорными префиксами
for (var i = 0; i < fx.length; i++) {
	console.log(cs('display', fx[i]));
	// по true - что-то начинаем делать
}


Вопрос возникает по-причине того, что все решения по проверке поддержки CSS свойств построены на обращении к DOM-свойству элемента и проверки его существования. Например:
var e = document.createElement('p');
var s = e.style;
if ('flex' in s) console.log('flex');
if ('WebkitFlex' in s) console.log('WebkitFlex');
if ('WebkitBoxFlex' in s) console.log('WebkitBoxFlex');
if ('MozBoxFlex' in s) console.log('MozBox');
if ('msFlex' in s) console.log('msFlex');
Ответить с цитированием
  #2 (permalink)  
Старый 23.01.2017, 12:11
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 440

ergonomic,
Посмотри как Modernizr осуществляет проверку поддержки flex
Ответить с цитированием
  #3 (permalink)  
Старый 23.01.2017, 13:09
Новичок на форуме
Отправить личное сообщение для ergonomic Посмотреть профиль Найти все сообщения от ergonomic
 
Регистрация: 23.01.2017
Сообщений: 3

Сообщение от Coriolan161 Посмотреть сообщение
ergonomic,
Посмотри как Modernizr осуществляет проверку поддержки flex
Я на основе Modernizr и других подобных решений задавал вопрос. Поразмышлял, все же через проверку существования DOM.node будет быстрее.
Ответить с цитированием
  #4 (permalink)  
Старый 23.01.2017, 14:24
Новичок на форуме
Отправить личное сообщение для ergonomic Посмотреть профиль Найти все сообщения от ergonomic
 
Регистрация: 23.01.2017
Сообщений: 3

Конечное решение.
function fs() { // Flex Support
	var e = document.createElement('p').style; // Element


	// Результат проверки 0 - no flex / 1 - flex / 2 - old flex
	var f = 0; // Flex
	// Результат проверки 0 - no wrap / 1 - wrap
	var w = 0; // Wrap


	// Строгий порядок очередности проверки node
	var nf = [
		'flex',
		'WebkitFlex',
		'WebkitBoxFlex',
		'MozBoxFlex',
		'msFlex'
	]; // Node Flex
	var nw = [
		'flexWrap',
		'WebkitFlexWrap',
		'msFlexWrap'
	]; // Node Wrap


	for (var i = 0; i < nf.length; i++) {
		if (nf[i] in e) {
			if (nf[i] == nf[0] || nf[i] == nf[1]) {
				var f = 1;
			} else {
				var f = 2;
			}
			break;
		}
	}

	for (var i = 0; i < nw.length; i++) {
		if (nw[i] in e) {
			var w = 1;
			break;
		}
	}

	console.log(f);
	console.log(w);

}
fs();

Сам спросил - сам ответил. Спасибо за ваше участие! =)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Управление CSS через JS (Sandr) Общие вопросы Javascript 3 16.03.2012 12:22
Проверка, выбран ли checkbox, если обращаюсь к нему через $(this['id']) SkaN jQuery 1 02.03.2012 13:55
Не распечатываются png картинки, заданные в css через background в firefox kolyan1983 Firefox/Mozilla 4 04.03.2011 23:11
Как узнать о поддержке браузером CSS свойства? estoesyo Элементы интерфейса 3 18.10.2010 22:12
JQuery CSS анализатор javascript jQuery 2 15.08.2010 21:27