В Safari 15.4 добавили более 70 дополнений к WebKit

В Safari 15.4 добавлено более 70 дополнений к WebKit, а также иные обновления и исправления. Это первый большой выпуск WebKit в 2022 году. Safari 15.4 доступен сегодня для macOS Monterey 12.3, iPadOS и iOS 15.4.

2364592f7af83611fd81a0cc2768e046.jpg

HTML

В WebKit добавлена поддержка загрузки изображений с помощью атрибута элемента , что дает веб-разработчикам возможность указать браузеру отложить загрузку определенных изображений до тех пор, пока пользователь не проскроллит страницу.

В WebKit также появилась поддержка элемента

и псевдоэлемента :: backdrop. Элемент обеспечивает надежный способ создания наложений и модальных окон. Псевдоэлемент :: backdrop позволяет стилизовать фон под модальным окном.


    

Do you want to delete everything?

You will lose all your data.

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

.

CSS

Несколько дополнений к CSS предлагают веб-разработчикам революционно новые способы построения своего кода, упрощая его повторное использование, создание систем дизайна и интеграцию со сложными приложениями.

Сначала в Safari появился WebKit, добавивший поддержку псевдокласса : has (). Он позволяет создать «родительский селектор» — способ условного применения правил CSS на основе содержимого элемента. Теперь добавлена поддержка каскадных слоев — мощного способа организации стилей в слои, где специфичность вычисляется независимо внутри каждого. Веб-разработчик может создать слой «фреймворк» и «пользовательский» слой, назначив весь CSS из стороннего фреймворка слою «фреймворк» и написав свой собственный код в «настраиваемый» слой. Cascade Layers появится во всех основных браузерах примерно в одно и то же время и будет включен в Interop 2022.

fb76be54e2f5ebe58a957d538ccbfc2e.jpg

WebKit также добавил поддержку CSS Containment всех четырех типов: размер, макет, стиль и рисование — с помощью свойства contains.

Появился инструмент, который будет работать аналогично существующим единицам области просмотра, но соответствовать потребностям мобильных устройств, где размеры области просмотра браузера изменяются по мере того, как пользователь прокручивает страницу. Эту задачу решит Viewport Units — решение для регулировки параметров динамического окна просмотра.

739ed1be1bd08b64dc2f45a1ef3a3069.jpg

Добавлена ​​поддержка псевдокласса : focus-visible для оформления индикатора фокуса только тогда, когда браузер его отображает. 

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