Microsoft Edge использует Chromium: что нужно знать веб-дизайнерам

Internet Explorer от Microsoft - один из самых больших мемов в Интернете. Это также проклятие для многих веб-дизайнеров, поскольку недавно появившаяся технология просто не поддерживается. Когда Microsoft переименовала IE в Microsoft Edge, была надежда, что те дни подошли к концу. Браузер Windows по умолчанию легко адаптирует современные технологии, а Интернет будет иметь приличную стандартную платформу. Этого не произошло. Однако в конце 2018 года MS объявила, что ситуация изменится: Edge взял движок Chromium в качестве основы.

Microsoft Edge Chromium? Подумаешь?

На момент написания этой статьи вы можете загрузить предварительную сборку Edge, которая включает в себя базу Chromium. Это база для разработчиков, которая не предназначена для ежедневного использования в качестве браузера, но для тех из вас, кто просто жаждет избавиться от существующего Edge, вы можете. Однако на ранних стадиях это очень простая задача. По мере продвижения 2019 года OEM-браузер будет обновляться в обычном режиме и включать Chromium.

Все отлично. Но что в этом такого, спросите вы? Что ж, ответ на это тройной.

1. Microsoft переходит на открытый исходный код

В последнее время мы стали свидетелями того, что Microsoft переходит от проприетарной модели прошлого к сфере программного обеспечения с открытым исходным кодом. Они двигались в этом направлении с тех пор, как приобрели GitHub и начали улучшать редактор кода Atom, и, возможно, самое главное, с выпуском Visual Studio Code, вероятно, самого популярного редактора среди разработчиков в наши дни. Кроме того, их среда разработки Visual Studio была выпущена для бесплатной загрузки, если VS Code недостаточно мощен для вас.

Добавление Edge на арену с открытым исходным кодом только приведет к созданию более сильного продукта для потребителей. Microsoft очень хорошо выразила это в своем заявлении.

Мы также начали вносить вклад в Chromium в таких областях, как доступность, сенсорный ввод, ARM64 и другие. В наших планах продолжить работу в Chromium, а не создавать параллельный проект. Мы работаем напрямую с командами Google и надеемся на дальнейшее сотрудничество с сообществом разработчиков ПО с открытым исходным кодом.

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

2. Меньше фрагментации, больше возможностей

Как мы упоминали выше, Edge, использующий Chromium, наконец-то добавит функции и технологии, ранее исключенные из браузера. Для пользователя это означает лучший опыт практически на всех веб-сайтах, поскольку все будет просто работать, а не получать сообщения об ошибках или сбоях. Для разработчиков это снова означает, что их работа не будет зависеть от пользователей, но также и то, что их время можно лучше потратить на новые проекты и лучшие продукты, а не возиться и настраивать хакерские решения, чтобы заставить вещи работать в IE / Edge.

Именно поэтому мы получаем обновление Microsoft Edge Chromium. Они конкретно заявили, что их цель - «улучшить веб-совместимость для наших клиентов и уменьшить фрагментацию Интернета для всех веб-разработчиков».

Уменьшение фрагментации просто означает более последовательное использование Интернета. Это также будет означать, что пользователи могут (надеюсь) использовать расширения и надстройки без (большой) дополнительной работы со стороны разработчиков.

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

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

3. Веб-дизайнеры получают свободу

До этого выпуска веб-дизайнеры были ограничены во многих отношениях. Хотя многие из вас творили чудеса, не обязательно ограничивая себя на основе IE, посетители ваших клиентов могут очень легко ограничить масштабы вашего проекта.

Ключевые выводы для веб-дизайнеров и разработчиков

Мир веб-разработки и дизайна сильно открывается с принятием Chromium, и мы хотим упомянуть лишь несколько открытых вещей, которыми вы сможете воспользоваться, и вам не придется создавать обходные пути или полностью избегать. CSS-Tricks содержит исчерпывающее изложение того, чего могут ожидать разработчики интерфейса, но это лишь некоторые из основных моментов.

CSS работает в фоновом режиме наложения

Градиенты и дуотоны сейчас довольно популярны и модны. И один из самых простых способов использовать их - использовать CSS в фоновом режиме наложения. До этого выпуска Edge для Chromium этот эффект просто не отображался в браузерах Microsoft. Какое бы изображение вы ни смешивали, оно будет полноцветным и, вероятно, испортит всю атмосферу, к которой вы смешивались. Это больше не проблема. Если вы используете конструкторы страниц, такие как Divi, вы будете рады узнать, что включенные в них эффекты наложения также будут отображаться, поэтому вам не придется копаться в таблицах стилей, если вы этого не хотите.

