👩💻
Вышел Firefox 147: Полный разбор релиза для разработчиковНовый выпуск Firefox — это не просто набор обновлений, а настоящий прорыв в инструментах для веб-разработки. Основные нововведения: CSS Anchor Positioning по умолчанию, мощный Navigation API и расширенные возможности View Transitions. Давайте разберем все детали.
🚀
Главные новинки: CSS Anchor PositioningCSS Anchor Positioning (якорное позиционирование) — это настоящая революция в CSS. Теперь можно «привязывать» один элемент (например, тултип или выпадающее меню) к другому (якорю) прямо в CSS, без JavaScript, создавая отзывчивые интерфейсы.
Что теперь можно в Firefox 147:Включено по умолчанию! Больше никаких флагов.
✅
Значение anchor-center: Новое, удобное значение для свойств
align-self,
justify-self и других, чтобы центрировать элемент относительно его якоря.
✅
position-anchor: none: Новое значение для отвязки элемента от якоря.
✅
Интеграция с Инструментами разработчика: Элементы с anchor-name получают значок «якоря» в DOM-обозревателе, а
@position-try правила отображаются в панели CSS.
Практический пример создания тултипа:/* 1. Объявляем якорь (кнопка) */
.button {
anchor-name: --tooltip-anchor;
}
/* 2. Создаем и привязываем тултип */
.tooltip {
position: absolute;
position-anchor: --tooltip-anchor; /* Связываем с кнопкой */
bottom: anchor(top); /* Размещаем тултип над кнопкой */
left: anchor(center); /* Центрируем по горизонтали */
translate: -50% 0; /* Точная центровка */
}
Преимущество: такой тултип автоматически адаптируется к прокрутке и границам экрана.
🛠 Улучшения для SPA: Navigation API и View TransitionsFirefox 147 делает разработку одностраничных приложений (SPA) значительно удобнее.
⚡️
Navigation API — новый стандарт для управления навигацией.
Позволяет перехватывать навигационные действия, управлять историей браузера и получать информацию о записях в истории. Он призван заменить History API и
window.location, устраняя их недостатки. Подробнее об API можно узнать в
полной спецификации на MDN.
🎭
View Transitions (Типы переходов)API для плавных анимаций между состояниями страницы теперь поддерживает типы переходов (
types). Это позволяет задавать разные анимации для разных обновлений контента (например, «переход вперед» и «переход назад»). Доступно свойство
Document.activeViewTransition для получения активного перехода. Узнать больше можно в
полном руководстве по View Transition API.
Инструменты разработчика также получили улучшения для View Transitions: псевдоэлементы :
:view-transition теперь видны в DOM, а анимации — в панели анимаций.
💎
Другие важные улучшения✅
JavaScript: Iterator.concat() для объединения итераторов.
✅
CSS: Поддержка
-webkit-perspective для совместимости, новые единицы измерения (
rcap,
rch,
rex,
ric) на основе шрифта корневого элемента, свойства
counter-* и
quotes для
::marker.
✅
API: WebGPU теперь для всех macOS на Apple Silicon, Brotli-сжатие в CompressionStream, CSS-модули (импорт стилей как CSSStyleSheet), Service Workers как ES-модули.
✅
SVG: Поддержка медиа-фрагментов в URL для контроля анимации SMIL и отображения части изображения.
✅
Для разработчиков расширений: Временно загруженные расширения MV3 могут загружать скрипты с
localhost.
✅
Для пользователей: Улучшение производительности видео для AMD GPU, поддержка XDG Base Directory в Linux, безопасность.
📈 Зачем все это нужно?Firefox 147 — это не просто обновление, а серьезный шаг к более выразительной, производительной и простой в разработке веб-платформе. CSS Anchor Positioning обещает сократить объем пользовательского JavaScript для раскладки. Navigation API и View Transitions делают навигацию в SPA предсказуемой и кинематографичной. А WebGPU и другие API открывают двери для новых классов веб-приложений.
📱
@dev_notes_ru#Firefox #WebDev #CSS #JavaScript #AnchorPositioning #ViewTransitions #NavigationAPI #Frontend