Обзор миксов для вендорных префиксов в COMPASS

Опубликовано: Пятница, Март 7, 2014 Комментарии (6)

Как известно, вендорные префиксы — это приставки к названиям CSS свойств, которые добавляют производители браузеров для поддержки нестандартных свойств. Правда некоторые CSS свойства потом признаются консорциумом W3C, а префиксы остаются. Вот на днях столкнулась с тем, что свойства для CSS анимации в последней версии Chrome не работали без префиксов. Сильно удивилась и в связи с этим решила выбрать все же наиболее удобный способ сокращенного написания префиксов с использованием технологий фреймворка COMPASS.

UPD. Теперь вместо всех этих mixin я использую gulp-autoprefixer для Gulp.js

1. Стандартные миксины COMPASS для CSS3 свойств

Чтобы мы не прописывали для CSS3 свойства все префиксы, разработчики COMPASS постарались и сделали стандартные mixin, которые делают это за вас. Все, что нужно, это подключить соответствующий файл:

Можно подключать отдельно для разных свойств, но на мой взгляд, это неудобно и нецелесообразно.

В итоге получаем полный набор префиксов в полученном css файле.

Плюсы: 

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

– запись самого свойства немногим отличается от стандартной, например

Минусы: 

– вендорные префиксы для свойства указываются все, даже если такого префикса производители браузера не делали. Например, нет свойства -o-border-radius не существует, а в моих css файлах оно присутствует, потому что я использую компасс миксин border-radius.

2. Пользовательские миксы

2.1 Микс для прописывания префиксов в COMPASS № 1

Потом пишем где-нибудь в scss файле:
И получаем на выходе в css файле весь набор префиксов.

Плюсы:

– если вы верстаете небольшой проект и у вас нет необходимости в использовании большого количества CSS3 свойств, то вполне можно настроить этот миксин под себя. Например, если вы используете только border-radius, то можно сократить этот миксин до такой записи:

Минусы:

– нужно писать дополнительный миксин (а возможно даже несколько, зависит от ваших целей)

– сама запись не такая явная, как в варианте 1. Когда вы поддерживаете большой проект, это может стать действительно минусом.

2.2 Микс для прописывания префиксов в COMPASS № 2

Создаем массив с префиксами:

Используем массив с префиксами:

Плюсы:

– кастомизируйте префиксы для разных свойств сколько угодно

Минусы:

– много кода

 3. Миксин experimental для поддержки браузеров из модуля SHARED фреймворка COMPASS

Это самый удобный в больших проектах, на мой взгляд способ.

Подключаем модуль:

А затем пишем сам миксин там, где нужно написать CSS свойство с вендорными префиксами. Например:

Это значит, что свойство transform с заданными значениями продублируется для префиксов webkit. moz, o и ms.

Ссылка на миксин на оф. сайте COMPASS

Плюсы:

– не надо писать лишний код

– можно кастомизировать любое свойство

– миксины от COMPASS писали умные люди :)

Минусы:

– не совсем явная запись свойства: тяжело будет поддерживать, если все CSS3 свойства так записывать

Поделитесь с друзьями:

Читайте также:

Комментируйте:

  • Pingback: Вёрстка макетов: основные требования + почему мы используем Compass и Sass BONO IDEA()

  • Виталий

    Для борьбы с префиксами можно забыть про миксеры и прочее, и использовать постпроцессор css – autoprefixer? он обрабатывает css, удаляет ненужные префиксы и дописывает те, которых не хватает.

    Онлайн можно просмотреть вот тут – http://autoprefixer.github.io
    Официальный сайт – https://github.com/postcss/autoprefixer

    • http://positivecrash.com/ Настя Бакай

      Безусловно можно! Просто по сути это два разных метода: я тоже самое делаю препроцессором, а вы, к примеру, постпроцессором :) Оба способа имеют место быть и оба вполне удобные.

      Кстати, на счет постпроцессоров: пока не нашла преимуществ значительных перед препроцессорами, но возможно скоро придется пересаживаться на них (посмотрим как это все дело будет развиваться)

      • Виталий

        Просто при использовании препроцессора нужно создавать свои миксы и прочее, и потом настраивать. А постпроцессор сам проставит АКТУАЛЬНЫЕ на текущий момент префиксы. Мне кажется это как-то проще, не считая того что нужно добавлять его в систему сборки.

  • Дмитрий

    “Например, нет свойства -o-border-radius не существует”
    Все там есть – просто настраивать надо.

    /* SCSS */
    $experimental-support-for-mozilla : true; // !default;
    $experimental-support-for-webkit : true; // !default;
    $support-for-original-webkit-gradients : true; // !default;
    $experimental-support-for-microsoft : true; // !default;
    $experimental-support-for-opera : false;
    $experimental-support-for-khtml : false;