хабраиндекс
89,13
16 апреля 2013 в 19:35

Автопрефиксер — окончательное решение проблемы префиксов в 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: -ms-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


Ссылки


+56
18530
289
Iskin 86,8 G+

Комментарии (81)

0
zvorygin, #
Разработчики Blink'а обсуждают -webkit префиксы — https://groups.google.com/a/chromium.org/forum/?fromgroups#!topic/blink-dev/E0OkYhvF7q8 — оставить поддержку старых имен только для совместимости.

Думаю, всем от этого станет проще.
+4
Iskin, #
Да, ребята из Гугл молодцы, сейчас именно ВебКит требует больше всего префиксов.
+7
Aingis, #
Всё верно, проблема префиксов в том, что они обозначают экспериментальные и незаконченные реализации. С экспериментальными свойствами может случится что угодно в любой момент, и потому их нельзя использовать в конечном продукте для сколь-либо важных частей.

Верстальщики же часто используют «решения» с использованием такие экспериментальных свойств, а потом ругаются: «Почему не работает -moz-opacity?! Вы должны поддерживать его, потому что ломается мой сайт!»

Поэтому рабочая группа CSS приняла решение отключать экспериментальные опции в стабильных версиях браузеров. На эту модель перешли Mozilla и Google. Вот это и есть настоящее решение проблемы префиксов.
–5
bolk, #
Эту проблему немного решил Stylus — у него синтаксис примесей не отличается от обычных свойств, так что префиксы добавляются невидимо. Впрочем, проблема актуальности и значений всё равно остались.
И как же решил проблему актуальности данный велосипед? Чем он лучше Стайлуса? Тем что грузит данные с другого адреса? Ну и что? Почему это лучше?
0
Iskin, #
Автопрефиксер, в отличии от Стайлуса добавляет только те префиксы, что действительно нужны именно этому проекту, а не все подряд. На Can I Use собрана очень хорошая статистика кому нужны префиксы, а кому нет. Автопрефиксер не загружает данные каждый раз — они хранятся в npm-пакете или геме.
0
Iskin, #
Кроме того, в Стайлусе вам надо самому писать все примеси для CSS3-свойств. И даже если вы опишите все нужные примеси, то не сможете добавлять префиксы к значениям свойств, например в calc() или в transition: transform (где transform тоже требует префиксов).

Автопрефиксер всё это имеет и умеет. Но вы можете использовать его вместе со Стайлусом, просто прогоните выход компилятра Стайлуса через Автопрефиксер.
0
kobezzza, #
В Stylus можно перегружать такие функции как calc или linear-gradient так же без проблем, как делать простые примиси.
Кстати есть замечательная библиотека к Stylus visionmedia.github.io/nib/.
0
Iskin, #
Про библиотеки к препроцессорам я уже говорил (в разделе про Compass) — список префиков там не поддерживается в актуальном виде. Свойство borde-radius уже год как не нужно писать с префиксом.

Недостаточно перезагрузить calc() и вернуть что-то другое. Нужно именно продублировать:
width: -moz-calc(1% + 1px);
width: -webkit-calc(1% + 1px);
width: calc(1% + 1px);
0
kobezzza, #
Именно это умеет делать Stylus, посмотри хотя бы по ссылке (прям сразу показывается как перегружается linear-gradient), что я скинул, ну а если всё равно не веришь, то читай официальную доку:
learnboost.github.io/stylus/docs/bifs.html искать add-property.

Единственно, что нельзя сделать прозрачно (как я понял) в Stylus, так это прозрачные псевдоэлементы/псевдоселекторы, вроде ::-ms-clear, в вашем решении это учтено?
–1
Iskin, #
Моя вина, я думал Stylus переопределяет background и дублирует свойства фон через примесь.

