html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Генераторы префиксов CSS3 свойств для разных браузеров (вендорные префиксы)

Встала задача для одного проекта прописать css3 свойства под различные брузеры, которые все еще работают только с указанием вендорных префиксов: -o, -moz, -webkit и -ms. Сейчас, конечно, все адекватные современные и обновленные браузеры большую часть свойств воспринимают и без вендорных префиксов, но надо и учитывать, что какие-то пользователи могут работать на старых версиях.

Таким образом я решил поискать генераторы, которые из моих нормальных css3 свойств сделают версию css с префиксами. Нашел 3 адекватных генератора.

Для примера я сделал совершенно не имеющий практического применения кусок css стилей:

.my_block {
 box-shadow: 5px 5px 10px -5px black;
 background: linear-gradient(90deg, #444, black 50%);
 box-sizing: border-box;
 transform: rotate(15deg);
 animation: 3s colorcycle infinite alternate;
 border-radius: 2px;
}

Первый довольно адекватный генератор - Prefixr от одного из авторов NetTuts+.


В нем можно отключить генерацию каких-то конкретных префиксов. Есть немного и других настроек. Кроме того, имеется API, которое поможет настроить, например, ваш Notepad++ для удобной работы с системой вендорных префиксов.
Код, который мне сгенерировал Prefixr выглядит так:

.my_block {
 -webkit-box-shadow: 5px 5px 10px -5px black;
 box-shadow: 5px 5px 10px -5px black;

 background: -webkit-linear-gradient(90deg, #444, black 50%);
 background: -moz-linear-gradient(90deg, #444, black 50%);
 background: -o-linear-gradient(90deg, #444, black 50%);
 background: -ms-linear-gradient(90deg, #444, black 50%);
 background: linear-gradient(90deg, #444, black 50%);

 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;

 -webkit-transform: rotate(15deg);
 -moz-transform: rotate(15deg);
 -o-transform: rotate(15deg);
 -ms-transform: rotate(15deg);
 transform: rotate(15deg);

 -webkit-animation: 3s colorcycle infinite alternate;
 -moz-animation: 3s colorcycle infinite alternate;
 -ms-animation: 3s colorcycle infinite alternate;
 -o-animation: 3s colorcycle infinite alternate;
 animation: 3s colorcycle infinite alternate;
 border-radius: 2px;
}

Летом этого года разработчик убрал поддержку префиксов для свойства border-radius.

Следующий генератор - CSSPrefixer.


Рассказать про него в принципе нечего, кроме того, что в нем нет никаких настроек. Главное с работой он своей справляется хорошо. Вот код, который сгенерировал он:

.my_block {
 -moz-box-shadow: 5px 5px 10px -5px black;
 -webkit-box-shadow: 5px 5px 10px -5px black;
 box-shadow: 5px 5px 10px -5px black;
 background: -moz-linear-gradient(90deg, #444, black 50%);
 background: -o-linear-gradient(90deg, #444, black 50%);
 background: -webkit-linear-gradient(90deg, #444, black 50%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(1, black 50%));
 filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#444, EndColorStr=black 50%)";
 background: linear-gradient(90deg, #444, black 50%);
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -moz-transform: rotate(15deg);
 -ms-transform: rotate(15deg);
 -o-transform: rotate(15deg);
 -webkit-transform: rotate(15deg);
 transform: rotate(15deg);
 animation: 3s colorcycle infinite alternate;
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px
}

Как видно из кода, этот генератор работаей добросовестней. Есть поддержка и border-radius и некоторых других свойств, которые не поддерживает тот же Prefixr.

Последний на сегодня генератор - PrefixMyCSS.



В генераторе имеются некоторые настройки. Выполняет он свою работу отлично. Вот код, который сгенерировал он:

.my_block{
/*box-shadow*/
-webkit-box-shadow:5px 5px 10px -5px black;
   -moz-box-shadow:5px 5px 10px -5px black;
        box-shadow:5px 5px 10px -5px black;
/*linear-gradient*/
background:-webkit-gradient(linear,50% 100%,50% 0,from(#444),color-stop(black,0.5));
background:-webkit-linear-gradient(90deg, #444, black 50%);
background:   -moz-linear-gradient(90deg, #444, black 50%);
background:     -o-linear-gradient(90deg, #444, black 50%);
background:        linear-gradient(90deg, #444, black 50%);
box-sizing:border-box;
/*transform*/
-webkit-transform:rotate(15deg);
   -moz-transform:rotate(15deg);
    -ms-transform:rotate(15deg);
     -o-transform:rotate(15deg);
        transform:rotate(15deg);
/*animation*/
-webkit-animation:3s colorcycle infinite alternate;
   -moz-animation:3s colorcycle infinite alternate;
    -ms-animation:3s colorcycle infinite alternate;
     -o-animation:3s colorcycle infinite alternate;
        animation:3s colorcycle infinite alternate;
/*border-radius*/
-webkit-border-radius:2px;
   -moz-border-radius:2px;
        border-radius:2px;
}


Код генерируется в довольно удобном формате, с отступами. Настройки же позволяют сразу же записывать свойства и значения без отступов, без комментариев и в одну строку.

Ну а каким пользоваться - решать вам.
Если вы знаете еще примеры автоматических генераторов css - пишите в комменты, с удовольствием про них напишу.
Читать дальше
Twitter
Одноклассники
Мой Мир

материал с glebov-gin.blogspot.ru

22
    +4 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • glebovgin
          • домен blogspot.ru
          • домен glebov-gin.blogspot.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции