В этом месяце наша команда инженеров рассказала о нативных диалоговых окнах, о том, как начать работу с экспериментальными подсказками по приоритетам, а также о нескольких важных релизах. React 18 наконец-то вышел!
командой инженеров Whitespectre
В этом месяце мы охватываем:
- Элемент диалога
- Приоритетные подсказки
- Время выпуска!
Элемент диалога
Создание веб-диалогов всегда было вопросом использования библиотек JS или взлома с помощью z-index, событий указателя и JS, чтобы показать элемент сверху и заблокировать другие события мыши или клавиатуры, если это необходимо.
Хотя был нативный элемент, но он не получил широкой поддержки и, таким образом, все еще был довольно экспериментальным… До сих пор он просто появился в Safari 15.4 на всех устройствах Apple, а также Firefox 98.
Это не просто семантический элемент, у него есть API для открытия и закрытия и специальные функции CSS, такие как псевдоэлемент ::backdrop. Вам все еще нужно будет написать JS, чтобы открыть его, но он уже справляется со многими вещами за вас, например, всегда находится поверх всего, независимо от z-индекса, и фокусируется на модальном окне, когда оно открывается.
Теперь, когда он поддерживается во всех вечнозеленых браузерах, самое время взглянуть на него:
- Знакомство с элементом диалога: исчерпывающая документация по этой функции, разработанная командой WebKit, вероятно, лучший источник информации о ней.
- Веселье с элементом диалога: интересный пост об этом от Марка Отто, создателя Bootstrap.
- Думаем о том, как разрешить диалоговое окно: последнее видео на YouTube из серии GUI Challenge Адама Аргайла с канала Google Chrome Devs. Настоятельно рекомендуется!
Приоритетные подсказки
Когда браузер анализирует HTML, он обнаруживает такие ресурсы, как изображения, стили и скрипты, и начинает загружать их для отображения полной версии страницы. Порядок загрузки ресурсов определяется самим браузером с учетом типа ресурса, положения в документе и т. д. Обычно браузеры довольно хорошо определяют приоритеты загрузки, но они не всегда могут быть оптимальными.
Вот где в игру вступают Приоритетные советы. С помощью атрибута fetchpriority подсказки приоритета позволяют вам сообщить браузеру относительный приоритет ресурса, как в приведенном ниже примере с каруселью, где вы можете захотеть установить приоритет видимого изображения или изображения выше сгиба:
<div class="carousel">
<img class="slide-1" fetchpriority="high" ... />
<img class="slide-2" fetchpriority="low" ... />
<img class="slide-3" fetchpriority="low" ... />
</div>Вы также можете установить приоритеты для iframe, скриптов, ссылок и запросов на выборку, используя Request.priority. К сожалению, на сегодняшний день это поддерживается только в Chrome, но это прогрессивное улучшение, которое не повредит неподдерживаемым браузерам.
В web.dev есть отличная статья, в которой они обсуждают fetchpriority вместе с другими подсказками ресурсов (такими как preload или async/defer) для оптимизации выборки ресурсов. Проверьте это, если вы хотите узнать больше!
Время выпуска!
В этом месяце было несколько важных релизов:
- React 18 наконец-то вышел! Он включает в себя готовые улучшения, такие как автоматическая пакетная обработка, новые API-интерфейсы, такие как startTransition, и потоковый рендеринг на стороне сервера с поддержкой Suspense. Мы говорили об этом в предыдущих обновлениях интерфейса. Ознакомьтесь с официальным сообщением о выпуске, а также с руководством по обновлению!
- В прошлом месяце Chrome отпраздновал свой 100-й релиз, и они уже выпускают 101-й. Ознакомьтесь с серией Что нового в DevTools в блоге разработчиков Chrome, чтобы быть в курсе последних новых функций DevTools!
Что бы вы хотели добавить? Думаете, чего-то не хватает? Свяжитесь с нами по адресу @whitespectrehq или LinkedIn, мы будем рады прочитать ваши отзывы!
И не пропустите наши предыдущие истории:
