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

• Выглядят как -vendor-property или даже _vendor-property
• Как для свойств, так и для значений: -moz-inline-block
• На самом деле, родом из 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:=^__^=;
				    }
			

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

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

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

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

Prefix Free на Github

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

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

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

				E
				    +border-radius(10px)
			

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

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

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

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

				.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;
				}
			

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

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

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

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

				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;
			

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

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

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

1. -webkit-box-shadow 798 шт.
2. -moz-border-radius 783 шт.
3. -webkit-border-radius 741 шт.
4. -moz-box-shadow 638 шт.
5. -moz-opacity 107 шт.

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

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

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

				E {
				    lol-cat:smile;
				    }
			

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

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

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

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

• Префикс или постхак
• Prefix Free. Break free from CSS prefix hell
• Vendor Prefixes Are Hurting the Web
• CSS vendor prefixes, an answer to Henri Sivonen
• CSS vendor prefixes, again…
• Vendor Prefixes Are A Rousing Success
• Mozilla: CSS Compatibility

Вадим Макеев, Opera Software

• pepelsbey.net
• @pepelsbey и @ODevRel_ru
• pepelsbey@opera.com

Презентация: pepelsbey.net/pres/pre-fixes