Плагин jQuery Background Gradient
 

По мотивам известных хаков сделал очень простой плагин дабы облегчить себе жизнь и, возможно, другим верстальщикам. Были использованы в куче такие некроссбраузерные CSS свойства, как, например, -moz-linear-gradient для мозиллы, свойство filter для ИЕ выше 5.5 версии, бекграундовый SVG для оперы (то есть плагин совместим с большинством современных браузеров, в том числе и internet explorer). Несомненным плюсом скрипта является то, что при его выполнении не создается дополнительных блоков, то есть, по идее, не должно возникнуть несовместимости с другими скриптами, так как градиент ведет себя как обычная фоновая картинка. Так же, очевидно, градиент растягивается в зависимости от размеров блока.
Плагин инициализируется следующим образом:
$(<селектор>).backgroundGradient({startPos ition: <"top" либо "left" в зависимости от того, с какой стороны градиент должен начинаться, то есть top - вертикальный градиент, left - горизонтальный >, startColor:<цвет>, stopColor:<цвет>});
Например:

$("div#gradient").backgroundGradient({startPosition:"top", startColor:"red", stopColor:"green"});

Пример его работы в действии можно посмотреть во вложении.
Как ни крути, скрипт пока еще сырой и требует дальнейших доработок.
Просьба к комьюнити: подскажите, как избежать добавление плагином стилей в атрибут style, если это возможно.

Создать свою таблицу стилей и пихать все туда, а на элемент вешать класс.
Не кажется, что лучше все-таки для каждого браузера использовать свой код?

Для каждого селектора нужно будет создавать отдельный класс, что так же не хорошо, как по мне.Будет куча кода.

Нужно будет создавать только разные классы для разных градиентов. К примеру, у тебя 100 элементов с одинаковым градиентом. Сейчас имеешь 100 засраных атрибутов style. Будешь иметь 1 класс для 100 элементов и 1 блок стилей в таблице. Навесить 100 классов намного проще.
Если у тебя 100 элементов с разным градиентом - имеем 100 классов и 100 блоков стилей в таблице. Чем это отличается от 100 засраных атрибутов?

И ещё. В этом плагине не обязательно юзать each.

Дело говорите. Как это сделать? Вписать <style> не будет говнокодом?Each - это применение для каждого объекта, определенного селектором, или я не так понимаю?

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

Да, но jQuery сам это сделает. Все равно, что писать:

$('div').each(function(){
  $(this).css({
    color: 'black'
  });
});

вместо:

$('div').css({
  color: 'black'
});

Правда, бред?:)
Ну во-первых, для доступа к CSS-файлам есть определённые интерфейсы. Т.е. это все делается на уровне DOM, а не регулярками.
Во вторых, jQuery не способен на такое. Поэтому работу с CSS придется реализовывать ручками. До кучи: есть расхождения ишака с браузерами, но не большое.

Если ещё осталось желание, почитай про работу с CSS тут и тут.

Ахаха, когда-то казалось, что я сделал круто :D

Дауж =))) В ИЕ например градиент с круглыми углами не прокатит=))) Там уже VML нужен.

я такой штукой пользуюсь http://css3pie.com/
когда нужны некоторые новые css для старых IE использовать

а чтобы меньше писать -moz- -o- -ms- и т.д.
и вообще удобно, пользуюсь http://sass-lang.com/

....

у меня в Ie7 сайт http://outlines.com/ открылся только до кнопки REGISTER NOW дальше все белое
почему не разбирался

Да есть косяк, надо будет исправить потом.

Я тут как раз недавно написал небольшую функцию для кроссбраузерного доступа к стилям во внешний файлах. Вот, если кому-то нужно :)

function getCSSRule(ruleIndex, tabIndex) {
     if (ruleIndex === undefined) throw new Error("Rule index must be set");
     var sheet = document.styleSheets[tabIndex || 0];
     if (!sheet) throw new Error("This styleSheet is not defined");
     var cssRule = sheet.rules ? sheet.rules[ruleIndex] : sheet.cssRules[ruleIndex];
     return {
         cssText: function (text) {
             if (!text) {
                 var cssText = cssRule.cssText || cssRule.style.cssText;
                 return cssText.toLowerCase().replace(/.*\{(.*)\}/ig, "$1");
             } else {
                 cssRule.style.cssText = text;
             }
         },
         getProperty: function (name) {
             return cssRule.style[name];
         },
         getSelector: function () {
             return cssRule.selectorText;
         }
     }
 }
 getCSSRule(0).cssText("color: red;");
 alert( getCSSRule(0).getProperty("color") );

Единственный минус, ишак путает номера правил если одно правило применено к нескольким селекторам, разделённым запятыми. Пока думаю как вылечить)