WebDev+ | Веб-разработка

Контролируйте специфичность CSS с помощью
@layer

Каскадные слои позволяют явно задавать приоритет между группами стилей. Больше не нужно бороться с !important.

Подробнее
https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

@WebDev_Plus

image-set должен быть первым выбором при работе с фоновыми изображениями

Одна строка CSS решает:
→ переключение между 1x/2x и даже 3x разрешениями
→ фолбэки для современных форматов — AVIF, JPEG, WebP

Ноль JS. Чистый CSS! 💪

✅ Широко доступен с сентября 2023

@WebDev_Plus

⚡️ Про-тип: используйте .at(-1) для более чистого доступа к последнему элементу в JavaScript

#JavaScript

@WebDev_Plus

Разбивайте текст на слова и предложения для любого языка

Intl.Segmenter выполняет сегментацию текста с учётом локали, включая CJK-языки, где слова не разделяются пробелами.

Подробнее : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter

@WebDev_Plus

Генерируй криптографически стойкие UUID прямо в браузере 🔐

crypto.randomUUID() встроен в Web Crypto API, никакой пакет из npm не нужен.

Работает во всех современных браузерах и в Node.js 14.17+.

Подробнее: https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID

@WebDev_Plus

Фиксированная ширина ломает адаптивный дизайн, делай так вместо этого:

@WebDev_Plus

Автоматически балансируй заголовки

text-wrap: balance равномерно распределяет текст по строкам и убирает некрасивые висячие слова. Подходит для заголовков и коротких текстовых блоков.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap

@WebDev_Plus

⚡️ Два подхода для расчёта количества дней в JavaScript: через Date и через Temporal

// ⚠️ Подход через Date — ручная арифметика, небезопасно при DST
const MS_PER_DAY = 1000 * 60 * 60 * 24;
const d1 = new Date("2026-01-01");
const d2 = new Date("2027-01-01");

const diffDays = (d2 - d1) / MS_PER_DAY;
console.log(diffDays); // 365

// ✅ Подход через Temporal — учитывает календарь, безопасно при DST
const t1 = Temporal.PlainDate.from("2026-01-01");
const t2 = Temporal.PlainDate.from("2027-01-01");

const totalDays = t1.until(t2).total({ unit: "days" });
console.log(totalDays); // 365

@WebDev_Plus

CSS :has() — селектор родителя теперь реально существует 🎯

Позволяет выбирать элементы на основе их содержимого. Можно по-разному стилизовать карточку, если внутри есть изображение, или форму — если в ней есть невалидные поля.

> .card:has(img) { grid-template-rows: auto 1fr; }

Подробнее: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has

@WebDev_Plus

Смешивай цвета прямо в CSS - читать

color-mix() позволяет смешивать два цвета в любом цветовом пространстве. Можно создавать оттенки, затемнения и динамические палитры без препроцессора.

@WebDev_Plus

Проблема: .sort() в JavaScript мутирует массив.

Решение: использовать .toSorted() — он возвращает новый отсортированный массив.

#javascript

Вывод типов по вложенным путям объектов в TypeScript — чисто и типобезопасно

#TypeScript

@WebDev_Plus

Очень немногие знают про этот HTML-тег, а он может сделать веб-страницу заметно быстрее по ощущениям.

Он называется Speculation Rules и позволяет заранее рендерить страницы ещё до клика пользователя.

Браузер отслеживает намерение перехода, например при наведении на ссылку, и начинает готовить следующую страницу в фоне.

В момент клика переход ощущается почти мгновенным.

@WebDev_Plus

⚡️Утилита на TypeScript для отображения вложенных ключей объекта в плоское объединение путей в точечной нотации

#TypeScript

@WebDev_Plus

Прокачай TypeScript с помощью ключевых утилитных типов

Сохрани, чтобы не потерять

#TypeScript

@WebDev_Plus

Container Queries в CSS позволяют компонентам самим определять свои стили

В отличие от медиазапросов, которые проверяют размер области просмотра, @container проверяет размер родительского элемента. Полноценная адаптивность на уровне компонентов.

Подробнее : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries

@WebDev_Plus

Оставляйте видео видимым даже при переключении вкладок → https://goo.gle/3O03kNA

Автоматический режим «картинка в картинке» убирает необходимость ручного переключения и решает проблему потери вовлечённости при уходе со страниц с медиа-контентом. Теперь браузер сам обрабатывает этот переход.

@WebDev_Plus

Хорошие новости для веб-типографики: text-indent с ключевыми словами each-line и hanging теперь входит в Baseline Widely Available → https://goo.gle/4c7tO9j

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

@WebDev_Plus

Нужно отслеживать, когда элементы попадают в область видимости? 👀

IntersectionObserver вызывает колбэк, когда элементы пересекают порог видимости. Больше не нужны обработчики события прокрутки.

⋅ Ленивая загрузка изображений
⋅ Отслеживание видимости рекламы
⋅ Триггер анимаций при скролле

Подробнее - https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver

@WebDev_Plus

:only-child теперь матчится даже на элементы без родителя!

Селектор :only-child обновили — теперь он может матчить элементы, у которых вообще нет родителя, а не только те, которые являются единственным ребёнком.

Небольшое, но полезное выравнивание спецификации во всех основных браузерах.

Узнать больше : https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:only-child

@WebDev_Plus