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

Автопрефиксер — окончательное решение проблемы префиксов в CSS

Автопрефиксер — утилита нового поколения для добавления префиксов к экспериментальным свойствам из CSS 3. Она берёт с Can I Use последние данные о префиксах и популярности браузеров, читает ваш файл стилей, находит свойства и значения, которым действительно нужны префиксы и добавляет их.

Вы просто пишите обычный CSS:
a {
    transition: transform 1s
}


Автопрефиксер сам заменит нужные (и только нужные) свойства и значения (обратите внимание на -webkit-transform):
a {
  -webkit-transition: -webkit-transform 1s;
  -o-transition: -o-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s
}


Эта утилита работает во время выкладки сайта на сервера (и на машине программиста во время разработки), так что не заметна для клиентов и не требует какой-то поддержки от браузеров.

Проблема


К сожалению текущие инструменты плохо решают задачу:
  • Писать вереницы свойств руками — очевидно плохое решение. Такой код невозможно читать, легко забыть поправить остальные свойства при редактировании.
  • В Sass и LESS вам нужно самому следить за актуальностью префиксов и копировать примеси из проекта в проект. К тому же примеси могут решить проблему только у свойств, а не у значений (например, calc()).
  • Compass или Bourbon уже лучше, там список примесей хранится централизовано и его легче держать актуальным (но практика показывает, что обычно в примеси добавляют все префиксы не следя за актуальностью). Проблема значений всё так же не решена.
  • Самая главная проблема Sass и LESS, что вам всё равно нужно постоянно думать «из CSS 3 это свойство или нет?» — и в зависимости от этого использовать примесь или нет. Эту проблему немного решил Stylus — у него синтаксис примесей не отличается от обычных свойств, так что префиксы добавляются невидимо. Впрочем, проблема актуальности и значений всё равно остались.
  • Есть ещё скрипты добавления префиксов прямо в браузере, например Prefix Free, но лучше всего обрабатывать стили на этапе разработки и выкладки, а не повторять обработку каждый раз в браузере клиентов.

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

Это понимал и разработчик Stylus, TJ Holowaychuk, поэтому он начал разработку препроцессора нового поколения — Rework. Это не отдельный язык, который компилировался в CSS (как Sass или Stylus), а именно препроцессор CSS-дерева:
  • сначала CSS-парсер строил дерево стилей;
  • потом JS-функции меняли это дерево как угодно;
  • в конце новое дерево сохранялось в CSS-файл.


В итоге новый инструмент был гораздо гибче — можно было действительно делать с CSS всё что угодно. Поэтому именно Rework лёг в основу Автопрефиксера.

Преимущества


Вам не нужно учить новый язык

Автопрефиксер работает поверх обычного CSS — так что вам не нужно всей командой мигрировать на новый язык. При этом он остаётся совместим с другими языками типа Sass и Stylus — нужно только запустить его после компиляции CSS.

Вам не нужно думать, нужна ли здесь примесь или нет — можно совсем забыть о префиксах. Автопрефиксер сам найдёт, что нужно менять — вы пишите обычный CSS с обычными свойствами и значениями.

Префиксы для значений

Благодаря гибкости Rework Автопрефиксер может добавлять префиксы и для @keyframes, и для значений. Например, в Compass, очень трудно указывать transition-анимацию для свойств из CSS 3, типа — примесями это указать нельзя и приходится перечислять все возможные префиксы для transform.

Всегда актуальные данные

Во-первых, чтобы не зависеть от свободного времени авторов, база данных Автопрефиксера обновляется автоматическими скриптами с Can I Use, так что данные всегда остаются свежими.

Во-вторых, вы указываете те версии браузеры, которые поддерживаете (по умолчанию, как в Гугл, берутся 2 последние версии каждого браузера) — можно указать и по статистике глобального использования, например «больше 1 %».

В итоге в CSS будут только действительно нужные префиксы, файлы будут опрятные и их легко будет смотреть в Веб-инспекторе браузера.

Использование



Ruby on Rails

Для Rails есть гем «autoprefixer-rails» — вам нужно только подключить гем и префиксы будут сами добавляться в ваши CSS-файлы из app/assets/ и lib/assets. Достаточно добавить в Gemfile и дальше писать обычный CSS:
gem "autoprefixer-rails"

Благодаря гибкости Assets Pipeline, префиксы будут добавлять и к вашим стилям в Sass, и в Stylus. Браузеры можно указать в файле config/autoprefixer.yml:
browsers:
  - "last 1 version"
  - "> 1%"
  - "ie 8"

Можно узнать, какие префиксы будут добавляться с помощью задачи rake autoprefixer:inspect.

Ruby

Если вы используете Sprockets без Rails (например, вместе с Sinatra), то можно подключить Автопрефиксер к нему:
AutoprefixerRails.install(sprockets_env)

Можно обрабатывать CSS и без вообще Sprockets:
prefixed = AutoprefixerRails.compile(css))


JavaScript

Для компиляции в node.js можно использовать пакет с npm:
var autoprefixer = require('autoprefixer');
var prefixed     = autoprefixer.compile(css);

Если же вам нужно обрабатывать CSS в браузере, то можно взять специальную сборку скрипта.

Если вы уже используете Rework, то можете подключить отдельный фильтр Автопрефиксера:
rework(css).
    use( autoprefixer.rework(['> 1%', 'opera 12.5']) ).
    use( rework.references() ).
    toString();


Другое

Автопрефиксер можно интегрировать и с другими языками и системами с помощью отдельного приложения:
sudo npm install --global autoprefixer
autoprefixer *.css


Ссылки


Читать дальше
Twitter
Одноклассники
Мой Мир

материал с habrahabr.ru

2

      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.

          • habrahabr.ru
          • домен habrahabr.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

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