Таск-менеджер Gulp

5 уроков
Консультации
#3 - Autoprefixer и Source Maps

#3 - Autoprefixer и Source Maps

Некоторые CSS3 свойства некорректно отображаются в различных браузерах. Чтобы это исправить придумали специальные префиксы для свойств. Gulp обладает плагином Autoprefixer, позволяющий не прописывать префиксы к свойствам каждый раз вручную. В уроке вы изучите плагин Autoprefixer, а также познакомитесь с Source Mapping.

Видеоурок

Некоторые CSS3 свойства, например transition, могут некорректно отображаться в менее популярных браузерах. Для исправления ошибки были придуманы специальные префиксы к свойствам. 

Пример:

a {
	transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}

Прописывать префиксы под каждое CSS3 свойство очень неудобно и это занимает множество времени.


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

Source Maps

Source Maps это плагин, позволяющий указать исходный файл со стилями. Указав такой файл, вам намного проще будет отслеживать ошибки и проверять код через консоль разработчика в Google Chrome, Mozilla Firefox и в любых других веб браузерах.

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Исходный код

Весь код будет доступен после подписки на проект!

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

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

Также стоит посмотреть

Уроки Node JS и Express для начинающих
17 уроков
Изучение JavaScript: от нуля и до создания сайта
Изучение библиотек jQuery
24 урока
Курс по React JS для начинающих
14 уроков
Создание динамического веб сайта
22 урока
Создание приложения на React JS / Использование API
7 уроков