Finom Jul 2 2011 at 18:53

cssHooks — расширяем множество CSS свойств

5 min

3.2K

jQuery*

+42

Comments 19

tenshi Jul 2 2011 at 21:48

зачем все эти пляски с бубном, если стили задаются через яваскрипт, а не css?

мне больше импонирует такой подход: nin-jin.github.com/web-components/lib-wc-css3/lib-wc-css3/lib-wc-css3.doc.xml

Finom Jul 2 2011 at 23:27

Основная мысль статьи заключается в выводе. В случае использования jQuery, нет смысла создавать плагины, если можно расширить поддержку свойств в методе .css()

tenshi Jul 3 2011 at 16:09

$('p:eq(0)').css({'background-color':'rgba(0,111,221,0.9)'});

vs

$('p:eq(0)').colorMask( 0, 111, 221, 0.9 );

второй способ проще в реализации, быстрее исполняется и меньше весит.

tapazukk Jul 2 2011 at 22:34

Это конечно хорошо, но без тестов на производительность, актуально только для небольших just-for-fun проектов, где, в принципе, можно обойтись набором известных хаков. В этом случае описанный метод теряет смысл, т.к. он очевидно был призван ускорить и упростить процесс разработки в больших проектах.
Да, и это все далеко от парадигмы пуленепробиваемого кода.

-1

bootch Jul 2 2011 at 22:41

Вы бы поаккуратнее с Чаком.

eliah_lakhin Jul 2 2011 at 22:43

Скажите, пожалуйста, подхватывает ли этот метод стили, переданные через css-файл?

Finom Jul 2 2011 at 23:52

Вы сами определяете, что и как подхватывать.

eliah_lakhin Jul 3 2011 at 00:03

Судя по проверке в jsFiddle: jsfiddle.net/Eliah/etKvD/ ответ на мой вопрос отрицательный. То есть, $.cssHooks не подхватывает данные из css-файлов, к сожалению.

Это существенно снижает его ценность. В отрыве от css файлов функция css() не слишком полезна.

Finom Jul 3 2011 at 00:08

Не поленюсь еще раз повторить. Вы сами определяете что и как подхватывать. Хотите, берите из CSS (getComputedStyle), хотите берите из атрибута.

eliah_lakhin Jul 3 2011 at 00:16

> Хотите, берите из CSS (getComputedStyle)

Буду очень признателен, если приведете пример кода, как из CSS подхватить мое свойство «my» в примере выше.

Finom Jul 3 2011 at 00:26

Наверно через перебор document.styleSheets[i].cssRules[j], а в IE все «левые» свойства в CSS входят в объект style.

eliah_lakhin Jul 3 2011 at 10:06

В общем, это не является прямым решением озвученной проблемы.

f0rmat1k Jul 2 2011 at 22:47

Познавательно, но имхо не оправдано. .css() очень не желательно использовать вообще как setter, особенно с экзотическими свйоствами, которые для каждого браузера имеют свой префикс. Стили должны быть отделены от скриптов. Поэтому лучше юзать toggle/add/remove Class. А для смены видимости .hide(), .show(), toggle() и прочее.

Finom Jul 2 2011 at 23:33

По ссылке на альтернативную документацию как раз и рассматривается случай, когда вы хотите определить «экзотические» свойства.

(function($){
    if ( !$.cssHooks ){
        alert("jQuery 1.4.3+ is needed for this plugin to work");
        return;
    }
    var div = document.createElement( "div" );
    $.support.borderRadius =
    div.style.WebkitBorderRadius === ''? 'WebkitBorderRadius' :
    (div.style.MozBorderRadius === ''? 'MozBorderRadius' : 
    (div.style.borderRadius === ''? 'borderRadius'  : false));
    
    //only set cssHooks for browsers that don't support "borderRadius" natively
    if ( $.support.borderRadius && $.support.borderRadius !== "borderRadius" ){
        $.cssHook.borderRadius = {
           get: function( elem, computed, extra ){
                return $.css( elem, $.support.borderRadius );
           },
           set: function( elem, value){
                elem.style[$.support.borderRadius] = value;
           }
        };
    }    
})(jQuery);

$("#element").css("border-radius", "20px");

То есть по сути идет перехват геттера и сеттера и установка новых.

А отделение стилей от скриптов не всегда оправданы.

f0rmat1k Jul 2 2011 at 23:55

Мне за приличное время верстки различные интерфейсов еще ни разу не понадобилось юзать css() как сеттер. В приведенном ваами примере 4 лишние проверки, которых можно избежать просто используя класс. Ну и прочие каноничное правило, о том, что ксс удобнее менять и видеть в ксс-файле, вдруг после вас будет будет работать верстальщик, который не знает скриптов да и просто с классами быстрее разобраться, что-то изменить.

Хоть и в 99,99% случаев не оправдано — очень познавательно, плюс посту я поставил. Это было б ключевой техникой, если б понадобилось написать что-то вроде PIE.htc на джеквери.

f0rmat1k Jul 2 2011 at 23:57

блин, ночью голова плохо соображает, понаписал, как китаец…

-1

Finom Jul 3 2011 at 02:04

Следуя вашей логике css() вредно юзать и как геттер.

f0rmat1k Jul 3 2011 at 10:16

Нет, иногда как геттер нужно. Например, недавно писал свои нестандартные селекты для 1го проекта. В макете в одной из форм их было очень много и разной ширины. Соответственно, проще и правильнее было начальным настоящим селектам проставлять style width, нежели плодить тучу классов. И соответственно при замене тру селекта на стандартный приходилось вначале делать проверку, вернет ли что-то геттер css('width'), чтоб новый селект стал такой же ширины. Кстати, можно было б использовать width(), но css('width') в данном случае было надежней ибо по дефолту размер селектов в разных браузеров разный.

ArtyV Jul 3 2011 at 09:28

У вас эти свойства анимироваться не будут :) надо ещё сделать $.fx.step['background-alpha']

Show the best of all time