Да, селекторы тоже можно переопределять, хотя у поставке по умолчанию нет ни одной штуки с селекторами (я создавал правила только для того, где есть предложение спецификации).
–1
kobezzza, #
Ну значит профит — это возможность перегружать селекторы, а всё остальное умел делать Stylus. Непонятно зачем автору Stylus захотелось из-за этой фичи создать новый велосипед :)
0
Iskin, #
Тут ещё аргумент, что не надо новый язык учить — всё поверх текущего CSS, который может идти от Sass или чего угодно.
–1
kobezzza, #
Ну дык тот же Stylus поддерживает CSS синтаксис, т.е. любой CSS является валидным для Stylus и можно не юзать циклы и функции :) Но как я понял rework как раз не имеет этих оч крутых фичей из Stylus и его использовать нужно в паре с другим препроцессором (например, с тем же Stylus).

Сухой остаток: т.е. это просто фреймворк для создания полифилов, что вы и сделали в своей работе. Я правильно понимаю?
0
Iskin, #
Ага, Rework скорее постпроцессор для задач типа префиксов. Я, например, не отказываюсь от Sass, потому что в Rework нет и в ближайшее время не будет хорошей математики.
–2
Abcd_Efgh, #
/del
–2
kxyu, #
А зачем городить огород? что плохого в том чтобы были лишние префиксы кое-где? будет поддерживаться больше браузеров, только и всего
+2
Iskin, #
Наличие актуальных префиксов — это самое незначительное преимущество. Главная цель написания Автопрефиксера — чтобы писать обычный CSS и чтобы префиксы добавлялись и к значениям (например, чтобы в transition: transform добавлять префиксы и к transition и transform) и к @keyframes.
–1
kxyu, #
ну это все встроено в rework: prefix, prefixValue, prefixSelectors, keyframes
+2
Iskin, #
Autoprefixer для Rework, как Compass или Bourbon для Sass — это просто библиотека с готовым списком свойств и значений, чтобы не задумываться каждый раз самому.
+1
kxyu, #
Спасибо, теперь понятно. Поставил звезду)
0
Iskin, #
Выпустил версию 0.3 — теперь я не использую prefix и prefixValue — свои работают быстрее (на 40 %), создают меньше ненужных свойств и нет некоторых других проблем.
+2
Ayzor, #
Для своих проектов используем -prefix-free от небезызвестной Леи Вероу
+5
Iskin, #
Гораздо лучше компилировать CSS во время выкладки на сервера.
0
widowmaker, #
В FAQ про это тоже есть…
Нельзя просто так взять и сказать, что Server-Side solution лучше, всегда есть за и против.
+2
Iskin, #
А в чём плюс клиентской библиотеки? Если вы верстаете сразу в Ruby on Rails (то есть у вас работает препроцессоры), то я не вижу ни одного преимущества.

Плюс только если верстальщик верстает сразу в HTML и CSS, но это совсем другой случай.
0
Diokuz, #
Облегчаем css на 500 байт и увеличиваем js на 2 500 + увеличиваем время инициализации приложения на 40 мс — странная затея ради нескольких пользователей.
0
leMar, #
Скоро люди, вообще, разучатся писать на CSS :-(
+3
Iskin, #
Ну постоянные повторы префиксов — это не главная вещь в CSS ;). Но вообще многое идёт к тому, что от браузеров прогресса в CSS и JS ждать очень долго (а потом ещё ждать пока старые браузеры исчезнут) — так что фронтенды начинают использовать препроцессоры, чтобы быстрее внедрят инновации, не ожидая браузеров (представляете каким бы отсталым было бы программирование, если бы можно программировать только на тех языках программирования, что поддерживаются процессорами).

Но разработчикам браузеров даже нравится такая затея — Source Map уже внедрили, asm.js уже во всю разрабатывают. Это конечно выглядит странным, но препроцессоры становятся неизбежным духом времени.
0
lolmaus, #
Это все равно что сказать, что скоро бухгалтера совсем разучатся заполнять гроссбухи при помощи ручки и калькулятора.
+1
zapimir, #
А зачем -ms-transition? В IE10 отказались же от префиксов, они только в превьюшках были.
0
Iskin, #
Так как есть -ms-transform — да, пока это упущение prefixValue() в Rework.
0
Iskin, #
Выпустил новую версию, со своими фильтрами, вместо фильтров Rework´а. Теперь такие лишние свойства не создаются.
+2
lolmaus, #
Объясните на конкретных примерах, в каких ситуациях Compass не справляется с префиксами.
0
Iskin, #
Я специально выбрал пример в начале статьи, с которым у меня вечно были проблемы в Compass:
transition: transform 1s;
–1
lolmaus, #
Taк, давайте по порядку.

