Вендорные префиксы — верный путь к кроссбраузерности

Вендорные префиксы на Drogin.ru

Хотелось бы затронуть тему вендорных префиксов и их значения. Мы частично коснулись их в этой статье, но попросил не торопиться. Не откладывая эту тему в долгий ящик — начнем поэтапно рассматривать что есть что, и с чем это есть 

Префиксы — это приставки к некоторым свойствам CSS, которые ещё не успели принять в стандарт. Что-то вроде демо-версии. Каждый из нас понимает, что веб-разработка не стоит на месте! Вводятся всё новые стандарты, добавляются новые возможности и появляются новые браузеры. Естественно, не все нововведения удачно уживаются среди нашего с вами веб-мира.

Существует множество префиксов, но мы с вами рассмотрим лишь самые популярные. Почему не все? Не думаю, что кто-то из нас будет делать свой проект под каждый браузер в мире: хотя бы потому, что большинство людей ими не пользуются! Впрочем, про популярные браузеры и контингент их пользователей мы рассмотрим позже — это тоже немаловажная тема.

 

Префиксы и браузеры

Вернемся к префиксам:

  1. -o- — префикс для Opera (с выходом 12 версии, практически потерял свой смысл)
  2. -moz- — префикс для Mozilla
  3. -ms- — префикс для Internet Explorer 8
  4. -webkit- — Префикс для Chrome, Яндекс.Браузер, Амиго, Комета и Safari (иными словами этот префикс подходит для платформы Webkit)
  5. -icab- — префикс для iCab

И так, тонкую нить от префикса к соответствующему браузеру провели. А как ими пользоваться и когда?

 

Использование префиксов

Всё предельно просто (хоть и покажется сложно, на первый взгляд).

Выше приведен пример использования префикса для Internet Explorer (-ms-).

Очень часто встречаются префиксы, при использовании таких свойств, как:

  • background-image
  • border-box
  • transition
  • box-shadow
  • linear-gradient

Вот небольшой пример, как сделать элемент кроссбраузерным:

Не обращайте внимания на цифры — увидь смысл. В данном примере реализован градиент, используя префиксы для нашего списка, кроме iCab.

На этом остановимся. Про префиксы, думаю, всё понятно и доступно! Пользуйтесь на здоровье и будьте в теме 

На этом прощаюсь с вами! Дальше будет ещё интереснее.


3+
Подписаться на новости

Отправить ответ

Оставьте первый комментарий!

Уведомить о
wpDiscuz