✨ PiterJS #74 уже на следующей неделе - традиционно в четверг!

👨‍💻 В январе мы проведем митап в гостях у самого айтишного вуза!
😍 Рассказываем и показываем красивое.

⏰ Когда: 23 января 19:00 (будем ждать вас с 18:30)
📍 Где: Главный корпус ИТМО, м. Горьковская, Кронверкский проспект, 49

📰 Программа:
🗣 19:10 Евгений Дорошкевич с докладом про Gsap
🗣 20:10 Артик Мангасарян расскажет про CSS: Эволюция цвета
🗣 21:10 Александр Мальцев поделится опытом в докладе Эффективный рендеринг SVG-стрелок: оптимизация для графов с сотнями объектов

🎫 Регистрируясь вы получаете индивидуальный пропуск.

🔥Важно: зарегистрироваться можно до 22 января 19.00!

оказывается работать на двух работах это очень сложно, но к новостям

W3C начала работу по стандартизации стилизации контролов элементов форм https://www.w3.org/TR/2025/WD-css-forms-1-20250325/
это не слёзы, это дощь

Появится новое значение у appearance - base, способ явно активировать базовое оформление формы, которое будет одинаковым во всех браузерах и легко переопределяется.

Появится куча псевдоэлементов для управления контролами:
- ::picker-icon – иконка открытия селектора.
- ::file-selector-button – кнопка выбора файла.
- ::checkmark – кастомизация галочек.
- ::thumb, ::track, ::fill – части слайдеров.
- ::clear-icon, ::placeholder – поля ввода.
- ::step-up, ::step-down – инкременты числовых полей.
- ::color-swatch – предпросмотр цвета.

Также появится CSS-функция control-value(), которая позволяет получить текущее значение элемента формы.

Из коробки будет учтён WCAG 2.2 AA

text-wrap

Долго мучила мысль по поводу использования значений balance и pretty.
Гуглеры рекомендуют такой подход: «balance — для заголовков, pretty — для основного текста». Сегодня, прочитав статью от Apple, стало понятно почему: всё из-за производительности. Гуглеры смотрят не на весь текст для балансировки, а только, кажется, на последние четыре строки.

В Safari могут позволить себе анализировать весь текст без ощутимой просадки в скорости. Она становится заметна лишь на сотнях строк в одном параграфе. Речь идёт не обязательно о теге <p>, а о любом текстовом блоке. Если текст получается длинным (например, как в спецификациях), но при этом разбит на параграфы и другие текстовые ноды, то проблем с производительностью не будет.

В связи с этим идея «использовать text-wrap: balance исключительно для заголовков, а text-wrap: pretty — только для основного текста» кажется слишком упрощённой. Дело в том, что balance действительно хорошо работает для коротких текстовых блоков (заголовки, подписи, тизеры), где удобно, чтобы все строки получались примерно одинаковой длины. Однако в некоторых ситуациях pretty может подойти и для заголовков, особенно если важно заполнить всё доступное пространство и избежать короткой последней строки без «сужения» всего блока текста.

С другой стороны, balance (при желании) можно применить и к основному тексту, но результат обычно выглядит странно: абзацы в этом случае не совпадают по ширине с контейнером, а строки могут становиться намного короче, чем доступное пространство. Проще говоря, у каждого инструмента есть свои преимущества, и сводить всё к правилу «balance — только для заголовков, pretty — только для абзацев» значит упускать гибкость, которую даёт CSS.

Источник: https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/

Давайте вспомним вместе, что такое логические свойства в CSS

https://shabalin.online/blog/css/logical-properties/

Красивая типографика

Решил всё-таки подробнее пройтись по статье "Better typography with text-wrap pretty"

https://shabalin.online/blog/css/text-wrap/

Большие, красивые, мощные состояния фокуса с :focus-visible v2

В одном из предыдущих постов я писал про красивые обводки для интерактивных элементов. Это простой и рабочий способ: добавляем в проект и радуемся.

*:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 0.25rem;
  border-radius: 0.13rem;
}

Но в одном реальном проекте пришлось немного изменить этот подход, а в следующем — снова адаптировать под нужды. В итоге я решил зафиксировать все варианты в одном месте: https://shabalin.online/blog/css/tips/global-focus-visible/

Приходите со своими вариантами в чат

currentcolor в 2025

