Эта статья является первой частью в нашей новой серии внедрение новых, полезных и свободно доступны инструменты и методы представлены и выпущены активных членов сообщества веб-дизайна.Lea Verou хорошо известна за ее эксперименты с CSS и JavaScript, и в этой должности она представляет свой последний инструмент, prefixfree, которые, надеемся, помогут вам освободиться от префикса CSS hell.

Так What’? В чем проблема с префиксами

Я уверен, что мы все согласны с тем, что CSS3 довольно прохладно, и что он дает нам возможность делать то, что раньше было невозможно.Но те из нас, кто использует 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;
}

Я не говорю, что префиксы плохо. Нам нужна them.. Но реальность такова, что в большинстве случаев, они вызывают обслуживания неприятностей, они наворотов CSS файлов, и они делают это тяжелее, чтобы настроить значения (потому что вы должны сделать это в пять раз)

Решение: prefixfree

Код я пишу в моей жизни слайды и презентации демо не имеет никаких префиксов, даже такие вещи, как @keyframes или transition собственности, которые пока не поддерживаются любой префикс меньше.Чтобы быть в состоянии сделать это, я написал скрипт, который определяет префикс текущего браузера и добавляет его в случае необходимости.Недавно я подумал, почему бы не адаптировать сценарий для обработки весь код CSS на странице, так что в моем CSS стилей так же элегантно, как в моем коде демо?Вскоре после этого, prefixfree был born.

Сценарий по существу делает все во власти JavaScript, чтобы позволить вам полностью забыть о поставщику prefixes.Это процессы, связанные таблицы стилей (за исключением тех, в @import правила), встроенные таблицы стилей, встроенные стили, даже CSS добавлены позже (например, в новых элементов, изменения CSSOM собственности и поиска).И если, в редких случаях, вы хотите использовать другое определение для другого двигателя (например, из-за своего осуществления глючит), вы все еще можете использовать префикс CSS.

Хорошая вещь о prefixfree в том, что как только производители браузеров отказаться от своих префиксов для свойства CSS3, вы можете просто удалить сценарий и ваш CSS-прежнему будет работать.Ваш код будет по-прежнему действительны CSS3 (так действительны, что она будет даже пройти валидатор CSS).Ваш код не зависит от него (в отличие от CSS препроцессоры), а, скорее, он функционирует больше как Polyfill, сглаживание различий браузеров на данный момент being.

Еще одна полезная особенность в том, что сценарий автоматически определяет, какие свойства необходимо prefixing
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров