👩‍💻 Удобный тег, объединяющий элементы навигации по сайту!

В контейнер <nav> помещаются основные ссылки, по которым пользователь сможет быстро перейти на нужный раздел сайта.

В <nav> обычно размещают:

• главное меню сайта;
• навигацию по разделам;
• оглавление статьи или документа;
• ссылки для перехода между связанными страницами.

При этом не каждую группу ссылок стоит помещать в <nav>. Тег предназначен прежде всего для основных навигационных блоков, а обычный набор вспомогательных ссылок может оставаться без него.

📣 Code Ready | #атрибут

👨‍💻 MilaNick materials — большая подборка материалов для frontend-разработчиков!

В репозитории собраны полезные ресурсы по веб-разработке: HTML, CSS, JavaScript, React, Node.js, Webpack, Git, тестирование и архитектура frontend-приложений. Есть статьи, курсы, видео, книги, разборы задач и практические материалы по асинхронности, ООП, алгоритмам, паттернам проектирования и созданию реальных проектов.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

Не давай стилям компонента протекать во вложенные компоненты!

Частая проблема большого UI: стилизуем весь контент внутри компонента, а потом эти правила неожиданно задевают другой компонент, вложенный внутрь.

<article class="article">
  <p>Текст статьи</p>
  <div class="widget"><p>Текст виджета</p></div>
</article>

Обычный селектор по вложенности затронет оба <p>:

.article p {
  margin-block: 1em;
}

С @scope можно задать не только начало области, но и место, перед которым действие правил заканчивается.

@scope (.article) to (.widget) {
  p { margin-block: 1em; }
}

Первый <p> получит стиль, а <p> внутри .widget — уже нет. .widget здесь является нижней границей scope, поэтому элементы внутри неё исключаются из этой области.

Это особенно удобно для CMS-контента, markdown, rich-text и дизайн-систем, где внутрь одного компонента могут попадать другие независимые компоненты.

И не приходится усложнять селекторы:

.article > p,
.article > section > p {
  /* попытка описать структуру DOM */
}

Вместо описания всей структуры мы задаём архитектурную границу:

@scope (.content) to (.component) {
  a { text-decoration: underline; }
}

🔥 @scope специально предназначен для ограничения селекторов конкретным DOM-поддеревом без наращивания специфичности и жёсткой привязки CSS к структуре разметки.

📣 Code Ready | #совет

👩‍💻 Адаптирует картинки под разные устройства и поддерживаемые форматы!

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

Внутри <picture> обычно размещают:

• <source> — задаёт альтернативные версии изображения;
• srcset — указывает файл изображения;
• media — определяет условие выбора, например ширину экрана;
• type — указывает MIME-тип формата, например image/avif;
• <img> — служит основным или резервным вариантом изображения.

Браузер анализирует каждый тег <source> по порядку, останавливается на первом подходящем под текущие условия и отображает картинку из атрибута srcset. Другие теги не анализируются. Если тег <picture> не поддерживается браузером или ни один из тегов <source> не подходит под условия, то отображается картинка из тега <img>.

📣 Code Ready | #атрибут

Element.scrollIntoView() — управление прокруткой без ручной работы с координатами.

scrollIntoView() в основном используют как простой переход к элементу, но в сложных интерфейсах важно понимать, какие scroll-контейнеры браузер будет изменять и как управлять областью воздействия.

По умолчанию метод пытается сделать элемент видимым во всех подходящих прокручиваемых предках — включая вложенные scroll-контейнеры и viewport, если это необходимо.

element.scrollIntoView({
  behavior: 'smooth',
  block: 'nearest'
});

В новых реализациях браузеров появился параметр container, который позволяет ограничить область прокрутки.

element.scrollIntoView({
  behavior: 'smooth',
  block: 'nearest',
  container: 'nearest'
});

container: 'nearest' ограничивает область прокрутки ближайшим scroll-контейнером вместо изменения всех доступных областей прокрутки.

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

container — относительно новый параметр с ограниченной поддержкой браузерами. Перед использованием в продакшн стоит проверить поддержку. В браузерах без поддержки параметр может быть проигнорирован.