Edge Understand Hex Color Codes с прозрачностью (наконец)

Так что это не столько потрясающая новая функция, сколько улучшение качества жизни во всем. А для некоторых это может вообще не иметь значения. Это люди, которые не прочь записать цвета как rgba (255, 255, 255, .45) вместо # ffffff45 . Если вы (как и многие люди) предпочитаете шестнадцатеричные цвета, вам повезло. Вы, наконец, сможете начать использовать тот стиль, который вам нравится, и сохранять свои таблицы стилей организованными и аккуратными.

По сути, вы можете включить прозрачность в шестнадцатеричном формате, которая отображается в Edge с этим изменением (обратите внимание на 45 в конце приведенного выше примера, что указывает на прозрачность 45%), что означает, что больше не нужно смешивать и сопоставлять CSS. Как мы уже говорили, это качество жизни.

Текстовая ориентация и режим письма CSS будет отрисовывать

Передовая технология CSS никогда не была сильной стороной Edge. На самом деле, дело даже не в слабой масти. Его вообще не было в шкафу Эджа. Если вы из тех разработчиков, которые хотят воспользоваться преимуществами продвинутого CSS, который выходит за рамки того, что могут делать конструкторы страниц, такие как Divi (а это, по общему признанию, не так уж много), вас постоянно разочаровывают Microsoft Edge и Internet Explorer. Потому что они просто не работают с некоторыми вещами. Это в прошлом, когда Chromium находится под капотом, и один из наших любимых эффектов (ну, два из них, технически) - это режим ориентации текста / письма .

Некоторое время назад мы писали о боковом и вертикальном тексте. До этого обновления следующий код (и, следовательно, эффект в сообщении) нельзя было отобразить в Edge.

.sideways-text {
transform: rotate(90deg); /* makes entire paragraphs and lines rotate sideways */
}
 
.vertical-yellow {
text-orientation: upright; /* makes individual characters stand upright, not whole lines like transform: rotate */
writing-mode: vertical-lr; /* continues left-to-right at line break */
color: yellow;
font-size:2rem; /* this will make the body text twice the relative size of the default set for the whole site */
line-height: 200%; /* line height is VISUALLY line-width when it's vertical */
text-transform: uppercase;
font-family: monospace; /* this just pretties up the whole deal, making all characters the same width */
}
 
.vertical-white {
text-orientation: upright;
writing-mode: vertical-lr;
color: white;
font-size:2rem;
line-height: 200%;
text-transform: uppercase;
font-family: monospace;
}

Давайте порадуемся, что подобные эффекты и передовые технологии больше не блокируются Сущими Силами.

Стандартный импорт закладок и расширения

Да, вы правильно прочитали. Edge будет поддерживать расширения. И Edge сможет импортировать ваши закладки из Chrome всего одним щелчком мыши. Это не только упрощает замену, если вы планируете ее сделать, но и дает вам доступ к тем же мощным инструментам, которые вы уже используете.

Ряд веб-дизайнеров используют расширения, чтобы облегчить себе жизнь. Может быть, это пипетка, чтобы вы могли взять шестигранник этого идеального цвета с веб-сайта (который теперь вы можете использовать и в Edge!), Или линейку, чтобы получить нужный размер, или средство для захвата шрифтов. Возможно, у вас уже установлено все из этого списка, и вы не хотите выходить из Chrome просто из-за этого.

Что ж, теперь ты можешь.

Потому что, хотя Edge основан на Chromium, это не Chrome . Это по-прежнему продукт Microsoft, а это значит, что вы получите программное обеспечение того качества, на котором они восстанавливали свою репутацию. Не всегда представитель среднего уровня в Google.

Сохранить сайты как HTML

До обновления Chromium вы не могли сохранять веб-страницы в формате HTML. Контекстное меню, вызываемое правой кнопкой мыши, было… ограниченным, мягко говоря.

С движком Chromium это уже не так. Наконец-то вы получаете настоящее контекстное меню.

Просто нажмите «Сохранить как…», и вы сможете получить локальную копию этого сайта, чтобы проверить и поиграть с ней, чтобы убедиться, что каждый элемент является именно таким, каким он должен быть.

Говоря об элементах, какими они должны быть…

Edge наконец-то разрешил проверку страницы

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

Это уже не так. Так радуются веб-дизайнеры. Наконец-то вы можете использовать JS Console, поиграть с таблицами стилей CSS, а также тыкать и подталкивать элементы, сколько душе угодно.

Приватный просмотр здесь

Почти каждый браузер позволяет запускать страницы в чистом приватном окне без истории. За исключением Edge. Опять же, с Chromium дизайнеры смогут открывать свои работы и видеть, как они отображаются для пользователей, не выходя из системы, не очищая кеши и файлы cookie и не перепрыгивая через дюжину обручей. Теперь у нас есть доступ к окнам InPrivate, которые функционально идентичны вкладкам Incognito в Chrome. Просто щелкните правой кнопкой мыши, и вы там.

Возможность немедленно протестировать чистый дизайн является обязательной для веб-дизайнеров, которым нужно довести свою работу до идеального пикселя. Эта функция ограничивает работу многих дизайнеров в Edge именно потому, что слишком сложно не использовать личное окно. Если вы из тех дизайнеров, которые ежедневно открывают десятки и десятки из них, вы можете быть удивлены тем, насколько хорошо Edge вписывается в ваш рабочий процесс.

И многое другое

Это лишь верхушка айсберга. И это лишь небольшая часть функций, к которым добавление Chromium в Edge предоставит доступ веб-дизайнерам.

• flat () и flatMap () будут поддерживаться в Edge.
• динамические модули JavaScript могут быть импортированы (наконец)
• стилизация текста заполнителя с помощью CSS
• display: contents теперь доступно для пользователей CSS grid и flexbox
• TextEncoder и TextDecoder значительно улучшат отображение прямых трансляций

По сути, подумайте об этом так: все, что может Chrome, может делать и Edge . Разве это не чудесная мысль?

Особенности Microsoft Edge Chromium

Microsoft не просто берет Chromium и заменяет им Edge. Они также добавляют туда свои собственные функции.

1. Безопасность Chrome

Пользователи будут уверены, что они защищены теми же мерами безопасности, что и пользователи Chrome (особенно с помощью расширений). Кроме того, Microsoft представляет набор новых мер безопасности и средств блокировки отслеживания для браузера. Пользователи смогут установить свой собственный предпочтительный уровень защиты, от полного отсутствия до очень строгой блокировки. Microsoft заявляет, что они хотят сделать защиту вашей конфиденциальности понятной, простой и простой для пользователей. Многие решения безопасности кажутся слишком сложными для пользователей, и, учитывая повсеместное распространение Edge, это хороший шаг.

2. Новые коллекции

Кроме того, база Chromium позволит MS представить функцию, которую они называют «Коллекциями», которая позволит пользователям собирать (очевидно) контент из Интернета, включая текст и изображения, чтобы они могли делиться им и курировать его. Они используют базу Chromium, чтобы держать под рукой источники материала, а также экспортировать в пакет MS Office и поддерживать структуру данных для последующего использования.

3. Эмуляция IE

И еще есть кусок сопротивления : встроенный эмулятор Internet Explorer. Да, вы все правильно прочитали. В новый Microsoft Edge Chromium будет встроен IE. Это может показаться немного отсталым, но на самом деле это красота. Благодаря переходу на Chromium Edge избавляется от ограничений IE, позволяя разработчикам и пользователям лучше двигаться вперед. Но те старые сайты, которые созданы специально для IE? Что ж, они сломаются. IE до сих пор используется многими предприятиями, поэтому наличие внутреннего эмулятора для рендеринга этих приложений и страниц означает, что предприятиям не нужно будет колебаться при обновлении, потому что не будет перерывов в их рабочем процессе или услугах (или необходимости в дополнительном обучении или апгрейды - пока). Это поистине блестящий ход со стороны переходной команды.

Будущее светлое

Мы надеемся , что есть день , в ближайшем будущем , когда браузер Microsoft не тяжесть шуток. Мы действительно хотим, чтобы этот переход на движок Chromium был успешным и помог открыть эру стандартизации в Интернете. Это будет хорошо для пользователей, дизайнеров и разработчиков, и если с ним обращаться правильно (что, кажется, так и есть), Интернет может открыться для большого количества людей из-за этого перехода. И это могло бы значительно облегчить жизнь многим дизайнерам.

Что вы думаете о Microsoft Edge Chromium?

Изображение для статьи от ProStockStudio / shutterstock.com