Новинки веб-технологий с WWDC 2026 (html, css)

Недавно прошла конференция компании Apple для разработчиков – WWDC 2026. На ней показали новинки, которые ждут нас с обновлением операционных систем яблочной компании. Но как обычно, на данной конференции рассказали много чего о смежных технологиях, в частности, об обновлении safari web kit 2026 (html, css, js).

WebKit — это движок для отображения веб-страниц, который обрабатывает и превращает HTML, CSS и JavaScript в визуальную картинку на экране.

Сегодня расскажу о наиболее значимых из этих обновлений.

Стилизация Select с помощью CSS

Наконец-то станет доступна полная стилизация Select при помощи простых CSS псевдоклассов и псевдоэлементов.

Но также можно полностью отказаться от них, используя вёрстку внутри options элемента:

Также можно стилизовать сам Select:

Лично я давно ждал возможности кастомизировать select через CSS, раньше использовал либо библиотеки, либо самописную логику на JS, а теперь нам всем доступна простая и логичная стилизация. Жаль, что поиск пока что не завезли.

Grid Lanes

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

Также единичные элементы могут занимать несколько ячеек, сохраняя при этом общую логику колонок.

Для лучшего понимания – доступна демонстрация на сайте webkit (сейчас работает только в Safari Technology Preview):

Model тег

Новый HTML-тег, который позволит без лишних усилий демонстрировать 3D-объекты прямо на веб-странице, не используя дополнительные библиотеки вроде three.js

Все также просто как с iframe:

Браузерам, которым пока недоступна данная технология будет показана картинка, вставленная внутри <model>. А остальные увидят полноценный 3D объект.

Будет доступно также полноценное JS-API для управления объектом и анимаций:

Интересная фишка – атрибут stagemode который позволяет фиксировать элемент по оси:

Другие новинки

• Доступно общее API для расширений и также можно создавать расширения для Safari вне Safari и упаковывать с помощью их технологии;
• min, max и clamp прямо внутри image size атрибута;
• Рандомная ширина и высота теперь одинаковая для элементов с общим селектором;
• Улучшили поддержку svg и приводят все к общему стандарту.

На сегодня у меня все из интересного, ждём улучшений в нашем любимом вебе)

Разбираемся с отступами в CSS | Тёмная тема для любого сайта в Safari | Создание приложения для IOS на iPad с помощью SwiftUI!