Добро пожаловать во второй выпуск Chrome Dev Insider, где мы делимся новостями о том, что нового и интересного происходит в сообществе и здесь, в Chrome. Это новый эпизод, в котором мы расскажем о том, как работаем, и кратко рассмотрим некоторые из наиболее важных обновлений, на которые вам следует обратить внимание.
Меня зовут Рэйчел Эндрю, я руководитель контент-отдела web.dev и developer.chrome.com в команде Chrome Developer Relations. Я работаю в веб-индустрии более двадцати лет, специализируясь на открытых веб-стандартах и CSS, и являюсь членом рабочей группы CSS.
Два месяца назад мы завершили конференцию Google I/O , где поделились некоторыми из наиболее важных новостей о том, как мы поддерживаем разработчиков в создании более быстрых и мощных веб-приложений, обеспечивая при этом безопасность и конфиденциальность информации пользователей.
Одна из вещей, которая сразу бросилась в глаза (и мы рады, что сообщество это заметило !), — это огромный объем работы, которую команда проводит для поддержки большего количества функций CSS и пользовательского интерфейса в веб-разработке. В этом выпуске Chrome Dev Insider мы расскажем вам о том, кто стоит за этой работой, как мы поддерживаем разработчиков CSS и UI и что нас ждет в будущем. Именно поэтому я рад быть ведущим этого выпуска Insider.
В новостях
В первом выпуске Chrome Dev Insider мы поделились некоторыми обновлениями по инициативам Compat 2021 и Interop 2022, в рамках которых производители браузеров и участники экосистемы сотрудничают, чтобы добавить в веб-разработку больше функций, поддерживаемых всеми браузерами. Инициатива уделяет особое внимание CSS, поскольку несовместимость браузеров является одной из самых больших проблем для разработчиков CSS .
Хотя для большинства это, возможно, и не новость, приятно видеть прогресс, которого мы уже достигли в разных браузерах.
В начале прошлого месяца Safari анонсировал масштабный релиз — Safari 16.0 Beta, включающий такие интересные функции, как Container Queries , subgrid и инспектор flexbox . В последних релизах Firefox и Chrome также появилось множество интересных функций и исправлений — я ежемесячно рассказываю о ключевых нововведениях в стабильных и бета-версиях браузеров в своей серии статей о новых веб-платформах .
Инсайдерская информация: Поддержка разработчиков CSS и UI.
Поскольку 2022 год оказался захватывающим для возможностей CSS, мы решили, что сейчас самое подходящее время, чтобы показать вам закулисье. Я побеседовал с Уной Кравец, руководителем отдела по связям с разработчиками (DevRel) в области веб-интерфейсов и инструментов для разработчиков, и Николь Салливан , нашим менеджером по продуктам в области веб-интерфейсов, которая специализируется на API CSS и HTML, о пути Chrome к поддержке разработчиков пользовательского интерфейса.
Давайте начнём с вас обоих. Расскажите немного о себе?
Николь: Я менеджер по продукту веб-интерфейса в Chrome. Я специализируюсь на новых API для CSS и HTML, а также на разработчиках и дизайнерах, создающих пользовательские интерфейсы. Это захватывающая область, в которой скоро появятся действительно важные API, такие как Container Queries , Scope и (надеюсь!) Vertical Rhythm .
Уна: Я возглавляю команды Web UI и DevTools DevRel. Мы сосредоточены на поддержке UI-инженеров на веб-платформе и обеспечении их необходимыми инструментами для успешной работы. Это включает в себя CSS API и HTML-компоненты, а также функции DevTools для отслеживания активных изменений и получения обратной связи.
Поддержка разработчиков пользовательского интерфейса в Chrome за последние несколько лет значительно активизировалась. Как вы думаете, почему потребовалось так много времени, чтобы достичь этого уровня? С какими самыми большими трудностями пришлось столкнуться?
Уна: Нам нужно было проделать определенную работу, чтобы продемонстрировать, насколько важна эта работа и почему она должна быть приоритетной. Мы начали с опроса MDN DNA в 2019 году , который выявил пользовательский интерфейс как одну из главных проблем платформы. И с тех пор мы продолжаем использовать данные в качестве ориентира, проводя опросы MDN и собственные внутренние опросы удовлетворенности разработчиков. В результате всего этого нам удалось заручиться большей поддержкой руководства и определить приоритеты в работе над наиболее востребованными функциями пользовательского интерфейса для разработчиков, которые также составляют основную часть таких инициатив, как Compat 2021 и Interop 2022 .
Николь: Помимо получения поддержки руководства, нам также нужно было найти правильный способ предоставить эти API разработчикам. Когда я только пришла в Chrome, я допустила ошибку в проекте под названием Layered APIs (или LAPIs). Целью LAPIs было предоставление разработчикам возможности использования готовых компонентов. Я до сих пор считаю, что это был отличный результат, к которому стоило стремиться, но мы допустили много ошибок! Сначала мы сосредоточились на всплывающих уведомлениях (Toast Notifications) и виртуальном списке (Virtual List) . Всплывающие уведомления практически невозможно сделать доступными, а виртуальный список — один из самых сложных компонентов для правильной реализации. Наши намерения были благими, но это не помогало разработчикам, поэтому мы закрыли проект. Трудно учиться на собственных ошибках, но каждая ошибка подпитывает возрождение CSS и HTML, которое происходит сейчас.
Давайте немного подробнее поговорим о LAPI. Что там произошло?
Николь: Что касается LAPI, мы понимали, что веб-разработке нужен удобный интерфейс, максимально приближенный к созданию нативных пользовательских интерфейсов. Было очевидно, что изобретение велосипеда тормозит развитие разработчиков. Я даже не могу сосчитать, сколько вкладок я создала за свою карьеру! Тем не менее, мы попытались решить эту проблему, внедрив JavaScript в браузер, что оказалось очень сложно. Никто раньше не внедрял JavaScript в браузер, и было непонятно, как он должен взаимодействовать с кодом C++, который управляет механизмом рендеринга браузера. Мы прислушались к другим поставщикам браузеров (спасибо, Mozilla!) и отказались от этого подхода, поэтому смогли найти гораздо лучшее решение с Open UI. Благодаря использованию HTML и CSS мы получили гибкие, декларативные решения. Поскольку это декларативный подход, мы можем обеспечить доступность таким образом, который был бы не так прост в реализации с помощью JavaScript. Я очень рада тому, куда это всё движется. Мы работаем над поддержкой таких важных шаблонов проектирования пользовательского интерфейса, как selectmenu, popup, tooltip, nav, accordion, tabs, carousel и toggle.
Так что мы многому научились. И я знаю, что в этой области были и другие инициативы, например, CSS Houdini . Какова их история?
Уна: Да, CSS Houdini — это ещё одна область, где мы многому научились у сообщества. В Houdini множество полезных функций , но многие из них были слишком низкоуровневыми, чтобы получить более широкое распространение и поддержку. Мы поняли, что внедрение низкоуровневых API не обязательно снижает сложности для разработчиков. Вместо этого, сосредоточение внимания на высокоуровневых решениях и потребностях помогло обеспечить кроссбраузерную поддержку и необходимые шаги для развития экосистемы. В настоящее время мы отслеживаем прогресс на сайте https://ishoudinireadyyet.com/ .
Говоря о кроссбраузерной поддержке, такие инициативы, как Interop 2022 и Open UI, похоже, приносят значительные положительные результаты для сообщества. Что вы слышите от разработчиков?
Уна: Одна из главных проблем, о которой нам говорят разработчики, — это «обеспечение одинаковой работы дизайна во всех браузерах». Мы решили эту проблему, сотрудничая с другими производителями браузеров, чтобы определить приоритеты и внедрить некоторые из наиболее востребованных разработчиками функций. И отзывы сообщества в подавляющем большинстве положительные. Кроме того, благодаря масштабной переработке архитектуры под названием RenderingNG , стало возможным внедрить некоторые из этих функций с гораздо большей производительностью. Разработчики рады, что эти долгожданные функции, о которых они просили годами, наконец-то разрабатываются и внедряются во всех браузерах.
Николь: В сообществе царит невероятный энтузиазм. Это видно в Твиттере . :)
Работа с экосистемой оказалась критически важной для всех наших успехов в упрощении жизни разработчиков. Я знаю, что ваша команда проделала большую работу в этом направлении. Не могли бы вы поделиться некоторыми подробностями?
Николь: Во-первых, меня постоянно восхищают проекты, которые разработчики создают в интернете. От крошечных библиотек до полноценных фреймворков, разработчики создают удивительные вещи. Это фантастическое сообщество создателей. И Chrome предпринимает множество шагов, чтобы быть более связанным с этими проектами.
Например, несколько лет назад мы начали работать с JavaScript-фреймворками, такими как React и Angular. А также с метафреймворками — например, Next, Nuxt и Gatsby. В прошлом году мы начали делать то же самое с инструментами и фреймворками для пользовательского интерфейса, такими как Sass, Bootstrap и Material. Я надеюсь, что в следующем году мы сможем сотрудничать с GreenSock и другими инструментами, которые облегчают жизнь разработчикам. Я только что видела выступление Кэсси Эванс из GreenSock на конференции Smashing, и это меня очень вдохновило на сотрудничество с людьми из сферы анимации.
Итак, где мы видим наибольшие возможности для экосистемы веб-интерфейсов?
Уна: Что касается больших возможностей, мне кажется, мы только начинаем осваивать потенциал настраиваемого веб-интерфейса. Новые API, такие как контейнерные запросы и функции настройки CSS для медиафайлов, меняют представление разработчиков об адаптивном дизайне. Меня также радуют возможности совместной работы над дизайном, которые позволяют разработчикам и дизайнерам работать в унисон с пользователями, посещающими их веб-сайты.
Николь, а что дальше в планах вашей команды?
Николь: Не все эксперименты приводят к созданию чего-то действительно перспективного, но сейчас меня очень многое вдохновляет:
Уна уже упомянула первое: мы внедряем адаптивный, компонентно-ориентированный дизайн. Он включает в себя инструменты для проектирования цветовых систем, позволяющие дизайнерам реагировать на предпочтения пользователей, например, на темный режим. Например, цветовое пространство OKLCH обеспечивает постоянную яркость для всех оттенков. Дизайнеры могут перейти от выбора цветов к проектированию взаимосвязей между ними, избегая при этом создания тусклых цветовых палитр!
Мы также работаем над некоторыми из наиболее востребованных API, такими как запросы к контейнерам , каскадные слои , селектор родительского элемента ( :has ), стили с областью видимости и вложенность . Разработчикам они необходимы для создания гибких дизайн-систем, содержащих многократно используемые компоненты.
Анимация при прокрутке — ещё одна интересная область. Мне очень нравится демонстрация Стива Гарднера. У него невероятно плавная прокрутка и классные анимации самолёта, запускающиеся при прокрутке. Хотя это и интересно, правильно реализовать такие анимации может быть непросто, особенно с учётом доступности. Поэтому сейчас мы проводим пользовательское тестирование этой функции на предмет доступности.
Лично меня больше всего радуют встроенные элементы управления веб-интерфейсом. Разработчики постоянно создают одни и те же вкладки, и я думаю, что браузер может в этом помочь. В Open UI мы работаем над такими компонентами, как selectmenu, popup, tooltip, tabs, nav, accordion и toggle. Мы изучаем, как можно было бы интегрировать доступность в эти примитивы браузера, чтобы со временем веб-интерфейс стал доступным по умолчанию. Разработчики могли бы сосредоточиться на более сложных и тонких проблемах, а базовые функции, такие как работа вкладок, могли бы поддерживаться браузером. Наверное, это заслуживает отдельной статьи, поэтому я пока на этом остановлюсь!
Наконец, мы продолжим инвестировать в совместимость между браузерами. Было здорово работать с разработчиками из 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 и что мы можем сделать, чтобы его улучшить.
Что вы думаете об этом выпуске The Chrome Dev Insider? Поделитесь своим мнением .