létrehozása Cross-Browser kompatibilis honlapok
Posted in Performance by WP Engine
utolsó frissítés: Május 30, 2019
annak ellenére, hogy a legtöbb ember ragaszkodik egyetlen böngésző használatához, tucatnyi lehetősége van mind az asztali, mind a mobil eszközök számára. Ideális esetben a webhelyek tökéletesen megjelennek, függetlenül attól, hogy melyik böngészőt használta. Ez azonban nem mindig így van, itt jön be a böngészők közötti tesztelés.
alapos böngészők közötti teszteléssel biztosíthatja, hogy webhelye tökéletesen nézzen ki és viselkedjen az összes népszerű opcióban. Így a látogatók ugyanolyan nagyszerű élményben részesülnek, függetlenül attól, hogy Chrome-ot, Firefoxot, operát vagy kevésbé ismert lehetőségeket, például a SeaMonkey-t használnak.
ebben a cikkben egy kicsit többet fogunk beszélni a böngészők közötti tesztelés fontosságáról. Ezután áttekintünk néhány lépést, amelyek segítenek létrehozni egy böngészők közötti kompatibilis webhelyet. Lássunk munkához!
Miért Fontos A Böngészők Közötti Kompatibilitás?
a legtöbb ember jól ismert böngészőket használ, mint például a Google Chrome, a Safari, a Firefox és az Opera. Azonban a sokkal több lehetőség áll rendelkezésre, mint gondolnád. Ez jó a fogyasztó számára, de a probléma az, hogy minden böngésző másképp épül fel. Ez azt jelenti, hogy webhelye tökéletesen működhet a Chrome-on, de problémákat tapasztal a Firefoxon (csak egy példa bemutatására).
tapasztalataink szerint az egyik böngészőben megjelenő hibák többsége viszonylag kis probléma. Előfordulhat, hogy webhelyének egy adott eleme nem nézi meg, vagy előfordulhat, hogy egy adott funkció nem működik megfelelően. Bár ezek a problémák kisebbek lehetnek, foglalkozni kell velük, ha ugyanazt az élményt szeretné nyújtani webhelye összes látogatójának.
ideális esetben, akkor szeretnénk tervezni a honlapon, hogy cross-böngésző kompatibilis az alapoktól kezdve. Így nem kockáztatja meg, hogy elidegeníti az adott böngésző felhasználóit. A következő néhány szakaszban megmutatjuk, hogyan kell ezt megtenni.
Hogyan hozzunk létre egy böngészők közötti kompatibilis webhelyet
a böngészők közötti kompatibilis webhely létrehozásának ötlete ijesztőnek tűnhet. Néhány egyszerű lépés azonban hosszú utat jelenthet annak biztosítása felé, hogy webhelye tökéletesen működjön a legtöbb böngészőben. Beszéljünk arról, hogy mik azok!
1.lépés: állítson be egy ‘Doctype’ – ot a HTML fájlokhoz
amikor egy böngésző betölti a webhelyét, meg kell találnia, hogy a HTML melyik verzióját használja. Ez azért fontos, mert a HTML különböző verziói különböző szabályokat tartalmaznak.
a ‘doctype’ egy utasítás, amely megmondja a böngészőknek: “Hé, ez a HTML verziója, amelyet használni fogunk!”Így a böngészőknek nem kell találgatniuk, ami csökkentheti a felhasználók által tapasztalt hibák számát.
szerencsére ez a lépés rendkívül egyszerű. Csak annyit kell tennie, hogy hozzáadja a következő kódrészletet a HTML-dokumentumokhoz:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
mint észre fogod venni, ez a részlet a HTML 4.01-es verziójára vonatkozik. Ha inkább HTML5-öt szeretne használni, használhatja ezt a kódot:
<!DOCTYPE html>
a probléma az, hogy egyes böngészők még mindig nem játszanak szépen a HTML5-Tel. Számos fejlesztése ellenére a használata befolyásolhatja a böngészők közötti kompatibilitást, ezért ezt a tényt az előnyei mellett mérlegelnie kell.
2. lépés: használja a CSS visszaállítási szabályait
általában a CSS a fő bűnös a böngésző Kompatibilitási hibái mögött. Ennek oka az, hogy minden böngészőnek megvan a saját CSS-szabálykészlete. Másképp fogalmazva, webhelye CSS-je eltérően jelenhet meg attól függően, hogy a látogatók melyik böngészőt használják.
a probléma megoldásának egyik módja a ‘CSS reset’használata. Ezek olyan szabálykészletek, amelyeket hozzáadhat a webhelyéhez, amelyek meghatározzák a CSS böngészők közötti működésének alapját.
számos lehetőség van a CSS visszaállítására, de az egyik kedvencünket Normalize-nek hívják.css, mivel mennyire átfogó:
letöltheti a normalizálást.css fájlt a GitHub könyvtárából, és használja a webhely CSS-jének kiindulópontjaként. Ez segít maximalizálni a böngészők közötti kompatibilitást a webhelyén.
3. lépés: Használjon böngészők közötti kompatibilis könyvtárakat és keretrendszereket
a JavaScript könyvtárak és a széles keretrendszerek, mint például a Foundation és a Bootstrap, hihetetlenül népszerűek manapság. Ha ilyen elemeket fog használni a webhely felépítéséhez, sok fejfájást takaríthat meg magának a böngészők közötti barátságos lehetőségek használatával.
néhány könyvtárat és keretrendszert az alapoktól kezdve fejlesztettek ki, hogy a lehető legtöbb böngészővel működjenek. Általánosságban elmondható, hogy a legnépszerűbb keretek-köztük az imént említett kettő-úgy vannak felépítve, hogy a lehető legtöbb böngészővel kompatibilisek legyenek.
a biztonság kedvéért azonban ellenőrizze a dokumentációt minden használni kívánt könyvtárról vagy keretrendszerről. A legtöbb esetben meglehetősen könnyen talál információkat a böngészők közötti kompatibilitásról. Például, itt található az Alapítvány kompatibilitási oldala a dokumentációjából:
egy kis kutatás segít abban, hogy csodálatos élményt nyújtson minden látogatójának, nem csak azoknak, akik egy adott böngészőt használnak.
böngészők közötti tesztelés
még akkor is érdemes ellenőrizni, hogy minden úgy működik-e, ahogy kellene. Ez a folyamat viszonylag egyszerű – mindössze annyit kell tennie, hogy több böngészővel tölti be webhelyét, és ellenőrizze a hibákat.
a probléma az, hogy sok böngésző van odakint. Az alapok lefedése érdekében javasoljuk, hogy a piaci részesedés szerinti öt legjobb lehetőségre összpontosítson, amelyek a következők:
- Google Chrome
- Safari
- Firefox
- UC Browser
- Opera
előfordulhat, hogy a Microsoft Edge nem került fel a listára. Piaci részesedése manapság meglehetősen kicsi, de még mindig jó gyakorlat annak biztosítása, hogy webhelye is működjön vele.
természetesen öt vagy hat különböző böngésző telepítése a számítógépre fájdalmat okozhat. Ezért van sok olyan szolgáltatás, amely lehetővé teszi a böngészők közötti Online tesztelést. Ez nagyban leegyszerűsíti a folyamatot, és az érintett díjak általában kisebbek.
ne áldozza fel Digitális élményét
webhelye nem minden látogatója használja ugyanazt a böngészőt. Ez azt jelenti, hogy ha azt szeretné, hogy minden felhasználó élvezhesse webhelyét, akkor böngészők közötti tesztelést kell végeznie.
ne feledje azonban – még akkor is, ha webhelye minden böngészőben tökéletesen működik, akkor is kiváló minőségű webgazdát kell használnia, ha a lehető legjobb digitális élményt szeretné nyújtani. A WP Engine segítségével elképesztő teljesítményt és szakértői szintű támogatást kaphat, ezért nézze meg terveinket!