tgindex

CSS Боль

описание

Канал @htmlacademy про сложные места CSS без магии и суеверий https://tml.io/cssbol. В каждом выпуске разбираем механику движков, показываем живые демо и даём проверяемые решения — чтобы непонятное становилось повторяемым.

← к каналу@cssbol
575
подписчиков
Охват к подписчикам
365,4%
ERR
Реакции к просмотрам
0,74%
316 на 21 постов
Пересылки к просмотрам
0,92%
393
Постов в день
0,1
всего 21

Где отзываются чаще

доля реакций к просмотрам
  • 11 февр.mlut - это необычный, алгоритмический, взгляд на atomic-подход в CSS. Что в корне отличает его от знакомого всем Tailwind. В mlut используются атомарные классы ("утилиты"), каждый из которых делает одно действие. Обычно они применяет одно CSS-свойство (например, цвет текста). В отличие от привычного атомарного CSS, классы в mlut закодированы и выглядят примерно так: D-ib, Bgc-blue_h. Это кодирование кажется сложным, но эта сложность обманчива и играет на руку тем, кто использует фреймворк. Одно из неочевидных следствий использования mlut – это "вечная" привязка клиентов к разработчику для доработок и поддержки. Ведь другие разработчики испугаются синтаксиса, да и нейросети тоже не смогут помочь. А это, если задуматься, ценная во времена глубокого кризиса IT особенность, которую даст не каждый простой инструмент. Недавно разработчики фрейморка запустили проект на ProductRadar, где борются со стартапами за топ-3 продуктов этой недели. Они будут благодарны за поддержку лайком на этой площадке и любой фидбек.2,17%
  • 14 авг.Треугольники на CSS Недавно вышла статья, в которой автор открыл для себя треугольники на конических градиентах. Идея простая: помещаем центр градиента в угол и используем резкий переход цветов. Способ гибкий и удобный: не нужен дополнительный элемент, можно сделать сразу несколько треугольников и независимо управлять их параметрами с помощью многослойных фонов. Cхема решения такая: conic-gradient( from 335deg at bottom right, transparent 0 25deg, red 25deg ); "Наклон" треугольника задаём позицией цвета, помещаем центр градиента в нужный угол контейнера и подбираем подходящий стартовый угол. Этот полезный приём можно сразу закрепить в небольшом игровом уровне по CSS-градиентам: 5 минут практики, чтобы поиграть с параметрами и набить руку.1,98%
  • 20 маяРеактивный CSS всё ближе Свершилось! В 151 Firefox завезли стилевые контейнерные запросы. Это значит, что сложная клиентская логика на CSS теперь доступна во всех основных браузерах. И доклады про реактивный CSS становятся всё более актуальными Есть и ещё одна хорошая новость. За флагом добавили range синтаксис для сравнений: @container style() range syntax queries: layout.css.attr.enabled То есть Firefox в вопросах клиентской логики семимильными шагами догоняет Chrome. Для полной картины осталось добавить только if(). Детали релиза: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1511,22%
  • 8 апр.Прощай, квадратный веб Chrome радует скоростью релиза новых фич. Совсем недавно, в начале февраля, мы обсуждали новости про экспериментальную фичу — свойство border-shape. А спустя два месяца, 7 апреля 2026, фича уже в релизе в Chrome 147. Напомню, чем так мил border-shape. Свойство позволяет задавать произвольную форму блока с помощью функции shape(), которая уже используется в clip-path, и с которой многие уже знакомы. Но главное, что эту форму понимают все остальные декоративные свойства — рамки, тени, аутлайны. Эту форму видит и внутренний контент. Так что выход border-shape можно смело называть революцией. И ещё один приятный момент. Сама функция shape() находится в интеропе 2026. А значит, что и border-shape во всех браузерах может появиться быстро. В общем, всех поздравляю с обновкой! А я пошёл думать над интерактивным курсом по border-shape.1,14%
  • 30 мар.Круговой прогресс-бар на CSS — после первого выпуска казалось, что тема закрыта. Два градиента, пара переменных, готово. А потом пришёл запрос: «Сделай концы шкалы круглыми». Одно «маленькое» требование — и в реализации появилась тригонометрия, формулы позиционирования по окружности, синхронизация четырёх градиентов. Как из двух градиентов вырос прогресс-бар с CSS-тригонометрией — в новом выпуске. Попробуйте демонстрацию — покрутите параметры и посмотрите, как всё работает вживую. 🐭 Смотреть на YouTube 🐹 Смотреть в VK1,05%
  • 26 мар.Когнитивная пропасть и нейросети Многие уверены: нейросети облегчили вход в айти. Но в жизни всё ровно наоборот. ИИ не облегчил вход в айти, а серьёзно его усложнил. На пути новичка появилась настоящая когнитивная пропасть. Без упоминания «поверхностных вайбкодеров» рассказ не выйдет. Это ребята, которые не разбираются в разработке, но умело пользуются нейросетями и даже ваяют какие-то IT-продукты. Казалось бы, отличный пример легчайшего входа в айти через владение ИИ. Но малину портят два но: 1. Низкий (почти отсутствующий) порог входа в вайбкодинг Если ИИ осваивается за пару недель, то сколько вайбкодеров наплодится за полгода? Сотни тысяч, миллионы? Низкий порог входа всегда приводит к гигантской конкуренции и отрицательной рентабельности в каждой сфере. Короче, на вайбкодинге очень скоро будет не заработать. 2. Пропасть в эффективности между разработчиками и вайбкодерами Сильный разработчик, который отлично владеет ИИ, заменяет сотни поверхностных вайбкодеров. Он выдаёт результат быстрее, качественнее, дешевле. А ещё он решает задачи, которые вайбкодеру не поддались, потому что разработчик видит решение задачи до того, как начинает писать промт. А теперь задайте себе вопрос. Кто нужен серьёзному бизнесу, в котором можно построить профессиональную карьеру? Поверхностные вайбкодеры или сильные разработчики, хорошо владеющие ИИ. Теперь для входа в айти (и для последующего роста) критически важны: – глубокие технические навыки (шире и глубже, чем требовались раньше); – навыки проектирования систем, декомпозиции и постановки задач (которые вообще-то у разработчиков развиваются годами по мере набора опыта); – умение работать с нейросетями. Требования для входа в айти из-за ИИ не упали, а выросли в разы. Это и есть когнитивная пропасть. Для подготовки кадров это означает, что надо давать глубокую базу и после неё обучать владению ИИ. Мы в Академии уже перестроили под это свои программы. Посмотрите, как это устроено, на примере «Нейрофронтендера». 📲 Резервный канал в MAX1,05%
  • 3 июл.Мини-игра по CSS-фильтрам Нужно менять код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем лучше. Можно играть даже на мобильном. Играть здесь0,94%
  • 10 мар.Мы сделали пошаговую демку к новому выпуску — попробуйте сами собрать 3D-эффект летающих мышек на CSS-масках. Каждый шаг из ролика можно пройти в браузере и посмотреть код. В выпуске — анимация mask-position и mask-size, множественные маски в противофазе, mask-composite для пересечений. Нейросеть генерирует @keyframes за минуту — и это наглядный пример того, как ИИ ускоряет разработчика. Но ускоряет именно разработчика, а не заменяет его. Во второй части — почему нейросети не облегчили вход в разработку, а наоборот создали пропасть на пути в IT. 🎁 Демонстрация: анимация CSS-маски 🐭 Смотреть на YouTube 🐹 Смотреть в VK0,94%
  • 16 мар.Накрутчики опыта в IT, у вас проблемы. HeadHunter зарелизил систему, после которой фейковые резюме исчезнут из выдачи. Совсем. Рекрутеры получили инструменты, чтобы отделить реальный опыт от накрученного прямо в списке с откликами. Врал годами? Станешь невидимкой. Честные наконец попадут в поле зрения. А ещё рекрутёрам дали лёгкий способ банить накрутчиков навсегда. HR-сообщество вычистит платформу за считаные месяцы. Эйчары ждали этого годами. Как это работает, кто пострадает первым и почему не все платформы могут себе это позволить. Разбираем в новом выпуске CSS Боли. 🐭 Смотреть на YouTube 🐹 Смотреть в VK0,92%
  • 25 февр.Статья «Восхитительный Range Syntax в CSS» Помните сĸазĸу про мальчиĸа, ĸоторый ĸричал «волĸи»? Примерно таĸ же в 2025 году случилось с «программированием на CSS». Вышла фунĸция if() . Блогеры преждевременно хайпанули: всё, теперь у нас условия в CSS. Разработчиĸи пошли читать специфиĸации, попробовали — и довольно быстро выяснилось, что внутри условного выражения style() возможностей почти нет. Многие разочаровались и похоронили идею. В ĸонце 2025 года Chrome выĸатил революционный Range Syntax For Style Container Queries. Обновлённый style() научился сравнивать переменные между собой и поддерживать диапазонные выражения. Мы наĸонец-то получили мощную условную логиĸу в CSS, но мало ĸто это заметил. В статье мы возрождаем идею программирования на CSS. На примере паттерна — «выделение диапазона дат в ĸалендаре» — разберём, ĸаĸ обычная JS-логиĸа превращается в CSS-логиĸу (спойлер: очень просто). Читать статью → https://habr.com/ru/articles/1002216/ Попробовать демку → https://htmlacademy.ru/demos/2490,79%
  • 2 апр.Больше знаешь — крепче спишь (девиз ордена Хранителей) Новая истина для айтишников. Причём именно в такой формулировке. Бизнес с удовольствием заменил бы всех разработчиков на оркестры агентов, но мешает одно «но» — автобусное число. Кто-то должен знать, как устроена система, как устроены эти оркестры, и нести за это ответственность. Короче, каждой системе нужен Хранитель, а лучше — несколько. Хранителей не уволят, хранителей будут беречь: они ценны, а выращивать новых очень дорого. Когда орден Хранителей для каждого продукта будет создан и угроза автобусному числу исчезнет, бизнес начнёт избавляться от рядовых разработчиков, которые занимаются рутиной. Задачи уволенных будут передаваться в оркестры. Кого же выберут в Хранители? Тех, кто лучше, полнее и глубже знает свой продукт, свою систему, свой оркестр. Так что больше знаешь — крепче спишь. Резервный канал в MAX0,75%
  • 24 июл.Мифические измерения гридов "Флексы одномерные, а гриды двумерные" (ага, а трансформации трёхмерные). Никогда не понимал, что это значит. Признайтесь, у кого так же? Я расшифровываю это так: в гридах есть явная двумерная адресация для элементов, а во флексах — нет. Грид-элементу можно сказать: "живи в 4 колонке 3 ряда". И он будет там жить, даже если в грид-контейнере он один-одинёшенек. Двумерная адресация — это хорошо. Но настоящая жемчужина (без иронии) гридов — именованные области и адресация по имени: grid-template-areas + grid-area. Поиграться с именованными областями можно в новом уровне грид-лего0,75%