А также важно не путать два разных nearest: container: 'nearest' отвечает за какая область прокрутки может изменяться.
block: 'nearest' отвечает за как элемент будет позиционироваться внутри видимой области.

activeItem.scrollIntoView({
  block: 'nearest',
  inline: 'nearest'
});

block: 'nearest' использует стратегию минимального смещения. В отличие от start или center, браузер не пытается принудительно установить элемент в определённую позицию, а выполняет только необходимую прокрутку, чтобы элемент стал видимым. block обычно управляет вертикальной осью, а inline — горизонтальной.

Во многих случаях для управления расстоянием до края viewport или scroll-контейнера не требуется вручную считать координаты через getBoundingClientRect(). Эти правила можно описать через CSS:

.item {
  scroll-margin-block: 16px;
}

.list {
  overflow-y: auto;
  scroll-padding-block: 16px;
}

scroll-margin задаёт внешний отступ для самого элемента при прокрутке.

scroll-padding определяет внутреннюю область видимости scroll-контейнера, внутри которого выполняется прокрутка. Это позволяет учитывать фиксированные панели, sticky-header и другие элементы интерфейса декларативно. Пример:

section.scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});

Теперь браузер учитывает заданные CSS-правила при вычислении конечной позиции.

🔥 В результате scrollIntoView() становится инструментом не только для простых якорных переходов, а для построения сложной навигации внутри интерфейсов с большим количеством вложенных scroll-областей.

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

requestSubmit() — программная отправка формы с сохранением нативного поведения!

В HTML-формах существует два разных подхода к программному запуску отправки. Метод submit() выполняет непосредственную отправку формы, но отличается от пользовательского сценария: он не запускает constraint validation и не генерирует событие submit.

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

form.submit();

Если форма содержит обработчик submit, вызванный через submit(), он не будет выполнен. Это принципиальное отличие от реального действия пользователя через submit-кнопку.

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

form.addEventListener('submit', (event) => {
  event.preventDefault();

  console.log('Form submitted');
});

form.submit();

Для случаев, когда отправка инициируется js, но должна сохранить стандартную модель поведения HTML-форм, используется метод requestSubmit().

form.requestSubmit();

requestSubmit() запускает стандартный алгоритм отправки формы: браузер выполняет встроенную constraint validation, а после успешной проверки генерирует событие submit.

Рассмотрим форму с обязательным email-полем. Если значение отсутствует или не проходит проверку типа email, обработчик submit вызван не будет, поскольку браузер остановит процесс на этапе валидации.

<form id="profile">
  <input
    name="email"
    type="email"
    required
  >

  <button type="submit">
    Save
  </button>
</form>

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

const form = document.querySelector('#profile');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const data = new FormData(form);

  console.log(Object.fromEntries(data));
});

form.requestSubmit();

В отличие от submit(), метод requestSubmit() также позволяет передать конкретную submit-кнопку. Это важно для форм, где разные кнопки отправки имеют собственные параметры или меняют поведение отправки.

const saveButton = form.querySelector('.save');

form.requestSubmit(saveButton);

Переданная кнопка должна быть submit-элементом, связанным с этой формой. В этом случае учитываются такие параметры кнопки, как name, value, formaction, formenctype, formmethod и другие submit-настройки.

<form id="actions">
  <input name="title" value="Example">

  <button
    class="save"
    type="submit"
    name="action"
    value="save"
  >
    Save
  </button>
</form>

В реальном приложении выбор конкретной submit-кнопки позволяет управлять поведением одной формы из разных сценариев отправки, сохраняя стандартную обработку браузера.

const form = document.querySelector('#actions');
const saveButton = form.querySelector('.save');

form.requestSubmit(saveButton);

На практике requestSubmit() применяется, когда действие пользователя необходимо инициировать из js, но при этом требуется сохранить полный жизненный цикл HTML-формы: валидацию браузера, событие submit и стандартную обработку submit-кнопки.

🔥 form.submit() и form.requestSubmit() решают разные задачи. Первый вариант выполняет прямую отправку без validation и события submit, второй запускает полноценный процесс отправки, максимально близкий к пользовательскому взаимодействию с формой. Если программная отправка должна работать так же, как обычное нажатие submit-кнопки, используйте requestSubmit().

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