526 Часто при работе приходится использовать префиксы СSS3, так же называемые вендорными префиксами. Префиксы — особые дополнения для CSS свойств, добавляемые для свойств отсутствующих в стандарте. Префиксы CSS3 вводят разработчики браузеров.
Наиболее часто встречаются CSS3 префиксы:
-webkit- для Chrome и Safari;
-moz- используется в Mozilla Firefox;
-o- для Opera;
После свойств зависящих от браузера, указываются реальные свойства CSS3
|
1 2 3 4 5 |
#my-id { -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em } |
Сервис предназначен для удобства работы с префиксами.
Для большей эффективности и удобство используйте CSSPrefixer совместно с LESS. Таким образом вы сможете подобрать ряд свойств и определить их в класс, либо переменную после чего осуществлять вызов одной строкой.
Таким образом можно описать оформление одинаковых блоков:
|
1 2 3 4 5 6 7 8 9 10 11 |
.example{ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 1px 0 0 #333; -webkit-box-shadow: 1px 0 0 #333; box-shadow: 1px 0 0 #333; padding: 20px; margin: 10px; color: red } |
Определим свойство класса example для этих блоков и в случае возникновения необходимости переназначим на свои:
|
1 2 3 4 5 6 7 8 |
#block{ .example; } #block-2{ .example; color:green; padding:30px; } |
