Не используй overflow: hidden, если нужно только обрезать контент!

overflow: hidden часто ставят просто для обрезки того, что выходит за границы блока.

.wrapper {
  overflow: hidden;
}

Но у него есть побочный эффект: элемент становится контейнером прокрутки, даже если полос прокрутки нет. Это может влиять на поведение position: sticky, программную прокрутку и поиск ближайшего скролл-контейнера.

Если прокрутка вообще не нужна, есть более точное значение.

.wrapper {
  overflow: clip;
}

Контент по-прежнему обрезается, но контейнер прокрутки не создаётся. Поэтому sticky внутри такого блока может ориентироваться на внешний скролл-контейнер, а не останавливаться на .wrapper.

Разница особенно заметна в такой структуре.

<div class="wrapper">
  <aside class="sidebar">...</aside>
</div>

.wrapper { overflow: clip; }

.sidebar {
  position: sticky;
  top: 16px;
}

Есть ещё полезная деталь: расстояние, на котором происходит обрезка, можно увеличить отдельно.

.wrapper {
  overflow: clip;
  overflow-clip-margin: 8px;
}

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

🔥 overflow: clip широко доступен в современных браузерах. Важно только не считать его полной заменой hidden: если элемент действительно должен программно прокручиваться, нужен overflow: hidden или другое прокручиваемое значение.

📣 Code Ready | #совет

👩‍💻 Создаём плавные анимации при переходе между страницами!

Правило @view-transition позволяет управлять поведением View Transition API при навигации между документами. С его помощью можно включить плавные переходы между страницами без необходимости вручную запускать их через JS.

Основные параметры:

• navigation: auto — включает переходы при навигации между страницами;

• types — задаёт типы переходов, которые затем можно использовать для разных анимаций.

@view-transition полезно для многостраничных сайтов: смену страниц можно сделать визуально плавной, а сами анимации настроить через CSS-псевдоэлементы View Transition.

📣 Code Ready | #свойство

<template> — храним HTML-разметку без её отображения на странице

Когда структура элемента известна заранее, собирать её вручную через createElement() не всегда удобно: разметка смешивается с логикой и увеличивает объём js. Для таких случаев в HTML существует <template> — элемент для хранения готовой DOM-заготовки без её отображения на странице:

const card = document.createElement('article');
const title = document.createElement('h2');
const button = document.createElement('button');

card.className = 'card';
title.className = 'card__title';
button.className = 'card__button';

card.append(title, button);

Ту же структуру можно описать декларативно непосредственно в HTML:

<template id="card-template">
  <article class="card">
    <h2 class="card__title"></h2>
    <button class="card__button">
      Открыть
    </button>
  </article>
</template>

Браузер парсит содержимое <template> как HTML, но не отображает его и не включает в активное дерево документа:

<template>
  <h2>Карточка пользователя</h2>
</template>

Содержимое шаблона доступно через свойство content, которое представляет собой DocumentFragment:

const template = document.querySelector(
  '#card-template'
);

console.log(template.content);
// DocumentFragment

Поэтому искать элементы шаблона необходимо внутри content, а не через сам <template>:

template.querySelector('.card');
// null

template.content.querySelector('.card');
// <article class="card">...</article>

Для создания независимого экземпляра содержимое шаблона можно импортировать в текущий документ с глубоким копированием:

const fragment = document.importNode(
  template.content,
  true
);

document.body.append(fragment);

Аргумент true означает глубокое копирование вместе со всеми вложенными узлами. До вставки экземпляр можно заполнить данными, не изменяя исходный шаблон:

const fragment = document.importNode(
  template.content,
  true
);

fragment.querySelector('.card__title').textContent =
  'JavaScript';

document.body.append(fragment);

Один шаблон можно использовать многократно, каждый раз получая независимую DOM-структуру:

function createCard(title) {
  const fragment = document.importNode(
    template.content,
    true
  );

  fragment.querySelector('.card__title').textContent =
    title;

  return fragment;
}

document.body.append(
  createCard('JavaScript'),
  createCard('TypeScript'),
  createCard('Node.js')
);

<template> не следует путать с обычным скрытым контейнером: hidden скрывает элемент визуально, но его содержимое остаётся частью документа:

<div hidden>
  <video src="video.mp4" autoplay></video>
</div>

У <template> содержимое хранится отдельно и становится частью активного DOM только после создания и вставки экземпляра:

