CSS хаки и вендорные сойства для Webkit (Safari и Chrome)

Небольшое дополнение к предыдущей заметке на тему CSS хаков для разных браузеров и их версионной фрагментации. По какой-то причине, при ее написании, мне не удалось найти рабочих хаков для движка Webkit, лежащем в основе браузеров Safari и Chrome.

Раньше Safari не пользовался большой популярностью. Сейчас на ситуацию оказывает большое влияние развитие рынка мобильных устройств. Как известно, многие мобильные платформы используют Webkit в качестве браузерного движка. И сюда относится не только линейка гаджетов от Apple, но и популярные Android устройств, а также смартфоны на базе Samsung Bada.

Еще ситуацию подогревает и тот факт, что Webkit поддерживает массу экспериментальных CSS3 свойств, дающих верстальщику новые возможности.

Рассмотрю два варианта адаптации стилей под Chrome и Safari: вендорные префиксы и CSS хак.

Вендорные префиксы – Vendor prefixes

Прежде всего, если необходимо скорректировать поведение стилей для Safari или Chrome, рекомендую поискать требуемое свойство с вендорным префиксом.

Например, webkit поддерживает свойство -webkit-margin-start и -webkit-padding-start, которые эквиваленты margin-left и padding-left соответственно. Разница лишь в том, что для письма справа-налево, вендорные свойства будут работать с зеркальным эффектом. То есть, например, -webkit-margin-start будет задавать отступ справа.

Пример:

p {
	margin-left: 10px;
	-webkit-margin-start: 100px
}

Вендорные свойства отсутствуют в спецификациях, поэтому делают CCS код невалидным.

Полный список доступен в Safari CSS Reference. К слову, для FireFox есть аналогичный документ, который называется Mozilla CSS Extensions.

В дополнение к теме вендорных свойств, настоятельно рекомендую ознакомиться с обзором от автора, с именем Peter Beverloo — Vendor-prefixed CSS Property Overview. Очень полезная таблица, в которой, не сомневаюсь, можно найти много интересного.

Если префиксованых свойств недостаточно, то можно использовать следующий css хак.

@media screen and (-webkit-min-device-pixel-ratio:0) {
	p {
		color: red;
	}
}

Работает во всех версиях Safari и Chrome, что мне попадались. Какие-то совсем древние версии этих браузеров я не тестировал, конечно, но не думаю, что сейчас это может быть актуально.