Kanten Går Krom: Hva Betyr det for Front-End Utviklere?

0
12

I desember 2018, Microsoft kunngjorde at Kant ville vedta Krom, åpen kildekode-prosjekt som driver Google Chrome. Mange innen bransjen reagerte med sorg ved tap av browser diversity. Personlig, jeg var jublende. En offisiell utgivelsesdato er ennå ikke annonsert, men det vil være på et tidspunkt i år. Med sin utgivelse, en hel rekke av HTML, JavaScript og CSS har oppnådd fullt kryss-nettleser støtte.

Forhåndsvisning versjon er nå tilgjengelig for Windows, og kommer snart for Mac.

📣 Kaller alle web-utviklere og tinkerers! 📣

Den første forhåndsvisningen bygger på den neste versjonen av #MicrosoftEdge er klar for deg – prøv det nå! https://t.co/I531hfmD3G pic..com/Tvh6OGGouO

— Microsoft Kanten Dev (@MSEdgeDev) April 8, 2019

Ikke så lenge siden jeg skrev en artikkel med tittelen “Den Lange Langsom Død av Internet Explorer.” Noen av oss er heldige nok har forlatt som leseren allerede. Men det var ikke det eneste som holder oss tilbake. Internet Explorer var den leseren vi alle hatet og Kanten var ment å være sin mye bedre erstatning. Dessverre, Edge i seg selv var ganske laggard. EdgeHTML er en gaffel av Trident, motor som er drevet av Internet Explorer. Microsoft betydelig under-investeres i Kanten. Eplet ikke faller langt fra stammen. Kant Bruker Stemmen nettstedet ble en fin idé, slik at utviklere å stemme for hvilke funksjoner de ønsket å bli implementert. Dessverre, som Dave Rupert sagt det, er å stemme på nettstedet var “som å kaste mynter i en wishing well.” De mest etterspurte funksjonene som var igjen unimplemented for år.

Det er mange funksjoner som pre-Krom Kanten støtter foreløpig ikke, men er tilgjengelig på andre moderne nettlesere og, når de har gjort bryteren, vil vi være i stand til å bruke dem. Mange av dem kan ikke være polyfilled eller jobbet rundt, så denne utgivelsen er en big deal.

Funksjoner vi kan se frem til å bruke

Så hva er disse funksjonene, egentlig? La oss skissere dem her og begynner å bli begeistret for alle de nye tingene vi vil være i stand til å gjøre.

Tilpassede Elementer og Skygge DOM

Sammen, tilpassede elementer og skygge DOM tillater utviklere å definere tilpassede, gjenbrukbare og innkapslet komponenter. Mange mennesker var å be om dette. Folk har vært å stemme for gjennomføringen siden 2014, og vi er endelig å få det.

HTML-detaljer og elementer oppsummering

<Detaljer> og <summary> – elementer er en del av HTML5 og har vært støttet siden 2011 i Chrome. Brukes sammen, elementer generere en enkel widget for å vise og skjule innhold. Mens det er trivielt å implementere noe lignende ved hjelp av JavaScript, <detaljer> og <summary> – elementer fungerer selv når JavaScript er deaktivert eller har unnlatt å laste.

Se Penn
detaljer/oppsummering av CSS RUTENETT (@cssgrid)
på CodePen.

Javascript Skrift Legge API

Dette betyr mye for noen mennesker. Alle moderne nettlesere støtter nå CSS-font-vis eiendom. Men, er du fortsatt ønsker kanskje å legge til dine skrifter med JavaScript. Font-lasting monomaniac Zach Leatherman har en explainer av hvorfor du ønsker kanskje å laste skrifter med JavaScript-selv om vi nå har bred støtte for skrift-skjermen. Grøfting polyfills for dette API-et er viktig fordi denne JavaScript er, i henhold til Zach:

[…] vanligvis inlined i den kritiske vei. Tiden som brukes til å analysere og gjennomføre polyfill JavaScript er egentlig bortkastet på nettlesere som støtter native CSS Skrift Legge API.”

