Вендорные префиксы в 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

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

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

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


Комментарии посетителей:
  • А еще, уже можно создавать тени от слоев 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 # Ваня (гость)
  • Вы попали в самую точку. В этом что-то есть и мне кажется это хорошая идея. Я согласен с Вами.

    ---

    порно бесплатно рассказы изнасилование жену сына и [url=http://porno-incest.ru/incest/4655-porno-rasskaz--laquootets-uznal-doch.html]порно рассказы беременная дочь[/url]
    15 января 2017, 22:21 коммент полезен : -1 # Georgekefly (гость)
  • Официальная работа через интернет с обучением.
    24 января 2017, 12:22 коммент полезен : 0 # Legorwot (гость)
  • Первый заработок в течении 1-го часа. Без рисков законно!
    27 января 2017, 18:51 коммент полезен : 0 # Rnikawot (гость)
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Введите изображенные цифры:
Captcha
Главная
X

youtube.com/watch?v=7hFivbgIEqk

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

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