<template id="video-template">
  <video src="video.mp4" autoplay></video>
</template>

Есть важный нюанс с событиями: обработчики, зарегистрированные через addEventListener(), при копировании DOM-структуры не переносятся:

const button =
  template.content.querySelector('.card__button');

button.addEventListener('click', handler);

const fragment = document.importNode(
  template.content,
  true
);

Обработчик необходимо назначить уже созданному экземпляру либо использовать делегирование событий:

const button =
  fragment.querySelector('.card__button');

button.addEventListener('click', handler);

На практике <template> подходит для карточек, строк таблицы, элементов списка, уведомлений и других повторяемых частей интерфейса с заранее известной структурой:

function createUser(user) {
  const fragment = document.importNode(
    template.content,
    true
  );

  fragment.querySelector('.card__title').textContent =
    user.name;

  return fragment;
}

🔥 <template> позволяет хранить HTML-заготовку вне активного DOM и создавать из неё независимые экземпляры по мере необходимости, оставляя структуру в HTML, а работу с данными и поведением — в js.

📣 Code Ready | #практика

ResizeObserver — отслеживание размеров элементов на уровне разметки!

Размер DOM-элемента не всегда связан с размером окна браузера. Компонент может менять свои размеры из-за изменения родительского контейнера, перестроения flex или grid-разметки, открытия боковой панели или изменения структуры интерфейса.

window.resize отслеживает только изменение размеров viewport и не позволяет узнать, что изменился конкретный элемент.

window.addEventListener(
  'resize',
  () => {
    updateLayout();
  }
);

Например, открытие sidebar может уменьшить рабочую область компонента с 1100px до 900px, при этом размер окна останется прежним.

Событие resize не сработает, хотя компоненту уже нужен перерасчёт. Для отслеживания размеров конкретных DOM-элементов используется ResizeObserver:

const observer = new ResizeObserver(([entry]) => {
  const width = entry.contentRect.width;

  renderChart(width);
});

observer.observe(chart);

Компонент получает информацию о собственном размере и не зависит от того, где он находится: внутри модального окна, боковой панели или полноэкранного блока.

При работе с ResizeObserver важно учитывать возможность цикла изменений. Если внутри обработчика менять размер наблюдаемого элемента, это может вызвать повторное изменение и новый вызов наблюдателя:

const observer = new ResizeObserver(([entry]) => {
  const width = entry.contentRect.width;

  element.style.width = `${width + 10}px`;
});

Браузер может обнаружить такой цикл и ограничить дальнейшую доставку уведомлений.

Обычно измерение и изменение интерфейса разделяют, например перенося обновление DOM в следующий кадр отрисовки:

const observer = new ResizeObserver(([entry]) => {
  const width = entry.contentRect.width;

  requestAnimationFrame(() => {
    updateUI(width);
  });
});

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

Наблюдатель должен иметь собственный жизненный цикл. Создание новых экземпляров при каждом обновлении компонента приводит к лишним подпискам:

const observer = new ResizeObserver(callback);

observer.observe(element);

// очистка
observer.disconnect();

Для современных браузеров доступны более точные способы измерения через contentBoxSize и borderBoxSize:

const observer = new ResizeObserver(([entry]) => {
  const width =
    entry.borderBoxSize?.[0]?.inlineSize ??
    entry.borderBoxSize?.inlineSize ??
    entry.contentRect.width;

  updateLayout(width);
});

borderBoxSize учитывает padding и border, поэтому подходит для случаев, когда расчёты должны соответствовать фактическому размеру блока.

ResizeObserver не заменяет CSS-механизмы адаптивности. Если изменение касается только отображения, лучше использовать container queries:

@container (min-width: 600px) {
  .card {
    display: grid;
  }
}

ResizeObserver нужен там, где размер элемента влияет на логику приложения: перерасчёт графиков, размеры canvas, виртуализация списков и другие операции, требующие данных о размере DOM-элемента в js.

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

📣 Code Ready | #практика

✍️ Актуальный разбор на Хабре: «Почему баги кроссбраузерности до сих пор никуда не исчезли»!

В этой статье:
• Разберётесь, почему один и тот же код может вести себя по-разному в Chromium, Safari и Firefox;
• Узнаете, как на отображение сайта влияют ОС, WebView, масштабирование, шрифты и особенности браузерных движков;
• Посмотрите на примеры багов и способы снизить вероятность проблем ещё до релиза.