Мы долго спорили, кто как пишет currentcolor в своих проектах: currentColor, CURRENTCOLOR или даже cUrrENtCoLOr. Люди же уже обсуждают, проиграл ли currentcolor кастомным свойствам?

Написал небольшую заметку (https://shabalin.online/blog/css/currentcolor/), где вспомнил о том, как работает currentcolor, какие у него есть подводные камни и где его можно использовать даже при повсеместном применении кастомных свойств.

Напишите в чатике, где в ваших проектах вы используете currentcolor?

Гриды? Флексы? Item-flow? Что это?

Продолжаем наблюдать за судьбой masonry-раскладки в вебе. Напомню, что на данный момент нет никакой определённости и всё на стадии обсуждения. В прошлый раз было два варианта:
1. Добавить в гриды

display: grid;
grid-template-columns: 1fr 2fr 3fr;
grid-template-rows: masonry;

2. Создать новый display: masonry

display: masonry;
masonry-tracks: 1fr 2fr 3fr;
masonry-direction: column;

Все уже желали остановиться и выбрать одно из двух. Но тут ворвались ребята из W3C TAG и обронили фразу:

В целом, мы считаем, что masonry, гриды и wrapping-флексы(flex-wrap) должны быть объединены в единый набор свойств.

После этой фразы появился третий вариант item-flow для обсуждения.

Item-flow — это новое обобщённое свойство, которое объединяет принципы флексов и гридов, давая возможность задавать направление потока элементов, их обёртывание, тип упаковки и дополнительные настройки (включая masonry). Проще говоря, оно объединяет flex-flow и grid-auto-flow в единую систему, добавляя такие возможности как создание masonry-раскладки и другое.

Постарался коротко закрепить тут https://shabalin.online/blog/css/item-flow/

Вы же читаете? =))

nullish coalescing opertor

На этой неделе на работе получилось применить оператор нулевого слияния (??). Мне прям понравилось.

const value = 0;
const defaultValue = 5;

console.log(value ?? defaultValue); // ??

Написал для вас небольшую заметку https://shabalin.online/blog/javascript/nullish-coalescing/

<h1> скоро поменяет своё дефолтное отображение

Сейчас браузеры, обрабатывая <h1>, вложенные в секции, применяют к ним стили, которые визуально снижают их уровень (например, делая их похожими на <h2> или <h3> в зависимости от глубины вложенности). Речь идёт о стандартных стилях по умолчанию браузера. В скором времени все <h1> будут отображаться одинаково, поэтому для предотвращения проблем проверьте, что для заголовков в ваших проектах заданы явные стили.

<h1>Level 1</h1>
<section>
  <h1>Level 2</h1>  <!-- выглядит как h2 -->
  <section>
    <h1>Level 3</h1> <!-- выглядит как h3 -->
    <section>
      <h1>Level 4</h1> <!-- выглядит как h4 -->
    </section>
  </section>
</section>

Почитать заметку https://shabalin.online/blog/css/default-heading-style/

Калибруем замедление процессора

В Chrome 134 появилась возможность откалибровать замедление процессора. Если раньше мы выбирали x4, x6 или x20, и не понимали, что это значит, то теперь можно запустить процесс калибровки относительно вашего процессора и получить скорость для слабых(«low-tier mobile») и средних мобильных устройств( «mid-tier mobile»).

Калибровку можно сделать один раз и забыть. В большинстве случаев, если вы хотите эмулировать типичный смартфон, достаточно выбрать «mid-tier mobile».

Добавил для вас подробную заметочку, где можно посмотреть, что тыкать в DevTools - https://shabalin.online/blog/devtools/cpu-throttling-calibration/

Более приватные :visited

Закончим эту неделю последней новостью про обновления Хрома. В Chrome 136 изменилась логика работы псевдокласса :visited за счёт «разделения» истории посещённых ссылок. Эта новинка защищает пользователей от утечек приватных данных и решает старую проблему безопасности, существовавшую более 20 лет.

Заметка уже на месте - https://shabalin.online/blog/css/visited-links-private/

Всем лёгкого понедельника 😘

Жидкая(fluid) типографика

Накопилось много мыслей о том, как работать с жидкой типографикой в современном вебе — да и с типографикой в целом. Хочется поделиться ими, пусть и не всегда в строго структурированном виде.

Прямо сейчас у меня нет универсального рецепта в духе «делай так, и будет счастье», но есть потребность выложить всё, что крутится в голове. На этой неделе планирую бессистемно публиковать статьи о типографике в вебе. Возможно, к концу недели удастся собрать из всего этого приличный материал.

А пока — первые, ещё не отфильтрованные мысли можно прочитать в статье
«Введение: что такое „жидкая“ типографика?»
👉 https://shabalin.online/blog/css/fluid-typography/

Читать много, но я в вас верю! 💪
P.S. В тексте столько букв, что на них можно было бы сверстать три лендинга и один доклад на конференцию. Не благодарите :)

Инклюзивность тёмной темы и типографика

Продолжаю ковыряться в типографике. Инклюзивность тёмной темы и типографика — это не просто поменять чёрный на белый и наоборот. Тёмные оттенки могут буквально «съедать» буквы, делая их тоньше, точно так же, как я выгляжу стройнее, когда надеваю тёмный бадлон. Ещё стоит не забывать, что все люди не видят одинаково, но стоит повысить контрастность букв и множество проблем уходят сами собой.

Почитать можно в том же месте 👉 https://shabalin.online/blog/css/inclusive-dark-mode/

Размеры шрифта в настройках браузера

👉 Продолжаю отвечать на свои же вопросы о типографике: https://shabalin.online/blog/css/default-font-size/

Часто вижу, что дизайнеры и фронтендеры считают дефолтным размер шрифта 16px и пляшут от этого значения, постоянно переводя r[em] `в `px и обратно с помощью калькулятора. Но ведь дефолт можно изменить в настройках браузера и, например, поставить 24px или наоборот — сделать более мелким, скажем, 10px.

Мы не знаем, какое зрение у пользователя. Я вот, например, при зрении «единица» всё равно больше люблю размер шрифта 20px, чем 14px или 16px.

А проблема моя и остальных таких, как я, в том, что если указать дефолтный размер в браузере 20px, на всех сайтах базовый размер шрифта будет любым, но только не 20px. Тут, конечно, очень выручает сочетание Ctrl+ в браузере.

Ультратонкие шрифты

я даже описание делать не буду
картиночка это сделает лучше, чем любое описание

👉 https://shabalin.online/blog/css/thin-fonts/

24 апреля пойду на PiterJS. Там будет Саша Першин, гендир HTML Academy, с докладом "Negative border radius – не больно".
А потом скорее всего он поведёт меня в бар на афтепати, но это не точно

✨ Ура! Скоро PiterJS #77

На митапе разберём кто круче — серверные или клиентские компоненты в React, и узнаем как сделать невозможное — negative border-radius на чистом CSS.
А батл между дизайнерами и программистами докажет: красота и код идут рука об руку (или в клинч!)

Так что тащите с собой и коллег из дизайнерского цеха - им тоже будет интересно 😉

24 апреля 19:00 в СПбГМТУ (Корабелка), Ленинский пр., 101, м. Ленинский Проспект.

Программа:
- Маргарита Лукина с докладом "Эволюция SSR в React приложениях"
- Холивар от PiterJS "дизайнеры vs кодеры"
- Александр Першин с докладом "Negative border radius – не больно"

✨Регистрация

Флудилка в Telegram | Группа ВКонтакте

Межгэповые декорации

Мы постоянно используем gap и в грид‑, и во флекс‑контексте благодаря спецификации CSS Box Alignment Module Level 3.

Чтобы красиво оформить пустоту, появившуюся благодаря gap, приходилось прибегать к множеству псевдоэлементов и порой нелёгкой математике в calc(), чтобы полосы внутри gap не накладывались друг на друга.

Вчера вышла в черновике спецификация CSS Gap Decorations Module Level 1, которая позволяет рисовать внутри gap полосы — и всё это без математических расчётов и псевдоэлементов: новые свойства автоматически обрезают линии в нужных местах.

Посмотрите примеры в статье:
👉 https://shabalin.online/blog/css/gap-decoration/

139 Firefox станет первым браузером с Temporal

👉https://shabalin.online/blog/javascript/firefox-first-browser-temporal/

Temporal — это новая встроенная API JavaScript, пришедшая на смену устаревшему Date. Она даёт неизменяемые объекты для дат, времени, часовых поясов и длительностей, устраняет баги со скрытой тайм‑зоной и упрощает арифметику («плюс месяц», «разница в днях») без сторонних библиотек.

Напишу микросервис недорого

Сегодня провёл лайв для курса по node.js =)

В блоге вышла ещё одна статья, но я хочу оформить её как следует. Позже расскажу подробнее