По мере того как ИИ-ассистенты для написания кода глубоко интегрируются в процессы разработки ПО, разработчики сталкиваются с ироничной проблемой: модели ИИ, обученные на огромных исторических кодовых базах, часто генерируют устаревший код, полагаясь на старые JavaScript-хаки и устаревшие CSS-шаблоны, которые современным браузерам больше не нужны.
Последние изменения в стандартах веб-платформ показывают, как сообщество веб-разработчиков решает эту проблему. Веб-создатель Брехт Де Рюйте (Brecht De Ruyte) изучил, как набор навыков Google Modern Web Guidance можно использовать для того, чтобы помочь ИИ-агентам кодинга писать актуальный HTML и CSS с учетом Baseline, а не возвращаться к устаревшим методам. Объединяя Modern Web Guidance с пользовательскими навыками дизайн-токенов, разработчики могут сохранять соответствие ИИ-агентов требованиям единой дизайн-системы, гарантируя при этом, что они пишут код, адаптированный к возможностям современных браузеров.
Нативные функции CSS упрощают современную верстку
Стремление привести генераторы кода на базе ИИ в соответствие с современными стандартами совпадает с заметными дополнениями в кроссбраузерном Baseline. Функции, получившие полную поддержку во всех движках, демонстрируют, почему обучение ИИ-агентов обновленным веб-стандартам критически важно для создания более чистого кода.
Среди инструментов, получивших статус Baseline Newly Available во всех основных браузерных движках, — CSS-функция sibling-count(). В отличие от традиционной функции counter(), которая выводит отформатированные текстовые строки для сгенерированного контента, sibling-count() возвращает целое число, представляющее общее количество сиблингов (соседних элементов) с общим родителем. Это целое число можно передавать в функции calc(), что позволяет дочерним элементам автоматически рассчитывать пропорциональные размеры макета, такие как ширина колонок сетки, непосредственно в CSS, не полагаясь на вычисление состояния через JavaScript или жестко заданные стили.
Аналогично, новый кроссбраузерный псевдокласс CSS :paused обеспечивает точечный контроль состояния для интерактивных медиафайлов. Он применяется к воспроизводимым элементам <audio> и <video>, когда воспроизведение приостановлено или когда медиазапись загружена, но еще не начала воспроизводиться. Четко отделяя состояние паузы от переходных состояний, таких как буферизация или поиск, разработчики могут стилизовать пользовательские элементы управления медиаплеером непосредственно в правилах CSS без сложных обработчиков событий.
Declarative Shadow DOM достигает важной вехи
Помимо новых возможностей, фундаментальные технологии современного веба достигают полной зрелости. Технология Declarative Shadow DOM получила статус Baseline Widely Available, что знаменует 30 месяцев единообразной поддержки во всех основных браузерных движках.
Declarative Shadow DOM позволяет разработчикам и фреймворкам серверного рендеринга определять инкапсулированные теневые корни (shadow roots) непосредственно в HTML-разметке с помощью стандартных элементов <template> с атрибутом shadowrootmode, установленным в значение open или closed. Устраняя жесткое требование программного прикрепления shadow roots через JavaScript с помощью Element.attachShadow(), веб-компоненты с серверным рендерингом могут мгновенно отображать инкапсулированные стили при начальной загрузке страницы. Это предотвращает мигание нестилизованного контента (FOUC) и сохраняет доступность для поисковых роботов и клиентских сред с ограниченным выполнением JavaScript.
По мере того как браузерные движки сближаются в сторону стандартизированных нативных решений, обучение ИИ-агентов написанию кода по актуальным стандартам Baseline гарантирует, что автоматизированные инструменты будут генерировать производительный и доступный код, использующий все преимущества современной веб-платформы.