1) Чем не устраивает решение Compass?

/* +transition(transform, 1s) */
html {
  -webkit-transition: -webkit-transform, 1s;
  -moz-transition: -moz-transform, 1s;
  -o-transition: -o-transform, 1s;
  transition: transform, 1s;
}

Выложите, пожалуйста, некорректно отрабатывающий код на jsbin.com или codepen.io.

2) Если с этим решением действительно проблема, почему вы не отправили pull request в Compass c решением? Исправить эту проблему (если она есть) — тривиально.

3) Есть еще примеры проблем с Compass, или вы создали ваш сияющий реактивный велосипед только из-за этого?
0
Iskin, #
Черт, а Compass добавил префиксирование свойств в transition.

Ладно, тогда другой код: width: calc(1em + 10px)
0
lolmaus, #
Как же вы решаете это в autoprefixer?
0
Iskin, #
Autoprefixer говорит Rework отпарсить CSS и получить дерево кода. Потом он находит все элементы CSS, которым нужны префиксы и переделывает их. То есть не нужно писать на отдельном языке и явно указывать примеси.
0
Iskin, #
Плюс проблемы Compass:
  • Нужно писать примеси для CSS 3 свойств, то есть постоянно думать CSS 3 это или нет. В итоге у нас куча код с совершенно не нужным +border-radius или +text-shadow
  • Префиксы в Compass давно устарели, там куча лишних
  • Я коммитил в Compass чистку префиксов, но разработка Compass идёт из рук вон плохо. Они до сих пор не могут выпустить версию 0.13, а поддержки Rails 4 до сих пор нет
0
lolmaus, #
а) Не понял, в чем проблема писать +text-shadow.
б) Что значит «префиксы устарели»? Caniuse.com сказал вам, что такой-то браузер теперь поддерживает свойство без префиксов? Посмотрите статистику того же Caniuse, если просуммировать старые версии, наберется несколько процентов. Какой смысл лишать их поддержки? Ради экономии пары сотен байт?
в) Коммиты не приняли? Мейнтейнеры Compass, конечно, консервативны (не будем показывать пальцем), но по части удаления префиксов не могу их упрекнуть.

Вообще, SASS/Compass — это такая базовая вещь для разработки сайтов, как… ну, не знаю… когда я вспоминаю, как верстал без Compass, на ум приходит байка про бухгалтершу, которая перемножала ячейки Excel'я вручную на калькуляторе.

