Code Ready | Frontend
رفتن به کانال در Telegram
Авторский канал по Frontend разработке. Ресурсы, гайды, задачи, шпаргалки. Информация ежедневно пополняется! Cотрудничество: @energy_c РКН: https://clck.ru/3NJCKs
نمایش بیشتر📈 تحلیل کانال تلگرام Code Ready | Frontend
کانال Code Ready | Frontend (@code_ready) در بخش زبانی روسی بازیگری فعال است. در حال حاضر جامعه شامل 21 657 مشترک است و جایگاه 5 964 را در دسته فناوری و برنامه‌ها و رتبه 30 059 را در منطقه روسيا دارد.
📊 شاخص‌های مخاطب و پویایی
از زمان ایجاد در невідомо، پروژه رشد سریعی داشته و 21 657 مشترک جذب کرده است.
بر اساس آخرین داده‌ها در تاریخ 06 اکتبر, 2026، کانال فعالیت پایداری دارد. در ۳۰ روز گذشته تغییر اعضا برابر 35 و در ۲۴ ساعت گذشته برابر -6 بوده و همچنان دسترسی گسترده‌ای حفظ شده است.
- وضعیت تأیید: تأیید نشده
- نرخ تعامل (ER): میانگین تعامل مخاطب 7.57% است و در ۲۴ ساعت نخست پس از انتشار، محتوا معمولاً 4.51% واکنش نسبت به کل مشترکان کسب می‌کند.
- دسترسی پست‌ها: هر پست به طور میانگین 1 640 بازدید دریافت می‌کند. در اولین روز معمولاً 977 بازدید جمع‌آوری می‌شود.
- واکنش‌ها و تعامل: مخاطبان به‌طور فعال حمایت می‌کنند؛ میانگین واکنش به هر پست 20 است.
- علایق موضوعی: محتوا بر موضوعات کلیدی مانند css, браузер, интерфейс, загрузка, api تمرکز دارد.
📝 توضیح و سیاست محتوایی
نویسنده این فضا را محل بیان دیدگاه‌های شخصی توصیف می‌کند:
“Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!
Cотрудничество: @energy_c
РКН: https://clck.ru/3NJCKs”
به لطف به‌روزرسانی‌های پرتکرار (آخرین داده در تاریخ 07 اکتبر, 2026)، کانال همواره به‌روز و دارای دسترسی بالاست. تحلیل‌ها نشان می‌دهد مخاطبان به‌طور فعال با محتوا تعامل دارند و آن را به نقطه اثرگذاری مهم در دسته فناوری و برنامه‌ها تبدیل کرده‌اند.
21 657
مشترکین
-624 ساعت
-207 روز
+3530 روز
در حال بارگیری داده...
کانال‌های مشابه
![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.tlmtr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=96&q=75){kind=small}
ابر برچسب‌ها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
اکتبر '26اکتبر '26
اکتبر '26
+31
در 31 کانال‌ها
سپتامبر '26
+345
در 179 کانال‌ها
Get PRO
اوت '26
+587
در 299 کانال‌ها
Get PRO
ژوئیه '26
+63
در 38 کانال‌ها
Get PRO
ژوئن '26
+123
در 19 کانال‌ها
Get PRO
مه '26
+159
در 31 کانال‌ها
Get PRO
آوریل '26
+90
در 31 کانال‌ها
Get PRO
مارس '26
+234
در 68 کانال‌ها
Get PRO
فوریه '26
+220
در 22 کانال‌ها
Get PRO
ژانویه '26
+1 062
در 125 کانال‌ها
Get PRO
دسامبر '25
+433
در 124 کانال‌ها
Get PRO
نوامبر '25
+1 202
در 266 کانال‌ها
Get PRO
اکتبر '25
+733
در 100 کانال‌ها
Get PRO
سپتامبر '25
+1 126
در 108 کانال‌ها
Get PRO
اوت '25
+1 117
در 240 کانال‌ها
Get PRO
ژوئیه '25
+897
در 55 کانال‌ها
Get PRO
ژوئن '25
+1 017
در 87 کانال‌ها
Get PRO
مه '25
+2 027
در 323 کانال‌ها
Get PRO
آوریل '25
+117
در 1 کانال‌ها
Get PRO
مارس '25
+130
در 2 کانال‌ها
Get PRO
فوریه '25
+125
در 0 کانال‌ها
Get PRO
ژانویه '25
+130
در 3 کانال‌ها
Get PRO
دسامبر '24
+234
در 5 کانال‌ها
Get PRO
نوامبر '24
+259
در 7 کانال‌ها
Get PRO
اکتبر '24
+2 497
در 247 کانال‌ها
Get PRO
سپتامبر '24
+3 493
در 269 کانال‌ها
Get PRO
اوت '24
+337
در 2 کانال‌ها
Get PRO
ژوئیه '24
+140
در 1 کانال‌ها
Get PRO
ژوئن '24
+793
در 7 کانال‌ها
Get PRO
مه '24
+2 442
در 26 کانال‌ها
Get PRO
آوریل '24
+2 945
در 37 کانال‌ها
Get PRO
مارس '24
+1 802
در 42 کانال‌ها
Get PRO
فوریه '24
+1 591
در 37 کانال‌ها
Get PRO
ژانویه '24
+4 288
در 28 کانال‌ها
Get PRO
دسامبر '23
+795
در 23 کانال‌ها
Get PRO
نوامبر '23
+693
در 31 کانال‌ها
Get PRO
اکتبر '23
+443
در 12 کانال‌ها
| تاریخ | رشد مشترکین | اشارات | کانال‌ها | |
| 07 اکتبر | +2 | |||
| 06 اکتبر | +6 | |||
| 05 اکتبر | +4 | |||
| 04 اکتبر | +7 | |||
| 03 اکتبر | +5 | |||
| 02 اکتبر | +1 | |||
| 01 اکتبر | +6 |
پست‌های کانال
+4
📱 Iterator API — управление итерацией и ленивые преобразования!
Шпаргалка по основным возможностям Iterator API: ручное управление итерацией, досрочное завершение и передача ошибок, создание iterable-объектов и ленивые преобразования через Iterator Helpers. Полезная база для углубления знаний об итераторах, генераторах и обработке последовательностей данных.
📣 Code Ready | #шпора| 2 | <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 | #практика | 791 |
| 3 |  🎓 Как гарантированно войти в сферу кибербезопасности с официальным дипломом?
Самостоятельное обучение в ИБ - это месяцы хаоса и разрозненных роликов с YouTube. Покупка курсов по отдельности на популярных платформах легко переваливает за 300 000 ₽.
🔥CyberYozh Academy собрали цельный карьерный трек в один пак: 5 фундаментальных программ + официальный Диплом системного администратора за 50 000 ₽ (вместо ~250 000 ₽)
Что входит в программу:
▪️ Linux CyberPunk - системное администрирование с выдачей диплома, открывающего двери в корпоративный сектор.
▪️ SQL для хакера - глубокое понимание архитектуры баз данных и векторов атак.
▪️ HackerPoint - продвинутый уровень пентеста и анализа уязвимостей.
▪️ HackerPoint (Blue vs Red Team) - база сетевой безопасности, защиты и атак.
▪️ AI-помощники на Python - автоматизация рутины безопасника при помощи нейросетей.
Вы получаете законченную квалификацию: от администрирования защищенных облачных решений до проведения тестов на проникновение.
⚠️ Обратите внимание: Из-за персональной проверки заданий и официального оформления дипломов на каждый поток действует жесткий лимит - не более 15 мест.
🦔Отправь промокод FrontendReady в чат с менеджером, чтобы закрепить за собой скидку и узнать подробности:
👉@cyacademy_support | 927 |
| 4 |  👩💻 Создаём плавные анимации при переходе между страницами!
Правило @view-transition позволяет управлять поведением View Transition API при навигации между документами. С его помощью можно включить плавные переходы между страницами без необходимости вручную запускать их через JS.
Основные параметры:
• navigation: auto — включает переходы при навигации между страницами;
• types — задаёт типы переходов, которые затем можно использовать для разных анимаций.
@view-transition полезно для многостраничных сайтов: смену страниц можно сделать визуально плавной, а сами анимации настроить через CSS-псевдоэлементы View Transition.
📣 Code Ready | #свойство | 1 054 |
| 5 |  Не используй 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 | #совет | 1 121 |
| 6 |  Как оплачивать зарубежные сервисы в 2026 году?
Можно бегать между посредниками и бояться блокировок после оплаты, а можно выпустить международную карту Lumio Pay и пользоваться любимыми сервисами без рисков.
— выпуск карты за 2 минуты
— лучший курс пополнения на рынке (у конкурентов на 20% выше)
— пополнение рублями или криптой
— чистые BIN карт, оплата без риска блокировок
Пока все ищут идеальное решение, оно у тебя перед глазами: @LumioPay | 1 194 |
| 7 |  😎 CSS Interview Cheatsheet — 100 вопросов для подготовки к собеседованиям!
В репозитории собраны вопросы по CSS и CSS-фреймворкам, которые помогают проверить не только знание синтаксиса, но и понимание более сложных нюансов верстки и стилизации. Удобно использовать для самопроверки и поиска тем, которые стоит повторить перед техническим интервью.
Оставляю ссылочку: GitHub 📱
📣 Code Ready | #репозиторий | 1 277 |
| 8 |  🤔 Типичный верстальщик — база материалов по frontend-разработке!
Сайт с большой подборкой статей, руководств и справочных материалов для веб-разработчиков. Основное внимание уделено HTML, CSS, JavaScript и современной вёрстке — от базовых принципов до практических приёмов, которые используются в проектах. На сайте можно найти материалы по Flexbox и Grid, адаптивной вёрстке, типографике, доступности, оптимизации сайтов, работе с изображениями, CSS-анимациям и др.
📌 Оставляю ссылочку: tpverstak.ru
📣 Code Ready | #сайт | 1 833 |
| 9 |  👩💻 Псевдокласс, который отражает состояние чекбокса или радиокнопки!
Псевдокласс :checked в CSS применяется к отмеченным элементам формы — например, checkbox и radio. Он позволяет менять их оформление в зависимости от текущего состояния.
Примеры использования:
• менять цвет выбранного элемента;
• создавать кастомные чекбоксы и радиокнопки;
• стилизовать связанные элементы через CSS-селекторы;
• создавать простые переключатели без JavaScript.
По задумке должен работать и с <option>, но поскольку выпадающий список сильно отличается от системы к системе и от браузера к браузеру, то пока работает только в браузере Chrome на Windows.
📣 Code Ready | #свойство | 1 856 |
| 10 |  ❤️ iu5git/Web — практический курс по созданию полноценного веб-приложения!
В репозитории собраны материалы по всему циклу разработки: от проектирования архитектуры и базы данных до создания REST API, frontend-приложения на React, авторизации, Docker-развертывания и подготовки технической документации. Отличный материал для изучения разработки.
Оставляю ссылочку: GitHub 📱
📣 Code Ready | #репозиторий | 1 765 |
| 11 | Stacking context — управление слоями интерфейса через CSS-контексты!
z-index не является глобальной системой нумерации слоёв страницы. Браузер строит дерево stacking context, где каждый контекст отрисовывается независимо. Значение z-index сравнивается только внутри текущего контекста и не позволяет дочернему элементу напрямую влиять на соседние контексты.
Например, z-index: 999999 у вложенного элемента не гарантирует, что он окажется выше элемента с меньшим значением z-index, если родительский stacking context находится ниже в порядке отрисовки:
.card {
position: relative;
z-index: 1;
}
.modal {
position: absolute;
z-index: 999999;
}
.header {
position: relative;
z-index: 10;
}
Если .modal находится внутри .card, браузер сначала сравнивает .card и .header в родительском stacking context, а уже затем учитывает внутренние слои .card. Высокий z-index дочернего элемента не может изменить положение родительского контекста.
Stacking context создаётся не только через position и z-index. Многие CSS-свойства меняют модель композиции слоёв и создают отдельный контекст наложения:
.component {
opacity: 0.99;
transform: translateZ(0);
filter: blur(5px);
isolation: isolate;
contain: paint;
}
В реальных проектах чаще всего проблемы возникают у модальных окон, dropdown, popover и tooltip-компонентов, когда один из родителей создаёт собственный stacking context:
.layout {
transform: translate3d(0, 0, 0);
}
.dropdown {
position: absolute;
z-index: 999999;
}
В такой ситуации увеличение z-index не помогает, потому что элемент остаётся внутри ограниченного контекста .layout.
Отдельный случай — position: fixed. Обычно такой элемент привязан к viewport, но некоторые свойства родителей изменяют его containing block:
.page {
transform: translateZ(0);
}
.modal {
position: fixed;
inset: 0;
z-index: 10000;
}
Теперь modal рассчитывает позицию относительно .page, а не viewport. Поэтому проблема решается не изменением z-index, а изменением структуры DOM.
Для глобальных интерфейсных слоёв используют отдельный DOM-слот вне основного дерева приложения. Такой подход лежит в основе portal-механизма современных UI-библиотек:
<body>
<div id="app"></div>
<div id="overlay-root"></div>
</body>
Также необходимо учитывать, что не все проблемы перекрытия связаны со stacking context. Например, overflow: hidden может обрезать дочерний элемент независимо от его z-index:
.container {
overflow: hidden;
}
.dropdown {
position: absolute;
z-index: 1000;
}
При отладке проблем со слоями необходимо проверять всю цепочку родителей: наличие stacking context, ограничения overflow, изменённый containing block и фактическое расположение элементов в DOM.
🔥 z-index — это только один параметр системы композиции браузера. В сложных интерфейсах реальный порядок отображения определяется структурой stacking context.
📣 Code Ready | #практика | 1 395 |
| 12 | У рекомендаций тоже случаются ошибки
Только вы их не увидите в привычном виде — просто человек видит не тот товар или не тот пост, и это нигде не фиксируется как отдельный случай. Дело в том, что здесь работает не набор точных правил, а система, которая училась на данных и сама решает, что показать.
30 сентября в 18:00 мск пройдет бесплатный вебинар karpovꓸcourses и AI Talent Hub ИТМО «Как устроена ваша лента: машинное обучение в рекомендательных системах».
Разберут:
- как из действий пользователя собирается персональная лента;
- какую роль в этом играют данные и машинное обучение;
- как на реальных примерах устроены такие системы внутри.
Спикеры — Юлия Лим (менеджер по продукту программ ДПО AI Talent Hub, ИТМО) и Денис Амбросов, инженер по машинному обучению, стрим-лид направления модельных рисков и рисков систем искусственного интеллекта.
Регистрируйтесь по ссылке — https://clc.to/erid_2W5zFGWFpTb
Запись эфира придет всем зарегистрированным.
Реклама. ООО «КАРПОВ КУРСЫ». ИНН 7811764627. erid: 2W5zFGWFpTb | 1 350 |
| 13 |  👩💻 Псевдоэлемент для стилизации встроенной кнопки выбора файла внутри <input type="file">.
::file-selector-button — псевдоэлемент, представляющий кнопку внутри поля <input type="file">. Позволяет стилизовать её так же, как любую кнопку интерфейса: менять фон, бордеры, скругления, состояния наведения/фокуса и другие стили.
С его помощью можно настроить:
• background — цвет фона;
• color — цвет текста;
• border — рамку кнопки;
• padding — внутренние отступы;
• font — оформление текста.
Для лучшей доступности обеспечьте заметные стили фокуса (outline, outline-offset).
📣 Code Ready | #свойство | 1 561 |
| 14 |  🤔 Неожиданно интересная статья на Хабре: «Сложнейшая проблема компьютерных наук: центрирование»!
В этой статье:
• Разберётесь, почему Flexbox и Grid не гарантируют визуально идеальное выравнивание;
• Узнаете, как метрики шрифтов и высота строки влияют на положение текста;
• Посмотрите, почему иконки рядом с текстом часто «съезжают» и как это исправлять на практике.
🔊 Продолжай читать на Habr!
📣 Code Ready | #статья | 1 835 |
| 15 | scheduler.yield() — разбиваем долгую JS-задачу, чтобы не блокировать интерфейс!
Длительная синхронная работа на main thread блокирует выполнение других задач. Даже обычный цикл может превратиться в длительную задачу, если обработка элементов достаточно тяжёлая:
function processItems(items) {
for (const item of items) {
renderItem(item);
}
}
Классический способ разбить такую работу — планировать продолжение через setTimeout(). В современных браузерах для добровольной передачи управления планировщику есть более специализированный механизм — scheduler.yield():
async function processItems(items) {
for (let i = 0; i < items.length; i++) {
renderItem(items[i]);
if ((i + 1) % 100 === 0) {
await scheduler.yield();
}
}
}
scheduler.yield() приостанавливает текущую async-функцию и планирует её продолжение как отдельную задачу, давая браузеру возможность выполнить другую ожидающую работу на main thread:
await scheduler.yield();
// выполнение продолжится позже
Это принципиально отличается от await Promise.resolve(): resolved Promise продолжает выполнение через microtask queue и не обеспечивает полноценную передачу управления event loop для выполнения следующей задачи:
await Promise.resolve();
// продолжение выполняется как microtask
Делать yield() после каждой итерации не стоит: каждая передача управления создаёт дополнительные накладные расходы. Размер порции работы зависит от стоимости конкретных операций, поэтому 100 или 200 итераций — лишь пример, а не универсальное значение.
if ((i + 1) % CHUNK_SIZE === 0) {
await yieldToMain();
}
Поддержка scheduler.yield() пока не универсальна, поэтому стоит предусмотреть запасной вариант:
function yieldToMain() {
if (globalThis.scheduler?.yield) {
return scheduler.yield();
}
return new Promise(resolve => setTimeout(resolve, 0));
}
🔥 scheduler.yield() полезен для кооперативного планирования длительной работы на main thread: обработки больших наборов данных и постепенного обновления сложного UI. Для тяжёлых вычислений, интенсивно использующих процессор, Worker остаётся предпочтительным решением: yield() не переносит вычисления с main thread, а только разбивает их выполнение во времени.
📣 Code Ready | #практика | 2 114 |
| 16 |  Как получить оффер, лежа на пляже?
История Маши - frontend-разработчицы.
2 месяца она искала работу сама:
читала вакансии, сравнивала требования, откликалась вручную.
Потом подключила ИИ-ассистента Софи…
и уехала в отпуск.
Пока Маша отдыхала, Софи сделала 200 откликов.
Результат:
• 15 интервью
• 7 тестовых
• оффер
Самое неожиданное - зарплата почти в 2 раза выше, чем была указана в резюме.
Зайти на 3 бесплатных дня в Софи можно уже сейчас.
Регистрируйся здесь. | 1 074 |
| 17 |  +4📱 Reflect API — низкоуровневые операции над объектами!
Разбираем Reflect API и его основные методы для чтения, изменения, проверки и удаления свойств, вызова функций, создания экземпляров, работы с дескрипторами и получения собственных ключей объекта. Reflect применяется для метапрограммирования, низкоуровневой работы с объектами и реализации Proxy-логики с явным результатом операций.
📣 Code Ready | #шпора | 2 081 |
| 18 |  👩💻 Можно ли изменить стиль поля, которое браузер заполнил автоматически?
:autofill — псевдокласс, который находит поля формы, куда браузер сам подставил сохранённые данные: адрес, телефон, почту. Нужен, чтобы подсвеченные браузером поля не выбивались из дизайна формы.
Как работает автозаполнение:
• срабатывает только по инициативе браузера, через JavaScript вызвать его нельзя;
• браузер может заполнить сразу несколько полей формы;
• поле остаётся :autofill, пока пользователь не изменит значение;
• после ручного редактирования оно больше не считается автозаполненным.
Не полагайтесь на :autofill для валидации: это лишь визуальное состояние, а не факт корректности данных.
📣 Code Ready | #свойство | 1 822 |
| 19 |  👩💻 Тег для перевода данных с человеческого языка на компьютерный!
Тег <data> позволяет показать пользователю обычный текст и одновременно связать его с другим значением, которое удобно использовать в скриптах или при обработке данных.
В <data> используются:
• содержимое тега — текст, который видит пользователь;
• value — машиночитаемое значение;
• JavaScript — при необходимости может получить значение через свойство value.
Элемент <data> стоит использовать, когда вы не хотите выделять элементы на вёрстке, например, при помощи <div> или <span>, но вам нужно связать текст с внутренним ID или значением, который вы будете использовать при обработке запросов пользователя.
📣 Code Ready | #атрибут | 1 742 |
| 20 | inert — отключение целой области интерфейса без обхода дочерних элементов!
Иногда часть интерфейса требуется временно исключить из взаимодействия: например, при открытии выдвижной панели или на время операции, когда фоновый интерфейс не должен принимать пользовательский ввод.
Управлять состоянием каждого элемента отдельно можно, но такой подход требует учитывать разные типы элементов и механизмы взаимодействия:
button.disabled = true;
input.disabled = true;
link.tabIndex = -1;
disabled применим не ко всем HTML-элементам, а изменение tabindex решает только задачу фокуса. Для блокировки целой области документа существует глобальный атрибут inert:
<main id="content">
<button>Сохранить</button>
<a href="/profile">Профиль</a>
<input type="text">
</main>
Состоянием можно управлять через HTMLElement.inert, без поиска и изменения каждого интерактивного элемента внутри контейнера:
const content = document.querySelector('#content');
content.inert = true;
После установки inert контейнер и его потомки в плоском дереве (flat tree) не могут получать фокус. Это относится и к программному вызову focus():
content.inert = true;
document.querySelector('#content input').focus();
Пользовательская активация также блокируется: клик пользователя по кнопке внутри inert-области не приводит к click на этой кнопке. Программный element.click() при этом следует рассматривать отдельно:
const button = document.querySelector('#content button');
button.addEventListener('click', () => {
console.log('click');
});
content.inert = true;
В отличие от inert, pointer-events: none влияет на определение элемента под указателем, но сам по себе не исключает элементы из последовательной навигации с клавиатуры:
.content {
pointer-events: none;
}
inert действует шире: элементы не получают фокус, пользовательское взаимодействие блокируется, а содержимое исключается из дерева доступности.
Например, основной интерфейс можно деактивировать при открытии выдвижной панели, расположенной вне inert-контейнера:
<main id="content">
<!-- основной интерфейс -->
</main>
<aside id="drawer" hidden>
<!-- выдвижная панель -->
</aside>
Состояние всего фонового интерфейса переключается одной операцией независимо от количества элементов внутри main:
function openDrawer() {
content.inert = true;
drawer.hidden = false;
}
function closeDrawer() {
content.inert = false;
drawer.hidden = true;
}
Для модальных интерфейсов есть <dialog>. Вызов showModal() помещает диалог в верхний слой (top layer), а остальную часть документа браузер делает inert автоматически:
const dialog = document.querySelector('dialog');
dialog.showModal();
Сам inert не задаёт визуальное состояние заблокированной области. При необходимости оно оформляется отдельно через CSS:
[inert] {
opacity: 0.6;
}
🔥 inert позволяет исключить целую область документа из взаимодействия без ручного управления disabled, tabindex и состоянием каждого вложенного элемента.
📣 Code Ready | #практика | 1 431 |
