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

Когда я хочу создать фон градиента в 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 проще?

Ответ 1

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

Обычно они называются препроцессорами 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);
}

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

Ответ 2

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

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

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

Ответ 3

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

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

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

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