Frontend | Вопросы собесов
Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky
Больше📈 Аналитический обзор Telegram-канала Frontend | Вопросы собесов
Канал Frontend | Вопросы собесов (@easy_javascript_ru) языкового сегмента Русский является активным участником. Сейчас сообщество объединяет 18 272 подписчиков, занимая 7 345 место в категории Технологии и приложения и 36 940 место в регионе Россия.
📊 Показатели аудитории и динамика
С момента создания невідомо проект демонстрирует стремительный рост, собрав аудиторию из 18 272 подписчиков.
Согласно последним данным от 15 июня, 2026, канал показывает стабильную активность. За последние 30 дней изменение числа участников составило -134, а за последние 24 часа — -7, при этом общий охват остаётся высоким.
- Статус верификации: Не верифицирован
- Уровень вовлечённости (ER): Средний показатель вовлечённости аудитории составляет 9.73%. В первые 24 часа после публикации контент обычно набирает 5.72% реакций от общего числа подписчиков.
- Охват публикаций: В среднем каждый пост получает 1 778 просмотров. В течение первых суток публикация набирает 1 046 просмотров.
- Реакции и взаимодействия: Аудитория активно поддерживает контент: среднее количество реакций на один пост — 9.
- Тематические интересы: Контент сосредоточен на ключевых темах, таких как ставь, браузер, html, border, flex.
📝 Описание и контентная политика
Автор описывает ресурс как площадку для выражения субъективного мнения:
“Сайт easyoffer.ru
Реклама @easyoffer_adv
ВП @easyoffer_vp
Тесты t.me/+T0COHtFzCJkwMDUy
Задачи t.me/+_tcX2w2EmvdmMTgy
Вакансии t.me/+CgCAzIyGHHg0Nzky”
Благодаря высокой частоте обновлений (последние данные получены 16 июня, 2026) канал поддерживает актуальность и высокий уровень охвата публикаций. Аналитика показывает, что аудитория активно взаимодействует с контентом, что делает его важной точкой влияния в категории Технологии и приложения.
<!DOCTYPE html>
<html>
<head>
<style>
.block1 {
margin-bottom: 20px;
background-color: lightblue;
}
.block2 {
margin-top: 30px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="block1">Блок 1</div>
<div class="block2">Блок 2</div>
</body>
</html>
🚩Когда схлопывание границ не происходит
🟠Если элементы имеют display:flex или display:grid.
🟠Если между элементами есть элемент с padding или border.
🟠Если у одного из элементов установлено свойство overflow со значением отличным от visible.
🟠Если один из элементов плавающий (float).
Ставь 👍 и забирай 📚 Базу знаний<span> в CSS можно использовать селекторы классов, идентификаторов, селекторы по атрибутам или селекторы по типу элемента.
🚩Как стилизовать <span> элемент
🟠Селекторов классов
Если элементу <span> присвоен класс, вы можете использовать класс-селектор для его стилизации.
HTML
<span class="highlight">Этот текст будет выделен.</span>
CSS
.highlight {
color: red;
font-weight: bold;
background-color: yellow;
}
🟠Селекторов идентификаторов
Если элементу <span> присвоен идентификатор, вы можете использовать идентификатор-селектор для его стилизации.
HTML
<span id="unique-span">Этот текст уникален.</span>
CSS
#unique-span {
color: blue;
font-style: italic;
background-color: lightgray;
}
🟠Селекторов по атрибутам
Вы можете использовать селекторы атрибутов для стилизации элементов <span>, основанных на наличии определенного атрибута или его значения.
HTML
<span data-custom="example">Этот текст имеет пользовательский атрибут.</span>
CSS
span[data-custom="example"] {
color: green;
text-decoration: underline;
}
🟠Селекторов по типу элемента
Вы можете использовать селектор по типу элемента для стилизации всех элементов <span> на странице. Однако будьте осторожны с этим подходом, так как он затронет все <span> элементы.
HTML
<span>Этот текст будет стилизован.</span>
<span>И этот текст тоже.</span>
CSS
span {
color: purple;
font-size: 18px;
}
🟠Комбинированные селекторы
Вы можете комбинировать различные типы селекторов для более точной стилизации.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Span Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<span class="highlight">Этот текст будет выделен.</span>
<span id="unique-span">Этот текст уникален.</span>
<span data-custom="example">Этот текст имеет пользовательский атрибут.</span>
<p>Текст с <span class="highlight">выделением</span> внутри абзаца.</p>
<p id="unique-paragraph">Абзац с <span class="highlight">выделением</span> и уникальным идентификатором.</p>
</body>
</html>
CSS
/* Стили для класса */
.highlight {
color: red;
font-weight: bold;
background-color: yellow;
}
/* Стили для идентификатора */
#unique-span {
color: blue;
font-style: italic;
background-color: lightgray;
}
/* Стили для пользовательского атрибута */
span[data-custom="example"] {
color: green;
text-decoration: underline;
}
/* Стили для всех span */
span {
color: purple;
font-size: 18px;
}
/* Комбинированные стили */
p span.highlight {
color: red;
font-weight: bold;
}
#unique-paragraph span.highlight {
color: blue;
background-color: yellow;
}
Ставь 👍 и забирай 📚 Базу знанийdisabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled.
🚩Пример использования
🟠Селектора [disabled]
Этот селектор выбирает все элементы, у которых присутствует атрибут disabled.
button[disabled] {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */
opacity: 0.6; /* Уменьшает непрозрачность */
}
🟠Псевдокласса :disabled
Этот селектор выбирает все элементы, которые находятся в состоянии disabled.
button:disabled {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}
🚩Полные примеры
С HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabled Button Styling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button>Active Button</button>
<button disabled>Disabled Button</button>
</body>
</html>
С CSS
/* Стили для активных кнопок */
button {
background-color: blue;
color: white;
border: 1px solid #000;
padding: 10px 20px;
cursor: pointer;
}
/* Стили для кнопок с атрибутом disabled */
button[disabled] {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}
/* Альтернативный способ с использованием псевдокласса :disabled */
button:disabled {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}
🟠Комбинированный подход
Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.
/* Стили для кнопок с классом .special, которые имеют атрибут disabled */
button.special[disabled] {
background-color: darkgray;
color: black;
border: 1px dashed #999;
cursor: not-allowed;
opacity: 0.7;
}
Ставь 👍 и забирай 📚 Базу знаний/* Выбирает все элементы с атрибутом title */
[title] {
color: blue;
}
🟠Селектор по точному значению атрибута
Выбирает элементы, атрибут которых имеет точное указанное значение.
/* Выбирает все элементы с атрибутом type, равным "submit" */
input[type="submit"] {
background-color: green;
}
🟠Селектор по наличию значения в списке значений атрибута
Выбирает элементы, атрибут которых содержит указанное значение в списке, разделенном пробелами.
/* Выбирает все элементы с классом, включающим "btn" */
[class~="btn"] {
font-weight: bold;
}
🟠Селектор по начальной части значения атрибута
Выбирает элементы, атрибут которых начинается с указанного значения.
/* Выбирает все элементы, значение атрибута href которых начинается с "https" */
a[href^="https"] {
color: red;
}
🟠Селектор по конечной части значения атрибута
Выбирает элементы, атрибут которых заканчивается на указанное значение.
/* Выбирает все элементы, значение атрибута href которых заканчивается на ".pdf" */
a[href$=".pdf"] {
text-decoration: underline;
}
🟠Селектор по вхождению значения в атрибут
Выбирает элементы, атрибут которых содержит указанное значение в любом месте.
/* Выбирает все элементы, значение атрибута href которых содержит "example" */
a[href*="example"] {
color: orange;
}
🚩Примеры использования селекторов атрибутов
Стилизация всех изображений с атрибутом alt
img[alt] {
border: 2px solid blue;
}
Стилизация ссылок, ведущих на внешние сайты
a[href^="http"] {
color: red;
}
Стилизация полей ввода с определенным типом
input[type="text"] {
border: 1px solid gray;
}
Стилизация элементов с определенным классом
[class~="button"] {
padding: 10px;
background-color: lightgray;
}
🚩Комбинированные селекторы
Селекторы атрибутов можно комбинировать с другими типами селекторов для создания более специфичных правил.
/* Выбирает все кнопки с классом btn и типом submit */
button.btn[type="submit"] {
background-color: green;
color: white;
}
Ставь 👍 и забирай 📚 Базу знаний<input type="file"> может быть сложно из-за его специфичного и нестандартного поведения в разных браузерах. Однако, с помощью CSS и небольшого количества JavaScript, можно создать стилизованный компонент для загрузки файлов, который будет выглядеть и работать одинаково во всех браузерах.
🚩Для загрузки файлов HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom File Input</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="file-input">
<input type="file" id="file" class="file-input__input">
<label for="file" class="file-input__label">
<span class="file-input__button">Choose a file</span>
<span class="file-input__name">No file chosen</span>
</label>
</div>
<script src="scripts.js"></script>
</body>
</html>
🚩Для загрузки файлов CSS
/* Стили для контейнера файла */
.file-input {
position: relative;
display: inline-block;
width: 100%;
max-width: 400px;
font-family: Arial, sans-serif;
}
/* Скрыть стандартный инпут для файла */
.file-input__input {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
/* Стили для кастомного лейбла */
.file-input__label {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f8f8f8;
cursor: pointer;
}
/* Стили для кнопки выбора файла */
.file-input__button {
background-color: #007bff;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
margin-right: 10px;
}
/* Стили для отображения имени файла */
.file-input__name {
color: #999;
}
🚩Для загрузки файлов JavaScript
document.addEventListener('DOMContentLoaded', function () {
const fileInput = document.querySelector('.file-input__input');
const fileName = document.querySelector('.file-input__name');
fileInput.addEventListener('change', function () {
if (fileInput.files.length > 0) {
fileName.textContent = fileInput.files[0].name;
} else {
fileName.textContent = 'No file chosen';
}
});
});
🟠HTML
Создается структура с элементом <input type="file">, который скрыт с помощью CSS. <label> используется для создания пользовательского интерфейса. Лейбл связан с инпутом через атрибут for.
🟠CSS
Скрывается стандартный элемент инпута для файла с помощью opacity: 0 и position: absolute. Стилизуются кастомные элементы лейбла, кнопки и отображения имени файла.
🟠JavaScript
Слушает событие change на инпуте для файла. При выборе файла обновляет текст внутри элемента с классом .file-input__name на имя выбранного файла.
Ставь 👍 и забирай 📚 Базу знаний<div id="user" data-user-id="123" data-user-role="admin">...</div>
🟠Создание более гибких и интерактивных приложений
Можно легко передавать и использовать данные для динамического изменения содержимого страницы.
<button data-action="save" data-target="#form">Save</button>
🟠Разделение данных и представления
Помогают разделять данные и логику от представления, сохраняя HTML-код чистым и структурированным.
🟠Работа с JavaScript
JavaScript может легко извлекать и использовать данные из атрибутов data-, что упрощает манипулирование элементами страницы.
const user = document.getElementById('user');
const userId = user.getAttribute('data-user-id');
const userRole = user.getAttribute('data-user-role');
console.log(`User ID: ${userId}, Role: ${userRole}`);
🚩Примеры использования
🟠Хранение информации о продукте
<div class="product" data-product-id="101" data-product-price="29.99">
<h2>Product Name</h2>
<p>Product Description</p>
</div>
const product = document.querySelector('.product');
const productId = product.getAttribute('data-product-id');
const productPrice = product.getAttribute('data-product-price');
console.log(`Product ID: ${productId}, Price: ${productPrice}`);
🟠Управление действиями кнопки
<button data-action="submit" data-target="#form">Submit</button>
const button = document.querySelector('button');
button.addEventListener('click', function() {
const action = this.getAttribute('data-action');
const target = this.getAttribute('data-target');
console.log(`Action: ${action}, Target: ${target}`);
});
🟠Хранение состояния элемента
<div id="toggle" data-state="collapsed">Click to Expand</div>
const toggle = document.getElementById('toggle');
toggle.addEventListener('click', function() {
const state = this.getAttribute('data-state');
if (state === 'collapsed') {
this.setAttribute('data-state', 'expanded');
this.textContent = 'Click to Collapse';
} else {
this.setAttribute('data-state', 'collapsed');
this.textContent = 'Click to Expand';
}
});
🚩Плюсы
➕Простота и гибкость
Легко добавлять и изменять данные без изменения HTML-структуры.
➕Совместимость с существующими инструментами
Атрибуты data- не влияют на стандартные функции браузеров и инструментов разработки.
➕Поддержка валидации HTML
HTML5 атрибуты data- валидны и не нарушают спецификацию.
Ставь 👍 и забирай 📚 Базу знаний
Уже доступно! Исследование Telegram 2025 — ключевые инсайты года 
