Вендорні властивості та CSS хакі для Safari та Chrome
Невеликий додаток до попередньої нотатки на тему CSS хаків для різних браузерів та їх версійної фрагментації. З якоїсь причини, при її написанні, мені не вдалося знайти робочих хаків для движка Webkit, що лежить в основі браузерів Safari та Chrome.
Ще ситуацію підігріває і той факт, що Webkit підтримує масу експериментальних CSS3 властивостей, що дають верстальнику нові можливості.
Розгляну два варіанти адаптації стилів під Chrome та Safari: вендорні префікси та CSS хак.
Вендорні префікси – Vendor prefixes
Насамперед, якщо необхідно скоригувати поведінку стилів дляSafari абоChrome, рекомендую пошукати необхідну властивість із вендорним префіксом.
Наприклад, webkit підтримує властивість -webkit-margin-start та -webkit-padding-start , які еквіваленти margin-left та padding-left відповідно. Різниця лише в тому, що для листа справа-наліво, вендорні властивості працюватимуть із дзеркальним ефектом. Тобто, наприклад, -webkit-margin-start задаватиме відступ праворуч.
Приклад:
Вендорні властивості відсутні в специфікаціях, тому CCS-код роблять невалідним.
Повний список доступний у Safari CSS Reference. До речі, для FireFox є аналогічний документ, який називається Mozilla CSS Extensions.
Якщо префіксованих властивостей недостатньо, можна використовувати наступний css хак.
Працює у всіх версіях Safari та Chrome, що мені траплялися. Якісь давні версії цих браузерів я не тестував, звичайно, але не думаю, що зараз це може бути актуальним.
Коментарі (1)
У боротьбі з префіксами може сильно допомогти автопрефіксер, він обробляє css, видаляє непотрібні вендорні префікси.дописує ті, яких не вистачає.