Есть ли способ сделать кросс-браузерный CSS3-код СУХИМ?

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

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

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

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

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

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

Answer 3

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

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

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

Answer 4

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

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

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

Answer 5

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

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

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