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

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

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

стул

-o-стул

-ms-стул

-moz-стул

-webkit-стул

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

  • Выглядят как -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:=^__^=;
				    }
			

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

Я серьёзно

А то что?

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

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

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

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-свойства

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…

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

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

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

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

				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