Есть ли способ сделать кросс-браузерный CSS3-код DRY?

Question

Когда я хочу, чтобы создать градиент фона в CSS3 я должен сделать это:

background-color: #3584ba; 
background-image: -webkit-gradient(linear, left top, left bottom, from(#54a0ce), to(#3584ba)); /* Safari 4+, Chrome */ 
background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); /* Safari 5.1+, Chrome 10+ */ 
background-image: -moz-linear-gradient(top, #54a0ce, #3584ba); /* FF3.6 */ 
background-image:  -o-linear-gradient(top, #54a0ce, #3584ba); /* Opera 11.10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#54a0ce', endColorstr='#3584ba'); /* IE */ 

и это действительно раздражает. Есть ли лучшее решение, например, плагин JQuery, который сделает мой код кросс-браузер совместимый, если я просто использовать:

background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); /* Safari 5.1+, Chrome 10+ */ 

, например? Есть ли инструмент, который поможет мне написать код CSS3 проще?

Answer 1

Есть много инструментов для этого:

• http://lesscss.org/
• http://leafo.net/lessphp/
• http://sass-lang.com/
• http://compass-style.org/

Они, как правило, называют CSS препроцессоров.

Вы бы в конечном итоге писать что-то вроде этого один раз, как определение функции (обычно называется "Mixin"):

.linear-gradient(@start, @end) { 
    background-color: @end; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); /* Safari 4+, Chrome */ 
    background-image: -webkit-linear-gradient(top, @start, @end); /* Safari 5.1+, Chrome 10+ */ 
    background-image: -moz-linear-gradient(top, @start, @end); /* FF3.6 */ 
    background-image:  -o-linear-gradient(top, @start, @end); /* Opera 11.10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@start', endColorstr='@end'); /* IE */ 
} 

Затем применять:

.my-class { 
    .linear-gradient(#54a0ce, #3584ba); 
} 
.my-other-class { 
    .linear-gradient(#ccc, #aaa); 
} 

Очень рекомендую.

Answer 2

Вы всегда можете использовать интерактивный инструмент для их создания для вас:

http://www.colorzilla.com/gradient-editor/

http://www.css3maker.com/css-gradient.html

Answer 3

Есть ли лучшее решение, например, JQuery плагин, который сделает мой код кросс-браузер совместим

Для решения на стороне клиента вы можете использовать http://lea.verou.me/prefixfree/

Сценарий, который позволяет использовать только неподписанные свойства CSS везде. Он работает за кулисами, добавив префикс текущего браузера к любому коду CSS, только когда это необходимо.

Вы только тогда нужно будет использовать функцию без префикса, которая таинственным образом отсутствует в вашем CSS:

background-image: linear-gradient(top, #54a0ce, #3584ba); 

Answer 4

Я нашел ответ на этот вопрос. Это программа под названием «autoprefixer», она бесплатна и использует Grunt (а также пару других вещей). Вы даете ему файл или каталог с неотредактированным css и автоматически добавляет префиксы на основе определенных браузеров, на которые вы хотите настроить таргетинг, и выводит их в новый файл. Вот статья о том, как ее использовать.

Сообщение о Autoprefixer автор: http://css-tricks.com/autoprefixer/ Как использовать Grunt для абсолютного новичка: http://24ways.org/2013/grunt-is-not-weird-and-hard/ Тогда вы можете посмотреть его на Github найти ридми.

Я искал то же самое, и это было лучшее решение, которое я нашел, что просто обрабатывает обычный CSS. Надеюсь, это поможет.

Answer 5

https://autoprefixer.github.io/ Попробуйте этот вариант. Это не обязательно поможет вам написать более простой код, это не библиотека javascript. Но он добавляет префиксы поставщиков и удаляет бесполезный код css.

background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); 
background-image: linear-gradient(top, #54a0ce, #3584ba); 

Включая ваш код, это результат, который я получаю. (Я удалил -webkit- из исходного кода, чтобы получить этот результат).