Динамическое определение CSS3-префикса пользовательского агента - PullRequest
Новая
       21

Динамическое определение CSS3-префикса пользовательского агента

2 голосов
/ 20 сентября 2010

Есть ли лучший способ, чем использовать jQuery.browser или эквивалентов , для определения css 3 префиксов (-moz, -webkit и т. Д.),как обескуражен ?Поскольку css является динамическим (пользователь может делать с ним все что угодно во время выполнения), хаки css и хаки тегов стиля не могут рассматриваться.

Ответы [ 5 ]

7 голосов
/ 20 сентября 2010

Я не вижу проблемы с использованием navigator.userAgent для определения необходимости обработки префиксов Webkit / Gecko CSS3.Или, что еще лучше, просто придерживайтесь CSS2, пока CSS3 не станет Рекомендацией W3C.

Причина, по которой использование объекта navigator не приветствуется, заключается в том, что он использовался поверх обнаружения объектов, когда (java) -сценарии для различных браузеровВ такой ситуации вполне нормально использовать обнаружение пользовательского агента, потому что вы специально нацеливаетесь на определенные причуды с различными механизмами рендеринга.

Редактировать: Поднимая с того места, где остановился Cy, вы можетеиспользовать обнаружение объектов javascript, чтобы определить, используется ли префикс, для этого я сделал небольшой код: 

window.onload = function ()
{
    CSS3 = {
        supported: false,
        prefix: ""
    };
    if (typeof(document.body.style.borderRadius) != 'undefined') {
        CSS3.supported = true;
        CSS3.prefix = "";
    } else if (typeof(document.body.style.MozBorderRadius) != 'undefined') {
        CSS3.supported = true;
        CSS3.prefix = "-moz-";
    } else if (typeof(document.body.style.webkitBorderRadius) != 'undefined') {
        CSS3.supported = true;
        CSS3.prefix = "-webkit-";
    }
    if (CSS3.supported)
        if (CSS3.prefix == "")
            alert("CSS3 is supported in this browser with no prefix required.");
        else
            alert("CSS3 is supported in this browser with the prefix: '"+CSS3.prefix+"'.");
    else
        alert("CSS3 is NOT supported in this browser.");
};

Не забывайте следить за странными причудами, такими как -moz-opacity, который поддерживается только в старых версияхFirefox, но теперь устарел в пользу opacity, хотя он все еще использует префикс -moz- для других новых стилей CSS3.

2 голосов
/ 09 июля 2011 
Array.prototype.slice.call(
  document.defaultView.getComputedStyle(document.body, "")
)
.join("")
.match(/(?:-(moz|webkit|ms|khtml)-)/);

Вернет массив с двумя элементами.Один для тире и один без тире, оба в нижнем регистре, для вашего удобства. 

Array.prototype.slice.call(
  document.defaultView.getComputedStyle(document.body, "")
);

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

IE9, Chrome, Safari, FF.Opera не позволит вам нарезать CSSStyleDeclaration, поскольку вы все равно можете использовать тот же код getComputedStyle и проходить через свойства или проверять конкретный.Opera также хотела быть странной и не сообщать, что префикс поставщика прерван.Спасибо Opera. 

Object.keys(CSSStyleDeclaration.prototype)

Работает в IE9 и FF и сообщает версию названий свойств вендора в формате TitleCased (JavaScript).В WebKit не работает, так как прототип только сообщает о методах.

Вот интересная и очень опасная функция, которую я только что написал по этому поводу: 

(function(vp,np){
Object.keys(this).filter(function(p){return vp=vp||p.match(/^(Moz|ms)/)}).forEach(function(op){
    this.__defineGetter__(np=op.replace(vp[0], ""), function() { return this[op] });
    this.__defineSetter__(np, function(val) { this[op] = val.toString() });
}, this);
}).call(CSSStyleDeclaration.prototype);

Я ничего не тестировал. Konquerer.

1 голос
/ 20 сентября 2010

Это добавление в другую библиотеку, но будет ли Modernizr работать для вас? Он добавляет классы CSS к тегу <html>, который может сказать вам, что поддерживает браузер.

Это немного запутывает код, но, безусловно, может быть полезным в соответствующих ситуациях.

1 голос
/ 20 сентября 2010

Умозрительно : Да. Вы можете попробовать добавить правило css префикса вендора (так они называются), а затем проверить, существует ли это правило. Эти правила для конкретного поставщика не будут добавлены в DOM в браузерах, в которых они не поддерживаются , в некоторых случаях .

Например, если вы попытаетесь добавить правило -moz в webkit, оно не добавится в DOM, и, следовательно, jQuery не сможет его обнаружить.

так 

$('#blah').css('-moz-border-radius','1px');
$('#blah').css('-moz-border-radius') //null in Chrome

С другой стороны, 

$('#blah').css('-webkit-border-radius','1px');
$('#blah').css('-webkit-border-radius'); //returns "" in Chrome

Этот метод работает в браузерах WebKit; Я проверяю, работает ли он в других. В ожидании.

Редактировать: К сожалению, это не работает в Firefox или Opera, которая просто возвращает "" независимо от совместимости. Думая о способах сделать это кросс-браузер ...

Окончательное редактирование: Ответ Эндрю Данна делает это так, как это работает (по крайней мере, в FF и Webkit, что лучше, чем мой метод).

0 голосов
/ 06 июня 2012

Я использую троичный оператор, чтобы он был только в 1 строке.Если это не webkit или gecko, я просто использую стандартное свойство.Если у него нет поддержки, кого это волнует?Как только браузер начинает поддерживать Draft / Candidate Рекомендации свойства CSS3, он сбрасывает префикс на стороне JS.Поэтому вам нужно быть осторожным и помнить об этом перед копированием.

...