<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 =)

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

Цветной вывод в Node.js

Только сегодня узнал, что в 21 версии ноды появилась нативная возможность красить вывод в терминал. Я всегда использовал для этого либо picocolor, либо chalk.

import { styleText } from 'node:util';

console.log(styleText('magenta', 'Привет, мир!')); // фиолетовый текст
console.log(styleText('bgGreen', 'Успех!')); // зелёный фон
console.log(styleText('redBright', '🔥 Срочно чиним!')); // ярко-красный

А если хотите больше деталей, то добро пожаловать
👉 http://shabalin.online/blog/javascript/tips/node-styles/

Какие А-уровни по WCAG нужны на проекте

Наверняка слышали про уровни доступности по WCAG: A, AA, AAA. Это на вас не кричат, это вы повышаете доступность вашего интерфейса

С этими уровнями не всегда понятно к какому уровню стремиться. Хочется ААА, но он почти недостижим и требует огромных трудозатрат. Может тогда АА подойдёт? Всё так!

А почему можно почитать в заметочке
👉 https://shabalin.online/blog/ally/wcag-level-a/

CSS Hell

Отличная игра на знание CSS. Нужно передвинуть кружочки в нужное место, используя одно или два свойства.

https://csshell.com/

Compute Pressure Level 1

Спецификация Compute Pressure Level 1 позволяет следить за нагрузкой процессора.

У нас появляется возможность следить за пятью значениями:
- nominal: Всё хорошо, запас мощности.
- fair: Нагрузка умеренная, автономность может падать.
- serious: Процессор сильно греется, возможен троттлинг.
- critical: Устройство близко к пределу — пора снижать нагрузку.

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

Подробненько тут
👉 https://shabalin.online/blog/javascript/%D1%81ompute-pressure/

Принципы доступности веб-сайтов: Перфекционизм — враг

Тут в интернете завирусились принципы доступности веб-сайтов. Решил каждый день делиться с вами.

Ничто не является и не может быть на 100 % доступным. Любой, кто заявляет, что его продукт полностью доступен, либо лжёт, либо не понимает доступности, а чаще — оба сразу. Допустимо выпускать работу с недоступными элементами, если она вскоре станет более доступной. Делайте максимально возможное в заданных ограничениях. Если ограничения неразумны — оспаривайте их. Возможно, вам кажется, что вы не лучший специалист по доступности, но вы тот, кто может сделать достуность. Не оставляйте работу несуществующим «супергероям» по доступности.

👉 https://shabalin.online/blog/ally/guiding-principles-perfection/

Принципы доступности веб-сайтов: По умолчанию или смерть

Очередной принцип от Хейдона Пикеринга

Доступность принципиально не работает в качестве плагина, дополнения или опционального состояния. Если интерфейс предлагает опцию включить доступность, он недоступен. Низкоконтрастный переключатель, включающий высокую контрастность? Считайте, что вы проиграли. Категорически не работает и не может работать программное обеспечение для наложения доступности. Добавление доступных вещей поверх недоступных вещей не решает того, что должно быть решено. Конкретные функции, предлагаемые сторонними разработчиками, несущественны. Не поддавайтесь идеологии post hoc доступности любой ценой. Минимальный жизнеспособный продукт (MVP) без доступности не является даже минимально жизнеспособным.

👉 https://shabalin.online/blog/ally/guiding-principles-default-or-death/

Принципы доступности веб-сайтов: Паритет превыше всего

Цель — не создать лучший или даже хороший опыт, а обеспечить сопоставимый опыт для разных пользователей. Интерфейсы не должны быть сложными для одних и простыми для других, хотя некоторые задачи неизбежно сложны, а контент — специфичен. Вы не выбираете, кто заинтересуется или справится. Если изображение служит шуткой, альтернативный текст не должен раскрывать её смысл или объяснять, почему смешно. Он должен передавать ту же шутку другими средствами. Шутка может быть оскорбительной или непонятной — это недостатки инклюзивности, а не доступности.

👉 https://shabalin.online/blog/ally/guiding-principles-parity-is-paramount/

Замыкания в JavaScript

Очередная статья в интернете про замыкание. Пытаюсь показать на практических примерах, где происходит замыкание.

👉 https://shabalin.online/blog/javascript/closure/

Единицы измерения lh и rlh

Недавно удалось попробовать единицы измерения lh и rlh:
- 1lh — высота одной строки текущего шрифта при заданном line-height.
- 1rlh — то же, но относительно корневого элемента, как rem по отношению к em.

что примечательно эти единицы измерения можно использовать в боксовой модели:

.element {
  padding-block: 1rlh;
  margin-block: 1rlh;
}

У блока будет отступ равный базовой высоте строки. Всё это позволяет удобнее создать и придерживаться вертикальному ритму.

👉 https://shabalin.online/blog/css/line-height-units/