Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   синтаксис и -moz- -webkit- (https://javascript.ru/forum/misc/44399-sintaksis-i-moz-webkit.html)

blacklool 18.01.2014 04:40

синтаксис и -moz- -webkit-
 
Здравствуйте!
Можете сказать как правельней писать так :
menu.setAttribute('style','-webkit-transform: rotateY(0deg);-webkit-transition:0.6s;-webkit-transform-style: preserve-3d;-moz-transform: rotateY(0deg);-moz-transition:0.6s;-moz-transform-style: preserve-3d;-o-transform: rotateY(0deg);-o-transition:0.6s;-o-transform-style: preserve-3d;transform: rotateY(0deg);transition:0.6s;transform-style: preserve-3d;');

или так:

menu.style.webkitTransform = 'rotateY(0deg)';
		menu.style.mozTransform = 'rotateY(0deg)';
		menu.style.oTransform = 'rotateY(0deg)';
		menu.style.transform = 'rotateY(0deg)';
		menu.style.webkitTransition = '0.6s';
		menu.style.mozTransition = '0.6s';
		menu.style.oTransition = '0.6s';
		menu.style.transition = '0.6s';
		menu.style.webkitTransformStyle = 'preserve-3d';
		menu.style.mozTransformStyle = 'preserve-3d';
		menu.style.oTransformStyle = 'preserve-3d';
		menu.style.transformStyle = 'preserve-3d';


и да, правильно ли это написано? :
menu.style.mozTransformStyle = 'preserve-3d';
     menu.style.oTransformStyle = 'preserve-3d';

просто в интернете нашел информацию только об webkit а на firefox должно работать... но нет...

danik.js 18.01.2014 10:26

Лучше меняй css-классы, а стили прописывай в css.
Цитата:

Сообщение от blacklool
menu.setAttribute('style','...')

Это плохо. В таких случаях пиши menu.style.cssText = '...'

Можешь написать функцию, которая будет сама добавлять префиксы. Что-то вроде:

function setStyle(element, property, value) {
    var prefixes = ['o', 'moz', 'webkit'];
    if (property in element.style)
        return element.style[property] = value;
    property = property.charAt(0).toUpperCase() + property.substring(1); 
    for (var i = 0; i < prefixes.length; i++) {
        var prefix = prefixes[i];
        var vendorProperty = prefix + property;
        if (vendorProperty in element.style)
            return element.style[vendorProperty] = value;
    }
}

cyber 18.01.2014 12:53

blacklool, используйте http://leaverou.github.io/prefixfree/ и не нужно писать префиксы

danik.js 18.01.2014 14:06

cyber, мое мнение что в css нужно писать префиксы (на крайняк использовать препроцессоры) и не делать лишнюю зависимость от js.
А вот в паре с jQuery (патч метода css() ) - думаю можно юзать.

cyber 18.01.2014 19:55

Цитата:

Сообщение от danik.js
и не делать лишнюю зависимость от js

а разница? по сути просто добавляются перфиксы где нужно и код вставляется на страницу.

ruslan_mart 19.01.2014 05:26

Есть ещё идея: проверять на сервере браузер и выставлять нужный префикс (например):
header('Content-type: text/css');
$agent = $_SERVER['HTTP_USER_AGENT'];
if(strpos($agent, 'Firefox')) $pre = '-moz-';
elseif(strpos($agent, 'Chrome') || strpos($agent, 'Safari')) $pre = '-webkit-';
elseif(strpos($agent, 'Opera')) $pre = '-o-';


.selector:hover {
   transition: all 0.3s;
   <?=$pre?>transition: all 0.3s;
}


Хотя вы здесь ведёте речь именно о js. :)

cyber 19.01.2014 17:28

Ruslan_xDD, или препроцессор юзать, тут от ситуации зависит в разных случаях, подходят разные варианты)


Часовой пояс GMT +3, время: 21:13.