-Пре-фиксы. Зачем и как правильно

-Пре-фиксы. 3ачем и как правильно

стул

-o-стул

-ms-стул

-moz-стул

-webkit-стул

Браузерные префиксы

Выглядят как -vendor-property или даже _vendor-property
Как для свойств, так и для значений: -moz-inline-box
На самом деле, родом из CSS 2.1 и их очень много разных
Не только засоряют ваш код…

Vendor Prefixes (англ.) лучше всего переводить как «браузерные префиксы», а не вендорные

Откуда берутся префиксы

			E {
			    -webkit-lol-cat:=^__^=;
			    }

Откуда берутся префиксы

			E {
			    -webkit-lol-cat:=^__^=;
			       -moz-lol-cat:=°__°=;
			    }

Откуда берутся префиксы

			E {
			    -webkit-lol-cat:=^__^=;
			       -moz-lol-cat:=°__°=;
			         -o-lol-cat:=o__0=;
			    }

Откуда берутся префиксы

			E {
			    -webkit-lol-cat:=^__^=;
			       -moz-lol-cat:=°__°=;
			         -o-lol-cat:=o__0=;
			            lol-cat:smile;
			    }

Пирамида

			E {
			            box-shadow:0 0 10px #000;
			       -moz-box-shadow:0 0 10px #000;
			    -webkit-box-shadow:0 0 10px #000;
			    }

Неправильно

Пирамида

			E {
			    -webkit-box-shadow:0 0 10px #000;
			       -moz-box-shadow:0 0 10px #000;
			            box-shadow:0 0 10px #000;
			    }

Правильно

Самое главное правило

			E {
			            lol-cat:smile;
			         -o-lol-cat:=o__0=;
			       -moz-lol-cat:=°__°=;
			    -webkit-lol-cat:=^__^=;
			    }

Свойство без префикса
пишется последним

Я серьёзно

А то что?

Webkit и box-shadow

			E {
			    -webkit-box-shadow:0 0 400px 200px #000;
			            box-shadow:0 0 400px 200px #000;
			    }

Хорошая тень

Webkit и box-shadow

			E {
			            box-shadow:0 0 400px 200px #000;
			    -webkit-box-shadow:0 0 400px 200px #000;
			    }

Плохая тень

Хорошая тень

Сахарок

Prefix Free

Расставляет префиксы автоматически, для каждого браузера
Всего 2 КБ в сжатом виде, но…

Не работает со сложным CSS, зависит от JavaScript
Нагружает и так непростую отрисовку CSS3-прелестей

Prefix Free на Github

Препроцессоры

Sass + Compass — Ruby
Less — JavaScript, Node.js
Stylus — JavaScript, Node.js *

Главная проблема — глупость…

Compass

			E {
			    @include border-radius(10px)
			}

			E
			    +border-radius(10px)

Compass. Провал

			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			-o-border-radius: 10px;
			-ms-border-radius: 10px;
			-khtml-border-radius: 10px;

Как Modernizr отказался от -khtml-свойств

Compass. Провал

Забытый префикс -ms для свойств transform и transition
У свойства box-shadow толпа несуществующих префиксов
Ненужный префикс -o для группы свойств column
У свойства background-size ненужный префикс -o
Гадит невалидным filter: progid:DXImage… для opacity

Найдено за 15 минут изучения примеров

Less

			.box-shadow(2px, 5px);

			.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
			    box-shadow: @arguments;
			    -moz-box-shadow: @arguments;
			    -webkit-box-shadow: @arguments;
			}

Less. Провал

			box-shadow: 2px 5px 1px #000;
			-moz-box-shadow: 2px 5px 1px #000;
			-webkit-box-shadow: 2px 5px 1px #000;

Неправильный порядок в примерах на сайте

Stylus

			fonts = Helvetica, Arial, sans-serif
			body {
			    padding: 50px;
			    font: 12px fonts;
			}

Самый гибкий из существующих

Stylus. Провал

			E {
			➝ box-shadow: sexy;
			➝ }

Ты не должен этого хотеть!

И эти люди
запрещают мне
ковырять в носу?

Верблюдизация

			E { background-attachment:fixed }

			E.style.backgroundAttachment='fixed'

Lower Camel Case — первая в слове прописная, кроме самой первой

Верблюдизация

			E { -o-transition-timing-function:ease }

			E.style.oTransitionTimingFunction='ease'

Тот же Lower Camel Case, ура!

Батарея

			E.style.webkitTransitionTimingFunction = ease;
			E.style.mozTransitionTimingFunction = ease;
			E.style.msTransitionTimingFunction = ease;
			E.style.oTransitionTimingFunction = ease;
			E.style.transitionTimingFunction = ease;

Строчными

			E.style.webkitTransitionTimingFunction = ease;
			E.style.mozTransitionTimingFunction = ease;
			E.style.msTransitionTimingFunction = ease;
			E.style.oTransitionTimingFunction = ease;
			E.style.transitionTimingFunction = ease;

Так, постойте…

Прописными

			E.style.WebkitTransitionTimingFunction = ease;
			E.style.MozTransitionTimingFunction = ease;
			E.style.MsTransitionTimingFunction = ease;
			E.style.OTransitionTimingFunction = ease;
			E.style.transitionTimingFunction = ease;

Читаем спецификацию…

-x ☛ X

Цирк с конями

Mozilla и Opera — понимают только префиксы с первой прописной
Microsoft — понимает только префиксы с первой строчной
Webkit — всё равно в каком регистре записан префикс

Webkit предусмотрел защиту от дурака, но…

GETELEMENTBYID?

Грядёт страшное

Opera, Mozilla и Microsoft
планируют поддержать
-webkit-свойства

Используемые свойства

-webkit-box-shadow 798 шт.
-moz-border-radius 783 шт.
-webkit-border-radius 741 шт.
-moz-box-shadow 638 шт.
-moz-opacity 107 шт.

По результатам анализа сайтов из Alexa Top 100

Opera, Mozilla и Microsoft…

Не впервой: UA браузеров и document.all
Будет поддержан ограниченный список -webkit-свойств
Свойства будут применены при отсустствии узнаваемых префиксов
Каскад и специфичность будут учтены привычным образом
Сайты, сделанные для айфона заработают

Казалось бы, эпик вин, но… тревожно, братцы

Может случиться и такое…

Ошибка в реализации

			E {
			    lol-cat:smile;
			    }

Исправляется префиксом

			E {
			    lol-cat:smile;
			    -prefix-lol-cat:smile;
			    }

Что вдребезги ломает текущий подход

Исправляется префиксом

			E {
			    lol-cat:smile;
			    -prefix-lol-cat:smile;
			    }

Что вдребезги ломает текущий подход

Фан!

Читать дальше