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

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

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

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

Prefix Free на Github

• Sass — Ruby
• 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;
				border-radius:10px;
			

• Забытый префикс -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;
			

Помните про порядок свойств?

				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 предусмотрел защиту от дурака, но…

• Префикс или постхак
• 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

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

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

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