Уважаемые пользователи Голос!
Сайт доступен в режиме «чтение» до сентября 2020 года. Операции с токенами Golos, Cyber можно проводить, используя альтернативные клиенты или через эксплорер Cyberway. Подробности здесь: https://golos.io/@goloscore/operacii-s-tokenami-golos-cyber-1594822432061
С уважением, команда “Голос”
GOLOS
RU
EN
UA
vp-webdev
6 лет назад

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

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

Зачем нужны

Вендорные префиксы нужны чтобы "разделять" 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

26
151.670 GOLOS
На Golos с August 2017
Комментарии (4)
Сортировать по:
Сначала старые