O Microsoft Edge adota o Chromium: o que os designers da web precisam saber

O Internet Explorer da Microsoft é um dos maiores memes da Internet. É também a desgraça de muitos web designers, já que a tecnologia recém-introduzida simplesmente não é suportada. Quando a Microsoft rebatizou o IE para Microsoft Edge, havia esperança de que aqueles dias tivessem chegado ao fim. Que o navegador padrão do Windows adotaria tecnologias modernas facilmente, e a web teria uma plataforma decentemente padrão. Isso não aconteceu. No entanto, no final de 2018, a MS anunciou que isso iria mudar: o Edge estava adotando o motor Chromium como base.

Microsoft Edge Chromium? Qual é o grande negócio?

No momento em que este livro foi escrito, você pode baixar uma versão de visualização do Edge que inclui a base do Chromium. É uma base de desenvolvimento e não deve ser usada diariamente como um navegador, mas para aqueles que estão ansiosos para se livrar do Edge existente, você pode. É muito básico nos estágios iniciais, no entanto. À medida que 2019 avança, o navegador OEM será atualizado normalmente para incluir o Chromium.

Isso é ótimo. Mas qual é o problema, você pergunta? Bem, a resposta para isso é tripla.

1. A Microsoft está adotando o código aberto

Recentemente, vimos várias indicações de que a Microsoft mudou do modelo proprietário do passado para o reino do software de código aberto. Eles estão se movendo nessa direção desde que compraram o GitHub e começaram a melhorar o editor de código Atom, e talvez o mais importante com o lançamento do Visual Studio Code, provavelmente o editor mais popular entre os desenvolvedores atualmente. Além disso, o IDE do Visual Studio foi lançado como um download gratuito, se o VS Code não for poderoso o suficiente para você.

Adicionar o Edge na arena do código aberto só vai resultar em um produto mais forte para os consumidores. A Microsoft colocou isso muito bem nesta declaração.

Também começamos a fazer contribuições para o Chromium em áreas como acessibilidade, toque, ARM64 e outras. Nosso plano é continuar trabalhando no Chromium em vez de criar um projeto paralelo. Estamos trabalhando diretamente com as equipes do Google e esperamos trabalhar ainda mais com a comunidade de código aberto.

É bom saber que a Microsoft está trabalhando com o Google no Chromium, em vez de bifurcá-lo para seus próprios fins. E à medida que o projeto avança, o Chromium e o web design como um todo se tornam mais robustos e abertos.

2. Menos fragmentação, mais recursos

Como mencionamos acima, a adoção do Chromium pelo Edge finalmente trará recursos e tecnologia anteriormente excluídos do navegador. Para o usuário, isso significa uma experiência melhor em quase todos os sites, pois as coisas simplesmente funcionarão em vez de receber mensagens de erro ou travamentos. Para os desenvolvedores, significa novamente que seu trabalho não irá travar nos usuários, mas também que seu tempo pode ser mais bem gasto em novos projetos e produtos melhores do que em remendar e montar soluções de hackey para fazer as coisas funcionarem no IE / Edge.

É exatamente por esse tipo de coisa que estamos obtendo a atualização do Microsoft Edge Chromium. Eles declararam especificamente que seu objetivo é “criar melhor compatibilidade da web para nossos clientes e menos fragmentação da web para todos os desenvolvedores da web”.

A redução da fragmentação significa simplesmente um uso mais consistente da web. Isso também significa que os usuários podem (espero) usar extensões e add-ons sem (muito) trabalho adicional dos desenvolvedores.

Estamos garantindo que eles verão a mesma compatibilidade no navegador Edge sem trabalho adicional.

Esta notícia é enorme para as pessoas que querem uma opção de não usar o Chrome devido a problemas de segurança e lacunas de privacidade. Essas pessoas ainda desejam ter a melhor e mais consistente experiência possível na web. Como a fragmentação é mínima, a segurança aumenta porque a probabilidade de bugs e vulnerabilidades serem específicos da plataforma diminui em grande parte.

3. Web Designers Get Set Free

Até este lançamento, os web designers eram limitados de várias maneiras. Enquanto muitos de vocês trabalharam sua mágica sem necessariamente se limitarem com base no IE, os visitantes de seus clientes poderiam facilmente controlar os escopos de seu projeto.

Principais vantagens para designers e desenvolvedores da Web

O mundo do desenvolvimento e design da web está se abrindo muito com a adoção do Chromium, e queremos mencionar apenas algumas das coisas abertas que você poderá aproveitar e não terá que criar soluções alternativas para ou evite inteiramente. CSS-Tricks tem um resumo exaustivo do que os desenvolvedores de front-end podem esperar, mas esses são alguns dos destaques.

