Вендорные префиксы - это просто

Сегодня поговорим об Вендорных префикасах зачем они нужны и как их использовать.

Зачем нужны

Вендорные префиксы нужны чтобы "разделять" css свойства для браузеров. К примеру, Вы хотите, чтобы в Opera блоки div был синего цвета, а в Google Chrome был жёлтого, то Вам помогут Вендорные префиксы. Префиксы помогут Вам с кроссбраузерностью.

К примеру, если хотите использовать свойство, которое ещё разрабатывается.

В своё время, они позволяли уже года 3 назад использовать некоторые анимации без JavaScript

Как использовать

Все Вендорные префиксы начинаются либо с "_" (Нижнее подчёркивание) или с "-"(тире). Префиксы зарезервированы.

Давайте рассмотрим какие префиксы к каким браузерами относятся.

  • -o-, -op-, -xv- относится к Opera.
  • -moz- к Mozilla FireFox.
  • -ms- к Microsoft.
  • -khtml- к ранним версиям Safari.
  • -webkit- к более поздним Safari, Google Chrome.
  • -icab- к iCab (альтернативного, как заявлено на родном сайте, браузера для Apple)
  • -khtml- используется в среде KDE в UNIX-системах

Если быть точнее - лучше смотреть на движок, на котором сделан браузер(всегда можно подглядеть в UserAgent)

Вендорный префиксПроизводительБраузерБраузерный движок
-o-, -op-, -xv-Opera SoftwareOperaPresto
-moz-проект MozillaFirefox, SeaMonkey, Camino и др.Gecko
-ms-MicrosoftInternet Explorer 8Trident
-khtml-проект KDESafari до версии 3, Konqueror и др.KHTML послужил основой для WebKit
-webkit-AppleSafari 3+, Google Chrome и др.WebKit

Пример кода:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-moz-opacity:0.5;
-khtml-opacity:0.5;
-webkit-opacity:0.5;

или так:

-moz-border-radius: 5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
-op-border-radius: 5px;

Этот код кроссбраузерно реализует прозрачность и скругление.

Вместо заключения

Усть так-же удобный онлайн-инструмент, который дописывает нудные префиксы и удаляет ненужные
http://autoprefixer.github.io/ru/

Фото взято с сайта

Материал подготовлен автором @zheev

vox-populicsshtmlвёрсткабраузеры
25%
49
286
151.669 GOLOS
0
В избранное
Web Development
Тех, кто презирает программистов, программисты презирают сильнее, чем те, кто презирает тех программистов, которые презирают тех, кто их презирает.
286
0

Зарегистрируйтесь, чтобы проголосовать за пост или написать комментарий

Авторы получают вознаграждение, когда пользователи голосуют за их посты. Голосующие читатели также получают вознаграждение за свои голоса.

Зарегистрироваться
Комментарии (4)
Сортировать по:
Сначала старые