Таск-менеджер 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 месяца

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

Создание динамического веб сайта
22 урока
Изучение JavaScript от нуля до гуру
21 урок
Курс по React JS для начинающих
14 уроков
Создание приложения на React JS / Использование API
7 уроков
Уроки Angular для начинающих
7 уроков
Изучение React JS / Redux библиотеки
9 уроков