Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 Safari обновился до версии 15.4, а вместе с ним и WebKit - для разработчиков. Обновление уже доступно для macOS Monterey 12.3, iPadOS и iOS 15.4. Посмотрим на главные изменения.

2 HTML.WebKit теперь поддерживает "ленивую загрузку" изображений, которую можно указать в атрибутах тега<img>. Кроме того, разработчики добавили поддержку элемента<dialog>, псевдоэлемента::backdropи глобального атрибутаautofocus.

3 <dialog>позволяет создавать надёжные и быстрые модальные окна и оверлеи. Вот пример кода с сайта<a>WebKit</a>:

4 <dialog id="confirmation-dialog"> <h1>Вы хотите удалить все файлы?</h1> Вы потеряете все данные. <button id="cancel-delete">Отмена</button> <button id="confirm-delete">Удалить!</button> </dialog>::backdropпомогает стилизовать задний фон под модальными окнами. Например, так:

5 Возможности псевдоэлемента ::backdrop. Источник:<a>WebKit</a>CSS.WebKit 15.4 добавляет поддержку "<a>каскадных слоёв</a>" (Cascade Layers). Они позволяют организовывать стили в слоях, где приоритет CSS-свойств вычисляется независимо внутри каждого слоя. Выглядит это так:

6 Преимущества каскадных слоёв. Источник:<a>WebKit</a>Ещё появилась поддержка<a>CSS Containment</a> - для размеров, слоёв, стилей и рисунков. Он позволяет устанавливать свойствоcontainдля проверки вложенности элементов.

7 Разработчики Safari решили проблему viewport-единиц - когда на смартфонах размер экрана браузера мог меняться во время скроллинга. Они создали инструмент под названием<a>Viewport Units</a>, где 100svh соответствует 100% высоты самого маленького viewport-размера, 100lvh - 100% высоты наибольшего viewport-размера, а 100dvh - 100% высоты динамического viewport-размера.

8 Новые единицы viewport-размеров. Источник:<a>WebKit</a>В типографике WebKit теперь поддерживает CSS-свойствоfont-paletteи правило@font-palette-values. Свойствоfont-paletteпозволяет выбирать одну из предустановленных цветовых палитр для шрифтов, а @font-palette-values - определять собственные цветовые палитры для шрифтов.

9 Здесь применена цветовая палитра для заглавных букв. Источник:<a>WebKit</a>Web API.Разработчики внедрили множество изменений, которые упростят работу программистов:

10 <ul><li>добавили<a>BroadcastChannel</a> - для отправки сообщение между вкладок, окон, iframe и Worker-служб;</li>

11 <li>добавили<a>Web Locks API</a> - чтобы управлять ресурсами для асинхронной блокировки вкладок, окон, iframe и Worker-служб;</li>

12 <li>улучшили<a>scroll behavior</a> - теперь его можно контролировать через CSS - scroll-behavior, и методы JavaScript - window.scroll(), window.scrollTo() и window.scrollBy();</li>

13 <li>обновили ResizeObserver API - и добавили поддержку<a>ResizeObserverSize</a>-интерфейса, который используется в ResizeObserverEntry;</li>

14 <li>добавили для<a>File System Access API</a>метод getFile () в FileSystemFileHandle.</li>

15 </ul>JavaScript.WebKit 15.4 добавляется в JavaScript новые методы для массивов -<a>findLast</a>() и <a>findLastIndex</a>(), а также метод<a>at</a>(), который упрощает индексацию массивов:

16 let list = ['banana','cherry','orange','apple','kiwi']; // Вместо этого: console.log(list[list.length-2]); // Можно написать так: console.log(list.at(-2));Ещё для объектов появился метод<a>Object.hasOwn</a>(). Он проверяет наличие у объекта отдельных свойств.

17 Кроме этого, разработчики продолжили работать над интернационализацией и добавили поддержку переменных локальный временных зон, календарей, числовых систем и валют в <a>Intl Enumeration API</a>.

18 Web Inspector.В режиме инспектора добавили новые инструменты для работы с CSS в панели Styles: поддержку "каскадных слоёв" (Cascade Layers) и набор правил@layer.

19 Кроме этого, добавили CSS Alignment-управление Flexbox- и Grid-элементами, чтобы визуально понимать, как меняется расположение объектов на экране.

20 Возможности CSS Alignment. Источник:<a>WebKit</a>В Web Inspector появилась функция автодополнения свойств и значений. А во вкладке Computed неиспользуемые переменные теперь скрыты, чтобы пользователям было проще искать нужные свойства.

21 Вкладка Computed. Источник:<a>WebKit</a>Ещё команда Apple поработала над<a>Web App Manifest</a>,<a>мультимедиа</a>,<a>приватностью</a>и <a>безопасностью</a>. Подробнее про все изменения можно прочитать на <a>сайте WebKit</a>.