🔊 Продолжай читать на Habr!

📣 Code Ready | #статья

overscroll-behavior — управление scroll chaining во вложенных контейнерах!

Модальные окна, боковые панели и чаты часто содержат собственные области прокрутки, независимые от основного документа.

<div class="modal">
  <div class="modal__content">
    <!-- длинный контент -->
  </div>
</div>

Чтобы содержимое стало прокручиваемым, элемент должен быть scroll container. Обычно для этого ограничивают его размер и задают соответствующее значение overflow:

.modal__content {
  max-height: 70vh;
  overflow-y: auto;
}

Когда прокрутка достигает границы контейнера, дальнейший пользовательский ввод может продолжить прокрутку в родительском scroll container. Этот механизм называется scroll chaining:

.modal__content {
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

overscroll-behavior: contain предотвращает scroll chaining за пределы текущего контейнера, сохраняя обычную прокрутку внутри него и локальные overscroll-эффекты.

Если интерфейс прокручивается только по вертикальной оси, точнее ограничить действие свойства этой осью:

.sidebar {
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

Такой вариант подходит для чатов, меню, сайдбаров, модальных окон и других компонентов с независимой вертикальной прокруткой:

.chat {
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

Свойство поддерживает три основных значения: auto сохраняет стандартное поведение, contain останавливает scroll chaining, а none дополнительно подавляет локальные overscroll-эффекты:

.element {
  overscroll-behavior: auto;
}

.element {
  overscroll-behavior: contain;
}

.element {
  overscroll-behavior: none;
}

Ограничение overscroll behavior также может влиять на браузерные действия на границе прокрутки, включая pull-to-refresh и жестовую навигацию в средах, где они поддерживаются.

Поведение можно контролировать и на уровне корневого scroll container, однако глобальное ограничение следует применять только при наличии конкретного требования интерфейса:

html,
body {
  overscroll-behavior-y: none;
}

overscroll-behavior не создаёт scroll container самостоятельно. Оно определяет поведение уже существующей области прокрутки при достижении её границ:

.panel {
  max-height: 500px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

Важно отличать управление scroll chaining от background scroll lock. Если при открытой модалке документ вообще не должен прокручиваться, блокировку фонового скролла необходимо реализовывать отдельно.

Для прокручиваемого содержимого модального окна достаточно следующей конфигурации:

.modal__content {
  max-height: min(700px, 80vh);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

После достижения границы .modal__content вертикальная прокрутка не передаётся родительскому scroll container.

🔥 overscroll-behavior декларативно контролирует scroll chaining без перехвата wheel и touchmove через js. Для независимых вертикальных scroll containers в большинстве случаев достаточно overscroll-behavior-y: contain.

📣 Code Ready | #практика

🗂 Пакет Безопасности — папка, которую админ собирал более 10 лет

⚡️ Слитые курсы по IT и ИБ
⚡️ Сервисы и тулзы для приватности
⚡️ Инструкции и шпаргалки
⚡️ Редкие книги и утилиты
⚡️ Гайды написанные автором

Большинство собирает такую базу годами.
Здесь все отсортировали и разбили в одном канале
(первое сообщение в закрепе)

ссылка действует 48 часов

📌Подписывайся: @package_security

beforeinput — перехватываем ввод до изменения значения поля

Событие input срабатывает уже после изменения значения поля. Если нужно запретить определённые символы, приходится удалять их из готового текста. При этом может сбиваться позиция курсора, особенно при редактировании середины строки.

beforeinput позволяет перехватить операцию заранее и отменить её до изменения значения. Например, через input пробелы обычно удаляют так:

const input = document.querySelector('#username');

input.addEventListener('input', () => {
  input.value = input.value.replace(/\s/g, '');
});

Вместо исправления значения можно проверить предстоящее действие:

input.addEventListener('beforeinput', (event) => {
  console.log(event.inputType);
  console.log(event.data);
});

Свойство inputType показывает тип операции: insertText, insertFromPaste, deleteContentBackward и другие. А data содержит добавляемый текст, если он доступен.

Теперь запретим ввод пробелов:

input.addEventListener('beforeinput', (event) => {
  if (!event.cancelable) return;

  if (
    event.inputType === 'insertText' &&
    event.data?.includes(' ')
  ) {
    event.preventDefault();
  }
});

При обычном наборе пробел не попадёт в поле. Но вставку из буфера обмена этот код не блокирует. Кроме того, некоторые операции, например при вводе через IME, нельзя отменить. Поэтому проверка итогового значения всё равно нужна.

С ограничением длины есть ещё один нюанс — проверка value.length >= 10 заблокирует ввод даже при замене выделенного текста, если поле уже заполнено.

Через beforeinput можно рассчитать длину с учётом выделения:

input.addEventListener('beforeinput', (event) => {
  if (!event.cancelable || event.inputType !== 'insertText') {
    return;
  }

  const value = input.value;
  const start = input.selectionStart ?? 0;
  const end = input.selectionEnd ?? start;

  const nextLength =
    value.length -
    (end - start) +
    (event.data?.length ?? 0);

  if (nextLength > 10) {
    event.preventDefault();
  }
});

Теперь замена выделенного фрагмента разрешена, если итоговая длина не превышает лимит. Пример рассчитан на обычный ввод в type="text". Для стандартного ограничения пользовательского ввода, включая вставку, проще использовать maxlength="10".

При этом String.length и maxlength считают единицы UTF-16, поэтому эмодзи может занимать больше одной единицы. Программное изменение значения maxlength не ограничивает.

В contenteditable событие позволяет работать и с диапазонами DOM:

const editor = document.querySelector('#editor');

editor.addEventListener('beforeinput', (event) => {
  console.log(event.inputType);
  console.log(event.getTargetRanges());
});

Метод getTargetRanges() возвращает массив StaticRange с диапазонами, которые затронет предполагаемое редактирование. Для обычных input и textarea он возвращает пустой массив — там выделение получают через selectionStart и selectionEnd в поддерживаемых типах полей.

Также стоит помнить, что присваивание input.value = 'new value' не вызывает автоматически ни beforeinput, ни input. Поэтому проверка данных на сервере остаётся обязательной.

🔥 beforeinput позволяет контролировать конкретную операцию редактирования до изменения текста, а не исправлять результат постфактум. Удобно для масок ввода, сложных ограничений и текстовых редакторов, где важно сохранить курсор и выделение.

📣 Code Ready | #практика

Event.composedPath() — определяем путь распространения события в DOM и Shadow DOM

Метод Event.composedPath() возвращает массив объектов, через которые проходит событие. В отличие от event.target, он позволяет получить весь доступный путь распространения, включая узлы открытого Shadow DOM:

document.addEventListener('click', (event) => {
  console.log('Target:', event.target);
  console.log('Path:', event.composedPath());
});

Для обычного клика путь может включать исходный элемент, его предков, document и window. Это полезно при делегировании событий, особенно когда интерактивные элементы содержат вложенные узлы.

Например, при нажатии на иконку внутри кнопки event.target будет указывать на span, а не на саму кнопку:

<button class="save-button">
  <span class="icon">✓</span>
  Save
</button>

Через composedPath() можно найти кнопку независимо от того, на какой вложенный элемент пришёлся клик:

document.addEventListener('click', (event) => {
  const button = event.composedPath().find(
    node =>
      node instanceof Element &&
      node.matches('.save-button')
  );

  if (button) {
    console.log('Save:', button);
  }
});

Метод хорош при работе с Shadow DOM. Из-за механизма retargeting внешний обработчик может получить в event.target хост компонента вместо внутреннего элемента:

document.addEventListener('click', (event) => {
  console.log(event.target);
  console.log(event.composedPath()[0]);
});

Для клика внутри открытого Shadow DOM composedPath()[0] позволяет получить исходный внутренний узел. При этом закрытый Shadow DOM (mode: 'closed') не раскрывает свои внутренние элементы внешним обработчикам.

Определение нажатий вне компонента — проверка пути события учитывает открытые границы Shadow DOM, которые обычный contains() не пересекает:

const panel = document.querySelector('.panel');

document.addEventListener('pointerdown', (event) => {
  if (panel && !event.composedPath().includes(panel)) {
    console.log('Pointer outside panel');
  }
});

Важно учитывать, что composedPath() возвращает путь конкретного события, а не выполняет обход DOM-дерева. Его состав зависит от типа события и границ Shadow DOM.

🔥 Event.composedPath() полезен для делегирования событий, работы с Web Components и корректной обработки взаимодействий через Shadow DOM.

📣 Code Ready | #практика