Блог Chromium: Chrome 69 Beta: трюки CSS и многое другое

Авг102018

Содержание статьи

1 Новые трюки CSS
2 Другие функции в этом выпуске
3 Устаревания и улучшения совместимости

Новые трюки CSS Chrome добавил несколько новых функций CSS. Конические градиенты Градиенты CSS-коники (угловые / развертки) допускают цветовые переходы вокруг центра, а не излучают его. Это позволяет, например, создать колесо оттенка, используя только два свойства CSS, как показано ниже. Дополнительные примеры доступны. div { фон: конический градиент (красный, желтый, лайм, аква, синий, пурпурный, красный); радиус границы: 50% } Свойства новой границы, отступов и границ В свойствах логических margin padding и border теперь используются стандартные имена, в частности margin- {block, inline} - {start, end} padding- {block, inline} - {start, end} и border- {block, inline} - {start, end} - {width, style, color} . Эти возможности ранее поддерживались с помощью префиксов -webkit и нестандартных имен. Стеновые свойства добавляются только для border- {block, inline} - {start, end} . CSS scroll snap Позиции привязки прокрутки CSS являются смещениями в визуальном окне просмотра контейнера прокрутки, где прокрутка останавливается после каждой операции прокрутки. Это улучшает работу пользователя, позволяя легко прокручивать зоны в заранее определенных точках. Это также позволяет использовать общие шаблоны прокрутки UX без необходимости использования JavaScript. Одним из таких образцов является карусель с горизонтальным изображением, выполненный с приведенными ниже декларациями. Статья Хорошо контролируемая прокрутка с помощью Scroll Snap обеспечивает большую глубину. #gallery { scroll-snap-type: x обязательный; переполнение-x: прокрутка; дисплей: flex; } #gallery img { scroll-snap-align: center; }

Выключатели дисплея Вырезанные вырезки теперь поддерживаются в Chrome с помощью новой функции CSS env () (переменные среды) и метатега с учетом вида просмотра. Это позволяет разработчикам использовать весь экран на устройствах, которые имеют вырез дисплея. Например, чтобы сообщить браузеру о расширении области отображения, сайт должен установить свойство viewport-fit в метафоре

 в  к  обложке . Затем сайт может использовать переменные среды CSS в безопасной области, чтобы разместить их содержимое без покрытия вырезами. Это показано ниже. Объяснитель и спецификация предоставляют дополнительную информацию.


 



 

 

Другие функции в этом выпуске 

Холст 
OffscreenCanvas - это новый интерфейс, который позволяет использовать контексты рендеринга 2D и WebGL в Workers. Это увеличивает параллелизм в веб-приложениях и улучшает производительность на многоядерных системах. 
 Chrome теперь также поддерживает  DedicatedWorker.requestAnimationFrame () позволяя запускать подобные анимации события для посвященных работников, поскольку они в окне. Например: 
 const offscreenCanvas = new OffscreenCanvas (100, 100);
const ctx = offscreenCanvas.getContext ("2d");
ctx.fillRect (0, 0, 10, 10); 
 Или вместе с холстом: 
 const canvasElement = document.getElementById ("mycanvas")
