Microsoft Edge adotta Chromium: cosa devono sapere i web designer

Pubblicato: 2019-06-13

Internet Explorer di Microsoft è uno dei meme più grandi su Internet. È anche la rovina di molti web designer, poiché la tecnologia appena introdotta semplicemente non è supportata. Quando Microsoft ha rinominato IE in Microsoft Edge, c'era la speranza che quei giorni fossero alla fine. Che il browser Windows predefinito adotterebbe facilmente le moderne tecnologie e che il Web avrebbe una piattaforma standard decente. Non è successo. Tuttavia, alla fine del 2018, MS ha annunciato che sarebbe cambiato: Edge stava adottando il motore Chromium come base.

Microsoft Edge Chromium? Qual è il grosso problema?

Al momento della stesura di questo documento, puoi scaricare una build di anteprima di Edge che include la base Chromium. È una base di sviluppo e non è pensato per la guida quotidiana come browser, ma per quelli di voi là fuori che non vedono l'ora di liberarsi dell'Edge esistente, è possibile. È molto scarno nelle prime fasi, però. Con l'avanzare del 2019, il browser OEM verrà aggiornato normalmente per includere Chromium.

È tutto fantastico. Ma qual è il problema, chiedi? Bene, la risposta a questo è triplice.

1. Microsoft sta abbracciando l'open source

Di recente, abbiamo assistito a molteplici indicazioni del passaggio di Microsoft dal modello proprietario del passato al regno del software open source. Si sono mossi in questa direzione da quando hanno acquistato GitHub e hanno iniziato a migliorare l'editor di codice Atom, e forse soprattutto con il rilascio di Visual Studio Code, probabilmente l'editor più popolare tra gli sviluppatori in questi giorni. Inoltre, il loro IDE di Visual Studio è stato rilasciato come download gratuito, se VS Code non è abbastanza potente per te.

L'aggiunta di Edge nell'arena open source finirà solo con un prodotto più forte per i consumatori. Microsoft lo ha messo molto bene in questa affermazione.

Abbiamo anche iniziato a fornire contributi a Chromium in aree come accessibilità, tocco, ARM64 e altri. Il nostro piano è continuare a lavorare su Chromium invece di creare un progetto parallelo. Stiamo lavorando direttamente con i team di Google e non vediamo l'ora di lavorare ancora di più con la community open source.

È bello sapere che Microsoft sta lavorando con Google su Chromium invece di biforcarlo per i propri scopi. E man mano che il progetto va avanti, Chromium e il web design nel loro insieme diventeranno più robusti e aperti.

2. Meno frammentazione, più funzionalità

Come accennato in precedenza, Edge adottando Chromium porterà finalmente funzionalità e tecnologie precedentemente escluse dal browser. Per l'utente, ciò significa un'esperienza migliore su quasi tutti i siti Web poiché le cose funzioneranno semplicemente invece di ricevere messaggi di errore o arresti anomali. Per gli sviluppatori, significa ancora una volta che il loro lavoro non andrà in crash sugli utenti, ma anche che il loro tempo può essere speso meglio su nuovi progetti e prodotti migliori piuttosto che armeggiare e truccare soluzioni di hack per far funzionare le cose su IE/Edge.

Questo è esattamente il motivo per cui stiamo ottenendo l'aggiornamento di Microsoft Edge Chromium. Hanno dichiarato in particolare che il loro obiettivo è "creare una migliore compatibilità web per i nostri clienti e una minore frammentazione del web per tutti gli sviluppatori web".

La riduzione della frammentazione significa semplicemente un uso più coerente del web. Significa anche che gli utenti possono (si spera) utilizzare estensioni e componenti aggiuntivi senza (molto) lavoro aggiuntivo da parte degli sviluppatori.

Ci assicuriamo che vedranno la stessa compatibilità nel browser Edge senza lavoro aggiuntivo.

Questa notizia è enorme per le persone che desiderano un'opzione per non utilizzare Chrome a causa di problemi di sicurezza e carenze di privacy. Queste persone vogliono comunque avere l'esperienza migliore e più coerente possibile sul Web. Poiché la frammentazione è al minimo, la sicurezza aumenta perché la probabilità che bug e vulnerabilità siano specifici della piattaforma diminuiscono di un ampio margine.

3. I web designer si liberano

Fino a questa versione, i web designer erano limitati in diversi modi. Mentre molti di voi hanno fatto la loro magia senza necessariamente limitarsi in base a IE, i visitatori dei vostri clienti potrebbero facilmente tenere a freno gli ambiti del vostro progetto.

Punti chiave per web designer e sviluppatori

Il mondo dello sviluppo e del design web si sta aprendo molto con l'adozione di Chromium e vogliamo menzionare solo alcune delle cose aperte che potrai sfruttare senza dover creare soluzioni alternative per o evitare del tutto. CSS-Tricks ha una carrellata esauriente di ciò che gli sviluppatori front-end possono aspettarsi, ma questi sono alcuni dei punti salienti.

