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

Применим вендорные префиксы, используемые браузерами для экспериментальных 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

Оцени публикацию:
  • 18,78
Оценили человек: 18

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • А еще, уже можно создавать тени от слоев box-shadow: 10px 10px 25px #ccc; и от текста text-shadow: 2px 2px 5px #ccc; 2 первые значения это расстояние тени по осям x и y (offset), а третий - размытие теней (blur)
    09 октября 2010, 18:12 коммент полезен : +1 # Sunshine (гость)
  • Онлайн инструмент для добавления нужных префиксов, может пригодится кому нибудь.
    http://autoprefixer.github.io
    28 октября 2014, 10:01 коммент полезен : +1 # Ваня (гость)
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » CSS »