Mitä (hittoa) pitikään muistaa sen uuden Edge -selaimen kanssa tehdä web sivuille?

Mitä (hittoa) pitikään muistaa sen uuden Edge -selaimen kanssa tehdä web sivuille?

Katso heti alkuun video Edgestä

Edge on Microsoftin uusin webselain joka käyttää täysin uutta renderöintikonetta - EdgeHTML:llää.
Edgen käytön odotetaan kasvavan koska päivittäminen Windows 7,8 ja 8.1
versioista on useimmille ilmaista. Edgelle kehittäessä on hyvä pitää mielessä,
että se on alusta saakka kirjoitettuna uudeksi webselaimeksi, eikä se pohjaudu
esimerkiksi aikaisempiin Internet Explorer selaimiin. Uuden selaimen kunniaksi,
on hyvä tehdä lyhyt katsaus moderniin webkehittämiseen ja siihen kuinka
varmistaa websivustojen täydellinen toimivuus myös uusilla selaimilla.

 1. Päivitä JavaScript kirjastot

Suosittuja Javascript frameworkkejä kuten Jqueryä päivitetään useasti virheiden
korjaamista varten varsinkin uusien selaimien ja versioiden julkaisun myötä.
Päivittämällä JS frameworkit vältät useimmat yhteensopivuusongelmat ja virheet Edge selaimessa.

Microsoftin sisäisen tutkimuksen mukaan jopa 57% maailman suosituimmista 20 000sta websivustosta käyttää
vanhentuneita JS kirjastoja joiden aiheuttamat virheet on korjattu niiden uudemmissa
versioissa.

2. Vältä CSS Prefixejä

CSS prefixejä käytetään paljon selaimissa jotta voidaan käyttää uusia CSS ominaisuuksia joita
ei ole vielä täysin tarkastettu ja hyväksytty W3C:n toimesta. Kokeellisten
prefixien käyttö näyttää usein esimerkiksi tältä: -ms-hyphens:auto; (Kyseinen prefixi tuo IE selaimiin "hyphens"
ominaisuuden usealle riville).

 On hyvin yleistä että sivustot käyttävät tiettyihin selaimiin liittyviä prefixejä, mutta
mikäli kyseiset ominaisuudet on jo tuotu selaimiin yleisesti tai niitä
käytetään virheellisesti, voi se aiheuttaa renderöinti ongelmia selaimissa. Prefixien käytöstä ollaan luovuttu enimmissä määrin
juuri niiden aiheuttamien ongelmien ja ylläpidon hankaluuden vuoksi ja esimerkiksi
Edge selaimessa harvoin käytetään mitään prefixejä. Vältä siis prefixien
käyttöä mahdollisimman paljon ja mikäli sivustossa on pakko käyttää niitä, suosittelemmekin
esimerkiksi Grunt PostCSS:n käyttöä prefixien hallinnan automaatioon.

3. Vältä selaimen tarkistusta

Jotkin websivustot käyttävät selaimen tunnistusta
selvittääkseen tukeeko kyseinen selain jotain tiettyä ominaisuutta ja kuinka
sivusto tulisi renderöidä. Meidän suositus on kuitenkin että sivustoissa
käytettäisiin "Feature detectionia" eli tunnistusta joka kertoo
suoraan tukeeko selain tai käytettävä laite jotain tiettyä ominaisuutta. Jos
selain tukee haluttua ominaisuutta, valitsee se silloin kyseiselle käyttäjälle
parhaan kokemuksen omaavat näyttötavat.

Feature detection on loistava vaihtoehto selaimen tunnistamisen sijaan ja sitä yleisesti
käytetäänkin suosituimmissa JavaScript kirjastoissa kuten Modernizrissä
tai feature detection koodissa. Feature detectionia
käytetään myös usein esim. Polyfillsin kanssa jotta uudet ominaisuudet
voidaan toteuttaa myös vanhemmissa selaimissa vaikka selaimet ei niitä
natiivisti tukisikaan.

4. Liitännäiset historiaan!

Edge ei enää tue erikseen asennettavia liitännäisiä joten esimerkiksi Silverlightin käyttö
kannattaa lopettaa ja käyttää esimerkiksi Javascriptiä ja HTML5:sta
samankaltaisien kokemuksien rakentamiseen. Flash on kyllä vielä tuettu, mutta
Flash tukea ylläpidetään selaimen mukana Adoben tiimin avustuksella, eli Edgen
käyttäjien ei tarvitse erikseen asentaa Flashiä.

5. EdgeHTML

Jos sivustolta puuttuu sivuston rakenteen ja standardit määrittävät direktiivit (DocType),
selain voi esittää sivuston sisällön väärin. Sivustojesi yhteensopivuus Edge
selaimen kanssa on helppo tarkistaa. Käyttämällä Modern.IE:n skannerityökalua,
voit tarkistaa ilmaiseksi kaikki sivustoltasi mahdollisesti löytyvät ongelmat
ja saat samalla yksityiskohtaisen raportin siitä kuinka kyseiset ongelmat
voidaan helposti korjata. Skannerin koodi on muuten myös nähtävissä myös
GitHubissa.

Lisätietoja https://msdn.microsoft.com/web-app-development-msdn