Решить проблему префиксов на SASS и Compass — тривиально. Нет префиксов для calc? Написать mixin — 60 секунд. Отправить pull request в Compass — 300 секунд (спасибо GitHub'у за возможность редактировать код в браузере). Написать и закинуть собственный extension в RubyGems — 600 секунд… ну 1200, если вы делаете это в первый раз.

Вы поймите меня правильно. Я восхищаюсь вашим проектом, просто в голове у меня его цели и средства никак не соизмеряются.
0
Iskin, #
Ну, например, браузеры требующие префиксов border-radius сейчас уже не встретишь: news.ycombinator.com/item?id=5560554

Примесь text-shadow тоже совершенно не нужна, так как ещё пару лет назад все понимали без префиксов.
0
Iskin, #
Коммиты приняли, просто последний стабильный релиз был уже год назад: rubygems.org/gems/compass
0
Iskin, #
В том-то и дело, что я думал как улучшить ситуацию в Compass и понял, что, к сожалению, ресурсами Sass — это сделать нельзя. Потому что Sass придумали уже давно, нужно смотреть куда двигаться дальше. Я начал думать над фильтром для Assets Pipeline, но тут автор Stylus зарелизил Rework, который как раз идеально подходил для задачи.

К сожалению, я вообще не верю в будущее Compass — скорость его разработки сильно снижается, они превращаются в такого большого мамонта. Так что я написал Autoprefixer и rails-sass-images и полностью выкинул Compass.

Compass до сих пор не поддерживает нормально Assets Pipeline — у него архитектура со времён Jammit. Нельзя указывать шрифты в vendors/assets, так как Compass не смотрит в Assets Pipeline, а сам имеет только одну папку со шрифтами. Сам репозиторий весит кучу МБ (так как они додумались тестировать спрайты большими картинками и из-за каждого изменения получилось кучу данных в git).
–1
lolmaus, #
Ну, хороший Compass или плохой, а верстку без него я не представляю. Как можно «выкинуть Compass»? Вы там что, несемантический CSS-фреймворк используете вроде Bootstrap? SASS и Compass дают столько разноплановых преимуществ, что как-то даже странно об этом спорить с человеком, способным написать сабж (я, например, не способен).

С тем же успехом можно сказать, что будущего нет у московского метрополитена: и перегружен он, и рекламой завешан, и плохо освещен… поэтому я сделал портативный прожектор на 30 тысяч люмен! Вот только проблемы метрополитена этот прожектор никак не решает и обойтись без него никак не помогает. Да и не настолько там темно, чтобы с прожектором ходить.
0
Iskin, #
А что есть в Compass, кроме префиксов и вставки размеров картинок и её data-uri (с чем без Assets Pipeline он справляется плохо)?

Ну ещё есть жутко устаревший sticky-footer, который лучше заменить на другую примесь, который не требует #root и #root_footer.
0
lolmaus, #
> А что есть в Compass, кроме префиксов и вставки размеров картинок

Вы меня троллите?
0
Iskin, #
Я очень серьёзно. Я же не противник препроцессоров и год назад всем как раз рекламировал Compass, комитил в него и т. п. Так что я точно так же как и вы уважаю, что они сделали.
0
Iskin, #
У Compass есть ещё спрайты, но лучше использовать data-uri в отдельном CSS-файле (особенно, когда поддерживаете ретину), так как спрайты приводят к большой потери памяти (браузер выделяет память с BMP всего суммарного спрайта для каждого случая его использования)
–1
lolmaus, #
«Зачем нужен Windows? Ну есть нем Сапер и WordPad, это да… Но Сапер быстро надоедает, а в WordPad нет поддержки колонтитулов. В общем, безнадежно устарел ваш Windows.»

Я в данный момент делаю верстку для одного проекта с использованием Singularity и Breakpoint Slicer. При помощи Singularity я задаю модульные сетки (в том числе несимметричные) индивидуально для каждого контейнера. При помощи Breakpoint Slicer — обращаюсь к определенным диапазонам ширины окна. Это не говоря уже о таких важных мелочах, как Sassy Buttons или незаменимом Toolkit.

Ну вот откройте для примера тестовую страницу Breakpoint Slicer, отмотайте в до последнего примера и поиграйте с шириной окна. Пример реализован без JS, только вот этим SASS-кодом:

// Importing Singularity.
@import singularitygs

// Configuring Singularity.
$grids: 1
$gutters: 0.2

// Adding responsive grids.
// Cycling through slices.
@for $i from 2 through total-slices()
  // Setting the number of columns in each slice equal to the number of that slice.
  $grids: add-grid($i at bp($i))

#singularity2 .column
  margin-bottom: 1em

  // Cycling through slices
  @for $slice from 2 through total-slices()

    // Setting a media query for each slice
    +at($slice)

      // Within the media query, cycle through columns
      @for $column from 1 through $slice

        // Span thumbnails in this column
        &:nth-child(#{$slice}n+#{$column})
          +grid-span(1, $column, $output-style: float)


Расскажите, пожалуйста, как еще, без Compass (и, ради бога, без JS), можно решить подобную задачу (модульная сетка с динамическим количеством колонок)?
0
Iskin, #
А при чём тут Compass? Это чистый Sass. Эти плагины точно так же можно подключить к Sass и без Compass.
0
lolmaus, #
Гм.

Compass — это в первую очередь инфраструктура. У Compass свой компилятор, делающий использование расширений очень удобным (особенно в сочетании с Bundler).

Вон тут рядом 3D-графику запускают без операционной системы. Зачем нам операционная система? Сапер в ней унылый, да и релиза не было уже черт знает сколько…

Простите за язвительный тон, под конец дня вырывается. :( Не пытаюсь вас обидеть.
0
Iskin, #
У Compass нет своего компилятора — он же использует обычный Sass. Есть конечно расширения Sass, но их там не много и они в основном по спрайтам.

Всё что Compass делает для инфраструктуры — добавляет пути к плагинам в load_path Sass´а. Это можно сделать или вручную, или с помощью кучи других инструментов.

Лично мне, больше нравится Assets Pipeline — система ассетов, на которую перешёл Ruby on Rails (Bundler же тоже из Rails вышел). Он точно так же управляет путями в плагинам (и может брать плагины из гемов Bundler´а), но делает это гораздо лучше (поскольку он создавался уже после Compass, с учётом его опыта) и решает ещё множество полезных задач.

Если бы Compass был бы ещё живым, они бы нормально интегрировались с Assets Pipeline, использовали больше сторонних модулей (например, у них куча самописных велосипедов для полуения размеров файлов, гем dimensions использовать для этого лучше). Но пару лет назад разработка Compass заглохла. Последние месяцы они релизят новые альфы версии 0.13, но там невероятно минорные изменения.
0
lolmaus, #
Раз уж вы ради calc() разработали сабж, может и Drupal портируете на Rails, чтобы можно Assets Pipeline использовать вместо Compass?
0
Iskin, #
Sass я очень люблю и использую до сих пор. Но Sass решает далеко не все проблемы (всё таки это был самый первый препроцессор) и уже надо начинать смотреть дальше.
0
Iskin, #
Ну а с calc в том-то и дело, что миксинами эту проблему не решить. Миксины вообще очень ограниченный инструмент. Тут именно нужен полноценный постпроцессор, чтобы менять структуру CSS.
0
lolmaus, #
Заспамили. )

Так что делает сабж с calc?
0
Iskin, #
Увидев
width: calc(90% - 10px)

продублирует поля для каждого префикса:
width: -webkit-calc(90% - 10px)
width: -moz-calc(90% - 10px)
width: calc(90% - 10px)
+1
lolmaus, #
> Ну а с calc в том-то и дело, что миксинами эту проблему не решить.
> продублирует поля


Я вас не понимаю. Задача решается за минуту:

sassmeister.com/gist/lolmaus/5399447
0
Iskin, #
Это костыль, проще написать обычное свойство с обычным calc(), чем делать новый синтаксис.

Да и если вам нужно border: calc(10px + 10%) 20px?
0
lolmaus, #
А вы фоллбэки для calc пишете? Если да, то в любом случае вы делаете костыль. Если нет, то какой смысл париться о поддержке 2%, если вы забиваете на 20%?
0
Iskin, #
Для мобильной разработки calc() можно использовать уже сейчас.

Но тут-то вопрос не в единственном свойстве, а в том, что со временем старый инструмент всё меньше и меньше решает проблему, зато создаёт кучу новых. И мы должны пойти дальше. Точно такие же аргументы мне 2 года назад говорили, что Sass — плох. Мол зачем он нам нужен, когда мы всё это и в CSS можем писать. Но вопрос был в том, что в Sass можно это написать проще и чище. Тоже самое и с Автоперфиксером — он решает проблему лучше и чище.
0
AHDPEu, #
И не только для мобильной. Я активно юзаю calc. Пишу под свежие браузеры.
+1
twenty, #
Я правильно понимаю, что вы сейчас сравнили препроцессор и утилиту, модифицирующую CSS?
+2
Grawl, #
Меня не устраивает вместо одно: другое писать одно(другое) каждый раз, когда требуются префиксы.
–2
lolmaus, #
Почему? Это унижает ваше достоинство? :)
+1
Grawl, #
Потому что нужно отвлекаться на проверку требуемости префиксов: либо вспоминать, либо идти на caniuse. Лишнее время.
К тому же, одно: другое не нужно закрывать, как одно(другое) — вот эта последняя скобочка и делает из этого ещё большую проблему.
0
lolmaus, #
Пожалуйста, попробуйте посчитать, сколько разных свойств с префиксами вы действительно используете, только честно.
+1
Grawl, #
Box-shadow, *-gradient, box-sizing, @keyframes, transition — и это лишь то, что с ходу вспомнил. Следить за всем этим зоопарком накладно.
–3
lolmaus, #
Box sizing включается один раз для всех элементов в секции reset/normalize. Более того, мой инструментарий делает это за меня, не приходится ничего писать самому.

Остается четыре с половиной свойства. Скажите, эти воробьи действительно настолько крупны, что вам приходится стрелять по ним из такой продвинутой гаубицы?
0
lolmaus, #
Iskin, вы не думали добавить возможность использовать сабж как расширение SASS?
0
Iskin, #
Автопрефиксер прекрасно работает вместе с Sass. В Assets Pipeline делать ничего не надо. Для других более старых систем просто запустите autoprefixer **/*.css после компиляции.
0
lolmaus, #
Ну нет, это не дело.

Compass прекрасен тем, что перекомпилирует только изменившиеся куски кода.

Впрочем, если спарить их и возможно, то вряд ли целесообразно тратить на это время.
0
Iskin, #
Compass тут опять же не при чём — это обычный Сасс, от Компаса только мелкие скрипты, которые есть в любом менеджере ассетов. Кстати, посмотрите в сторону Grunt — он хорошо подходит, если вы просто генерирует сами готовые стили для ПХП.
0
alt_r, #
Уже привык использовать
-webkit-[border-radius|transition|transform]:
-moz-[border-radius|transition|transform]:
border-radius|transition|transform:
Да, пара лишних строк, но ради этого ставить пакет на серверную часть — по мне перебор
0
Diokuz, #
Вы не пробовали прикинуть, у скольких пользователей от -prefix-border-radius, набранных вами, сайт стал лучше отображаться, и насколько увеличилось суммарное время загрузки у всех остальных пользователей из-за лишних байтов кода?)

На высоконагруженных сайтах получаются (суммарно) десятки часов в месяц.
0
alt_r, #
Дык, автопрефиксер в любом случаи отдает клиенту css с префиксами, это всего лишь удобство для разработчика
Да и вообще, пары байт для меня не приоритет, на практике, к сожалению, используется в разы больше css говнокода )
0
Diokuz, #
Главный минус любой такой штуки один: CSS перестаёт быть самостоятельным и его уже нельзя просто взять и переиспользовать — за ним тянутся препроцессоры.
0
Iskin, #
Согласен, тут надо сразу определить в каком вы лагере — как только внедряете один препроцессор, остальные идут легче, так как вы начинаете использовать пакетные менеджеры и инструменты деплоя.
0
Iskin, #
Этот проект писался с основным прицелом на Руби — а там препроцессоры давно полностью победили
+1
kxyu, #
Мне кажется, rework замечательная штука, если использовать его именно для таких целей — добавлять префикс, хаки для различных браузеров и т.д. То есть, с одной стороны в имеете чистый и валидный css, который должен прекрасно работать в сферическом браузере в вакууме, а rework делает грязную работу. А вот если использовать все возможности rework на полную катушку, то получается странно — вроде бы css-файл, но на самом деле это не css, незнакомый с проектом человек открывает, встречает вроде бы знакомые конструкции но с новыми свойствами, или еще хуже — когда переопределены стандартные свойства.
В этом смысле SASS и другие макроязыки лучше — видишь sass файл, если знаешь sass — все в порядке, не знаешь — открываешь референс и разбираешься.
0
Iskin, #
Я пришёл к точно такому же мнению. Да и синтаксис переменных и математики в Реворке ужасный.

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