Edge становится Chromium: что это значит для front-end разработчиков?

В декабре 2018 года корпорация Microsoft объявила, что браузер Edge перейдет на движок Chromium, на основе которого построен Google Chrome. Предварительная сборка браузера уже доступна для Windows.

Internet Explorer был браузером, который мы все ненавидели. Edge должен был стать его улучшенной заменой. К сожалению, сам Edge был довольно отсталым.

Существует множество функций, которые Edge не поддерживает. Но они доступны в других современных браузерах. Поэтому предстоящий релиз Chromium Edge очень важен.

Содержание

Функции, на которые можно рассчитывать

Так что же это за функции? Давайте перечислим их.

Пользовательские элементы и Shadow DOM

Пользовательские элементы и Shadow DOM позволяют разработчикам определять настраиваемые, повторно используемые и инкапсулированные компоненты.

HTML- элементы details и summary

Элементы <details> и <summary> являются частью HTML5 и с 2011 г. поддерживаются в браузере Google Chrome. При совместном использовании эти элементы создают простой виджет для отображения и скрытия содержимого. Они работают даже тогда, когда JavaScript отключен или не был загружен.

0

Font Loading API

Все современные браузеры теперь поддерживают свойство CSS font-display. Тем не менее, вы все равно можете загрузить собственные шрифты с помощью JavaScript. CSS Font Loading поддерживает все браузеры кроме Microsoft Edge.

JavaScript flat и flatMap

Метод flat() полезен, когда есть вложенный массив.

const things = ['thing1', 'thing2', ['thing3', ['thing4']]]
const flattenedThings = things.flat(2); // Возвращает ['thing1', 'thing2', 'thing3', 'thing4']

Как следует из названия, flatMap() эквивалентен использованию методов map(), и метода flat().

JavaScript TextEncoder и TextDecoder

TextEncoder и TextDecoder являются частью спецификации кодирования. Они полезны при работе с потоками.

JavaScript rest и spread объекта

Это как свойства rest и spread для массивов.

const obj1 = {
  a: 100,
  b: 2000
}

const obj2 = {
  c: 11000,
  d: 220
}

const combinedObj = {...obj1, ...obj2} 
// {a: 100, b: 2000, c: 11000, d: 220}

Модули JavaScript: динамический импорт

Динамический импорт позволяет отложено загружать модули ES, когда они нужны пользователю.

button.addEventListener("click", function() {
  import("./myModule.js").then(module => module.default());
});

Свойство CSS background-blend-mode

Свойство background-blend-mode позволяет настраивать режим смешивания фоновых слоев.

Медиазапрос CSS prefers-reduced-motion

Поскольку анимация в интернете становится все более распространенной, важно понимать, что у некоторых пользователей анимация может вызвать головокружение, тошноту и головные боли.

Свойство CSS caret-color

Позволяет задать цвет мигающего в текстовом поле курсора.

8-значное шестнадцатеричное обозначение цвета

В значение hex можно включать альфа-значение (прозрачность). Хотя эта цветовая модель не имеет реальных преимуществ по сравнению с rgba().

Intrinsic sizing

Этот модуль определяет размеры на основе содержимого элемента и вводит в CSS три новых ключевых слова: min-content, max-content и fit-content(). Они могут быть использованы в большинстве свойств, в которых вы обычно используете длину: height, width, min-width, max-width, min-height, max-height, grid-template-rows, grid-template-columns и flex-basis.

Свойство CSS text-orientation

В сочетании с writing-mode свойство text-orientation определяет направление текста.

0

Псевдоэлемент CSS :placeholder-shown

Удобный способ применения стилей в зависимости от того, ввел ли пользователь текст в поле ввода или нет.

Свойство CSS place-content

Является сокращением для использования вместе двух свойств: align-content и justify-content.

0

Свойство CSS will-change

Свойство will-change можно использовать для оптимизации производительности. Оно заранее информирует браузер о том, что элемент будет изменен.

Свойство CSS all

Является сокращением для сброса всех свойств CSS одновременно.

Например, button { all: unset; } эквивалентно:

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

Фигуры и обрезка по контуру CSS

Плавающие элементы больше не нужны, но мы можем использовать их для обтекания текста вокруг изображений и фигур с помощью свойства shape-outside. Его можно комбинировать со свойством clip-path, которое позволяет отображать изображение внутри фигуры.

Clippy — онлайн-редактор clip-path

Псевдокласс CSS :focus-within

Чтобы применить специальные стили ко всей форме, когда одно из его полей выделено фокусом ввода, используйте :focus-within.

Ключевое слово CSS contents

В Flexbox и Grid только прямые потомки становятся flex-элементами или grid-элементами соответственно. Все, что вложено глубже, не может быть размещено c помощью flex или grid-позиционирования. Согласно спецификации, display: contents позволяет размещать вложенные элементы в сетке или во flexbox.

К сожалению, в других браузерах все еще есть ошибки реализации, которые влияют на доступность.

Будущее обещает гораздо больше

Edge был единственным браузером, стремящимся к Web Animation API, который не проявлял интереса ни к одной части спецификаций Houdini.

Влияние на тестирование в браузере

Тестирование в BrowserStack (слева) и различных браузерных приложениях на iPhone (справа)

При проведении кроссбраузерного тестирования многие разработчики пренебрегали Edge. Это стало основной причиной, из-за которой Microsoft решила перейти на Chromium.

Мы что-нибудь потеряем?

Единственная функция, которая поддерживалась везде, кроме Chrome, это SVG-шрифты. Поэтому они больше не будут работать в браузере Edge. Другие форматы цветных шрифтов (COLR, SBIX, CBDT / CBLC) будут продолжать работать.

Что насчет других браузеров?

Следует признать, что Edge был не единственным некачественным браузером.  Если у вас есть пользователи в России, вам нужно будет обеспечить поддержку Яндекс-браузера. Если у вас есть пользователи в Африке, вам потребуется поддержка Opera Mini. Если у вас есть пользователи в Китае, то UC и QQ будут важны для тестирования.

Страдает ли Google манией величия?

Реакция на анонс Microsoft была далека от положительной. От Mozilla, например, последовал резко пессимистичный ответ, в котором Microsoft обвинили «в официальном отказе от независимой общей платформы для интернета».

Многие вспоминают времена IE6, когда этот браузер имел огромную долю рынка. Internet Explorer, выиграв войну браузеров, полностью поддался стагнации. Chrome, напротив, непрерывно продвигает новые функции.

Google активно сотрудничает с W3C и WHATWG. Но корпорация Google имеет чрезмерное влияние на эти органы и способна определять будущую конфигурацию Сети.

От соревнования к сотрудничеству

Компания Microsoft заявила, что намерена внести значительный вклад в развитие Chromium. Это поможет пользователям Edge, Chrome, Opera, Brave и других браузеров, созданных на базе движка Chromium.

Данная публикация представляет собой перевод статьи «Edge Goes Chromium: What Does it Mean for Front-End Developers?» , подготовленной дружной командой проекта Интернет-технологии.ру