Сайт HTMLcat.net представляет собой сборник коротких заметок о полезных нативных возможностях веб-платформы. Каждая карточка сочетает одну полезную функцию с небольшим примером кода и предупреждением о том, на что стоит обратить внимание при использовании.

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

Что входит в подборку

На момент публикации коллекция насчитывает более 40 заметок, разделённых по категориям HTML, CSS и JS. Среди тем:

  • Определение типа устройства в JS
  • Скрытие полос прокрутки
  • Центрирование в CSS
  • Функция clamp()
  • Плавная прокрутка и отступы прокрутки (scroll-margin)
  • Метод classList.toggle()
  • Ссылки для телефона и почты
  • Подсветка выделения текста
  • Реляционный селектор :has()
  • Стилизация маркеров списков через ::marker
  • Локализация цен с помощью Intl.NumberFormat
  • Отключение поддерева элементов атрибутом inert
  • Псевдокласс :target
  • Глобальный атрибут translate
  • prefers-color-scheme для тёмной темы
  • Container queries — запросы по размеру контейнера
  • Элемент dialog
  • Улучшенный перенос текста через text-wrap
  • Выравнивание списков описаний
  • Цвета нативных элементов форм через accent-color
  • CSS Custom Highlight API
  • Определение поддержки наведения для разных типов ввода
  • Прозрачные цвета через color-mix()
  • События снэп-прокрутки
  • Функции light-dark() и contrast-color()
  • Область видимости стилей через @scope
  • Селектор :where()
  • Анимации, управляемые прокруткой
  • CSS-карусели
  • Свойство corner-shape
  • Пользовательские CSS-функции
  • CSS Grid Lanes
  • Popover API
  • View Transitions API
  • Запросы стилей контейнера
  • Эксклюзивные аккордеоны через атрибут name у details
  • Управление диалогами через command-кнопки
  • Скрытый до поиска контент с hidden=until-found

Формат подачи материала намеренно минималистичен: одна возможность — один пример — одна оговорка о совместимости. Такой подход удобен для быстрого освежения памяти о том, как работает та или иная нативная фича браузера, без необходимости листать длинную документацию MDN или спецификации.