CSS Боль

Как понять :nth-child() так, чтобы он перестал пугать? ➿➿➿➿➿➿➿➿➿➿ В новом выпуске «CSS Боль» делаем сложный селектор :nth-child() понятным буквально каждому, раскрывая его внутренние секреты и механики с помощью интерактивной визуализации и простых наглядных примеров. В выпуске: ✓ Как работает переменная n и почему она начинается с нуля ✓ Что делают формулы 2n, 2n+1, n+3 и -n+4 ✓ Как выбирать «до» и «от» определённого элемента ✓ Как составлять и понимать сложные последовательности ✓ Пересечения и объединения выборок ✓ Почему odd и even — это всего лишь сокращения формул Внутри — живые примеры, на которых сразу видно, какие карточки выбираются при каждом выражении. После этого ролика вы перестанете помнить «частные случаи» и начнёте читать формулы как предложения на языке CSS. 🐭 Смотреть на YouTube 🐹 Смотреть в VK

✨ На грядущем PiterJS для вас выступит Александр Першин с докладом: 📜 Реактивный CSS близко

Мы стоим на пороге революции в вёрстке, связанной с новым подходом — реактивным CSS. В нём привычная логика отображения «переезжает» из JavaScript в стили, и весь внешний вид компонента зависит от CSS-переменных состояния. В докладе мы детально разберём, как работает реактивный CSS. Мы создадим и сравним две реализации типового слайдера. Вы увидите как логика из JS перетекает в стили, сможете оценить объём и сложность кода на CSS и понять, есть ли у подхода будущее.

🗣 Немного об авторе

20 лет в веб-разработке, сооснователь HTML Academy, много лет исследую современный CSS.

🎫 Регистрируйся, пока есть места: https://piterjs.org/#meetup=tx5uqh_fox5zo ✔️ А если передумал идти — отмени регистрацию там же, чтобы кто-то смог прийти вместо тебя.

Можно ли построить школьные графики на чистом CSS? ➿➿➿➿➿➿➿➿➿ Оказывается, можно. В новом выпуске «CSS Боль» строим функции прямо в браузере — от простых прямых до синусоид. CSS умеет работать с линейными функциями, параболами через pow(), логарифмами и тригонометрией. Всё это можно использовать для параллакса, анимаций по траекториям и необычных меню. Внутри — интерактивная демка, где можно поэкспериментировать с формулами и увидеть, как CSS справляется со школьной математикой. 🐭 Смотреть на YouTube 🐹 Смотреть в VK

Реактивный CSS уже близко! ➿➿➿➿➿➿➿➿➿➿ CSS теперь умеет реагировать на состояние и управлять интерфейсом самостоятельно. В новом выпуске «CSS Боль» показываем, как построить реактивный слайдер. Внутри выпуска: ✓ Что такое Reactive CSS и как он меняет подход к разработке. ✓ Как заменить десятки JS-классов одной CSS-переменной --current. ✓ Используем @property, sign(), abs() и sibling-index() для вычислений прямо в стилях. ✓ Контейнерные запросы, которые понимают, какой элемент активен. ✓ Реактивные эффекты: слайды двигаются, кнопки подсвечиваются, логика живёт в CSS. 🐭 Смотреть на YouTube 🐹 Смотреть в VK

CSS теперь умеет думать — без шуток. ➿➿➿➿➿➿➿➿➿➿ Вышел Chrome 142, и вместе с ним — великий апгрейд CSS-условий. Теперь if() и стилевые контейнерные запросы могут сравнивать значения: >, <, =, — прямо в стилях, без JS. Новый выпуск «CSS Боль»: ✓ Почему старый if() был бесполезным и что изменилось в новой версии. ✓ Как теперь сравнивать CSS-переменные между собой и со значениями. ✓ Диапазонные проверки в действии: длины, углы, проценты и даже attr(). ✓ Реальный пример: как CSS сам управляет пагинатором без единой строчки JavaScript. ✓ Что говорит спецификация CSS Conditional Rules Module Level 5. ✓ Как сделать фолбэк с sign() для старых браузеров. CSS перестаёт быть просто языком оформления — он начинает принимать решения. 🐭 Смотреть на YouTube 🐹 Смотреть в VK

