Топ CSS и JS свойств и методов, которые сделают ваш код мощнее

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

🔥 Топ-10 CSS-свойств, которые стоит знать

1. aspect-ratio

Позволяет задать соотношение сторон элемента. Очень полезно для изображений, видео и адаптивных блоков.

.box {
  aspect-ratio: 16 / 9; /* Соотношение как у видео 16:9 */
}

2. object-fit и object-position

Контролируют, как содержимое (например, <img>) вписывается в контейнер.

img {
  object-fit: cover; /* Обрезает изображение, сохраняя пропорции */
  object-position: center; /* Центрирует обрезку */
}

3. scroll-snap

Создаёт "привязку" при прокрутке, как в каруселях или галереях.

.container {
  scroll-snap-type: y mandatory;
}
.item {
  scroll-snap-align: start;
}

4. clip-path

Позволяет вырезать элементы в произвольной форме (круги, многоугольники, SVG-пути).

.shape {
  clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
}

5. backdrop-filter

Размытие или цветовые эффекты для области позади элемента (как в iOS).

.modal {
  backdrop-filter: blur(10px);
}

6. gap (для Flexbox и Grid)

Упрощает создание отступов между элементами без margin.

.grid {
  display: grid;
  gap: 20px; /* Работает и в Flexbox! */
}

7. text-wrap: balance

Балансирует текст, делая его более читаемым.

.heading {
  text-wrap: balance;
}

8. :has()

Селектор, который позволяет выбирать элементы на основе их потомков (как родительский селектор).

.card:has(img) {
  border: 2px solid blue; /* Стиль, только если внутри есть img */
}

9. @container (Container Queries)

Медиа-запросы, но для отдельных контейнеров, а не всего экрана!

.card {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

10. view-transition-api (Анимации переходов между страницами)

Позволяет делать плавные переходы между страницами (например, как в мобильных приложениях).

::view-transition-old(root),
::view-transition-new(root) {
  animation: fade 0.5s ease;
}

🚀 Топ-10 JavaScript-методов и API

1. IntersectionObserver

Отслеживает появление элемента в области видимости (ленивая загрузка, анимации при скролле).

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) entry.target.classList.add("animate");
  });
});
observer.observe(document.querySelector(".box"));

2. requestAnimationFrame

Оптимизированная анимация (лучше, чем setInterval).

function animate() {
  element.style.left = `${pos++}px`;
  requestAnimationFrame(animate);
}
animate();

3. ResizeObserver

Следит за изменением размеров элемента.

const observer = new ResizeObserver(entries => {
  console.log(entries[0].contentRect.width);
});
observer.observe(document.querySelector(".box"));

4. structuredClone()

Глубокое копирование объектов (встроенная альтернатива JSON.parse(JSON.stringify())).

const obj = { a: 1, b: { c: 2 } };
const clone = structuredClone(obj);

5. Promise.allSettled()

Ждёт завершения всех промисов (даже с ошибками).

const promises = [fetch(...), fetch(...)];
const results = await Promise.allSettled(promises);

6. at() (для массивов и строк)

Удобный доступ к элементам с конца.

const arr = [1, 2, 3];
arr.at(-1); // 3 (аналог arr[arr.length - 1])

7. URL.canParse()

Проверяет, является ли строка валидным URL.

URL.canParse("https://example.com"); // true

8. Web Animations API (WAAPI)

Нативная анимация без CSS.

element.animate(
  [{ opacity: 0 }, { opacity: 1 }],
  { duration: 1000 }
);

9. navigator.clipboard

Работа с буфером обмена.

await navigator.clipboard.writeText("Текст для копирования");
const text = await navigator.clipboard.readText();

10. Intl (Интернационализация)

Форматирование дат, чисел и валют под локаль пользователя.

new Intl.DateTimeFormat('ru-RU').format(new Date()); // "25.04.2025"
new Intl.NumberFormat('en-US').format(123456.789); // "123,456.789"

💡 Вывод

Эти свойства и методы помогут писать более чистый, производительный и современный код. Многие из них поддерживаются во всех браузерах, а те, что ещё не везде работают, можно использовать с полифилами.

Какой из этих приёмов вам понравился больше всего? Попробуйте применить его в своём следующем проекте! 🚀