Моя коллекция полезных HTML-фич

Меня очень сильно удивляет, что многие фронтендеры скрывают и показывают элемент, добавляя и удаляя самостоятельно свойство display со значением none. Есть же атрибут hidden.

Если в CSS для элемента будет задан, скажем, display: flex, то работать этот атрибут не будет.

Система font fallback: что происходит, когда шрифт не может найти нужный символ

Ссылки на картинки неплохо бы обновить

JWT авторизация в FastAPI: от теории к практике

The suggested pronunciation of JWT is the same as the English word "jot".

Stitches закрыт — да здравствует StyleX

По мере развития css в котором теперь и переменные, и функции, и обсуждается внедрение mixins 

Только всё это сейчас не помогает для изоляции названий пользовательских свойств. Нет гарантий, что, подключая какую-нибудь библиотеку для календаря, там не окажется `--token-color-primary` как у вас в проекте. Библиотеки типа StyleX дают возможность устранить коллизии названий "CSS-переменных". Правда, отлаживать в инспекторе мучительно больно.

Почему статические сайты возвращаются и чему они научились

Сейчас эту проблему решили инкрементальной сборкой. Пересобирается только изменившаяся страница. Eleventy — через плагины.

А такие точно есть? Сейчас в документации Eleventy такая функциональность помечена как to-do.

Какие новые HTML и CSS фичи полностью поддерживаются браузерами в 2026 году

композиция классов

Какие новые HTML и CSS фичи полностью поддерживаются браузерами в 2026 году

От препроцессоров - да, от БЭМ очень сложно отказаться

Новые CSS-фичи, появившиеся к началу 2026 года

Можно не ждать и принести свое предложение в https://github.com/w3c/csswg-drafts/issues

Новые CSS-фичи, появившиеся к началу 2026 года

А есть proposal?

Новые CSS-фичи, появившиеся к началу 2026 года

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

Новые CSS-фичи, появившиеся к началу 2026 года

Да, была неплохая статья с объяснением причин и инструментом для подбора значений, которые не ломали бы доступность.

Новые CSS-фичи, появившиеся к началу 2026 года

Разве это можно реализовать на препроцессорах?

Новые CSS-фичи, появившиеся к началу 2026 года

Где должно быть много сложных вычислений, которые нужно спрятать. Например, функция для вычисления безразмерного числа для размера вьюпорта: 0 - это минимальный размер, 1 - максимальный. Пригодится для плавной адаптивности. В демке - плавное изменение размера шрифта и прозрачности фонового цвета в зависимости от размера вьюпорта:

@property --_vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

@function --viewport-scale(--min <number>: 300, --max <number>: 1200) returns <number>  {
  --_vw: 1vw;
  --_unitless-viewport: calc(tan(atan2(var(--_vw) * 100, 1px)));
  --_clamped-viewport: clamp(var(--min), var(--_unitless-viewport), var(--max));  
  --_viewport-scale:
    calc(
      (var(--_clamped-viewport) - var(--min)) /
      (var(--max) - var(--min))
    );
  result: calc(var(--_viewport-scale));
}

body {
  margin: 0;
  min-height: 100dvh;
  background-color: rgb(255 100 50 / --viewport-scale());
  font-size: calc(--viewport-scale(100, 800) * (72px - 20px) + 20px);
}

Новые CSS-фичи, появившиеся к началу 2026 года

Мне кажется, что так не очень понятно, в чём же прелесть правила @function. Давайте добавим ещё медиа-запросы.

Не очень удачный пример. Без функции даже проще:

.awesome-container {
  --columns: 1;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);

  @media (width > 640px) {
    --columns: 2;
  }

  @media (width > 1200px) {
    --columns: 3;
  }
}

Верстаем сложный прогрессбар в 2026 году

Можно было бы стилизовать нативные элементы progress и meter. Но там больше дополнительных действий по убиранию оформления по умолчанию

Как работает position: sticky и почему он часто не прилипает

Со "срезами" как-то всё туманно.

height: 100vh; /* ← высота замкнута внутри среза */

Означает растянуть на всю высоту экрана, а не на высоту родительского элемента, что имеет больше смысла в контексте микрофронтов.

Первая в мире библиотека Web Components в духе shadcn. Серьёзно, я проверял

Те же табы недоступны с клавиатуры

Этот CSS пора оставить в прошлом

Для примера представим, что нам нужно отобразить изображение квадратной формы.

.awesome-media-container {
  position: relative;
  padding-top: 100%;
}

От такого решения стоит отказаться хотя бы потому, что тут есть баг. Есть случаи, когда такой блок не будет квадратным.

Мои любимые CSS-трюки, которые вы могли упустить

Как легко понизить специфичность селектора при рефакторинге кода

Я для этого использую  :where. Например, .selector:where(.selector) {}

Странные CSS-свойства, но, возможно, полезные

Отображение со свойством empty-cells сильно зависит от border-collapse

С прошлого года у нас появилось ещё свойство text-align-last.

Странно, я это свойство в 2015-ом году использовал как улучшение.