Какие последние свойства смотрел на сайте caniuse?

Последние свойства CSS и API, которые я отслеживал на Can I Use

Как опытный фронтенд-iнженер, я регулярно отслеживаю поддержку новых веб-стандартов через Can I Use (caniuse.com) и другие ресурсы. В последнее время моё внимание привлекли несколько ключевых свойств и API, которые активно внедряются в браузерах и меняют подход к разработке интерфейсов.

1. CSS Container Queries

Пожалуй, самое революционное нововведение последних лет — контейнерные запросы (Container Queries). В отличие от медиа-запросов, которые реагируют на размер viewport, контейнерные запросы позволяют стилизовать элементы на основе размера их родительского контейнера.

/* Объявляем контейнер */
.component {
  container-type: inline-size;
  container-name: component-container;
}

/* Запрос к контейнеру */
@container component-container (min-width:":
  .card {
    flex-direction: row;
  }
  
  .card__title {
    font-size: 1.5rem;
  }
}

Текущая поддержка: Стабильно в Chrome/Edge, Safari 16+, Firefox 110+. Это полностью меняет архитектуру компонентов — теперь мы можем создавать truly reusable компоненты, которые адаптируются к своему контексту, а не к размеру окна.

2. CSS Subgrid

CSS Subgrid — долгожданное расширение Grid Layout, которое позволяет вложенным grid.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grid-item {
  /* Наследует линии grid от родителя */
  grid-column: span 2;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

Актуальный статус: Полная поддержка в Firefox уже несколько лет, в Safari 16+, Chrome/Edge 117+. Это решает проблему выравнивания вложенных grid-контейнеров.

3. CSS Color Functions и Color Spaces

Новые цветовые пространства и функции — OKLCH, OKLAB, display-p3:

:root {
  /* Традиционный */
  --color-old: rgb(255 0 0);
  
  /* Современный с улучшенной воспринимаемостью */
  --color-new: oklch(70% 0.5 30);
  
  /* Широкий gamut */
  --color-wide: color(display-p3 1 0.5 0);
}

.element {
  background: linear-gradient(
    to right in oklch,
    oklch(60% 0.5 30),
    oklch(80% 0.3 90)
  );
}

Зачем это нужно: Более perceptually uniform цвета, лучшее управление lightness, поддержка wide-gamut дисплеев. Поддержка растёт — уже в Chrome 111+, Safari 15.4+.

4. View Transition API

Экспериментальный View Transition API для нативных анимаций между состояниями документа (например, при навигации SPA или изменении DOM):

// Простая анимация между состояниями
function updateView() {
  // Запускаем transition
  document.startViewTransition(() => {
    // Изменяем DOM здесь
    document.getElementById("content").innerHTML = newContent;
  });
}

/* Стилизация анимации через CSS */
::view-transition-old(root) {
  animation: fade-out 0.3s ease;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease;
}

Текущее состояние: Только в Chrome 111+ за флагом, но потенциал огромен — нативные переходы страниц без JS-библиотек.

5. CSS Nesting

Наконец-

.card {
  & .title {
    font-size: 1.2rem;
    
    &:hover {
      color: var(--accent);
    }
  }
  
  & > .content {
    padding: 1rem;
  }
}

Поддержка: Chrome 112+, Safari технически поддерживает давно через препроцессоры, но теперь нативно. Значительно улучшает читаемость CSS, особенно для компонентного подхода.

6. Popover API

Нативный Popover API для всплывающих окон без JavaScript:

<button popovertarget="my-popover">Открыть</button>
<div id="my-popover" popover>Содержимое popover</div>

/* Стилизация через новое состояние */
[popover]:open {
  animation: slide-in 0.3s ease;
}

Статус: Chrome 114+, Safari 17+, Firefox в разработке. Решает проблемы с z-index, фокусом и доступностью модальных окон.

7. CSS Anchor Positioning

Экспериментальная CSS Anchor Positioning для привязки элементов:

.tooltip {
  position: fixed;
  anchor-name: --tooltip-anchor;
}

.target {
  anchor: --tooltip-anchor;
  position-anchor: --tooltip-anchor;
  position: absolute;
  bottom: anchor(top);
  left: anchor(right);
}

Перспективы: Пока только в Chrome за флагом, но это может революционизировать тултипы, выпадающие меню и подобные UI

Почему я активно отслеживаю Can I Use

Как senior разработчик, я не просто смотрю поддержку свойств, а анализирую:

1. Практическое внедрение — какие свойства уже можно использовать с graceful degradation
2. Полифиллы и fallbacks — как реализовать современные фичи для старых браузеров
3. Производительность — нативные реализации почти всегда быстрее JS
4. Доступность — многие новые API имеют встроенную a11y (как Popover API)

Например, для Container Queries я уже разрабатываю стратегию:

/* Fallback для старых браузеров */
.card {
  /* Старый подход через медиазапросы */
  @media (min-width:":
    flex-direction: row;
  }
}

/* Современный подход через контейнеры */
@supports (container-type: inline-size) {
  .card-parent {
    container-type: inline-size;
  }
  
  .card {
    @container (min-width:":
      flex-direction: row;
    }
  }
}

Тренды, которые я наблюдаю: Браузеры сейчас активно развивают:

• State-driven UI (через :has(), :state())
• Лучшую типографику (text-wrap: balance, initial-letter)
• Улучшенную анимацию (view-transitions, scroll-driven animations)

Я считаю, что современный фронтенд-разработчик должен не только знать последние свойства, но и понимать их место в экосистеме, уметь оценивать риски внедрения и создавать resilient-архитектуры, которые используют современные возможности без breaking старых пользователей. Can I Use для меня — не просто справочник, а инструмент для принятия архитектурных решений.