I en artikkel fra 2018, Zach beklaget:

[…] nettleser-gitt CSS Skrift Legge API har ganske bred støtte, og har eksistert i lang tid, men er confoundedly fortsatt mangler fra alle tilgjengelige versjoner av Microsoft Kanten.”

Ikke lenger!

JavaScript flatskjerm og flatMap

De fleste enkelt forklart med en kodebit, flatskjerm() er nyttig når du har et utvalg som er nestet inn i annen rekke.

const ting = [‘thing1’, ‘thing2’, [‘thing3’, [‘thing4’]]]
const flattenedThings = ting.flatskjerm(2); // Returnerer [‘thing1’, ‘thing2’, ‘thing3’, ‘thing4’]

Som navnet antyder, flatMap() er det samme som å bruke både kart () – metoden og flatskjerm().

Disse metodene er også støttet i Node 11. 🎉

JavaScript TextEncoder og TextDecoder

TextEncoder og TextDecoder er en del av koding spec. De ser ut til å være nyttig når du arbeider med bekker.

JavaScript-Objekt hvile og objekt spredt

Dette er akkurat som resten og spre egenskaper for matriser.

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-moduler: dynamisk importere

Ved hjelp av en funksjon-som syntaks, dynamisk import tillate deg å lat-legg ES moduler når en bruker trenger dem.

knappen.addEventListener(“klikk”, function() {
import(“./myModule.js”).deretter(modul => modulen.standard());
});
CSS-bakgrunn-blanding-modus eiendom

bakgrunn-blanding-modus gir Photoshop-stil bildemanipulering til internett.

CSS-foretrekker-redusert-motion media query

Jeg kan ikke hjelpe for å føle at du ikke gjør at folk føler seg syke bør bli standard i et nettsted, spesielt som ikke alle brukere vil være klar over at denne innstillingen foreligger. Som animasjon på internett blir mer og mer vanlig, er det viktig å erkjenne at animasjon kan føre forårsaker svimmelhet, kvalme og hodepine for noen brukere.

CSS-font-vis eiendom

font-skjerm har vært godt dekket på CSS-Triks før. Det er en måte å kontrollere den opplevde ytelsen av skrift lasting.

CSS innskuddet-color eiendom

Riktignok en ganske triviell-funksjonen, og den kunne ha det trygt og enkelt blitt brukt som progressive enhancement. Det kan du style den blinkende markøren i teksten feltene.

8-sifret hex farge notasjon

Det er fint å ha konsistens i en codebase. Dette inkluderer å holde seg til enten
RGB, heksadesimal eller HSL farge-format. Hvis din foretrukne formatet er hex, så du hadde et problem fordi det kreves et bytte til rgba() når du til enhver tid er nødvendig for å definere åpenhet. Hex kan nå inkluderer en alfa (gjennomsiktighet) verdi. For eksempel, #ffffff80 tilsvarer rgba(255, 255, 255, .5). Uten tvil, det er ikke den mest intuitive farge-format og har ingen faktiske fordel over rgba().

Indre størrelse

Jeg har ikke sett så mye hype eller spenning for iboende dimensjonering som noen andre nye CSS-funksjoner, men det er den jeg personlig hankering for de fleste. Indre størrelse bestemmer størrelser er basert på innholdet av et element og introduserer tre nye søkeord i CSS: min-innhold, max-innhold og passe-innhold(). Disse nøkkelordene kan brukes de fleste steder som du vil vanligvis bruke en lengde, som høyde, bredde, min-width, maks bredde, min høyde, maks høyde, grid-mal-rader, grid-mal-kolonner, og flex-basis.

CSS tekst-orientering eiendom

Brukes i forbindelse med skriver-modus eiendel, tekst-orientering, angir retningen på teksten, som du kan forvente.

Se Penn
tekst-retning: stående med CSS-GRID (@cssgrid)
på CodePen.

CSS :plassholder-vist pseudo-element

