Вендорные префиксы в CSS

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

Вендорные префиксы это приставки, используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт, CSS-свойств.

Приведу список некоторых префиксов для наиболее распространенных браузеров.

• -o- — префикс для браузера Опера
• -moz- — префикс для браузеров из семейства Mozilla
• -ms — префикс для Интернет Експлорера 8 (да, даже Microsoft ввела свой префикс, в частности для того, чтобы изобретенные ею CSS-фильтры можно было использовать, не нарушая при этом веб-стандарты)
• -webkit- — префикс для браузеров, построенных на движке Webkit, в частности Safari и Chrome
• -icab- — префикс для браузера iCab (альтернативного, как заявлено на родном сайте, браузера для Apple)
• -khtml-. KHTML — компонент для просмотра HTML документов разработанный для среды KDE для UNIX-систем. Был представлен в 2000 году, для использования в Konqueror

Использовать префиксы очень просто. Для этого перед экспериментальным или нестандартным CSS-свойством написать соответствующий префикс, например, свойство text-overflow в старых версиях Opera не поймет, если не написать его таким образом:

-o-text-overflow

А CSS-фильтры от Microsoft можно использовать в ИЕ8 следующим образом:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)

Рекомендую ознакомиться с подобным использованием дополнений к CSS от Microsoft в их родном блоге

А на сайте apple.com их применяют во всевозможных вариантах, например для закругления границ интересной таблицы цен:

/* tabular */
#main table { border-collapse: separate; *border-collapse: collapse; width: 100%; font-size: 12px; font-family: "Lucida Grande", Arial, Verdana, sans-serif; }
#main table th,
#main table td { border: 1px solid #ccc; border-width: 1px 0 0 1px; text-align: center; padding: 10px 10px 6px; }
#main table .round_ul { border-radius: 4px 0 0 0; -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; -o-border-radius: 4px 0 0 0; -khtml-border-radius: 4px 0 0 0; }
#main table .round_bl { border-radius: 0 4px 0 0; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -o-border-radius: 0 4px 0 0; -khtml-border-radius: 0 4px 0 0; }
#main table .round_br { border-radius: 0 0 4px 0; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -o-border-radius: 0 0 4px 0; -khtml-border-radius: 0 0 4px 0; }
#main table .round_ur { border-radius: 0 0 0 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; -o-border-radius: 0 0 0 4px; -khtml-border-radius: 0 0 0 4px; }
#main table .rt { border-right-width: 1px; }
#main table .btm { border-bottom-width: 1px; }

Источник: starhack.ru