const offscreenCanvas = canvasElement.transferControlToOffscreen ();
const ctx = offscreenCanvas.getContext ("2d");
ctx.fillRect (0, 0, 10, 10);

 Внутри рабочего: 
 self.onmessage = function (ev) {
  const offscreenCanvas = ev.data;
  const ctx = offscreenCanvas.getContext ("2d");
  пусть х = 0;
  const draw = function () {
    ctx.clearRect (0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillRect (x, 0, 10, 10);
    x = (x + 1)% ctx.canvas.width;
    requestAnimationFrame (нарисовать);
  };
  рисовать (0);
}

 Главная страница: 
 const worker = new Worker ("worker.js");
const offscreenCanvas =
    document.getElementById ( "холст") transferControlToOffscreen ().
worker.postMessage (offscreenCanvas, [offscreenCanvas]);

 

DOM 
Новый метод с именем  Element.toggleAttribute ()  позволяет переключать существование атрибута элемента способом, подобным  Element.classList.toggle . Необязательный параметр силы принудительно добавляет или удаляет атрибут в зависимости от значения силы. Это упрощает управление логическими атрибутами, поскольку интерфейс не использует строки, как  Element.setAttribute () .  

Fetch API: Request.isHistoryNavigation 
Для запроса объектов добавлено логическое свойство, указывающее, является ли конкретный запрос навигацией по истории. Это позволяет сервисному работнику узнать, был ли запрос вызван навигацией назад / вперед. Примером того, как это может быть использовано, является то, что работник службы может реагировать на такую навигацию с помощью кэшированного ответа.  

JavaScript API 
JavaScript имеет несколько новых API:  

 API ReportingObserver предоставляет функцию обратного вызова JavaScript, вызванную в ответ на отклонения и вмешательства браузера. Отчет может быть сохранен, отправлен на сервер или обработан с использованием произвольного JavaScript. Эта функция призвана дать разработчикам более глубокое представление о работе своих сайтов на реальных устройствах. 
 Массивы JavaScript получают два новых метода.  Array.prototype.flat ()  возвращает новый массив со всеми элементами суб-массива, конкатенированными в нем рекурсивно до указанной глубины. Элементы sub-array становятся членами нового массива.  Array.prototype.flatMap ()  сначала отображает каждый элемент с помощью функции отображения, а затем выравнивает результат в новый массив. Этот метод функционально эквивалентен карте с последующим вызовом  flat ()  с глубиной 1. 


API клавиатуры 
Некоторые приложения, такие как игры, назначают определенные функции определенным физическим клавишам. Когда интерфейс ссылается на эти ключи, ему нужно показать либо символ, отображаемый на ключе, который зависит от локали, либо символ, назначенный ключу альтернативной раскладкой клавиатуры, которая могла быть установлена пользователем. Из-за этих вариантов компоновки иногда возможно, что символ, показанный в интерфейсе, не ссылается на предполагаемый физический ключ. 
 Этот новый API обеспечивает способ перевода значений  KeyboardEvent.code представляющих физические ключи, в правильные строки для отображения пользователю. Вы можете найти подробности и примеры этого нового API в спецификации и объяснении.  

Loader 
Поддержка « rtt », « нисходящей линии связи » и « ect ». В Chrome были добавлены значения подсказки клиента и заголовки HTTP-запросов, чтобы передать сеть устройства скорость соединения с серверами. Например, подсказка клиента  rtt  предоставляет серверу расчетное эффективное время округления текущего соединения, округленное до ближайшего кратного 25 миллисекунд. Сервер может использовать это, чтобы подавать изображение с пониженной дискретизацией, если соединение скорость медленнее, чем ожидалось. Эти подсказки по качеству сети предоставляют серверу те же значения, что и на веб-странице, с помощью сетевых информационных API  navigator.connection.rtt  navigator.connection.downlink  и  navigator.connection.effectiveType .  

Средства массовой информации: запрос поддержки схемы шифрования через EME 
Некоторые платформы или ключевые системы поддерживают только AES-128 в режиме CTR, в то время как другие поддерживают только режим CBCS. Третьи могут поддерживать оба. Новый метод позволяет веб-разработчикам запрашивать, поддерживает ли конкретная схема шифрования с помощью Encrypted Media Extensions (EME).  

Выбор текста в середине лигатуры 
Теперь Chrome позволяет выбирать текст внутри лигатур. (Лигатура представляет собой комбинацию двух или более букв в одном символе.) Это включает в себя как выбор мыши, так и выбор курсора в элементах ввода и textarea. Мы также немного изменили способ редактирования текста для поддержки этого изменения. Части текста, которые находятся вне области выбора, теперь представлены с оригинальным стилем: 
      
  Выбор в лигатуре на английском языке.  
  
  Отбор в лигатуре на арабском языке.   

Производительность 
Чтобы избежать утечки информации между кадрами, значения performance.memory в настоящее время сильно квантуются и задерживаются на 20 минут. 
 Если процесс визуализации заблокирован для документов с одного сайта (как в случае изоляции сайта на рабочем столе), мы может раскрывать эту информацию с меньшими опасениями по поводу утечки информации между кадрами. В этих случаях мы не будем возвращать информацию о потреблении квантованной памяти, задержанную на 30 секунд. Это позволяет разработчикам легче обнаруживать регрессии производительности из пользовательских данных, поскольку измерения памяти будут более точными и могут быть приняты более часто.  

ServiceWorker 
Работники службы имеют два улучшения:  

  ServiceWorkerRegistration.update () ранее разрешенный с неопределенным. Теперь он решает объект регистрации, как того требует спецификация. 
 Из-за технического ограничения  navigator.serviceWorker  ранее бросал  SecurityError  при доступе в ненадежном контексте. После этого изменения  navigator.serviceWorker  возвращает undefined 

, Это соответствует спецификации.
 

Обновление поведения дорожек и желобов процентных рядов CSS Grid Layout 
В будущем выпуске будет происходить изменение того, как треки и желобы процентных рядов будут разрешены на сетчатых контейнерах с неопределенной высотой. В настоящее время они ведут себя так же, как процентные высоты в обычных блоках, но в будущем они будут вести себя так же, как и для столбцов, делая их симметричными. 
 Процент будет проигнорирован при вычислении внутренней высоты (как это происходит сейчас) и затем разрешается после этой высоты , Таким образом, обе оси столбца и строки будут иметь симметричное поведение, чтобы разрешать дорожки и желобы, заданные процентами. 
 В Chrome 69 вы получите предупреждение в консоли JavaScript об этом изменении. Если вы хотите сохранить текущее поведение в Chrome 70, вам нужно заменить ваши дорожки и сточные дорожки в контейнерах с неопределенной высотой сетки «auto» и «0px» соответственно.  

API веб-замков 
API веб-блокировок позволяет скриптам, запущенным на одной вкладке, асинхронно получать блокировку, удерживать ее во время выполнения работы, а затем отпускать ее. При сохранении никакой другой скрипт, выполняющийся в одном и том же источнике, может получить тот же замок. Блокировка представляет собой потенциально разделяемый ресурс, определяемый именем, выбранным веб-приложением. Например, если веб-приложение, работающее на нескольких вкладках, хочет обеспечить синхронизацию только одной вкладки с сетью, каждая вкладка может попытаться получить блокировку  my_net_sync но только одна вкладка будет успешной. 
 Пример показан ниже. Он показывает функцию, называемую при создании блокировки для  my_resource . 
 ожидают navigator.locks.request ('my_resource', async lock => {
  const url = ожидание look_up_in_database ();
  const response = await fetch (url);
  const body = ожидание response.text ();
  ожидание store_body_in_database (тело);
});

 Подробнее о методах и параметрах API см. В пояснительной и проектной спецификации.  

Теперь веб-аутентификация поддерживает устройства CTAP2 FIDO 
Web Authentication добавляет поддержку устройств CTAP2, которые предоставляют расширенные возможности безопасности, такие как биометрическая аутентификация и резидентные ключи (ключи, хранящиеся на устройстве). API WebAuthentication ранее поддерживал только устройства Universal 2nd Factor (U2F) на транспортном уровне. Это изменение не изменяет поверхность API, но обеспечивает более богатые взаимодействия с устройствами через существующий API веб-аутентификации.  

WebRTC 
WebRTC имеет два улучшения:  

 Теперь Chrome поддерживает запись в словаре  RTCRtpParameters.headerExtensions которая возвращается  RTCRtpSender.getParameters () . Это поле только для чтения, которое позволяет проверить параметры, установленные на  PeerConnection  после согласования. 
 Интерфейсы  RTCRtpSender  и  RTCRtpReceiver  теперь предоставляют метод  getCapabilities ()  

который возвращает наиболее оптимистичный взгляд на возможности системы для передачи медиа данного типа. Он не резервирует ни ресурсы, ни порты, ни другое состояние, но предназначен для обеспечения возможности обнаружения типов возможностей браузера, в том числе, какие кодеки или расширения RTP могут поддерживаться.
 



Устаревания и улучшения совместимости  
Chrome иногда обесценивает, удаляет или изменяет функции для повышения совместимости с другими браузерами. Эта версия Chrome включает следующие изменения.  

Удаление события «stalled» из HTMLMediaElements, использующих расширения источников мультимедиа 
Раньше событие  HTMLMediaElement.stalled  запускалось, когда загрузка мультимедиа не выполнялась в течение как минимум 3 секунд. В Media Source Extensions веб-приложение управляет загрузкой, а элемент мультимедиа не знает о его прогрессе. Так как некоторые приложения добавляют данные мультимедиа в куски более 3 секунд,  остановился  был уволен в ненадлежащее время. Чтобы решить эту проблему,  остановился  был удален для Media Source Extensions.  

Удаление документа.createTouchList 
Метод  document.createTouchList ()  был удален 
 в пользу конструктора  Touch () который поддерживается с Chrome 48.
 

Метод window.confirm () больше не активирует родительскую вкладку 
Если документ на вкладке фона вызывает  window.confirm () он немедленно возвращается с  false и пользователю не отображается диалоговое окно. Если вкладка активна, тогда вызов показывает диалог как обычно. В частности, это устраняет возможность использования  window.confirm () чтобы вывести вкладку на передний план, потому что это редко то, чего хочет пользователь. 
  Автор: Дженнифер Аписибл