CSS funciona em modo de mesclagem de fundo

Gradientes e duotônicos estão bem na moda agora. E uma das maneiras mais fáceis de usá-los é com CSS no modo de mesclagem de fundo . Até o lançamento do Edge no Chromium, o efeito simplesmente não seria renderizado nos navegadores da Microsoft. Qualquer imagem que você estivesse mesclando seria totalmente colorida e provavelmente arruinaria toda a vibração para a qual você estava mesclando. Isso não é mais um problema. Se você usar construtores de páginas como o Divi, ficará feliz em saber que os efeitos de mesclagem incluídos neles também serão renderizados, portanto, você não terá que se aprofundar nas folhas de estilo, a menos que você realmente queira.

Edge Entenda códigos de cores hexadecimais com transparência (finalmente)

Portanto, este não é tanto um novo recurso incrível, mas uma melhoria na qualidade de vida em geral. E para algumas pessoas, isso pode não ter nenhuma importância. Essas pessoas que não se importam em escrever cores como rgba (255, 255, 255, .45) em vez de # ffffff45 . Se você (como muitas pessoas) prefere cores hexadecimais, você está com sorte. Finalmente, você poderá começar a usar o estilo de sua preferência e manter suas folhas de estilo organizadas e organizadas.

Basicamente, você pode incluir transparência em hexadecimal que renderiza no Edge com essa alteração (observe a 45 no final do exemplo acima, indicando uma transparência de 45%), o que significa que não há mais CSS mix-and-match. Como dissemos, é um recurso de qualidade de vida.

orientação de texto e modo de escrita CSS renderizará

A tecnologia CSS avançada nunca foi o forte da Edge. Na verdade, nem era um terno fraco. Não estava no armário de Edge. Se você é o tipo de desenvolvedor que deseja tirar proveito de CSS avançado que vai além do que os criadores de páginas como o Divi podem fazer (e isso não é muito, admito), você está constantemente frustrado com o Microsoft Edge e o Internet Explorer. Porque eles simplesmente não funcionam com algumas coisas. Isso é passado agora que o Chromium está sob o capô, e um de nossos efeitos favoritos (bem, dois deles, tecnicamente) é orientação de texto / modo de escrita .

Fizemos uma postagem um tempo atrás sobre texto lateral e vertical. Até esta atualização, o código a seguir (e, portanto, o efeito na postagem) era impossível de ser mostrado no 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;
}

Vamos nos alegrar que esses tipos de efeitos e tecnologias avançadas não estejam mais sendo bloqueados pelos poderes que existem.

Importação e extensões de favoritos padrão

Sim, você leu certo. O Edge oferecerá suporte a extensões. E o Edge será capaz de importar seus favoritos do Chrome com apenas um clique. Isso não só torna a troca mais fácil se você planeja fazê-lo, mas também dá acesso às mesmas ferramentas poderosas que você já usa.

Vários designers da web usam extensões para tornar suas vidas mais fáceis. Talvez seja um conta-gotas de cor para que você possa pegar o hexágono da cor perfeita de um site (que agora você pode usar no Edge também!), Ou uma régua para obter o tamanho certo ou um pegador de fonte. Talvez você tenha tudo nesta lista instalado e não queira sair do Chrome simplesmente por causa disso.

Bem, agora você pode.

Porque embora o Edge seja baseado no Chromium, não é o Chrome . Ainda é um produto da Microsoft, e isso significa que você obterá a qualidade do software com o qual eles estão reconstruindo sua reputação. Não é o representante sempre intermediário do Google.

Salvar sites como HTML

Até a atualização do Chromium, não era possível salvar páginas da web como HTML. O menu de contexto do botão direito era ... limitado, para dizer o mínimo.

Com o motor Chromium, esse não é mais o caso. Você obtém um menu de contexto real, finalmente.

Basta pressionar “Salvar como…” e você pode obter uma cópia local desse site para verificar e brincar com ela, de modo que você possa ter certeza de que cada elemento está exatamente como deveria ser.

Falando de elementos como eles deveriam ser ...

O Edge finalmente permite a inspeção da página

Este é o grande problema para web designers. Trabalhar no Edge anteriormente era quase impossível, não por causa da falta de suporte a recursos (embora isso importe muito), mas porque você não podia cavar sob o capô e inspecionar elementos individuais para depurar e solucionar quaisquer problemas. Você não poderia ajustar e ajustar seu trabalho muito bem porque você não poderia acessar seu trabalho facilmente.