plassholder-vist var også tilgjengelig i Internet Explorer, men har liksom aldri gjort det i Kanten… inntil nå. UX forskning viser at plassholderteksten bør generelt unngås. Imidlertid, hvis du bruker plassholderteksten, dette er en praktisk måte å bruke stiler betinget basert på om brukeren har skrevet inn tekst i inngang.

CSS sted-innhold eiendom

sted-innhold er en forkortelse for innstilling både både rett-innhold og rettferdiggjøre-innhold.

Se Penn
sted-innhold av CSS RUTENETT (@cssgrid)
på CodePen.

CSS-vil-endre eiendom

Den vil-endre egenskapen kan brukes som en ytelse optimalisering, og informere leseren på forhånd at et element vil endre. Pre-Krom Kanten var faktisk god til å håndtere animasjoner performantly uten behov for denne eiendommen, men det vil nå har fullt kryss-nettleser støtte.

CSS all eiendom

alle er en forkortelse for innstillingen alle CSS-egenskaper på en gang.

For eksempel, å sette knappen { alle: unset; } tilsvarer:

knappen {
bakgrunn: ingen;
ramme: ingen;
farge: arve;
skrifttype: arve;
disposisjon: ingen;
padding: 0;
}

Dessverre skjønt, gå tilbake søkeord fortsatt ikke har blitt gjennomført på et annet sted enn Safari, noe som begrenser kjørelengde vi kan få ut av all eiendom.

CSS Former og Klippet Banen

Tradisjonelt har internett blitt rektangel-sentriske. Det har en safe modell, tross alt. Mens vi trenger ikke lenger flyter for layout, vi kan bruk dem kreativt for å pakke inn tekst rundt bildene og former med formen-utenfor eiendommen. Dette kan kombineres med clip-banen eiendom, noe som gir muligheten til å vise et bilde inne i en form.

Clippy er en online klipp-bane editor

CSS :fokus-i pseudo-klasse

Hvis du vil bruke spesielle stiler til en hel form når noen av sine innganger er i fokus, da :fokus-innenfor er den velger for deg.

CSS innholdet nøkkelord

Dette er ganske viktig hvis du arbeider med CSS rutenett. Dette hadde vært merket som “ikke planlagt” ved Kanten, tross 3,920 stemmer fra utviklere.

For både flexbox og rutenett, bare direkte barn blir flex elementer eller rutenett elementer, henholdsvis. Noe som er nestet dypere kan ikke plasseres ved hjelp av flex eller grid-posisjonering. I ord spec, når displayet: innholdet er tillagt et overordnet element, “element må være behandlet som om det hadde blitt erstattet i elementet treet av innholdet,” som tillater dem å bli lagt ut med et rutenett eller med flexbox. Chris går inn i en mer grundig forklaring som er verdt å sjekke ut.

Det er, dessverre, fortsatt noen bugs med andre nettleser-implementeringer som påvirker tilgjengelighet.

Fremtiden har så mye mer lovende

Vi har bare sett på funksjoner som støttes av alle moderne nettlesere når Kanten gjør flytte til Krom. Når det er sagt, død eldre Kanten gjør også en rekke andre funksjoner føles mye nærmere. Kant var den eneste nettleseren å dra føttene på Web Animasjon API og det viste ingen interesse i noen del av Houdini spesifikasjoner, for eksempel.

Kreditt: https://ishoudinireadyyet.com

Virkningen på nettleseren testing

Testing i BrowserStack (til venstre) og ulike nettleser apps på min iPhone (til høyre)

Selvfølgelig, det andre stort pluss for web-utviklere er mindre testing. Mye av forsømt Kanten under cross-browser testing, slik at Kanten brukere var mer sannsynlig å ha en ødelagt erfaring. Dette var den viktigste grunn til at Microsoft bestemte seg for å bytte til Krom. Hvis nettstedet ditt er fri for feil i en Krom nettleseren, så det er nok fint i alle av dem. I ordene til Kanten team, Krom vil gi “bedre web-kompatibilitet for våre kunder og mindre fragmentering av web for alle web-utviklere.” Stort utvalg av enheter og nettlesere gjør leseren testing en av de minst hyggelig oppgaver som vi er ansvarlig for som front-end utviklere. Edge vil nå være tilgjengelig for mac os-brukere som er flott for de mange av oss som jobber på en Mac. Et abonnement på BrowserStack vil nå være litt mindre nødvendig.

