👁 Как отследить появление элемента на экране
`IntersectionObserver` сообщает, когда элемент входит в область видимости пользователя или покидает её.
Создаём наблюдатель:
```const observer = new IntersectionObserver(([entry]) => {
entry.target.classList.toggle(
'visible',
entry.isIntersecting
);
});```
Подключаем нужный элемент:
```const card = document.querySelector('.card');
observer.observe(card);```
Теперь можно запускать CSS-анимацию при появлении карточки:
```.card {
opacity: 0;
transform: translateY(20px);
transition: 0.4s;
}
.card.visible {
opacity: 1;
transform: translateY(0);
}```
Метод подходит для анимаций, ленивой загрузки контента и аналитики просмотров.
#javascript #frontend #вебразработка
🎠 Карусель с CSS без JavaScript
CSS Scroll Snap позволяет автоматически фиксировать прокрутку на ближайшей карточке.
Настраиваем горизонтальный контейнер:
```.slider {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
}```
Затем указываем точку фиксации для каждой карточки:
```.slide {
flex: 0 0 80%;
scroll-snap-align: start;
}```
Теперь после прокрутки ближайшая карточка сама выровняется по началу контейнера.
Для более плавного поведения можно добавить:
```.slider {
scroll-behavior: smooth;
}```
Подходит для мобильных подборок, галерей, отзывов и карточек товаров.
#css #frontend #вебразработка
💬 Всплывающее окно без JavaScript
Нативный Popover API позволяет создавать меню, подсказки и небольшие всплывающие панели средствами HTML.
Добавляем кнопку:
```
Открыть
```
Создаём всплывающий элемент:
```
Содержимое
```
После нажатия браузер самостоятельно откроет элемент. Повторное нажатие, клик снаружи или клавиша Escape закроют его.
При необходимости окно можно оформить через CSS:
```[popover] {
padding: 20px;
border: 0;
border-radius: 12px;
box-shadow: 0 12px 40px #0004;
}```
Меньше JavaScript — проще управление состоянием и базовой доступностью интерфейса.
#html #frontend #webdev
⛔️ Как отменить fetch-запрос
Если пользователь изменил поисковый запрос, покинул страницу или закрыл компонент, предыдущий запрос может стать ненужным.
Отменить его можно через `AbortController`.
Создаём контроллер:
```const controller = new AbortController();```
Передаём его сигнал в `fetch`:
```fetch(url, {
signal: controller.signal
});```
Когда запрос больше не нужен — отменяем:
```controller.abort();```
При отмене `fetch` завершится с ошибкой `AbortError`, которую можно обработать отдельно:
```try {
await fetch(url, {
signal: controller.signal
});
} catch (error) {
if (error.name !== 'AbortError') {
throw error;
}
}```
Особенно полезно для поиска, фильтров, переходов между страницами и размонтирования компонентов.
#javascript #frontend #fetch
📐 Адаптивный размер текста с CSS `clamp()`
Чтобы текст плавно менялся вместе с шириной экрана, необязательно создавать несколько media-запросов.
Функция `clamp()` принимает три значения:
```.title {
font-size: clamp(24px, 5vw, 64px);
}```
Здесь:
• `24px` — минимальный размер;
• `5vw` — гибкое значение;
• `64px` — максимальный размер.
На маленьком экране заголовок не станет меньше 24px, а на большом — не превысит 64px.
`clamp()` подходит не только для текста:
```.card {
padding: clamp(16px, 4vw, 40px);
gap: clamp(8px, 2vw, 24px);
}```
Удобный способ создавать адаптивные интерфейсы с меньшим количеством media-запросов.
Сохраняйте, чтобы не потерять 📎
#css #frontend #вебразработка
