—»     —»   Автоматическое добавление браузерных префиксов в CSS при помощи Sublime Text
  Раздел: CSS/Style Sheets   Комментариев: 1  

Автоматическое добавление браузерных префиксов в CSS при помощи Sublime Text



Есть множество CSS3-свойств, которые на сегодняшний день находятся в экспериментальной стадии. Экспериментальные CSS-свойства используют браузерные префиксы, и как нам всем уже известно, у каждого браузера есть собственные префиксы: Firefox использует –moz-, IE использует –ms-, Chrome и Safari используют –webkit-, а Opera в свою очередь использовала –о- (но уже перешла –webkit-).

Проблема заключается в том, что в тех случаях, когда вы не используете Compass, вам обязательно нужно использовать браузерные префиксы. Требования также отличаются от браузера к браузеру, и возникает вопрос – когда и в каких случаях следует (или не следует) использовать браузерные префиксы.

Если вы используете Sublime Text, то мы предлагаем вам рассмотреть более простой способ.

Устанавливаем Node.js

Прежде всего, нам нужно установить Node.js. Пакет установки доступен для Windows, OSX и Linux, и скачать его можно отсюда. Если вы не уверены по поводу того, есть ли у вас эта библиотека или нет, то запустите следующую команду в Терминале.

node -v

Если он уже установлен, то вы получите сведения о версии, как показано ниже.

Автоматическое добавление браузерных префиксов в CSS при помощи Sublime Text

Устанавливаем AutoPrefixer

AutoPrefixer был разработан Андреем Ситником. Позже он был портирован Sindre Sorhus в Sublime Text.

Мы рекомендуем вам установить Package Control для более простого процесса установки. Вы можете посетить Wbond, чтобы получить официальные инструкции. После этого, можно нажать Command + Shift + P и выбрать Install Package. После чего нужно будет найти Autoprefixer.

Автоматическое добавление браузерных префиксов в CSS при помощи Sublime Text

Для установки нажмите Ввод.

Применение Autoprefixer

Autoprefixer предлагается с настройками по умолчанию:

{
"browsers": ["last 2 versions"]
}

Но вы можете персонализировать его, адаптировав под собственные требования.

Autoprefixer использует базу данных CanIuse.com для добавления префиксов. CanIUse.com предлагает вам статистику поддержки свойств CSS3, а также HTML5, JS и SVG. И как можно видеть в настройках по умолчанию, Autoprefixer добавляет приставки для двух последних версий.

Если мы возьмем в пример CSS3 Transition, то Autoprefixer добавит префиксы для браузеров Webkit и Opera.

Автоматическое добавление браузерных префиксов в CSS при помощи Sublime Text

И у нас есть возможность установить поддержку сразу нескольких прошлых версий следующим образом:

{
"browsers": ["last 7 versions"]
}

Ввиду чего инструмент добавит префикс –moz- для Firefox.

Автоматическое добавление браузерных префиксов в CSS при помощи Sublime Text

Чтобы добавить префикс, вы можете нажать Command + Shift + P и выбрать Autoprefix CSS.

Автоматическое добавление браузерных префиксов в CSS при помощи Sublime Text

Теперь вы можете просто писать стандартный CSS3-синтаксис, и плагин будет самостоятельно добавлять нужные префиксы.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 15956   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 27 декабря 2013 @ 00:15
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Эээх, а под виндовс? ))) TopStyle только?


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930