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

#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 месяца

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

Изучение стека MEAN: MongoDB, Express, Angular и Node JS
10 уроков
Фреймворк Next JS / Изучение NextJS для начинающих
8 уроков
Изучение JavaScript: от нуля и до создания сайта
Создание приложения на React JS / Использование API
7 уроков
Курс по React JS для начинающих
11 уроков
Изучение React JS / Redux библиотеки
9 уроков
Комментарии
Добавить комментарий

Пока комментариев нет