Адаптивная верстка галереи без JS. HTML + CSS target. Работа с изображениями (Retina img)

Сегодня мы создадим секцию галереи на чистом CSS (без JS), рассмотрим работу с изображениями - автоматическую оптимизацию, затронем подготовку изображений для Retina-дисплеев (экранов с масштабированием интерфейса от 150% и выше) посредством HTML 5 атрибута srcset и я расскажу о других интересных и полезных моментах, с которыми вы можете столкнуться при верстке изображений в своих проектах.

Готовый результат урока (HTML верстка): Смотреть

Дополнительные материалы и референсы:

• Архив с исходниками: Скачать
• Последний стартер OptimizedHTML 5: На GitHub
• Сайт с иконками для верстки: https://fontawesome.com
• Сайт с бесплатными картинками: https://unsplash.com

Рекомендую к изучению (дополнительные уроки):

• Команда "ncu" - обновление пакетов проекта
• Основы Bootstrap сетки
• Урок по Visual Studio Code
• Использование подсистемы Linux
• Урок по стартеру OptimizedHTML 4
• Урок по быстрому написанию кода с Emmet
• Справочник сокращений Emmet
• Основы Sass
• Основы Gulp

Установка GraphicsMagick

Установите GraphicsMagick для автоматической обработки изображений, если вы используете стартер OptimizedHTML 4. В комментариях Gulpfile.js стартера OptimizedHTML 4 есть краткая инструкция по установке GraphicsMagick в Linux или в подсистеме WSL.

Если вы используете стартер OptimizedHTML 5, установка GraphicsMagick и других дополнительных компонентов не требуется.

Если Node.js используется непосредственно в вашей системе Windows, установите бинарник с сайта graphicsmagick.org.

Если у вас MacOS, рекомендую установить GraphicsMagick через менеджер недостающих пакетов "brew":

brew install gs graphicsmagick

Если у вас подсистема Linux в Windows или самостоятельная операционная система Linux, выполните команду (на примере Debian):

sudo apt update; sudo apt install graphicsmagick

Изменение хеша в строке браузера без "Перепрыгивания"

Бнусом - JavaScript код, который предотвращает так называемое "перепрыгивание" страницы при активации определенного хеша:

var hashLinks = document.querySelectorAll("a[href^='#']");
[].forEach.call(hashLinks, function (link) {
	link.addEventListener("click", function (event) {
		event.preventDefault();
		history.pushState({}, "", link.href);
		history.pushState({}, "", link.href);
		history.back();
	});
});