CSS3 мощный инструмент, он дает нам возможность делать то, что раньше было невозможно сделать при помощи CSS. Но те, кто использует CSS3, явно испытывают дискомфорт от того количества префиксов, которые приходится использовать для различных браузеров.
Так в чем проблема с префиксами? Это видно из приведенного ниже примера:
.download { position: absolute; top: 1em; left: -1.5em; width: 6em; height: 6em; padding: 1em 0; background: #80A060; background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.3)); background-image: -moz-linear-gradient(transparent, rgba(0,0,0,.3)); background-image: -o-linear-gradient(transparent, rgba(0,0,0,.3)); background-image: -ms-linear-gradient(transparent, rgba(0,0,0,.3)); background-image: linear-gradient(transparent, rgba(0,0,0,.3)); color: white; line-height: 1; font-size: 140%; text-align: center; text-decoration: none; text-shadow: .08em .08em .2em rgba(0,0,0,.6); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: .1em .2em .4em -.2em black; -moz-box-shadow: .1em .2em .4em -.2em black; box-shadow: .1em .2em .4em -.2em black; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -o-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); -webkit-animation: none; -moz-animation: none; animation: none; }
К сожалению, префиксы пока необходимо использовать. Но реальность такова, что в большинстве случаев, они вызывают различные сложности, они увеличивают размеры CSS файлов, и они усложняют настройку правил (так как вы должны пять раз прописать нужное значение).
Решение: плагин PrefixFree
Используя плагин PrefixFree можно не использовать префиксы совсем, даже для таких свойств как @keyframes или transition, которые вообще нигде не поддерживаются без префиксов.
Плагин делает все с помощью JavaScript. Он обрабатывает таблицы стилей (кроме подключенных при помощи @import), а также встроенные стили.
Еще одним плюсом использования Prefixfree является то, что когда производители браузеров откажутся от использования префиксов для свойств CSS3, а это рано или поздно случится, вы сможете просто удалить этот скрипт, а в код CSS не придется вносить изменения.
Еще одной полезным свойством скрипта является то, что он автоматически определяет, к каким свойствам нужно добавлять префиксы. В плагине нет списка свойств. Он определяет, какие свойства поддерживаются, а какие поддерживаются только с префиксом. Префикс будет добавляться только если он нужен.
В отличие от других решений, PrefixFree добавляет префиксы в момент выполнения, поэтому пользователь загружает меньший по размеру CSS код.
При применении плагина код, приведенный выше, будет выглядеть так:
.download { position: absolute; top: 1em; left: -1.5em; width: 6em; height: 6em; padding: 1em 0; background: #80A060; background-image: linear-gradient(transparent, rgba(0,0,0,.3)); color: white; line-height: 1; font-size: 140%; text-align: center; text-decoration: none; text-shadow: .08em .08em .2em rgba(0,0,0,.6); border-radius: 50%; box-shadow: .1em .2em .4em -.2em black; box-sizing: border-box; transform: rotate(15deg); animation: none; }
Чем этот плагин лучше серверного варианта?
Использование скрипта на серверной стороне означает:
Но у серверного варианта есть ряд преимуществ:
В любом случае решение, какой вариант использовать, принимать вам.
Вы можете скачать Prefixfree из GitHub. Сжатая версия весит менее 5 КБ, которая становится менее 2 КБ после Gzip. Также, имейте в виду, что это все еще бета-версия и возможны ошибки. Вы можете помочь их исправить, или хотя бы сообщить о них в трекере. Удачи!
© 2008 - 2024 Webmasters.BY Все права защищены
Новый комментарий