Добро пожаловать на второй выпуск Chrome Dev Insider, где мы делимся новостями о том, что нового и интересного в сообществе и здесь, в Chrome. Это новый выпуск инсайдерских историй о том, как мы подходим к нашей работе, а также краткий обзор некоторых наиболее важных обновлений, на которые вам следует обратить внимание.
Я Рэйчел Эндрю, руководитель отдела контента web.dev и Developer.chrome.com в команде Chrome по связям с разработчиками. Я работаю в Интернете более двадцати лет, уделяя особое внимание открытым веб-стандартам и CSS, и являюсь членом рабочей группы CSS.
Два месяца назад мы завершили Google I/O , на котором поделились некоторыми из наиболее важных обновлений о том, как мы поддерживаем разработчиков в том, чтобы сделать Интернет более быстрым и мощным, сохраняя при этом безопасность и конфиденциальность пользовательской информации.
Одна из вещей, которая выделяется (и мы рады, что сообщество это заметило !), — это огромный объем работы, которую команда проделывает для поддержки большего количества функций CSS и пользовательского интерфейса в Интернете. В этом выпуске Chrome Dev Insider мы расскажем вам о том, кто стоит за этой работой, как мы работаем над поддержкой разработчиков CSS и пользовательского интерфейса и что нас ждет впереди. Вот почему я очень рад быть ведущим этого выпуска Insider.
В новостях
В первом выпуске Chrome Dev Insider мы поделились некоторыми новостями об инициативах Compat 2021 и Interop 2022 , в рамках которых производители браузеров и участники экосистемы сотрудничают, чтобы предоставить в Интернет больше функций, которые поддерживаются во всех браузерах. Инициатива уделяет большое внимание CSS, поскольку несовместимость браузеров является одной из самых больших проблем для разработчиков CSS .
Хотя для большинства это может быть не новостью, интересно видеть прогресс, которого мы уже достигли в браузерах.
Ранее в прошлом месяце мы видели, как Safari объявила о выпуске бета -версии Safari 16.0, которая включает в себя такие замечательные функции, как Container Queries , subgrid и инспектор flexbox . Недавние выпуски Firefox и Chrome включали ряд интересных функций и исправлений — каждый месяц я освещаю ключевые моменты в стабильных и бета-версиях браузеров в серии статей о новых веб-платформах .
Инсайдерская информация: поддержка разработчиков CSS и пользовательского интерфейса
Поскольку 2022 год оказался захватывающим для возможностей CSS, мы подумали, что сейчас самое время познакомить вас за кулисами. Я поговорил с Уной Кравец, руководителем DevRel по веб-интерфейсу и инструментам разработчика, и Николь Салливан , нашим менеджером по продукту веб-интерфейса, которая специализируется на CSS и HTML API, чтобы поговорить о пути Chrome к поддержке разработчиков пользовательского интерфейса.
Начнем с вас обоих. Расскажите нам немного больше о себе?
Николь: Я менеджер по продукту веб-интерфейса Chrome. Я уделяю особое внимание новым API-интерфейсам CSS и HTML, а также разработчикам и дизайнерам, создающим пользовательский интерфейс. Это захватывающее пространство, в котором появляются некоторые действительно важные API, такие как Container Queries , Scope и (надеюсь!) Вертикальный ритм .
Уна: Я возглавляю команды разработчиков веб-интерфейса и DevTools. Мы уделяем особое внимание поддержке инженеров пользовательского интерфейса на веб-платформе и обеспечиваем, чтобы у них были инструменты, необходимые для достижения успеха. Сюда входят API-интерфейсы CSS и компоненты HTML, а также функции DevTools для просмотра активных изменений и обратной связи.
Поддержка Chrome для разработчиков пользовательского интерфейса за последние несколько лет набрала обороты. Как вы думаете, почему потребовалось так много времени, чтобы добраться сюда? Каковы были самые большие проблемы?
Уна: Нам нужно было проделать некоторую работу, чтобы продемонстрировать, насколько важна эта работа и почему она должна быть приоритетом. Мы начали с исследования MDN DNA в 2019 году , в ходе которого пользовательский интерфейс был назван одной из главных болевых точек платформы. И с тех пор мы продолжаем использовать данные в качестве ориентира при проведении MDN и наших собственных внутренних опросов удовлетворенности разработчиков. Результатом всего этого стало то, что мы смогли заручиться большей поддержкой руководства и расставить приоритеты в инженерной работе над некоторыми из наиболее востребованных функций разработчиков в области пользовательского интерфейса, которые также составляют большую часть внимания для таких инициатив, как Compat 2021 и Интероп 2022 .
Николь: Помимо поддержки руководства, нам нужно было также найти правильный способ донести эти API до разработчиков. Когда я впервые присоединился к Chrome, я все испортил в проекте под названием Layered API (или для краткости LAPI). LAPI были призваны предоставить разработчикам возможность использования готовых компонентов. Я по-прежнему считаю, что это был отличный результат, к которому стоит стремиться, но мы допустили много ошибок! Сначала мы сосредоточились на всплывающих уведомлениях и виртуальном списке . Тосты практически невозможно сделать доступными, а виртуальный список — один из самых сложных компонентов, которые нужно правильно реализовать. У нас были хорошие намерения, но разработчикам это не помогло, поэтому мы свернули проект. Трудно учиться на собственном горьком опыте, но каждая ошибка способствует возрождению CSS и HTML, которое происходит сейчас.
Давайте поговорим еще немного о LAPI. Что там произошло?
Николь: Что касается LAPI, мы знали, что в Интернете необходим опыт разработки готовых компонентов, который был бы ближе к созданию собственного пользовательского интерфейса. И было ясно, что изобретение велосипеда сдерживает разработчиков. Я не могу сосчитать количество вкладок, которые я построил за свою карьеру! Тем не менее, мы попытались решить эту проблему, добавив JavaScript в браузер, что было очень сложно. Раньше никто не добавлял JavaScript в браузер, и было неясно, как он должен взаимодействовать с кодом C++, обеспечивающим работу механизма рендеринга браузера. Мы прислушались к мнению других производителей браузеров (спасибо, Mozilla!) и отказались от этого подхода, поэтому нам удалось найти что-то гораздо лучшее с помощью Open UI. Опираясь на HTML и CSS, мы получаем гибкие декларативные решения. Поскольку он является декларативным, мы можем реализовать доступность способом, который было бы не так просто сделать с помощью JavaScript. Я очень воодушевлен тем, к чему это приведет. Мы работаем над поддержкой меню выбора, всплывающего окна, всплывающей подсказки, навигации, аккордеона, вкладок, карусели и переключателей, которые являются действительно важными шаблонами проектирования пользовательского интерфейса.
Итак, мы многому научились. И я знаю, что в этой области были и другие инициативы, такие как CSS Houdini . В чем дело?
Уна: Да, CSS Houdini — это еще одно место, где мы чему-то научились у сообщества. Существует масса полезных функций Houdini , но многие из них были слишком низкоуровневыми, чтобы получить более широкое распространение и поддержку. Мы поняли, что реализация низкоуровневых API не обязательно уменьшает трудности для разработчиков. Вместо этого сосредоточение внимания на решениях и потребностях более высокого уровня помогло обеспечить кроссбраузерную поддержку и возможности, необходимые для продвижения иглы в экосистеме. В настоящее время мы отслеживаем прогресс на https://ishoudinireadyet.com/ .
Говоря о кроссбраузерной поддержке, такие инициативы, как Interop 2022 и Open UI, похоже, приносят значительные положительные результаты для сообщества. Что вы слышите от разработчиков?
Уна: Одна из главных проблем, которую мы слышим от разработчиков, — это «заставить дизайн работать одинаково во всех браузерах». Мы решили эту проблему, работая с другими поставщиками браузеров, чтобы расставить приоритеты и реализовать некоторые из наиболее востребованных функций разработчиков. И отзывы, которые мы услышали от сообщества, были исключительно положительными. Кроме того, благодаря масштабной перестройке архитектуры под названием RenderingNG стало возможным реализовать некоторые из этих функций намного эффективнее. Разработчики воодушевлены тем, что эти долгожданные функции, о которых они просили годами, наконец-то прорабатываются и становятся кроссбраузерными.
Николь: Волнение в сообществе ощутимо. Вы можете увидеть это в Твиттере . :)
Работа с экосистемой оказалась решающей для любого нашего успеха в облегчении жизни разработчиков. Я знаю, что ваша команда проделала там большую работу. Хотите поделиться некоторыми подробностями?
Николь: Во-первых, я постоянно восхищаюсь проектами, которые разработчики создают в сети. От самой маленькой библиотеки до полноценных фреймворков — разработчики создают потрясающие вещи. Это фантастическое сообщество создателей. И Chrome предпринимает ряд шагов, чтобы быть более связанным с этими проектами.
Например, несколько лет назад мы начали работать с такими фреймворками JavaScript, как React и Angular. И метафреймворки, например Next, Nuxt и Gatsby. В прошлом году мы начали делать то же самое с инструментами и фреймворками пользовательского интерфейса, такими как Sass, Bootstrap и Material. Я надеюсь, что в наступающем году мы сможем сотрудничать с GreenSock и другими инструментами, которые облегчат жизнь разработчикам. Я только что увидел выступление Кэсси Эванс из GreenSock на Smashing Conference, и это меня очень воодушевило возможностью работать с людьми из анимационной сферы.
Итак, где мы видим самые большие возможности для экосистемы веб-интерфейса?
Уна: Что касается больших возможностей, мне кажется, что мы лишь прикасаемся к тому, что возможно для настраиваемого веб-интерфейса. Новые API, такие как контейнерные запросы и медиа-функции пользовательских предпочтений CSS, переопределяют подход разработчиков к адаптивному дизайну. Я также в восторге от возможностей совместного проектирования, которые позволяют разработчикам и дизайнерам работать в унисон с пользователями, посещающими их веб-сайты.
Николь, что дальше в планах твоей команды?
Николь: Не все исследования превращаются во что-то, что можно отправить, но есть много вещей, которые меня сейчас очень волнуют:
Уна коснулась первого вопроса: мы обеспечиваем адаптивный компонентный дизайн. Он включает в себя инструменты для разработки цветовых систем, позволяющие дизайнерам реагировать на предпочтения пользователя, например темный режим. Например, цветовое пространство OKLCH обеспечивает постоянство яркости всех оттенков. Дизайнеры могут перейти от выбора цветов к разработке взаимоотношений между цветами, не получая при этом мутных палитр!
Мы также работаем над некоторыми наиболее востребованными API, такими как контейнерные запросы , каскадные слои , родительский селектор ( :has ), стили с ограниченной областью действия и вложение . Они нужны разработчикам, чтобы они могли создавать гибкие системы проектирования, полные повторно используемых компонентов.
Анимация, связанная с прокруткой, — еще одна интересная область. Мне очень нравится демо Стива Гарднера. У него плавная прокрутка и крутая анимация самолетов, запускаемая при прокрутке. Хотя это весело, сделать их правильно может быть непросто, особенно с учетом доступности. Поэтому сейчас мы проводим пользовательское тестирование доступности этой функции.
Лично меня больше всего волнуют встроенные элементы управления веб-интерфейсом. Разработчики продолжают создавать один и тот же набор вкладок снова и снова, я думаю, браузер может помочь. В Open UI мы работаем над такими компонентами, как меню выбора, всплывающее окно, всплывающая подсказка, вкладки, навигация, аккордеон и переключатель. Мы изучаем, как будет выглядеть включение специальных возможностей в эти примитивы браузера, чтобы со временем Интернет мог стать доступным по умолчанию. Затем разработчики могут сосредоточиться на более сложных и тонких проблемах, в то время как такие основы, как создание вкладок, могут поддерживаться браузером. Вероятно, этому нужен отдельный пост, поэтому я пока на этом остановлюсь!
Наконец, мы продолжим инвестировать во взаимодействие между браузерами. Было здорово работать с ребятами из WebKit и Gecko, чтобы обеспечить единообразие процесса разработки. Мы громко и ясно услышали от разработчиков, что они этого хотят!
Да, и если вы еще не проверили, API Shared Element Transitions от команды Seamless Web изменит способ проектирования веб-сайтов. Все эти тонкие переходы, которые позволят дизайнерам ориентировать свои проекты в физическом пространстве, станут не просто возможными, но и простыми. У Джейка Арчибальда есть отличное демо .
Если стандарты пойдут хорошо, мы могли бы даже взглянуть на вертикальный ритм в этом году! Мы можем использовать LayoutNG, который открывает множество функций.
Спасибо обоим. Я уверен, что все сообщество, как и мы, воодушевлено видеть возобновление темпов улучшений и функций, поступающих в мир веб-интерфейсов. Нам еще многое предстоит понять, так с чего, по вашему мнению, следует начать свое путешествие?
Уна: Наша сессия «Что нового в веб-платформе» на I/O охватывает основные моменты многих функций, которые появятся в этом году. Адам Аргайл также написал отличную статью обо всех новых и предстоящих CSS-лендингах. На постоянной основе я бы сейчас сосредоточился на стабильных выпусках и просто был в курсе других работ, которые будут в разработке. Ваша потрясающая серия «Новинки веб-платформы» отлично подойдет для этого. Подписка на информационный бюллетень web.dev также приведет к тому, что этот контент попадет в почтовый ящик разработчиков. А для разработчиков, желающих принять участие и помочь во всем этом, присоединение к Open UI — один из лучших способов поддержать эту работу.
Ключевые предстоящие обновления
Мы продолжаем нашу традицию информировать вас о предстоящих изменениях, о которых вам следует помнить при создании своего веб-интерфейса.
Ограничить максимальный срок хранения файлов cookie до 400 дней.
- Обновление: если файлы cookie установлены с явным атрибутом
Expires/Max-Ageзначение теперь будет ограничено не более чем 400 днями в будущем. Раньше ограничений не было, и срок действия файлов cookie мог истекать через несколько тысячелетий в будущем. Целью этого ограничения является достижение баланса между общими моделями использования и уважением конфиденциальности пользователей. Любой сайт, посещаемый чаще, чем каждые 400 дней, может обновлять файлы cookie, чтобы обеспечить непрерывность обслуживания, и пользователи могут быть уверены, что файлы cookie не останутся в их браузере на тысячелетия без использования. - Ориентировочные сроки: выпуск Chrome 104 (стабильная версия — 2 августа 2022 г.).
- Призыв к действию для разработчиков. Разработчикам может потребоваться активно обновлять файлы cookie чаще, чем раньше, когда пользователи посещают их веб-сайты. В противном случае пользователи могут выйти из системы через 400 дней после первоначальной установки файла cookie.
Надеюсь, вам понравилось читать этот выпуск Chrome Dev Insider. Если вы пропустили, вот первый . Мы с нетерпением ждем возможности предложить вам еще больше в следующем квартале.
А пока расскажите нам, что вы думаете об этом выпуске Chrome Dev Insider и что мы можем сделать, чтобы сделать его лучше.
Что вы думаете об этом выпуске Chrome Dev Insider? Поделитесь своим отзывом .