Code Ready | Frontend
Open in Telegram
Авторский канал по Frontend разработке. Ресурсы, гайды, задачи, шпаргалки. Информация ежедневно пополняется! Cотрудничество: @energy_c РКН: https://clck.ru/3NJCKs
Show more📈 Analytical overview of Telegram channel Code Ready | Frontend
Channel Code Ready | Frontend (@code_ready) in the Russian language segment is an active participant. Currently, the community unites 21 557 subscribers, ranking 6 157 in the Technologies & Applications category and 30 472 in the Russia region.
📊 Audience metrics and dynamics
Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 21 557 subscribers.
According to the latest data from 26 October, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -42 over the last 30 days and by -20 over the last 24 hours, overall reach remains high.
- Verification status: Not verified
- Engagement rate (ER): The average audience engagement rate is 6.43%. Within the first 24 hours after publication, content typically collects 4.29% reactions from the total number of subscribers.
- Post reach: On average, each post receives 1 386 views. Within the first day, a publication typically gains 925 views.
- Reactions and interaction: The audience actively supports content: the average number of reactions per post is 23.
- Thematic interests: Content is focused on key topics such as css, браузер, интерфейс, загрузка, api.
📝 Description and content policy
The author describes the resource as a platform for expressing subjective opinions:
“Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!
Cотрудничество: @energy_c
РКН: https://clck.ru/3NJCKs”
Thanks to the high frequency of updates (latest data received on 27 October, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Technologies & Applications category.
21 557
Subscribers
-2024 hours
-667 days
-4230 days
Loading data
Similar Channels
![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.telemetr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=96&q=75){kind=small}
Tags Cloud
Incoming and Outgoing Mentions
---
---
---
---
---
---
Attracting Subscribers
October '26Oct '26
October '26
+197
in 124 channels
September '26
+345
in 180 channels
Get PRO
August '26
+587
in 299 channels
Get PRO
July '26
+63
in 38 channels
Get PRO
June '26
+123
in 19 channels
Get PRO
May '26
+159
in 31 channels
Get PRO
April '26
+90
in 33 channels
Get PRO
March '26
+234
in 68 channels
Get PRO
February '26
+220
in 22 channels
Get PRO
January '26
+1 062
in 125 channels
Get PRO
December '25
+433
in 124 channels
Get PRO
November '25
+1 202
in 266 channels
Get PRO
October '25
+733
in 100 channels
Get PRO
September '25
+1 126
in 108 channels
Get PRO
August '25
+1 117
in 240 channels
Get PRO
July '25
+897
in 55 channels
Get PRO
June '25
+1 017
in 87 channels
Get PRO
May '25
+2 027
in 323 channels
Get PRO
April '25
+117
in 1 channels
Get PRO
March '25
+130
in 2 channels
Get PRO
February '25
+125
in 0 channels
Get PRO
January '25
+130
in 3 channels
Get PRO
December '24
+234
in 5 channels
Get PRO
November '24
+259
in 7 channels
Get PRO
October '24
+2 497
in 247 channels
Get PRO
September '24
+3 493
in 269 channels
Get PRO
August '24
+337
in 2 channels
Get PRO
July '24
+140
in 1 channels
Get PRO
June '24
+793
in 7 channels
Get PRO
May '24
+2 442
in 26 channels
Get PRO
April '24
+2 945
in 37 channels
Get PRO
March '24
+1 802
in 42 channels
Get PRO
February '24
+1 591
in 37 channels
Get PRO
January '24
+4 288
in 28 channels
Get PRO
December '23
+795
in 23 channels
Get PRO
November '23
+693
in 31 channels
Get PRO
October '23
+443
in 12 channels
| Date | Subscriber Growth | Mentions | Channels | |
| 26 October | +2 | |||
| 25 October | +3 | |||
| 24 October | +3 | |||
| 23 October | +8 | |||
| 22 October | +7 | |||
| 21 October | +5 | |||
| 20 October | +7 | |||
| 19 October | +15 | |||
| 18 October | +16 | |||
| 17 October | +18 | |||
| 16 October | +52 | |||
| 15 October | +9 | |||
| 14 October | +3 | |||
| 13 October | +2 | |||
| 12 October | +5 | |||
| 11 October | +5 | |||
| 10 October | +2 | |||
| 09 October | +3 | |||
| 08 October | +1 | |||
| 07 October | +2 | |||
| 06 October | +6 | |||
| 05 October | +4 | |||
| 04 October | +7 | |||
| 03 October | +5 | |||
| 02 October | +1 | |||
| 01 October | +6 |
Channel Posts
❤️ Крайне интересная статья на Хабре: «WASM vs JavaScript 2026 — проверка на Flutter Web»!
В этой статье:
• Узнаете, действительно ли переход с JavaScript на WebAssembly ускоряет Flutter-приложения;
• Разберёте результаты 46 тестов производительности: от вычислений и работы с памятью до обработки данных и графики;
• Посмотрите, в каких задачах выигрывает WASM, где быстрее JavaScript и как это влияет на плавность интерфейса.
🔊 Продолжай читать на Habr!📣 Code Ready | #статья
| 2 |  Как убрать скачки меню при наведении без фиксированной ширины?
В навигации при наведении текст становится жирным, его ширина увеличивается, а соседние пункты сдвигаются.
.nav-link:hover {
font-weight: 700;
}
Часто это исправляют фиксированной шириной пунктов меню. Но такой подход плохо работает с переводами, динамическими названиями и адаптивной вёрсткой.
Есть более гибкий приём: заранее зарезервировать место под жирную версию текста.
<a class="nav-link" data-text="Каталог">
Каталог
</a>
.nav-link::before {
content: attr(data-text);
font-weight: 700;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}
Псевдоэлемент создаёт невидимую копию надписи с нужной толщиной шрифта. Несмотря на нулевую высоту, его ширина участвует в расчёте размера элемента.
Поэтому ссылка заранее занимает достаточно места для жирного текста. Остаётся добавить само состояние наведения.
.nav-link:is(:hover, :focus-visible) {
font-weight: 700;
}
Теперь изменение толщины шрифта не должно сдвигать соседние элементы, если жирная версия действительно шире обычной.
Важный нюанс: значение data-text нужно поддерживать в соответствии с видимым текстом. Для многострочных подписей и сложной типографики приём стоит проверять отдельно.
🔥 Приём особенно полезен для горизонтальной навигации, вкладок и переключателей, где активный пункт выделяется жирным начертанием.
📣 Code Ready | #совет | 984 |
| 3 |  🔥 Мастхев подборка для каждого айтишника
Держите подборку авторских IT-каналов по всем направлениям: курсы, гайды, статьи, практики, примеры кода, шпаргалки и прохождение собесов.
▪️ Python: @python
▪️ Frontend: @frontend
▪️ Java: @java
👨💻 Go: @golang
▪️ ИБ & Хакинг: @hacking
▪️ C/C++: @cplusplus
▪️ C# & GameDev: @gamedev
▪️ Data Science: @datascience
▪️ DevOps: @devops
▪️ Linux: @linux
▪️ IT Курсы: @courses
▪️ Вайбкодинг: @vibecoding
▪️ Весь айти: @itnews
⏱️ Успей подписаться пока не удалили! | 924 |
| 4 |  +1👩💻 Умная валидация формы без JS!
Обычный :invalid подсвечивает ошибки даже в пустой форме, когда пользователь ещё ничего не вводил. Из-за этого приходится добавлять обработчики событий и отслеживать, какие поля уже были затронуты.
Но у CSS есть более точный инструмент — :user-invalid.
Как работает:
• :user-invalid выбирает поле, которое не прошло проверку после взаимодействия пользователя;
• : неhas() позволяет родительскому контейнеру реагировать на состояние вложенного поля;
• :not(:placeholder-shown) здесь не нужен — браузер сам учитывает момент взаимодействия;
• :user-valid позволяет аналогично оформить корректно заполненные поля.
В результате можно показывать ошибки в нужный момент, не создавая отдельное JS-состояние для стилизации каждого поля.
📣 Code Ready | #фишка | 978 |
| 5 |  ✍️ frontend-interview-notes — большая подборка материалов для разработчиков!
В репозитории собраны заметки по ключевым темам веб-разработки, которые помогают систематизировать знания и разобраться в вопросах, встречающихся на технических интервью. Удобно использовать для повторения теории, самопроверки и подготовки к собеседованию.
Оставляю ссылочку: GitHub 📱
📣 Code Ready | #репозиторий | 1 211 |
| 6 | overflow-anchor — управляем сохранением позиции прокрутки при изменении контента!
На страницах с динамическим контентом высота элементов может изменяться после рендеринга. Например, когда загружаются изображения, появляются сообщения или вставляются блоки выше текущей позиции пользователя.
Браузеры используют механизм scroll anchoring, который помогает сохранять видимую позицию при таких изменениях. Но иногда автоматическая компенсация прокрутки мешает логике интерфейса.
Рассмотрим контейнер с сообщениями:
<div class="chat">
<div class="messages">
<!-- сообщения -->
</div>
</div>
Зададим ему ограниченную высоту и вертикальную прокрутку:
.chat {
height: 400px;
overflow-y: auto;
}
Если содержимое выше видимой области изменит размер, браузер может скорректировать scrollTop, чтобы сохранить положение опорного элемента.
Для управления этим механизмом существует CSS-свойство overflow-anchor:
.chat {
overflow-anchor: none;
}
Значение none исключает контейнер и его потомков из выбора опорного элемента для scroll anchoring. При этом прокрутка продолжает работать, а размеры содержимого могут изменяться как обычно.
По умолчанию используется auto:
.chat {
overflow-anchor: auto;
}
В таком режиме элементы могут участвовать в выборе опорного узла, если это допускают условия алгоритма.
Чат, в котором новые сообщения добавляются в конец списка:
const chat = document.querySelector('.chat');
const messages = document.querySelector('.messages');
function appendMessage(text) {
const message = document.createElement('div');
message.textContent = text;
messages.append(message);
}
Если требуется самостоятельно управлять прокруткой, можно отключить scroll anchoring:
.chat {
height: 400px;
overflow-y: auto;
overflow-anchor: none;
}
Например, после добавления сообщения можно прокрутить контейнер вниз:
chat.scrollTop = chat.scrollHeight;
Но если пользователь читает историю сообщений, принудительная прокрутка будет мешать.
Поэтому лучше проверять положение до добавления сообщения:
function appendMessage(text) {
const distanceToBottom =
chat.scrollHeight -
chat.scrollTop -
chat.clientHeight;
const shouldScroll = distanceToBottom <= 20;
const message = document.createElement('div');
message.textContent = text;
messages.append(message);
if (shouldScroll) {
chat.scrollTop = chat.scrollHeight;
}
}
Теперь контейнер прокручивается вниз только тогда, когда пользователь уже находился рядом с нижней границей. Здесь overflow-anchor: none отключает автоматическую компенсацию, а js управляет необходимой позицией.
Если у родителя установлено overflow-anchor: none, потомки не могут повторно включить scroll anchoring:
.container {
overflow-anchor: none;
}
.container .item {
overflow-anchor: auto;
}
В данном случае .item всё равно остаётся внутри исключённой области.
Также scroll anchoring не гарантирует компенсацию любых изменений. А поддержка overflow-anchor в Safari ограничена, поэтому для строго определённого поведения лучше использовать js.
🔥 overflow-anchor позволяет управлять участием элементов в scroll anchoring. Свойство полезно для чатов, лент и динамических списков, где положение прокрутки контролируется логикой приложения.
📣 Code Ready | #практика | 1 133 |
| 7 |  +4📱 CSS-селекторы — специфичность, состояния и структурная выборка элементов!
Шпаргалка по CSS-селекторам: группировка через :is() и :where(), выбор связанных элементов с :has(), исключение через :not(), управление состояниями фокуса с :focus-visible и :focus-within(), определение пустых элементов через :empty и позиционная выборка с :nth-child(). Примеры охватывают специфичность, структуру DOM и стилизацию элементов в зависимости от их состояния.
📣 Code Ready | #шпора | 1 252 |
| 8 | min-width: auto — почему flex-элемент не сжимается до ширины контейнера!
Во Flexbox значение flex: 1 не гарантирует сжатие элемента до доступной ширины. Содержимое может выходить за границы контейнера из-за автоматического минимального размера flex-элемента.
Рассмотрим контейнер с боковой панелью и основной областью, содержащей длинную строку без пробелов.
<div class="layout">
<aside class="sidebar">Menu</aside>
<main class="content">
<p>VeryLongTextWithoutSpacesVeryLongTextWithoutSpacesVeryLongTextWithoutSpacesVeryLongTextWithoutSpaces</p>
</main>
</div>
При ширине контейнера 400px боковая панель занимает 150px, а основной области остаётся 250px. Но длинная строка может препятствовать её сжатию:
.layout {
display: flex;
width: min(100%, 400px);
}
.sidebar {
flex: 0 0 150px;
}
.content {
flex: 1;
}
Причина — min-width: auto. Для flex-элемента с нескроллируемым вычисленным значением overflow автоматический минимум по главной оси зависит от содержимого. Длинная неразрывная строка может задавать минимальную ширину больше доступной.
flex: 1 не отменяет это ограничение. Чтобы разрешить сжатие, установите нулевой минимум:
.content {
flex: 1;
min-width: 0;
}
Теперь при ширине контейнера 400px .content может занять доступные 250px, но текст всё ещё способен выходить за её границы. Для переноса длинных строк используйте overflow-wrap: anywhere:
.content p {
overflow-wrap: anywhere;
}
overflow-wrap: anywhere также уменьшает min-content, поэтому в этом примере может устранить проблему даже без min-width: 0.
Для однострочного текста с многоточием используйте другой вариант:
.content p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Свойства применяются непосредственно к <p>, а min-width: 0 на .content сохраняется.
Альтернатива — overflow: hidden на flex-элементе. Он также обнуляет автоматический минимум по главной оси:
.content {
flex: 1;
overflow: hidden;
}
Но в отличие от min-width: 0, это свойство дополнительно обрезает содержимое и создаёт scroll container без обычной пользовательской прокрутки.
Похожая проблема есть в CSS Grid. Трек 1fr имеет автоматический минимум, из-за которого длинное содержимое может расширять колонку:
.layout {
display: grid;
grid-template-columns: 150px 1fr;
}
Чтобы убрать автоматический минимум трека, используйте minmax(0, 1fr):
.layout {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
}
Однако это не гарантирует отсутствия переполнения содержимым — перенос или обрезку текста нужно настраивать отдельно.
🔥 flex: 1 и 1fr не гарантируют сжатие содержимого. Во Flexbox используйте min-width: 0, в Grid — minmax(0, 1fr), а перенос и обрезку текста настраивайте отдельно.
📣 Code Ready | #практика | 1 236 |
| 9 |  7 дней бесплатного обучения во Frontend-разработке!
🔥 Ухвати свой шанс погрузиться в мир Frontend-разработки на нашем бесплатном онлайн-интенсиве! Интересные уроки, практическая работа и поддержка куратора — всё это доступно тебе прямо сейчас.
Всего за 7 дней ты:
1. Сгенерируешь сайт через Giga, DeepSeek, ChatGPT;
2. Сверстаешь весь сайт на HTML + CSS с правильным адаптивом;
3. Оживишь проект на JavaScript: логика, расчёты и трекинг заказов;
4. Подключишь карты и API, увидишь, как данные работают в настоящем продукте;
5. Получишь экспертные советы, как улучшить свои проекты и вывести их на профессиональный уровень.
В итоге добавишь в своё портфолио уникальный проект сервиса доставки, доступный по ссылке, который повысит твою ценность как специалиста.
🔥 С нас обучение, практика и поддержка на пути к фрилансу.
С тебя участие в интенсиве
👉 Начать бесплатное обучение
Не упусти шанс получить мощный заряд уверенности для дальнейшего роста в разработке! | 987 |
| 10 |  +4📱 Утилиты для нормализации и обработки строк!
Шпаргалка по функциям для работы со строками: нормализация пробельных символов, преобразование регистра, ограничение длины текста, генерация URL-идентификаторов, экранирование HTML-символов, маскирование email-адресов и удаление диакритических знаков.
📣 Code Ready | #шпора | 1 457 |
| 11 |  HTML умеет создавать аккордеоны, в которых открывается только один элемент!
Обычный <details> позволяет сделать раскрывающийся блок без JS. Но если таких блоков несколько, пользователь может открыть их все одновременно.
Для FAQ это не всегда удобно: длинные ответы растягивают страницу, а открытые секции приходится закрывать вручную. У <details> есть малоизвестный атрибут name.
<details name="faq">
<summary>Первый вопрос</summary>
Первый ответ
</details>
<details name="faq">
<summary>Второй вопрос</summary>
Второй ответ
</details>
Теперь браузер сам следит за состоянием: при открытии второго блока первый автоматически закрывается.
Причём элементы с одинаковым name не обязаны находиться внутри одного контейнера. Они могут располагаться в разных частях DOM и всё равно работать как одна группа.
<details name="faq" open>
<summary>Частый вопрос</summary>
Ответ на него
</details>
В одной группе браузер допускает только один открытый элемент. При этом закрыть все элементы по-прежнему можно. И внешний вид полностью настраивается через CSS.
details[open] {
border-color: royalblue;
}
details::details-content {
padding-block: 12px;
}
Здесь details[open] позволяет стилизовать раскрытый блок, а ::details-content — обращаться непосредственно к содержимому, хотя у этого псевдоэлемента поддержка браузерами отличается от поддержки самого аккордеона.
🔥 Полезно для FAQ, настроек и справочных разделов, где не нужна сложная пользовательская логика.
📣 Code Ready | #совет | 1 305 |
| 12 |  Выучить программирование — это только половина дела.
Нужно ещё найти работу 👨💻
Можно потратить месяцы на обучение, собрать портфолио и подготовить резюме, но так и не понять, где искать подходящие вакансии.
Поэтому хочу поделиться инструментом, который может упростить эту задачу.
Это IT-проект на базе нейросети, который помогает искать вакансии и находить возможности для трудоустройства. Вместо того чтобы тратить всё свободное время на поиск, можно воспользоваться ИИ и сосредоточиться на подготовке к собеседованиям и развитии навыков | 1 152 |
| 13 | +4 📱 Утилиты для нормализации и обработки строк!
Шпаргалка по функциям для работы со строками: нормализация пробельных символов, преобразование регистра, ограничение длины текста, генерация URL-идентификаторов, экранирование HTML-символов, маскирование email-адресов и удаление диакритических знаков.
📣 Code Ready | #шпора | 1 455 |
| 14 |  Показываем ошибки в формах без JS и преждевременной подсветки!
У :invalid есть неприятная особенность: обязательное пустое поле может считаться невалидным ещё до того, как пользователь начал заполнять форму.
<input type="email" required>
input:invalid {
border-color: #e53935;
}
В результате форма может подсвечивать ошибки сразу после загрузки страницы.
Для этого существует :user-invalid.
input:user-invalid {
border-color: #e53935;
}
Этот псевдокласс учитывает не только результат встроенной проверки HTML, но и факт взаимодействия пользователя с полем. Например, ошибка может появиться после изменения значения и ухода из поля или после попытки отправить форму.
Можно добавить и состояние успешного заполнения.
input:user-valid {
border-color: #2e7d32;
}
В отличие от :valid и :invalid, эти селекторы позволяют не показывать результат проверки слишком рано. Конкретный момент их срабатывания зависит от поведения браузера.
Оба псевдокласса входят в Baseline 2023 и поддерживаются современными браузерами.
🔥 Для форм со встроенной HTML-валидацией это простой способ улучшить обратную связь без дополнительных классов и обработчиков событий.
📣 Code Ready | #совет | 1 689 |
| 15 |  ⚡️ В сети начали массово сливать 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 | 1 191 |
| 16 |  👩💻 Выпадающее меню поверх любых контейнеров без JS!
В сложных интерфейсах выпадающие меню часто обрезаются из-за
overflow: hidden или оказываются под соседними элементами. Увеличение z-index не всегда помогает, особенно при наличии вложенных контекстов наложения. Но у браузера есть собственный механизм — верхний слой отображения.
Как работает:
• popover позволяет создавать всплывающие элементы без JS;
• popovertarget связывает кнопку с меню и управляет его открытием;
• браузер помещает открытое меню в верхний слой, где оно не зависит от обычной иерархии z-index;
• :popover-open позволяет стилизовать открытое состояние, а starting-style — анимировать появление.
Приём полезен для меню действий, административных панелей, таблиц и интерфейсов со сложной вложенностью.
📣 Code Ready | #фишка | 1 472 |
| 17 | position: fixed — влияние CSS-свойств предков на позиционирование
Для position: fixed исходным containing block служит viewport. Однако некоторые CSS-свойства предков изменяют эту привязку, из-за чего элемент может прокручиваться вместе с контейнером:
.notification {
position: fixed;
top: 20px;
right: 20px;
}
Если .notification находится внутри элемента с transform, отличным от none, этот предок формирует новый containing block. Даже преобразование без визуального смещения меняет систему координат:
<div class="container">
<div class="notification">Notification</div>
</div>
.container {
transform: translateZ(0);
}
.notification {
position: fixed;
top: 20px;
right: 20px;
}
Теперь top и right рассчитываются относительно padding box контейнера, а не viewport. Аналогичное поведение вызывают transform: translate(0, 0), perspective и filter со значениями, отличными от none:
.container {
filter: blur(0);
}
Даже фильтр без видимого эффекта создаёт containing block для фиксированных потомков. Исключение предусмотрено для корневого элемента документа.
Свойство will-change: transform также формирует containing block до применения преобразования. Такой же эффект дают contain: layout, contain: paint, contain: content и contain: strict:
.container {
will-change: transform;
}
При этом stacking context и containing block — разные механизмы. Например, opacity: 0.9 создаёт stacking context, но не изменяет систему координат фиксированных элементов:
.container {
opacity: 0.9;
}
Чтобы исключить влияние преобразованного контейнера, фиксированный элемент можно вынести за пределы его DOM-поддерева. В React для этого применяют createPortal:
import { createPortal } from 'react-dom';
function Notification() {
return createPortal(
<div className="notification">
Notification
</div>,
document.body
);
}
Портал сохраняет компонент в React-дереве, но размещает его DOM-узел вне исходного контейнера. При этом необходимо учитывать стили html и body, а при SSR — доступность document.
🔥 Краткий вывод: position: fixed не гарантирует привязку к viewport. При диагностике проверяйте предков на transform, filter, perspective, will-change, contain, backdrop-filter и content-visibility: auto.
📣 Code Ready | #практика | 1 273 |
| 18 |  +4Атмосфера HolyJS: ради чего стоит приехать на площадку
23–24 октября в Санкт Петербурге и онлайне пройдет HolyJS 2026 Autumn — масштабная JS-конференция, которая объединит фронтенд, бэкенд, графику и веб-платформу.
Интересные доклады — это база. Но Холи — это еще и то, что происходит между ними: живые разговоры, крутой нетворкинг, возможность самому выйти к микрофону и форматы, в которых можно посмотреть на привычные вещи под другим углом.
Для удобства собрали в карточках активности, ради которых точно стоит посетить конференцию.
Выбирайте, в чем хотите поучаствовать, и забирайте персональный билет со скидкой по промокоду codeready
→ Программа HolyJS
→ Купить билет
Реклама. ООО «Джуг Ру Груп». ИНН 7801341446 | 1 074 |
| 19 |  🐱 Интересная статья попалась на Хабре: «История HTML и CSS. Какие элементы и свойства ушли навсегда»!
В этой статье:
• Вспомните, как раньше создавали бегущие строки, интерактивные элементы и центрировали контент с помощью marquee, applet и center;
• Разберёте, почему до появления Flexbox и Grid разработчикам приходилось использовать float, clear и специальные CSS-хаки;
• Узнаете, как свойство zoom помогало исправлять проблемы Internet Explorer и почему старый CSS иногда выглядит так необычно.
🔊 Продолжай читать на Habr!
📣 Code Ready | #статья | 1 301 |
| 20 |  Адаптивные отступы, которые зависят от компонента, а не от экрана!
Представь карточку, которая используется и в узкой боковой панели, и в широкой сетке. Одинаковые отступы выглядят по-разному, а медиазапросы ориентируются на окно браузера, а не на доступное место внутри компонента.
Для этого в CSS есть контейнерные единицы измерения.
.card-container {
container-type: inline-size;
}
Теперь 1cqi соответствует 1% размера внутренней области контейнера по строковой оси. В обычной горизонтальной записи это ширина контейнера.
.card {
padding-inline: clamp(12px, 3cqi, 32px);
}
Отступы меняются вместе с размером контейнера, даже если ширина окна браузера остаётся прежней.
Можно использовать тот же подход для промежутков между элементами.
.card {
gap: clamp(8px, 2cqi, 20px);
}
Важный нюанс: контейнером здесь должен быть предок .card, а не сама карточка. Если подходящий контейнер не найден, единицы cqi рассчитываются относительно малого размера области просмотра по соответствующей оси.
🔥 Контейнерные единицы поддерживаются всеми основными современными браузерами.
📣 Code Ready | #совет | 1 517 |