Mister vi noe?

Til min kunnskap, den eneste funksjonen som ble støttet overalt unntatt Chrome er SVG farge skrifter, som ikke lenger jobber i Kanten nettleser. Andre farger font-formater (COLR, SBIX, CBDT/CBLC) vil fortsette å jobbe selv.

Uh, @GoogleChrome planlegger du å støtte #OpenTypeSVG snart? Støttes i Safari (12+), Firefox (26+) selv EdgeHTML (38+) Photoshop, Illustrator – men ikke Chrome
/cc @colorfontswtf pic..com/tgwJ3AqHm2

— Chris Lilley (@svgeesus) februar 15, 2019

Hva om andre nettlesere?

Riktignok Kanten var ikke den siste subpar nettleser. Alle funksjoner i denne artikkelen er uegnet i Internet Explorer, og vil alltid være det. Hvis du har brukere i Russland, vil du trenger for å støtte Yandex. Hvis du har brukere i Afrika, vil du trenger for å støtte Opera Mini. Hvis du har brukere i Kina, så UC og QQ vil være viktig å teste mot. Hvis du ikke har disse regionale hensyn, det har aldri vært en bedre tid til å droppe støtte for Internet Explorer og omfavne de funksjoner det moderne nettet har å tilby. Massevis av PC-brukere har fast med Internet Explorer rent ut av vane. Forhåpentligvis, en oppgradert Kanten vil være nok til å friste dem bort. En offisiell Microsoft bloggpost med tittelen “farene ved bruk av Internet Explorer som standard nettleser,” konkluderte med at, “Internet Explorer er en kompatibilitet løsning…utviklere av og store, er bare ikke testing for Internet Explorer i disse dager.” For den resterende brukere, de fleste web-må se stadig brutt. Det er på tide å la det dø.

Er Google en stormannsgal?

Livet er i ferd med å få enklere for webutviklere, men svar til Microsoft kunngjøring var langt fra positive. Mozilla, for eksempel, hadde en stridently pessimistiske svar, som anklaget Microsoft “offisielt gi opp på en uavhengig felles plattform for internett.” Uttalelsen er beskrevet Google som å ha “nesten full kontroll over infrastrukturen i vår online liv” og en “monopolistic hold på unike verdier.” Det konkludert med at “de gir fra seg kontroll over grunnleggende internett-infrastruktur til et enkelt selskap er forferdelig.”

Mange har harked tilbake til dagene av IE6, siste gang en nettleser oppnådd en slik en overveldende del av markedet. Internett Explorer, etter å ha vunnet nettleseren krigen, ga til total stagnasjon. Chrome, derimot, ustanselig presser nye funksjoner. Google deltar aktivt med web-standarder organer W3C og WHATWG. Kanskje skjønt, det har en stor innflytelse i disse organene, og makt til å diktere den fremtidige formen på nettet. Google Utvikler Relasjoner har en tendens til å hype funksjoner som har levert bare i Chrome.

Fra konkurranse til samarbeid

Snarere enn å være den nye IE, Edge kan bidra til å fornye nettet. Mens det falt bak på mange områder, det gjorde lede vei for CSS rutenett, CSS unntak, CSS regioner og den nye HTML-import spec. I et radikalt avvik fra historiske atferd, Microsoft har blitt en av verdens største tilhengere av åpen kildekode-prosjekter. Det betyr at alle de store nettleserne er nå åpen kildekode. Microsoft har uttalt at de har tenkt til å bli en betydelig bidragsyter til Krom — faktisk, de har allerede plaget opp over 300 fusjonerer. Dette vil hjelpe Kanten brukere, men vil også være til nytte for brukere av Chrome, Opera, Modig, og andre Krom-baserte nettlesere.