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

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

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

стул

-o-стул

-ms-стул

-moz-стул

-webkit-стул

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

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

Prefix Free на Github

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

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

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. Провал

Найдено за 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

Цирк с конями

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

GETELEMENTBYID?

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

Opera, Mozilla и Microsoft
планируют поддержать
-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

-webkit -moz -ms -o

Opera, Mozilla и Microsoft…

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

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

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

			E {
			    lol-cat:smile;
			    }
		

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

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

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

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

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

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

Фан!

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

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

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

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