Свойство pointer-events позволяет управлять тем, как элементы будут реагировать на события мыши или прикосновения к сенсорному экрану.
Часто применяется для того, чтобы можно было взаимодействовать с нижележащими элементами, игнорируя вышележащие. (Например, делая что-то с помощью js)
Значения:
auto - Восстанавливает функциональность элемента по умолчанию.
none - Предотвращает события мыши и щелчки по элементу.
#css | #полезности
Часто применяется для того, чтобы можно было взаимодействовать с нижележащими элементами, игнорируя вышележащие. (Например, делая что-то с помощью js)
Значения:
auto - Восстанавливает функциональность элемента по умолчанию.
none - Предотвращает события мыши и щелчки по элементу.
#css | #полезности
Полезные плагины для PostCSS
PostCSS — это мощный инструмент для работы с CSS, который позволяет автоматизировать множество задач. Вот подборка плагинов, которые помогут вам писать чистый, современный и оптимизированный код:
1. Autoprefixer
Автоматически добавляет вендорные префиксы для поддержки старых браузеров. Больше не нужно вручную писать
👉 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
Автоматически преобразует пиксели (
👉 https://github.com/cuth/postcss-pxtorem
#css | #полезности
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 | #полезности
Что такое CSS Paint API и зачем оно нужно?
CSS Paint API — это мощный инструмент, который позволяет создавать динамические и программируемые фоны (background) прямо в CSS, без использования изображений. С помощью JavaScript можно нарисовать что угодно и использовать это как фоновый стиль элемента.
Как это работает?
Определяем класс, который будет использовать кастомный фон.
Подключаем CSS Paint API в paintWorklet.
Реализуем свою "рисовалку" на JavaScript.
Пример кода
В файле paint.js:
registerPaint('my-paint', MyPaint);
Где это может быть полезно?
Динамические фоны без изображений
Генерация паттернов на лету
Оптимизация графики без перегрузки сети
#css | #полезности
CSS Paint API — это мощный инструмент, который позволяет создавать динамические и программируемые фоны (background) прямо в CSS, без использования изображений. С помощью JavaScript можно нарисовать что угодно и использовать это как фоновый стиль элемента.
Как это работает?
Определяем класс, который будет использовать кастомный фон.
Подключаем CSS Paint API в paintWorklet.
Реализуем свою "рисовалку" на JavaScript.
Пример кода
.my-element {
background: paint(my-paint);
}if (CSS && CSS.paintWorklet) {
CSS.paintWorklet.addModule('paint.js');
}В файле paint.js:
class MyPaint {
static get inputProperties() {
return ['--circle-color'];
}
paint(ctx, size, properties) {
const color = properties.get('--circle-color').toString() || 'blue';
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(size.width / 2, size.height / 2, 30, 0, 2 * Math.PI);
ctx.fill();
}
}registerPaint('my-paint', MyPaint);
Где это может быть полезно?
Динамические фоны без изображений
Генерация паттернов на лету
Оптимизация графики без перегрузки сети
#css | #полезности
CSS-приемов, которые сэкономят вам часы работы
Знаете ли вы, что в CSS есть фичи, которые редко используют, но они могут упростить жизнь? Вот они:
- aspect-ratio – задает соотношение сторон элемента без костылей с padding-top.
- scroll-snap – плавная фиксация скролла, как в мобильных галереях.
- :empty – стилизация пустых блоков (удобно для динамического контента).
- gap во Flexbox – больше не нужны margin-хаки для отступов!
- @supports – проверка поддержки свойств в браузере.
#css | #полезности
Знаете ли вы, что в CSS есть фичи, которые редко используют, но они могут упростить жизнь? Вот они:
- aspect-ratio – задает соотношение сторон элемента без костылей с padding-top.
- scroll-snap – плавная фиксация скролла, как в мобильных галереях.
- :empty – стилизация пустых блоков (удобно для динамического контента).
- gap во Flexbox – больше не нужны margin-хаки для отступов!
- @supports – проверка поддержки свойств в браузере.
#css | #полезности