Хотелось бы затронуть тему вендорных префиксов и их значения. Мы частично коснулись их в этой статье. Не откладывая эту тему в долгий ящик — начнем поэтапно рассматривать что есть что, и с чем это есть.
Префиксы — это приставки к некоторым свойствам CSS, которые ещё не успели принять в стандарт. Что-то вроде демо-версии. Каждый из нас понимает, что веб-разработка не стоит на месте! Вводятся всё новые стандарты, добавляются новые возможности и появляются новые браузеры. Естественно, не все нововведения удачно уживаются среди нашего с вами веб-мира.
Существует множество префиксов, но мы с вами рассмотрим лишь самые популярные. Почему не все? Не думаю, что кто-то из нас будет делать свой проект под каждый браузер в мире: хотя бы потому, что большинство людей ими не пользуются! Впрочем, про популярные браузеры и контингент их пользователей мы поговорим позже — это тоже немаловажная тема.
Префиксы и браузеры
Вернемся к префиксам:
- -o- — префикс для Opera (с выходом 12 версии, практически потерял свой смысл)
- -moz- — префикс для Mozilla
- -ms- — префикс для Internet Explorer 8
- -webkit- — Префикс для Chrome, Яндекс.Браузер, Амиго, Комета и Safari (иными словами этот префикс подходит для платформы Webkit)
- -icab- — префикс для iCab
Итак, тонкую нить от префикса к соответствующему браузеру провели. А как ими пользоваться и когда?
Использование префиксов
Всё предельно просто (хоть и покажется сложно, на первый взгляд).
|
1 |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50) //устанавливает прозрачность элемента |
Выше приведен пример использования префикса для Internet Explorer (-ms-).
Очень часто встречаются префиксы, при использовании таких свойств, как:
- background-image
- border-box
- transition
- box-shadow
- linear-gradient
Вот небольшой пример, как сделать элемент кроссбраузерным:
|
1 2 3 4 5 6 7 8 |
background: rgba(248,80,50,1); background: <strong>-moz-linear-gradient</strong>(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%); background: <strong>-webkit-gradient</strong>(left top, right top, color-stop(0%, rgba(248,80,50,1)), color-stop(50%, rgba(241,111,92,1)), color-stop(51%, rgba(246,41,12,1)), color-stop(71%, rgba(240,47,23,1)), color-stop(100%, rgba(231,56,39,1))); background: <strong>-webkit-linear-gradient</strong>(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%); background: <strong>-o-linear-gradient</strong>(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%); background: <strong>-ms-linear-gradient</strong>(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%); background: <strong>linear-gradient</strong>(to right, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1 ); |
Не обращайте внимания на цифры — оцените смысл. В данном примере реализован градиент, используя префиксы для нашего списка, кроме iCab.
На этом остановимся. Про префиксы, думаю, всё понятно и доступно! Пользуйтесь на здоровье и будьте в теме!
На этом прощаюсь с вами! Дальше будет ещё интереснее.
