Полезные плагины для PostCSS

PostCSS — это мощный инструмент для работы с CSS, который позволяет автоматизировать множество задач. Вот подборка плагинов, которые помогут вам писать чистый, современный и оптимизированный код:

1. Autoprefixer
Автоматически добавляет вендорные префиксы для поддержки старых браузеров. Больше не нужно вручную писать -webkit-, -moz- или -ms-.
👉 https://github.com/postcss/autoprefixer

2. CSSNano
Минификатор CSS, который удаляет лишние пробелы, комментарии и оптимизирует ваш код для production.
👉 https://github.com/cssnano/cssnano

3. PostCSS Preset Env
Позволяет использовать современные возможности CSS (например, кастомные свойства, вложенные правила и т.д.), которые будут автоматически преобразованы для поддержки старых браузеров.
👉 https://github.com/csstools/postcss-preset-env

4. PostCSS Import
Позволяет импортировать CSS-файлы прямо в ваш основной файл стилей, что упрощает организацию кода.
👉 https://github.com/postcss/postcss-import

5. PostCSS Nesting
Добавляет поддержку вложенных правил, как в Sass или Less. Теперь можно писать вложенные селекторы без препроцессоров!
👉 https://github.com/jonathantneal/postcss-nesting

6. PostCSS Custom Properties
Позволяет использовать CSS-переменные (кастомные свойства) даже в браузерах, которые их не поддерживают.
👉 https://github.com/postcss/postcss-custom-properties

7. PostCSS Sort Media Queries
Автоматически сортирует медиа-запросы, что упрощает чтение и поддержку кода.
👉 https://github.com/solversgroup/postcss-sort-media-queries

8. Stylelint
Не совсем плагин, но мощный линтер для CSS, который помогает находить ошибки и соблюдать стиль кода. Интегрируется с PostCSS.
👉 https://github.com/stylelint/stylelint

9. PostCSS Assets
Упрощает работу с ассетами (изображения, шрифты и т.д.), позволяя автоматически управлять путями и кэшированием.
👉 https://github.com/borodean/postcss-assets

10. PostCSS Pxtorem
Автоматически преобразует пиксели (px) в rem, что полезно для создания адаптивных интерфейсов.
👉 https://github.com/cuth/postcss-pxtorem

#css | #полезности

Intersection Observer

Что это такое?
Intersection Observer позволяет отслеживать пересечение элемента с областью видимости (viewport) или другим родительским элементом. Это особенно полезно для:

Ленивой загрузки изображений (lazy loading),
Реализации бесконечной прокрутки,
Анимации элементов при появлении в зоне видимости,
Фиксации элементов при прокрутке (например, кнопок или меню).
Как это работает?

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент виден на экране!');
    } else {
      console.log('Элемент исчез с экрана!');
    }
  });
});

Выбираем элемент для отслеживания:

const target = document.querySelector('.my-element');
observer.observe(target);
Настройка через параметры (threshold и rootMargin):
```const observer = new IntersectionObserver(callback, {
  threshold: 0.5, // Элемент должен быть виден на 50%
  rootMargin: '0px 0px -50px 0px' // Отступы вокруг зоны видимости
});

Пример использования:
Допустим, нужно, чтобы кнопка "Добавить в корзину" прилипала к низу экрана, когда исчезает из зоны видимости:

const button = document.querySelector('.add-to-cart');
const observer = new IntersectionObserver(([entry]) => {
  if (!entry.isIntersecting) {
    button.classList.add('sticky');
  } else {
    button.classList.remove('sticky');
  }
}, { threshold: 1 });
observer.observe(button);

Почему это лучше, чем scroll?
Эффективность: Intersection Observer работает асинхронно и не грузит основной поток.
Гибкость: Можно отслеживать любые элементы и точно настроить, как и когда срабатывают события.
Производительность: Браузер оптимизирует работу Observer, что особенно важно для мобильных устройств.

#js

Псевдокласс :is() в CSS

Читать 🧑‍💻

#css | #теория

Псевдокласс :where() в CSS

Читать 🧑‍💻

#css | #теория

Макет для тренировки (вкусно маркет)

Перейти к макету 🧑‍💻

#практика | #макет

СSS Задача: CSS Grid

Создайте сетку, в которой три блока будут равномерно распределены по ширине. При уменьшении ширины экрана до 600px блоки должны располагаться друг под другом.

Подсказка: Используйте grid-template-columns и медиа-запросы.

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Полезные плагины для PostCSS
2. Intersection Observer
3. Псевдокласс :where() в CSS

Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. UX/UI Дизайнер
2. Web-дизайнер
3. UX/UI Дизайнер

#лучшеезанеделю

Верстка HTML-писем. Часть 1

Читать 👨‍💻

#html | #теория

Верстка HTML-писем. Часть 2

Читать 👨‍💻

#html | #теория

Макет для тренировки (miami)

Перейти к макету 🧑‍💻

#практика | #макет

Задача: Сделать кнопку "Добавить в корзину" с эффектом sticky

На странице карточки товара нужно реализовать кнопку "Добавить в корзину", которая всегда будет видна пользователю при прокрутке страницы. Кнопка должна прилипать к нижней части экрана, когда пользователь прокручивает страницу вниз, но оставаться на своём месте, когда прокрутка находится в верхней части.

Требования:
- Кнопка должна быть изначально расположена под описанием товара.
- При прокрутке вниз кнопка должна "прилипать" к нижней части окна браузера.
- Кнопка должна занимать всю ширину экрана на мобильных устройствах и быть фиксированной внизу.

Ожидаемый результат:
При скролле вниз кнопка остаётся в нижней части окна браузера.
При возвращении наверх кнопка возвращается на своё место под описанием товара.

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Анимация печатания на css
2. Верстка HTML-писем. Часть 1
3. Верстка HTML-писем. Часть 2

Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. UX/UI исследователь
2. Web-дизайнер
3. UX/UI Дизайнер

#лучшеезанеделю

Медиа-запрос prefers-reduced-motion

Когда мы создаем анимации и переходы, мы редко задумываемся о людях, которым такие эффекты могут причинять дискомфорт. Однако в операционных системах (Windows, macOS, Linux, iOS, Android) есть настройка "уменьшить движение", которая позволяет пользователям отключить излишние анимации.

В CSS мы можем учитывать это предпочтение с помощью медиа-запроса prefers-reduced-motion.

Как работает prefers-reduced-motion?
Этот медиа-запрос проверяет, включил ли пользователь настройку "уменьшить движение" в своей ОС. Если она включена, браузер применит стили, указанные внутри @media (prefers-reduced-motion: reduce).

Простой пример:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Что делает этот код?
Убирает все анимации (animation: none).
Отключает плавные переходы (transition: none).
!important гарантирует, что правило переопределит любые другие стили.

Когда это особенно полезно?
Некоторым пользователям анимации могут вызывать дискомфорт или даже головокружение, например:
Людям с вестибулярными расстройствами (motion sickness).
Пользователям, у которых в системе включена опция «уменьшить движение».
Тем, кто просто не любит резкие анимации.

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

#полезности

Красивая анимация скролла

Смотреть на codepen 🧑‍💻

#практика