CSS funziona in modalità background-blend

Motore Microsoft Edge Chromium

Gradienti e due tonalità sono piuttosto caldi e alla moda in questo momento. E uno dei modi più semplici per usarli è con CSS in modalità blending in background . Fino a questa versione Chromium di Edge, l'effetto semplicemente non veniva visualizzato sui browser Microsoft. Qualunque immagine tu stessi fondendo sarebbe invece a colori e probabilmente rovinerebbe l'intera atmosfera verso cui ti stavi fondendo. Non è più un problema. Se usi costruttori di pagine come Divi, sarai felice di sapere che anche gli effetti di fusione inclusi in essi verranno visualizzati, quindi non dovrai scavare nei fogli di stile a meno che tu non lo voglia assolutamente.

Edge Comprendi i codici colore esadecimali con trasparenza (finalmente)

Quindi questa non è tanto una nuova straordinaria funzionalità, quanto un miglioramento della qualità della vita tutt'intorno. E per alcune persone, questo potrebbe non importare affatto. Quelle persone sono persone a cui non importa scrivere i colori come rgba(255, 255, 255, .45) invece di #ffffff45 . Se tu (come molte persone) preferisci i colori esadecimali, sei fortunato. Sarai finalmente in grado di iniziare a utilizzare lo stile che ti piace e mantenere i tuoi fogli di stile organizzati e in ordine.

