Расширение CSS Properties

Question

Я веб-разработчик, недавно я посмотрел на новый предварительный просмотр GMAIL LOGIN PAGE , и там есть кнопка «Войти», я был очень рад ее интерфейсу. Я сделал некоторую операцию CSS страницы и нашел некоторые свойства, такие как:

**background-color: #4D90FE;
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
background-image: linear-gradient(top,#4d90fe,#4787ed);**

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

Спасибо.

Answer 1

Здесь представлен довольно полный список CSS-расширений Mozilla (или просто тех, которые еще не полностью стандартизированы): https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

Существует также попытка перечислить все свойства CSS, относящиеся к конкретному поставщику, в http://webdesign.about.com/od/css/a/css-extensions.htm, но, вероятно, она является довольно неполной и устаревшей - эта область быстро меняется. В конце концов, вам лучше взглянуть на CSS3 . Либо функция там уже указана, что означает, что префиксы поставщиков, скорее всего, скоро будут удалены, либо это не так, и поэтому использование этой функции на рабочей веб-странице не рекомендуется (ее значение может существенно измениться или браузеры могут вообще перестать ее поддерживать).

Answer 2

Вы должны использовать Google, чтобы найти такую ​​информацию, большая часть которой существует с начала 2010 года.

, но вот несколько примеров браузерных градиентных кодов:

.gradient-bg {
   /* fallback/image non-cover color */
   background-color: #1a82f7; 

   /* fallback image */
   background-image: url(images/fallback-gradient.png); 

   /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));

   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); 

   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
}

Взято из здесь .

Answer 3

Чтобы узнать, какой браузер поддерживает, какой селектор имеет много общего с тестированием.

Если вам просто нужны кросс-браузерные градиенты, используйте http://www.colorzilla.com/gradient-editor/ (поддерживает также IE6-9).

Чтобы выяснить, какая техника поддерживается каким браузером http://caniuse.com является хорошим ресурсом.

Answer 4

Это список, который я постоянно держу в качестве ориентира.

Надеюсь, он вам пригодится

http://qooxdoo.org/documentation/general/webkit_css_styles