01. «Абсолютное позиционирование» — как сверстать «точечные» лидеры в адаптивном оглавлении и на пальцах понять containing block, static position и shrink-to-fit для position: absolute. 02. «Радиальные градиенты, часть 1» — базовая грамотность по radial-gradient(): color stops, эллипс vs круг, центр через at, управление плотностью и первые трюки с анимацией через CSS-переменные. 03. «sibling-index() и sibling-count() вместо инлайнов и костылей» — практично применяем «соседей» для состояния без JavaScript, строим гибкие связи в разметке и следим за специфичностью. 04. «Радиальные градиенты, часть 2» — продвинутая практика: резкие переходы, отрицательные color stops, градиентный бокс через background-size и точное позиционирование центра. 05. «Вырезы в блоках — революция» — новая парадигма: делаем вырезы масками (mask-image + градиенты) вместо обёрток — меньше кода, больше гибкости и честная работа на сложных фонах. 06. «CSS if() — провал или прорыв?» — трезво оцениваем: if() внутри значений свойств с style, media, supports — где полезно, где нет, и что такое стилевые «самозапросы». 07. «Сравнение CSS-переменных на чистом CSS» — приём с sign() и @property для «меньше, больше или равно», версии на if() и на container style queries, с оговорками по поддержке. 08. «Конические градиенты — что скрывает спецификация W3C» — полный разбор conic-gradient(): углы и стопы, from и at, практические эффекты (рамки, диаграммы, узоры) и что реально написано в спецификации CSS Images Module Level 4. 09. «Голограммы на чистом CSS» — собираем «шейдерный» перелив: слои с mask + mix-blend-mode (multiply, color-dodge) и вращающийся conic-gradient через анимируемую --angle. 10. «Вогнутые углы за пару строк CSS» — быстрые инвертированные углы с nebo.css: классы и CSS-переменные для формы и смещений, комбинация нескольких углов через обёртки и корректная работа поверх градиентов и картинок. 11. «Великий апгрейд CSS-условий» — историческое обновление Chrome 142: функция if() и стилевые контейнерные запросы теперь поддерживают диапазонные сравнения (>, <, =) и позволяют сравнивать CSS-переменные между собой. Разбираем спецификацию CSS Conditional Rules Module Level 5, примеры с переменными x и y, проверка значений в пикселях, процентах и em, применение в реальных интерфейсах и приём с sign() как фолбэк для старых браузеров. 12. «Реактивный CSS близко» — новая парадигма, в которой сложная логика отображения, которую раньше могли делать только на JS, теперь делается на CSS. В выпуске показано, как построить слайдер без классов и JS, управляя состоянием одной переменной --current. Компоненты реагируют на состояние, меняют внешний вид и анимируются полностью нативно — Reactive CSS в действии. 13. «Математика в CSS» — визуализация школьных функций на чистом CSS: движение точек по оси Y через вычисления в calc(), построение графиков прямых, парабол, кубических кривых, корней и логарифмов с помощью pow() и log(), а также тригонометрии через sin(), cos() и tan(). В выпуске — интерактивная демка, смещения и масштабирование функций, перевороты и фазовые сдвиги, а также примеры, где такая математика реально используется: параллакс-эффекты, анимации, меню по спиралям и нестандартные UI-траектории. 14. «:nth-child – разбор для новичков» — наглядное объяснение того, как работает формула an + b в селекторе :nth-child(): выбор чётных и нечётных элементов, последовательности «начиная с» и «до», построение сложных выборок через 2n+1, n+4, -n+3 и другие выражения. В выпуске — визуализация того, как изменяется n, пересечения селекторов без пробела, объединения через запятую и разбор того, почему odd и even — всего лишь сокращённые математические формулы. 15. «Полное разочарование в CSS» — честный разбор нового синтаксиса и работающего решения без JavaScript. В выпуске — наглядное объяснение, почему nth-child(of S) не делает то, что все от него ждут, и как в реальности работает выбор элементов внутри контейнера. Разбираемся, что именно не так в спецификации, почему MDN вводит в заблуждение и чем всё это оборачивается на практике.

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