Преобразование -moz-linear-градиента для всех других поддерживаемых браузеров

Question

Вот мое правило:

#element {
  background: -moz-linear-gradient(center top, #FFF 8px, #F2F2F2 24px, #F2F2F2 100%) repeat scroll 0 0 #F2F2F2;
}

Я хочу взять это правило и применить его ко всем браузерам, которые поддерживают линейный градиент. Как будет выглядеть синтаксис этого правила для Chrome, Safari и ... Internet Explorer?

Я подумываю о создании очень простого веб-приложения, которое будет принимать файл CSS с правилами Mozilla и исключать другие правила браузера.

Answer 1

Этот сайт делает свое дело: http://www.colorzilla.com/gradient-editor/

Выберите «Импорт из CSS» из зоны «CSS» и вставьте свой код !!!

Вы можете попробовать что-то вроде "background: -moz-linear-gradient(center top, rgb(216,54,33), rgb(112,5,7)); "для примера.

Будьте осторожны: код должен быть отформатирован определенным образом ... если после запятой (", ") для примера есть пробел, это не работает ...

Answer 2

Вот градиенты в соответствии с просьбой ...

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);

Answer 3

Это не так уж сложно ... Но этот сайт (css-tricks.com) может объяснить это гораздо лучше, чем я.

Answer 4

То, что вы ищете, уже доступно здесь: CSS3 Gradient Generator - работает для браузеров Mozilla и Webkit (Safari / Chrome).

Что касается IE, MSDN должен помочь вам.

Answer 5

Я обычно использую что-то вроде

// Firefox
background: -moz-linear-gradient
// Chrome & Safari
background: -webkit-gradient
background: -webkit-linear-gradient
// Opera
background: -o-linear-gradient
// IE
background: -ms-linear-gradient

Это, вероятно, столь же кроссбраузерное решение, как и вы, - но опять же CSS не моя сильная сторона.