Fondamentalmente, puoi includere la trasparenza in esadecimale che viene visualizzata in Edge con questa modifica (nota il 45 alla fine dell'esempio sopra, che indica una trasparenza del 45%), il che significa che non è più necessario combinare e abbinare CSS. Come abbiamo detto, è una caratteristica della qualità della vita.

orientamento del testo e modalità di scrittura CSS Will Render

La tecnologia CSS avanzata non è mai stata il punto forte di Edge. In effetti, non era nemmeno il suo seme debole. Non era affatto nell'armadio di Edge. Se sei il tipo di sviluppatore che vuole sfruttare i CSS avanzati che vanno oltre ciò che possono fare anche i page builder come Divi (e non è molto, ammettiamolo), sei costantemente frustrato da Microsoft Edge e Internet Explorer. Perché semplicemente non funzioneranno con alcune cose. Questo è passato ora che Chromium è sotto il cofano e uno dei nostri effetti preferiti (beh, due di loro, tecnicamente) è l' orientamento del testo/la modalità di scrittura .

Qualche tempo fa abbiamo pubblicato un post sul testo laterale e verticale. Fino a questo aggiornamento, il codice seguente (e quindi l'effetto nel post) era impossibile da mostrare in 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;
}

Rallegriamoci che questo tipo di effetti e tecnologie avanzate non siano più bloccati da The Powers That Be.

Importazione ed estensioni di segnalibri standard

Motore Microsoft Edge Chromium

Sì, avete letto bene. Edge supporterà le estensioni. E Edge sarà in grado di importare i tuoi segnalibri da Chrome con un solo clic. Questo non solo rende più facile lo scambio se hai intenzione di farlo, ma ti dà accesso agli stessi potenti strumenti che stai già utilizzando.

Un certo numero di web designer utilizza le estensioni per semplificarsi la vita. Forse è un contagocce di colore in modo da poter prendere l'esagono di quel colore perfetto da un sito Web (che ora puoi usare anche in Edge!), O un righello per ottenere la giusta dimensione o un font-grabber. Forse hai installato tutto su questo elenco e non vuoi lasciare Chrome semplicemente a causa di quelli.

Bene, ora puoi.

Motore Microsoft Edge Chromium

Perché anche se Edge è basato su Chromium, non è Chrome . È ancora un prodotto Microsoft e ciò significa che otterrai la qualità del software su cui hanno ricostruito la loro reputazione. Non è il rappresentante sempre di fascia media di Google.

Salva i siti web come HTML

Fino all'aggiornamento di Chromium, non potevi salvare le pagine web come HTML. Il menu contestuale del tasto destro era... limitato, per non dire altro.

edge non può scaricare siti web come html

Con il motore Chromium non è più così. Ottieni un vero menu contestuale, finalmente.

Motore Microsoft Edge Chromium

Basta premere "Salva con nome..." e puoi ottenere una copia locale di quel sito da controllare e giocare in modo da assicurarti che ogni elemento sia esattamente come dovrebbe essere.

Motore Microsoft Edge Chromium

Parlando di elementi come dovrebbero essere...

Il bordo consente finalmente l'ispezione della pagina

Motore Microsoft Edge Chromium

Questo è il grande per i web designer. Lavorare in Edge in precedenza era quasi impossibile, non a causa della mancanza di supporto per le funzionalità (anche se questo è molto importante), ma perché non si poteva scavare sotto il cofano e ispezionare i singoli elementi per eseguire il debug e risolvere eventuali problemi. Non potresti modificare e perfezionare molto bene il tuo lavoro perché non potresti effettivamente accedere facilmente al tuo lavoro.

Non è più così. Quindi i web designer si rallegrano. Puoi finalmente usare la JS Console, giocare con i fogli di stile CSS e colpire e pungolare gli elementi fino al contenuto del tuo cuore.

La navigazione privata è qui

Motore Microsoft Edge Chromium

Quasi tutti i browser disponibili ti consentono di eseguire le pagine in una finestra privata pulita e senza cronologia. Tranne Bordo. Ancora una volta, con Chromium, i designer saranno in grado di aprire il proprio lavoro e vedere come viene visualizzato dagli utenti senza disconnettersi, cancellare cache e cookie e saltare attraverso una dozzina di cerchi. Ora abbiamo accesso alle finestre InPrivate che sono funzionalmente identiche alle schede di navigazione in incognito di Chrome. Basta fare clic con il pulsante destro del mouse e il gioco è fatto.

Motore Microsoft Edge Chromium

Essere in grado di testare immediatamente un design pulito è un imperativo per i web designer che hanno bisogno di rendere il loro lavoro pixel perfetto. Questa funzione è quella che limita molti designer a lavorare in Edge in particolare perché è troppo complicato non utilizzare una finestra privata. Se sei il tipo di designer che ne apre dozzine e dozzine ogni giorno, potresti essere sorpreso di quanto Edge si adatti bene al tuo flusso di lavoro.

E molto di più

Queste sono solo la punta dell'iceberg. E questo è solo un piccolo esempio delle funzionalità a cui l'introduzione di Chromium in Edge consentirà ai web designer di accedere.

  • flat() e flatMap() saranno supportati in Edge
  • i moduli JavaScript dinamici possono essere importati (finalmente)
  • stile del testo segnaposto con CSS
  • display: i contenuti sono ora disponibili per gli utenti di CSS grid e flexbox
  • TextEncoder e TextDecoder renderanno la visualizzazione dei livestream molto migliore

Fondamentalmente, pensaci in questo modo: tutto ciò che Chrome può fare, anche Edge può farlo . Non è un pensiero meraviglioso?

Funzionalità specifiche di Microsoft Edge Chromium

Microsoft non sta solo prendendo Chromium e sostituendo Edge con esso. Stanno aggiungendo anche le proprie funzionalità.

1. Sicurezza di Chrome

Gli utenti avranno la certezza di essere protetti dagli stessi tipi di misure di sicurezza che hanno gli utenti di Chrome (specialmente quelli tramite estensioni). Inoltre, Microsoft sta introducendo una suite di nuove misure di sicurezza e blocchi di tracciamento per il browser. Gli utenti saranno in grado di impostare il proprio livello di protezione preferito, da nessuno a un blocco molto rigoroso. Microsoft afferma di voler rendere la protezione della privacy chiara, facile e semplice per gli utenti. Molte soluzioni di sicurezza sembrano eccessivamente complicate per gli utenti e, con l'ubiquità di Edge, questo è un buon passo da compiere.

2. Nuove collezioni

Inoltre, la base di Chromium consentirà a MS di introdurre una funzionalità chiamata "Collezioni" che consentirà agli utenti di raccogliere (ovviamente) contenuti da Internet, inclusi testo e immagini, in modo che possano condividerli e curarli. Stanno usando la base Chromium per tenere a portata di mano le fonti del materiale, nonché esportare nella suite MS Office e mantenere la struttura dei dati per la successiva manipolazione.

3. Emulazione IE

E poi c'è il pezzo forte : un emulatore di Internet Explorer integrato. Sì, hai letto bene. Il nuovo Microsoft Edge Chromium avrà IE integrato. Potrebbe sembrare un po' arretrato, ma in realtà è una cosa di bellezza. Con il passaggio a Chromium, Edge si allontana dai limiti di IE, consentendo a sviluppatori e utenti di vivere un'esperienza migliore andando avanti. Ma quei vecchi siti progettati specificamente per IE? Beh, quelli si romperebbero. E IE è ancora utilizzato da molte aziende, quindi avere un emulatore interno per eseguire il rendering di quelle app e pagine significa che le aziende non dovranno esitare ad aggiornare perché non ci saranno interruzioni nel loro flusso di lavoro o servizi (o necessità di ulteriore formazione o aggiornamenti — ancora). Questo è un tocco davvero brillante da parte del team di transizione.

Il futuro è luminoso

Speriamo che ci sia un giorno nel prossimo futuro in cui un browser Microsoft non sarà oggetto di scherzi. Vogliamo davvero che questo passaggio al motore Chromium abbia successo e aiuti a inaugurare un'era di standardizzazione in tutto il Web. Andrà bene per utenti, designer e sviluppatori, e se viene gestito correttamente (come sembra), Internet potrebbe aprirsi a un sacco di persone a causa di questa transizione. E potrebbe anche rendere la vita di molti designer molto più facile.

Cosa ne pensi di Microsoft Edge Chromium?

Immagine in primo piano dell'articolo di ProStockStudio / shutterstock.com