Frontend Interview - собеседования по Javascript / Html / Css
前往频道在 Telegram
Канал для подготовки к собеседованиям по фронтенду Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/frontendinterview Канал в реестре РКН: https://rknn.link/su
显示更多
网络:📈 Telegram 频道 Frontend Interview - собеседования по Javascript / Html / Css 的分析概览
频道 Frontend Interview - собеседования по Javascript / Html / Css (@frontendinterview) 俄语 语言赛道中的 是活跃参与者。目前社区聚集了 10 316 名订阅者，在 技术与应用 类别中位列第 11 784，并在 俄罗斯 地区排名第 61 499 位。
📊 受众指标与增长动态
自 невідомо 创建以来，项目保持高速增长，吸引了 10 316 名订阅者。
根据 25 十月, 2026 的最新数据，频道保持稳定运转。过去 30 天订阅人数变化为 -115，过去 24 小时变化为 -1，整体触达仍然可观。
- 认证状态： 未认证
- 互动率 (ER)： 平均受众互动率为 6.37%。内容发布后 24 小时内通常能获得 3.45% 的反应，占订阅者总量。
- 帖子覆盖： 每篇帖子平均可获得 658 次浏览，首日通常累积 356 次浏览。
- 互动与反馈： 受众积极参与，单帖平均反应数为 1。
- 主题关注点： 内容集中在 javascript, браузер, html, css, видимость 等核心主题上。
📝 描述与内容策略
作者将该频道定位为表达主观观点的平台：
“Канал для подготовки к собеседованиям по фронтенду
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Купить рекламу: https://telega.in/c/frontendinterview
Канал в реестре РКН:
https://rknn.link/su”
凭借高频更新（最新数据采集于 26 十月, 2026），频道始终保持新鲜度与高覆盖。分析显示受众积极互动，使其成为 技术与应用 类别中的关键影响点。
10 316
订阅者
-124 小时
-397 天
-11530 天
正在加载数据
相似频道
标签云
进出提及
---
---
---
---
---
---
吸引订阅者
十月 '2610月 '26
十月 '26
+4
在0个频道中
九月 '26
+10
在9个频道中
Get PRO
八月 '26
+8
在0个频道中
Get PRO
七月 '26
+12
在0个频道中
Get PRO
六月 '26
+17
在0个频道中
Get PRO
五月 '26
+13
在4个频道中
Get PRO
四月 '26
+11
在0个频道中
Get PRO
三月 '26
+4
在0个频道中
Get PRO
二月 '26
+5
在0个频道中
Get PRO
一月 '26
+8
在0个频道中
Get PRO
十二月 '25
+4
在1个频道中
Get PRO
十一月 '25
+15
在0个频道中
Get PRO
十月 '25
+19
在0个频道中
Get PRO
九月 '25
+52
在4个频道中
Get PRO
八月 '25
+8
在0个频道中
Get PRO
七月 '25
+13
在0个频道中
Get PRO
六月 '25
+20
在8个频道中
Get PRO
五月 '25
+49
在5个频道中
Get PRO
四月 '25
+52
在0个频道中
Get PRO
三月 '25
+64
在0个频道中
Get PRO
二月 '25
+67
在1个频道中
Get PRO
一月 '25
+162
在3个频道中
Get PRO
十二月 '24
+73
在0个频道中
Get PRO
十一月 '24
+78
在9个频道中
Get PRO
十月 '24
+204
在8个频道中
Get PRO
九月 '24
+95
在0个频道中
Get PRO
八月 '24
+81
在0个频道中
Get PRO
七月 '24
+144
在2个频道中
Get PRO
六月 '24
+112
在0个频道中
Get PRO
五月 '24
+267
在27个频道中
Get PRO
四月 '24
+151
在0个频道中
Get PRO
三月 '24
+313
在13个频道中
Get PRO
二月 '24
+156
在1个频道中
Get PRO
一月 '24
+299
在17个频道中
Get PRO
十二月 '23
+412
在44个频道中
Get PRO
十一月 '23
+390
在28个频道中
Get PRO
十月 '23
+308
在29个频道中
Get PRO
九月 '23
+246
在0个频道中
Get PRO
八月 '23
+256
在0个频道中
Get PRO
七月 '23
+299
在0个频道中
Get PRO
六月 '23
+282
在0个频道中
Get PRO
五月 '23
+294
在0个频道中
Get PRO
四月 '23
+443
在0个频道中
Get PRO
三月 '23
+352
在0个频道中
Get PRO
二月 '23
+492
在0个频道中
Get PRO
一月 '23
+539
在0个频道中
Get PRO
十二月 '22
+483
在0个频道中
Get PRO
十一月 '22
+158
在0个频道中
Get PRO
十月 '22
+445
在0个频道中
Get PRO
九月 '22
+229
在0个频道中
Get PRO
八月 '22
+648
在0个频道中
Get PRO
七月 '22
+376
在0个频道中
Get PRO
六月 '22
+469
在0个频道中
Get PRO
五月 '22
+186
在0个频道中
Get PRO
四月 '22
+357
在0个频道中
Get PRO
三月 '22
+117
在0个频道中
Get PRO
二月 '22
+323
在0个频道中
Get PRO
一月 '22
+349
在0个频道中
Get PRO
十二月 '21
+579
在0个频道中
Get PRO
十一月 '21
+96
在0个频道中
Get PRO
十月 '21
+363
在0个频道中
Get PRO
九月 '21
+614
在0个频道中
Get PRO
八月 '21
+285
在0个频道中
Get PRO
七月 '21
+578
在0个频道中
Get PRO
六月 '21
+501
在0个频道中
Get PRO
五月 '21
+840
在0个频道中
Get PRO
四月 '21
+1 491
在0个频道中
Get PRO
三月 '21
+531
在0个频道中
Get PRO
二月 '21
+350
在0个频道中
Get PRO
一月 '21
+1 398
在0个频道中
Get PRO
十二月 '20
+4 802
在0个频道中
| 日期 | 订阅者增长 | 提及 | 频道 | |
| 26 十月 | 0 | |||
| 25 十月 | 0 | |||
| 24 十月 | 0 | |||
| 23 十月 | 0 | |||
| 22 十月 | 0 | |||
| 21 十月 | 0 | |||
| 20 十月 | 0 | |||
| 19 十月 | 0 | |||
| 18 十月 | 0 | |||
| 17 十月 | 0 | |||
| 16 十月 | 0 | |||
| 15 十月 | 0 | |||
| 14 十月 | 0 | |||
| 13 十月 | 0 | |||
| 12 十月 | +2 | |||
| 11 十月 | 0 | |||
| 10 十月 | 0 | |||
| 09 十月 | 0 | |||
| 08 十月 | 0 | |||
| 07 十月 | 0 | |||
| 06 十月 | +1 | |||
| 05 十月 | +1 | |||
| 04 十月 | 0 | |||
| 03 十月 | 0 | |||
| 02 十月 | 0 | |||
| 01 十月 | 0 |
频道帖子
FrontendOffer поможет пройти техсобесы
Вы сейчас готовитесь к собеседованиям или уже проходите? Не чувствуете себя уверенно со всеми этими километровыми задачами на "что выведет консоль"? Давно не практиковались в лайвкодинге и боитесь налажать?
Поиск работы - дело одинокое и неприятное, но мы справимся вместе.
⚡️ FrontendOffer - это:
⚫️бот со 100+ вопросами, консольными задачами и лайвкодингами с реальных собеседований от джуновского до сеньорного уровня;
⚫️эталонные ответы, подробные объяснения и дополнительные ресурсы для всех задач - можно выучить, что от тебя ждут или понять тему вглубь ;
⚫️коммьюнити, в котором проводят воркшопы и созвоны 3-4 раза в месяц, вместе тренируют решения задач, прожаривают резюме и помогают проходить собесы уверенно;
📍Ближайшие ивенты коммьюнити:
22 октября - прожарка технического опыта в резюме. Обсудим, как работают алгоритмы аггрегаторов в 26-м году, как собирать опыт, чтобы пройти ИИ-фильтры и как подать потом на собесах;
28 октября - консольный блиц. Будем публично решать и разбирать сложные консольные задачи и нарабатывать уверенность с ними;
🖤Почему мы:
Автор проекта, Наташа Давыдова, фронтенд-разработчик с 6+ годами коммерческого опыта, включая бигтехи.
Я расскажу и покажу, как расщелкивать хардовые и софтовые собесы, чтобы получать офферы с максимальным КПД.
➡️ Приходи к нам, решай задачи, вступай в коммьюнити. Тебе больше не придется бороться с рынком в одиночку.
Erid 2SDnjcvfJoW
| 2 |  ✨ Любой кусок страницы в окне поверх всех окон
Обычный Picture-in-Picture выносит в плавающее окошко только видео. Оно остаётся на экране, даже если переключиться на другую вкладку или программу.
Document Picture-in-Picture API делает то же самое с любым HTML: тикер акций, чат, список дел. По сути, получается веб-виджет.
Окно создаёт requestWindow(), и внутри у него свой пустой document. В статье туда клонируют тикер:
/* Select the component */
const stock = document.querySelector("#stock");
/* Clone the component and append it to the DPIP <body> */
DPIP.document.body.append(stock.cloneNode(true));
Стили сами не переедут, их копируют в head окна отдельно. А поправить вид только внутри окна поможет @media (display-mode: picture-in-picture).
Учтите, что API работает только на десктопе, а Safari на момент статьи его не поддерживал.
В статье есть полный код кнопки и разбор опций окна.
👍 - если было полезно
👉 @frontendInterview | 329 |
| 3 |  Опять у меня работает, а у коллеги нет?
Знакомая картина для проектов с несколькими зависимостями: версии пакетов расходятся, окружения живут своей жизнью, и время уходит на поиск причины там, где ее нет.
29 октября в 20:00 пройдет открытый урок «uv как инструмент управления зависимостями Python-проекта». Поговорим о том, как навести порядок в пакетах и окружении.
На уроке:
- разберем, как устанавливать пакеты с помощью uv
- посмотрим, как фиксировать версии зависимостей
- обсудим, как вести окружение проекта
📱Урок проходит в рамках курса «Python-разработчик. Продвинутый уровень». Регистрируйтесь!
Зарегистрироваться
#реклама 16+
otus.ru
О рекламодателе | 399 |
| 4 |  🧩 Один инпут в Angular для строки, функции, шаблона или компонента
Когда компонент принимает кастомный контент, приходится заранее решать: хватит строки или нужен TemplateRef? Потом тип проверяют через @if и ветвят шаблон.
Библиотека Polymorpheus от команды Taiga UI убирает этот выбор. Директива *polymorpheusOutlet одинаково отрисует любой из четырёх вариантов в переданном контексте:
<ng-container *polymorpheusOutlet="content as primitive; context: { $implicit: user }">
{{ primitive }}
</ng-container>
Строка или результат функции попадает в primitive.
Пример с тултипом: обычно в нём просто текст. Когда понадобится ссылка или кнопка, пользователь передаст шаблон, и API тултипа переделывать не придётся.
Оговорка: функцию от конструктора компонента не отличить, поэтому компонент оборачивают в PolymorpheusComponent.
А в статье ещё и трюк, как сделать иконку, которую можно задать просто по имени или целым шаблоном.
👍 - если было полезно
👉 @frontendInterview | 490 |
| 5 |  5 офферов получили наши ребята на прошлой неделе
Оффер на 4,2k долларов
Оффер на 5k евро
Оффер 260k рублей
Оффер на 210k рублей
Оффер на 220k рублей
И еще 19 за сентябрь... а за лето более 50... и у тебя получится!
👋 Меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и не бросаю на испытательном сроке. Вокруг меня собралось целое комьюнити из почти 300 фронтендеров.
Я веду канал, в котором уже 15 тыс разработчиков. Регулярно публикую полезные материалы по подготовке к собесам. А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)
Забирайте в закрепленном сообщении
Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ
Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще
Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY
🏆Статистика по рынку:
Июль, Июнь, Май, Апрель, Март
Подписывайся 👇
frontend_punks
Реклама, erid: 2W5zFH1gVgd ИП Галактионов Тихон Витальевич, ИНН 771618975809 | 469 |
| 6 |  🚀 Предзагрузка, которая грузит не те данные
В TanStack Router у маршрута есть loader: он запускает запрос ещё до рендера, а компонент забирает готовые данные из кеша TanStack Query. Но параметры запроса тогда описаны дважды, и если они разойдутся, ошибки никто не покажет.
Пример из статьи. В дашборд добавили ?asOf=дата, но только в компоненте. По ссылке loader грузит данные «на сегодня», а компонент потом запрашивает снимок заново. Лишний запрос и лишнее ожидание.
Автор предлагает класть queryOptions в контекст маршрута. Их создаёт одна функция context, а loader и компонент через useRouteContext() берут один и тот же объект. Разойтись им просто негде.
Учтите, что функция context на момент статьи была новой и не описанной в документации.
В статье ещё о том, как контекст наследуют дочерние маршруты и почему лишних ререндеров не будет.
👍 - если было полезно
👉 @frontendInterview | 529 |
| 7 |  Бесплатный 14-дневный онлайн-курс по дизайну интерьеров
Давно хочешь работать в творческой сфере и иметь доход от 100 тыс/мес? Тебе не нужно уметь рисовать или прямо сейчас принимать решение. Просто приходи и попробуй! Вдруг понравится создавать уютные интерьеры и ты найдешь в этом себя.
Регистрируйся на практический курс по дизайну интерьера с личным наставником. Осталось 7 мест!⚡
Зарегистрироваться
#реклама 16+
diskill-traning.ru
О рекламодателе | 370 |
| 8 |  +4🤖Podlodka Backend Crew: AI в бэкенд-задачах
Демо с AI чаще всего выглядят одинаково: агент за десять минут пишет сервис с нуля.
Вот только в работе бэкендера всё сложнее: легаси, рискованные миграции, неработающие тесты и ревью, которое становится бутылочным горлышком.
🗓 С 26 по 30 октября в сезоне Podlodka Backend Crew «AI в бэкенд-задачах» участники:
• Научатся передавать агенту инженерные стандарты и правила, чтобы он писал так, как нужно, а не как получится
• Соберут ревью, где несколько моделей независимо проверяют изменения, а финальное решение остаётся за человеком
• Посмотрят, куда переезжает сложность миграции легаси, когда код пишет агент
• Выяснят, где ломается мечта отдать миграцию агенту целиком
• Разберут, какие антипаттерны тестов агенты уже успели перенять от разработчиков.
Формат — пять дней живых Zoom-сессий утром и вечером, закрытое сообщество в Telegram и общение со спикерами.
Будет много интерактива и практики. Базовый ликбез оставят за бортом — этот сезон для тех, кто уже пробует AI в реальных проектах. Присоединяйтесь с 26 октября!
🔗 Билеты и программа: https://podlodka.io/becrew | 522 |
| 9 |  ⚡️ В сети начали массово сливать IT-курсы и книги известных онлайн школ
Вот отсортированная база с тонной материала (постепенно пополняется):
(363 видео, 87 книги) — Python
(117 видео, 53 книги) — ВАЙБКОД
(174 видео, 91 книги) — DevOps
(415 видео, 68 книги) — Frontend
(137 видео, 93 книги) — DS/ML
(143 видео, 33 книги) — ИБ/Хакинг
(352 видео, 89 книги) — С/С++/C
(343 видео, 87 книги) — Java/QA
(176 видео, 32 книги) — Git/Linux
(167 видео, 53 книги) — PHP/1С
(227 видео, 83 книги) — SQL/БД
(114 видео, 77 книги) — Сисадмин
(107 видео, 43 книги) — BA/SA
(181 видео, 32 книги) — Go/Rust
(167 видео, 43 книги) — Kotlin/Swift
(112 видео, 24 книги) — Flutter
(113 видео, 82 книги) — GameDev
(183 видео, 37 книги) — Дизайн
(136 видео, 33 книги) — PM/HR
Скачивать ничего не нужно — все выложили в Telegram | 556 |
| 10 |  ✨ Рамка, которая рисует себя сама, на чистом CSS
Свойство border-image позволяет сделать рамкой элемента градиент вместо обычной линии. Но анимировать градиент напрямую не выйдет: браузер не умеет плавно двигать проценты внутри него.
Это обходится так: регистрируем свою переменную через @property и указываем её тип. Такую переменную браузер уже плавно меняет:
@property --p {
syntax: "<percentage>";
initial-value: 0%;
inherits: false;
}
Дальше она встаёт в градиент рамки: linear-gradient(-45deg, red var(--p), transparent 0%). Пока --p равна 0%, рамка прозрачная. При наведении --p становится 100%, красный заполняет рамку, и кажется, что её рисуют на глазах.
Есть подвох: border-image не изгибается по форме элемента, так что скруглённые углы он не повторит.
В статье тот же приём крутят дальше: conic-gradient, анимация border-image-slice и ещё куча вариаций.
👍 - если было полезно
👉 @frontendInterview | 573 |
| 11 |  🧩 Как сделать, чтобы фоновый узор не обрезался снизу
У секции повторяющийся фоновый узор, плитка 52×44px. Высота блока зависит от текста, поэтому нижний ряд плиток часто обрезается на середине.
Можно поставить background-repeat: round. Но тогда браузер сжимает или растягивает саму плитку, чтобы она уместилась целиком.
Решение аккуратнее: взять автоматическую высоту через calc-size() и округлить её функцией round() до кратного высоте плитки. Высота плитки лежит в переменной --tile-height.
.section {
height: calc-size(auto, round(up, size, var(--tile-height)));
}
Выглядит как фиксированная высота, но работает скорее как min-height. Блок по-прежнему подстраивается под контент, просто его высота всегда кратна высоте плитки, и узор не режется.
Оговорка: на момент написания статьи это работает только в Chrome.
В оригинале есть живые демо, разбор округления вверх и вниз и то, как подогнать под узор ещё и padding.
👉 @seniorFront | 712 |
| 12 |  АЙТИШНИКИ БЕСПЛАТНОЕ ОБУЧЕНИЕ
Проект «Terminal» стал крупнейшей библиотекой бесплатного образования. В одном канале собраны курсы, книги, полезные инструменты и практические тренажёры для всех разработчиков:
• Практические курсы и задания
• Книги и статьи известных авторов
• Полезные инструменты и ресурсы
• IT-новости и инсайды
Обучение по всем направлениям: SQL, Python, ML, Frontend, PHP, C++, Go, Git, Linux, QA, Java, Vibe-coding, InfoSec и др.
⌨️ подписаться | 706 |
| 13 |  ✨ Скроллбар, который следит за прокруткой без JavaScript
Свой скроллбар обычно рисуют так: нативный прячут, а размер и положение ползунка считают в JS на каждое событие scroll. Это дорого: scroll летит много раз в секунду, а чтение scrollHeight может вызвать reflow.
Разработчик библиотеки Taiga UI отдал эту работу CSS через scroll-driven animations. Их прогресс зависит не от времени, а от прокрутки контейнера.
Хитрее всего с высотой ползунка. Анимации его краёв растягивают на высоту контейнера (100cqb) за конец прокрутки, и в крайней точке они замирают ровно там, где нужно:
.bar {
animation-range: 0% calc(100% + 100cqb), calc(0% - 100cqb) 100%;
animation-fill-mode: both;
}
JS остаётся только для перетаскивания ползунка мышью.
Учтите, что на момент статьи Firefox умел это лишь в Nightly, поэтому в Taiga UI новая схема включается только там, где браузер её поддерживает.
Отдельно красиво решено, как прибить ползунки к краю контейнера: через anchor positioning.
👉 @seniorFront | 734 |
| 14 |  +4Атмосфера HolyJS: ради чего стоит приехать на площадку
23–24 октября в Санкт Петербурге и онлайне пройдет HolyJS 2026 Autumn — масштабная JS-конференция, которая объединит фронтенд, бэкенд, графику и веб-платформу.
Интересные доклады — это база. Но Холи — это еще и то, что происходит между ними: живые разговоры, крутой нетворкинг, возможность самому выйти к микрофону и форматы, в которых можно посмотреть на привычные вещи под другим углом.
Для удобства собрали в карточках активности, ради которых точно стоит посетить конференцию.
Выбирайте, в чем хотите поучаствовать, и забирайте персональный билет со скидкой по промокоду frontendInterview
→ Программа HolyJS
→ Купить билет
Реклама. ООО «Джуг Ру Груп». ИНН 7801341446 | 677 |
| 15 |  ✨ CSS может заметить, что элементы вот-вот столкнутся
Сбоку от секции с карточками висит декоративный элемент, и его размер и положение меняются вместе с экраном. Медиазапросом момент наезда не поймать, а спрятать декор нужно, как только зазор станет меньше 20px.
Между декором и секцией через anchor positioning растягивается невидимый элемент .measure. Внутри у него псевдоэлемент шириной 20px и overflow-x: auto. Когда зазор меньше 20px, .measure переполняется.
Само переполнение запускает scroll-driven анимацию, прокручивать ничего не нужно. Анимация лишь ставит --touching: 1, а style container query прячет декор:
.decor {
@container style(--touching: 1) {
opacity: 0;
}
}
Работает только в браузерах, где есть и scroll-driven анимации, и anchor positioning, так что это улучшение поверх обычной вёрстки.
В статье есть интерактивные демо, где можно потянуть границу и поймать момент срабатывания.
👉 @seniorFront | 638 |
| 16 |  +65 офферов получили наши ребята на прошлой неделе
Оффер на 4,2k долларов
Оффер на 5k евро
Оффер 260k рублей
Оффер на 210k рублей
Оффер на 220k рублей
И еще 19 за сентябрь... а за лето более 50... и у тебя получится!
👋 Меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и не бросаю на испытательном сроке. Вокруг меня собралось целое комьюнити из почти 300 фронтендеров.
Я веду канал, в котором уже 15 тыс разработчиков. Регулярно публикую полезные материалы по подготовке к собесам. А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)
Забирайте в закрепленном сообщении
Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ
Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще
Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY
🏆Статистика по рынку:
Июль, Июнь, Май, Апрель, Март
Подписывайся 👇
frontend_punks
Реклама, erid: 2W5zFGdRKcm ИП Галактионов Тихон Витальевич, ИНН 771618975809 | 831 |
| 17 |  🧮 Поле ввода, в которое можно вписать формулу
Часто число для формы сначала надо посчитать. С обычным <input> приходится бегать в калькулятор и обратно. А позже в поле виден только итог, и непонятно, откуда он взялся.
Bramus сделал для этого веб-компонент <calc-input>. Пишешь (2 + 3) * 4, уходишь из поля, и там появляется 20. Возвращаешь фокус, и снова видна формула, её можно проверить или поправить.
Считает компонент своим парсером, без eval(). Он понимает обычные операторы, скобки и функции вроде sqrt, round, min, max. Внутри лежат обычные <input>, поэтому отправка формы и валидация работают как есть. С недописанной формулой вроде 2 + форма не отправится.
Учтите, что по умолчанию в поле с вашим name уходит сама формула «2 + 3», а не 5. Чтобы сервер получил число, нужен атрибут submit="result".
Как устроены три поля внутри и почему стили на самом теге сразу применяются к ним, Bramus показывает в статье.
👉 @seniorFront | 536 |
| 18 |  🎨 Текст, который сам подбирает цвет под фон
Если фон карточки задаётся фирменным цветом и может быть любым, подбирать к нему цвет текста вручную неудобно.
CSS-функция contrast-color() берёт цвет и возвращает black или white, смотря что контрастнее:
.card {
--bg: var(--brand-color);
background: var(--bg);
color: contrast-color(var(--bg));
}
Можно пойти дальше. Сохраняем результат в кастомное свойство, зарегистрированное через @property, и проверяем его запросом @container style(). Вышло white, значит фон тёмный, и текст красим в светлый оттенок цвета карточки. Вышло black, берём глубокий тон того же оттенка.
Если цвета палитры задать вручную, а не выводить из фона, на результат contrast-color() уже не опереться: такие пары автор советует тщательно тестировать.
В статье этот приём вместе с light-dark() собран в целую систему светлой и тёмной темы.
👉 @seniorFront | 585 |
| 19 |  🔍 Убрал повтор в скринридере и сломал кнопку
Джейк Арчибальд делал кнопку-иконку «жирный» с подсказкой «Bold (⌘B)» на popover="hint". На кнопке стояли aria-label="Bold" и aria-describedby со ссылкой на подсказку.
VoiceOver читал «Bold. Bold. Command B». Чтобы убрать повтор, Джейк удалил aria-label. И кнопка осталась без доступного имени, то есть без названия для скринридера. aria-describedby добавляет только описание, имя он не заменяет.
JAWS в итоге собрал текст из соседних элементов и объявил кнопку сразу жирной и курсивной.
Чинится заменой одного атрибута: aria-labelledby вместо aria-describedby. Он тоже ссылается на подсказку по id, но берёт из неё именно имя. Теперь VoiceOver говорит «Bold. Command B. Button».
Сам Джейк советует проверять в нескольких скринридерах: один, как и один браузер, полной картины не даёт.
В статье есть и вариант, где имя и сочетание клавиш разведены по разным span.
👉 @seniorFront | 667 |
| 20 |  🌈 Свечение внутри элемента, но из любого фона
Подсветить элемент изнутри проще всего через box-shadow с inset. Но такое свечение одноцветное. А если хочется радужный conic-gradient() или картинку?
Решение из статьи: накрыть элемент псевдоэлементом ::after с нужным фоном и маской оставить видимыми только края. Середина прозрачна, и сам элемент под ней виден.
Маска для левого и правого краёв (black в маске значит «видно»):
--inset: 30px;
mask-image: linear-gradient(
to right,
black 0%,
transparent var(--inset),
transparent calc(100% - var(--inset)),
black 100%
);
Вторая такая же маска с to bottom берёт верх и низ, а mask-composite: add объединяет обе полосы в рамку.
Накладка стоит на position: absolute и inset: 0, поэтому самому элементу нужен position: relative.
В статье есть демо, где оба вида свечения вспыхивают на случайных элементах.
👉 @seniorFront | 785 |
