WebDev+ | Веб-разработка
8.32K subscribers
504 photos
241 videos
10 files
700 links
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки

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

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

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

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

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

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

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

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

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Хорошие новости для веб-типографики: text-indent с ключевыми словами each-line и hanging теперь входит в Baseline Widely Available → https://goo.gle/4c7tO9j

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

@WebDev_Plus
2
This media is not supported in your browser
VIEW IN TELEGRAM
Оставляйте видео видимым даже при переключении вкладок → https://goo.gle/3O03kNA

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

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

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

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

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

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

#TypeScript

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

#TypeScript

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
Очень немногие знают про этот HTML-тег, а он может сделать веб-страницу заметно быстрее по ощущениям.

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

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

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

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

#TypeScript

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

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

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

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

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

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

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

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

@WebDev_Plus
👍1
⚡️ Два подхода для расчёта количества дней в 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
Please open Telegram to view this post
VIEW IN TELEGRAM
3👌2💯1
Автоматически балансируй заголовки

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

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

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

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
3
Генерируй криптографически стойкие UUID прямо в браузере 🔐

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

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

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

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Разбивайте текст на слова и предложения для любого языка

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

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

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

#JavaScript

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
image-set должен быть первым выбором при работе с фоновыми изображениями

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

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

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

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31👎1👏1
Контролируйте специфичность CSS с помощью
@layer

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

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

@WebDev_Plus
4
Firefox 150 вышел и включает новые возможности веб-платформы:

🎉sizes="auto" для изображений
🎉поддержка light-dark() для изображений
🎉revert-rule в CSS
🎉ariaNotify()
🎉 медиа-псевдоклассы, такие как :playing

Ни одна из этих возможностей пока не входит в базовый набор, проверяйте поддержку на MDN

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1