luodaan Cross-Browser Compatible Websites
Posted in Performance by WP Engine
päivitetty viimeksi 30. toukokuuta, 2019
vaikka useimmat ihmiset käyttävät yhtä selainta, sinulla on kymmeniä vaihtoehtoja sekä työpöydälle että mobiililaitteille. Ihannetapauksessa sivustot näkyisivät täydellisesti riippumatta siitä, mitä selainta käytit. Aina näin ei kuitenkaan ole, jolloin tulee vastaan cross-browser-testaus.
perusteellisella selainten välisellä testauksella voit varmistaa, että sivustosi näyttää ja käyttäytyy täydellisesti kaikissa suosituissa vaihtoehdoissa. Näin kävijöilläsi on yhtä suuri kokemus, käyttivätpä he sitten Chromea, Firefoxia, Operaa tai vähemmän tunnettuja vaihtoehtoja, kuten Seamonkeytä.
tässä artikkelissa puhutaan hieman enemmän selainten välisen testauksen tärkeydestä. Sitten käymme läpi joitakin vaiheita, joiden avulla voit luoda cross-browser-yhteensopivan verkkosivuston. Ruvetaan hommiin!
Miksi Selainten Välinen Yhteensopivuus On Tärkeää?
useimmat ihmiset käyttävät tunnettuja selaimia, kuten Google Chromea, Safaria, Firefoxia ja Operaa. Kuitenkin, ovat paljon enemmän vaihtoehtoja kuin voisi kuvitella. Tämä on kuluttajan kannalta hyvä asia, mutta ongelma sinulle on se, että jokainen selain on rakennettu eri tavalla. Tämä tarkoittaa, että sivustosi saattaa toimia täydellisesti Chromessa, mutta kokea kysymyksiä Firefoxissa (vain antaa yhden esimerkin).
kokemuksemme mukaan suurin osa virheistä, joita näet yhdessä selaimessa, mutta et toisessa, ovat suhteellisen pieniä ongelmia. Yksi tietty osa sivustosi ei ehkä tarkastella sitä pitäisi, tai tietty ominaisuus ei ehkä toimi oikein. Vaikka nämä ongelmat voivat olla vähäisiä, niihin on puututtava, jos haluat tarjota saman kokemuksen kaikille sivustosi kävijöille.
Ihannetapauksessa haluat suunnitella verkkosivustosi yhteensopivaksi selaimen kanssa alusta alkaen. Näin et vaaranna minkään tietyn selaimen käyttäjiä. Seuraavassa osassa näytämme, miten se tehdään.
Kuinka luoda Cross-Browser-yhteensopiva Verkkosivusto
ajatus cross-browser-yhteensopivan verkkosivuston luomisesta saattaa kuulostaa pelottavalta. Kuitenkin, muutamia yksinkertaisia ohjeita voi mennä pitkälle kohti varmistaa, että sivustosi toimii täydellisesti useimmissa selaimissa. Puhutaan siitä, mitä nuo ovat!
Vaihe 1: Aseta ”Doctype” HTML-tiedostoillesi
kun selain lataa verkkosivustosi, sen on selvitettävä, mitä HTML-versiota käytät. Tämä on tärkeää, koska HTML: n eri versiot sisältävät erilaisia sääntöjä.
”doctype” on lausunto, joka kertoo selaimille: ”Hei, tämä on versio HTML aiomme käyttää!”Näin selainten ei tarvitse tehdä arvauksia, jotka voivat vähentää käyttäjien kohtaamien virheiden määrää.
onneksi tämä vaihe on huomattavan yksinkertainen. Kaikki mitä tarvitsee tehdä, on lisätä seuraavat pätkä koodia HTML-asiakirjoja:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
kuten huomaat, tämä pätkä on HTML: n versioon 4.01. Jos haluat käyttää HTML5: tä sen sijaan, voit käyttää tätä koodia:
<!DOCTYPE html>
ongelmana on, että jotkut selaimet eivät vieläkään pelaa kauniisti HTML5: llä. Huolimatta sen monista parannuksista, sen käyttäminen voi vaikuttaa cross-browser-yhteensopivuuteen, joten sinun täytyy punnita tätä tosiasiaa sen etujen rinnalla.
Vaihe 2: Käytä CSS-Nollaussääntöjä
yleensä CSS on pääsyyllinen selaimen yhteensopivuusvirheisiin. Tämä johtuu siitä, että jokaisella selaimella on omat CSS-sääntönsä. Toisin sanoen sivustosi CSS saattaa tehdä eri tavalla riippuen siitä, mitä selainta kävijät käyttävät.
yksi tapa ratkaista tämä ongelma on käyttää ”CSS-resetiä”. Nämä ovat sääntökokonaisuuksia, joita voit lisätä verkkosivustollesi ja jotka määrittävät css: n toimintatavan eri selaimissa.
CSS-nollaukseen on useita vaihtoehtoja, mutta yksi suosikeistamme on nimeltään Normalize.css, koska kuinka kattava se on:
voit ladata normalisoida.CSS tiedosto sen GitHub kirjasto ja käyttää sitä lähtökohtana sivuston CSS. Tämä auttaa maksimoimaan selaimien välisen yhteensopivuuden sivustossasi.
Vaihe 3: Käytä Cross-Browser-yhteensopivia kirjastoja ja kehyksiä
JavaScript-kirjastot ja laajat kehykset kuten Foundation ja Bootstrap ovat uskomattoman suosittuja näinä päivinä. Jos aiot käyttää tällaisia elementtejä rakentaa sivuston, voit säästää paljon päänsärkyä käyttämällä cross-selain ystävällinen vaihtoehtoja.
osa kirjastoista ja kehyksistä kehitettiin alusta asti toimimaan mahdollisimman monella selaimella. Yleisesti ottaen Suosituimmat Kehykset – mukaan lukien kaksi juuri mainitsemaamme-on rakennettu yhteensopiviksi mahdollisimman monien selainten kanssa.
varmuuden vuoksi muista kuitenkin tarkistaa dokumentaatiosta, onko kirjastossa tai kehyksissä käyttöä. Useimmissa tapauksissa löydät tietoa cross-browser-yhteensopivuudesta melko helposti. Tässä on esimerkiksi säätiön yhteensopivuussivu sen dokumentaatiosta:
pieni tutkimus auttaa sinua tarjoamaan hämmästyttävän kokemuksen kaikille kävijöille, ei vain niille, jotka käyttävät tiettyä selainta.
Cross-Browser-testaus
vaikka olet pyrkinyt luomaan cross-browser-yhteensopivan verkkosivuston, kannattaa silti tarkistaa, toimiiko kaikki kuten pitääkin. Tämä prosessi on suhteellisen yksinkertainen-sinun tarvitsee vain ladata sivustosi käyttämällä useita selaimia ja tarkistaa virheitä.
ongelmana on, että selaimia on paljon. Jotta voit kattaa perustasi, suosittelemme, että keskityt viiteen parhaaseen vaihtoehtoon markkinaosuuden mukaan, jotka ovat:
- Google Chrome
- Safari
- Firefox
- UC Browser
- Opera
saatat huomata, että Microsoft Edge ei päässyt listalle. Sen markkinaosuus on melko pieni näinä päivinä, mutta se on edelleen hyvä käytäntö varmistaa, että sivustosi toimii sen kanssa samoin.
Toki viiden tai kuuden eri selaimen asentaminen tietokoneeseen voi olla hankalaa. Siksi on olemassa paljon palveluita, joiden avulla voit tehdä selainten rajatestausta verkossa. Tämä yksinkertaistaa prosessia huomattavasti, ja siihen liittyvät maksut ovat yleensä vähäisiä.
Älä uhraa digitaalista kokemustasi
kaikki sivustosi kävijät eivät käytä samaa selainta. Tämä tarkoittaa, että jos haluat varmistaa, että jokainen käyttäjä saa nauttia sivustosi, sinun täytyy tehdä joitakin cross-selain testaus.
pidä kuitenkin mielessä – vaikka sivustosi toimii täydellisesti kaikilla selaimilla, sinun on silti käytettävä laadukasta web-isäntää, jos haluat tarjota parhaan mahdollisen digitaalisen kokemuksen. WP Engine, saat hämmästyttävä suorituskyky ja pääsy asiantuntijatason tukea, joten tutustu suunnitelmiimme!