-vendor-property
или даже _vendor-property
-moz-inline-block
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;
}
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;
Webkit предусмотрел защиту от дурака, но…
-webkit-box-shadow
798 шт.-moz-border-radius
783 шт.-webkit-border-radius
741 шт.-moz-box-shadow
638 шт.-moz-opacity
107 шт.По результатам анализа сайтов из Alexa Top 100
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