Isso não é mais o caso. Então, os web designers se alegram. Você pode finalmente usar o JS Console, brincar com folhas de estilo CSS e cutucar e cutucar os elementos de acordo com sua vontade.

A navegação privada chegou

Quase todos os navegadores permitem que você execute páginas em uma janela privada limpa e sem histórico. Exceto para Edge. Mais uma vez, com o Chromium, os designers serão capazes de abrir seu trabalho e ver como ele é renderizado para os usuários sem fazer logout, limpar caches e cookies e passar por vários obstáculos. Agora temos acesso às janelas InPrivate, que são funcionalmente idênticas às guias anônimas do Chrome. Basta clicar com o botão direito e pronto.

Ser capaz de testar imediatamente um design limpo é imperativo para web designers que precisam ter seus pixels de trabalho perfeitos. Este recurso limita muitos designers de trabalhar no Edge especificamente porque é muito problemático não usar uma janela privada. Se você é o tipo de designer que abre dezenas e dezenas deles diariamente, pode se surpreender com o quão bem o Edge se encaixa em seu fluxo de trabalho.

E muito mais

Essas são apenas a ponta do iceberg. E esta é apenas uma pequena amostra dos recursos aos quais trazer o Chromium para o Edge dará acesso aos web designers.

• flat () e flatMap () serão suportados no Edge
• módulos JavaScript dinâmicos podem ser importados (finalmente)
• estilização de texto de espaço reservado com CSS
• display: o conteúdo agora está disponível para usuários de CSS e flexbox
• TextEncoder e TextDecoder tornarão a exibição de transmissões ao vivo muito melhor

Basicamente, pense assim: qualquer coisa que o Chrome pode fazer, o Edge também pode . Não é um pensamento maravilhoso?

Recursos específicos do Microsoft Edge Chromium

A Microsoft não está apenas pegando o Chromium e substituindo o Edge por ele. Eles estão adicionando seus próprios recursos lá também.

1. Segurança do Chrome

Os usuários terão a certeza de que estão protegidos pelos mesmos tipos de medidas de segurança que os usuários do Chrome (especialmente aquelas por meio de extensões). Além disso, a Microsoft está introduzindo um pacote de novas medidas de segurança e bloqueadores de rastreamento para o navegador. Os usuários poderão definir seu próprio nível de proteção preferencial, de nenhum a um bloqueio muito estrito. A Microsoft afirma que deseja tornar a proteção de sua privacidade clara, fácil e simples para os usuários. Muitas soluções de segurança parecem excessivamente complicadas para os usuários e, com a onipresença do Edge, esse é um bom passo a ser dado.

2. Novas coleções

Além disso, a base do Chromium permitirá que a MS introduza um recurso que eles estão chamando de “Coleções”, que permitirá aos usuários coletar (obviamente) conteúdo da Internet, incluindo texto e imagens, para que possam compartilhá-lo e curá-lo. Eles estão usando a base do Chromium para manter as fontes do material em mãos, bem como exportar para o pacote do MS Office e manter a estrutura de dados para manipulação posterior.

3. Emulação IE

E então há a peça de resistência : um emulador do Internet Explorer integrado. Sim, você leu corretamente. O novo Microsoft Edge Chromium terá o IE integrado. Pode parecer um pouco invertido, mas na verdade é uma coisa linda. Com a troca para o Chromium, o Edge se livra das limitações do IE, permitindo que desenvolvedores e usuários tenham uma experiência melhor no futuro. Mas aqueles sites antigos que são projetados especificamente para o IE? Bem, isso iria quebrar. E o IE ainda é usado por muitas empresas, então ter um emulador interno para renderizar esses aplicativos e páginas significa que as empresas não precisarão hesitar em atualizar porque não haverá interrupção em seu fluxo de trabalho ou serviços (ou necessidade de treinamento adicional ou atualizações - ainda). Esse é um toque verdadeiramente brilhante da equipe de transição.

O futuro é brilhante

Esperamos que haja um dia em um futuro próximo em que o navegador da Microsoft não seja motivo de piadas. Queremos muito que essa mudança para o mecanismo Chromium seja bem-sucedida e ajude a inaugurar uma era de padronização em toda a web. Será bom para usuários e designers e desenvolvedores, e se for manuseado corretamente (o que parece que é), a internet pode se abrir para um monte de gente por causa dessa transição. E poderia tornar a vida de muitos designers muito mais fácil também.

O que você acha do Microsoft Edge Chromium?

Imagem em destaque do artigo por ProStockStudio / shutterstock.com