vytváření Cross-Browser kompatibilní webové stránky
Publikováno v Performance by WP Engine
Naposledy aktualizováno 30. května, 2019
přestože většina lidí používá jediný prohlížeč, máte desítky možností pro stolní i mobilní zařízení. V ideálním případě by se webové stránky zobrazovaly dokonale bez ohledu na to, který prohlížeč jste použili. To však není vždy případ, což je místo, kde přichází testování napříč prohlížeči.
díky důkladnému testování mezi prohlížeči můžete zajistit, aby vaše webové stránky vypadaly a chovaly se dokonale ve všech populárních možnostech. Vaši návštěvníci tak budou mít stejně skvělý zážitek, ať už používají Chrome, Firefox, Opera nebo méně známé možnosti, jako je SeaMonkey.
v tomto článku budeme hovořit o důležitosti testování mezi prohlížeči. Poté projdeme několik kroků, které vám pomohou vytvořit web kompatibilní s více prohlížeči. Dejme se do práce!
Proč Je Kompatibilita Mezi Prohlížeči Důležitá?
většina lidí používá známé prohlížeče, jako je Google Chrome, Safari, Firefox a Opera. Nicméně, k dispozici je mnohem více možností, než si dokážete představit. To je dobré pro spotřebitele, ale problém pro vás je, že každý prohlížeč je postaven jinak. To znamená, že váš web může v prohlížeči Chrome fungovat perfektně ,ale ve Firefoxu se vyskytnou problémy(jen abych uvedl jeden příklad).
podle našich zkušeností je většina chyb, které uvidíte v jednom prohlížeči, ale ne v jiném, relativně malá. Jeden konkrétní prvek vašeho webu se na něj nemusí dívat, nebo určitá funkce nemusí fungovat správně. I když tyto problémy mohou být menší, je třeba je řešit, pokud chcete poskytnout stejnou zkušenost všem návštěvníkům vašeho webu.
v ideálním případě budete chtít navrhnout svůj web tak, aby byl kompatibilní s prohlížečem od základů. Tímto způsobem nebudete riskovat odcizení uživatelů konkrétního prohlížeče. V několika následujících částech vám ukážeme, jak to udělat.
jak vytvořit web kompatibilní s více prohlížeči
myšlenka vytvoření webu kompatibilního s více prohlížeči může znít skličující. Nicméně, několik jednoduchých kroků může jít dlouhou cestu k zajištění toho, že váš web funguje perfektně na většině prohlížečů. Promluvme si o tom, co to je!
Krok 1: Nastavte „Doctype“ pro soubory HTML
když prohlížeč načte váš web, musí zjistit, jakou verzi HTML používáte. To je důležité, protože různé verze HTML obsahují různá pravidla.
‚ doctype ‚ je příkaz, který říká prohlížečům: „Hej, toto je verze HTML, kterou budeme používat!“Tímto způsobem prohlížeče nebudou muset provádět žádné odhady, což může snížit počet chyb, se kterými se uživatelé setkají.
naštěstí je tento krok pozoruhodně jednoduchý. Jediné, co musíte udělat, je přidat do dokumentů HTML následující úryvek kódu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
jak si všimnete, tento úryvek je pro verzi 4.01 HTML. Pokud chcete místo toho použít HTML5, můžete použít tento kód:
<!DOCTYPE html>
problém je v tom, že některé prohlížeče stále nehrají dobře s HTML5. Přes jeho mnoho vylepšení, jeho použití může ovlivnit kompatibilitu mezi prohlížeči, takže budete muset tuto skutečnost zvážit vedle jejích výhod.
Krok 2: Použijte pravidla resetování CSS
obvykle je CSS hlavním viníkem za chybami kompatibility prohlížeče. Je to proto, že každý prohlížeč má vlastní sadu pravidel CSS. Jinak řečeno, CSS vašeho webu se může vykreslit odlišně v závislosti na tom, který prohlížeč vaši návštěvníci používají.
jedním ze způsobů, jak tento problém vyřešit, je použít „Reset CSS“. Jedná se o sady pravidel, které můžete přidat na své webové stránky, které nastavují základní linii pro způsob, jakým CSS funguje v prohlížečích.
existuje několik možností, pokud jde o resetování CSS, ale jedna z našich oblíbených se nazývá Normalize.css, vzhledem k tomu, jak komplexní je:
můžete si stáhnout normalizovat.css soubor ze své knihovny GitHub a použít jej jako výchozí bod pro CSS vašeho webu. To vám pomůže maximalizovat kompatibilitu mezi prohlížeči na vašem webu.
Krok 3: Používat Cross-Browser kompatibilní Knihovny a rámce
JavaScript knihovny a široké rámce, jako nadace a Bootstrap jsou neuvěřitelně populární v těchto dnech. Pokud se chystáte použít tyto prvky k vytvoření vašeho webu, můžete si ušetřit spoustu bolesti hlavy pomocí možností přátelských pro různé prohlížeče.
některé knihovny a rámce byly vyvinuty od základů, aby pracovaly s co největším počtem prohlížečů. Obecně řečeno, nejoblíbenější rámce-včetně dvou, které jsme právě zmínili-jsou postaveny tak, aby byly kompatibilní s co největším počtem prohlížečů.
pro jistotu však zkontrolujte dokumentaci pro libovolnou knihovnu nebo rámec, který chcete použít. Ve většině případů najdete informace o kompatibilitě mezi prohlížeči poměrně snadno. Zde je například stránka kompatibility nadace z její dokumentace:
malý průzkum vám pomůže poskytnout úžasný zážitek pro všechny vaše návštěvníky, nejen pro ty, kteří používají konkrétní prohlížeč.
testování napříč prohlížeči
i když jste se snažili vytvořit web kompatibilní s více prohlížeči, je stále dobré zkontrolovat a zjistit, zda vše funguje tak, jak má. Tento proces je relativně jednoduchý-vše, co musíte udělat, je načíst web pomocí více prohlížečů a zkontrolovat chyby.
problém je v tom, že existuje mnoho prohlížečů. Chcete-li pokrýt své základny, doporučujeme zaměřit se na pět nejlepších možností podle podílu na trhu, které jsou:
- Google Chrome
- Safari
- Firefox
- prohlížeč UC
- Opera
můžete si všimnout, že Microsoft Edge tento seznam nevytvořil. Jeho podíl na trhu je v dnešní době poměrně malý, ale stále je dobré zajistit, aby s ním váš web také pracoval.
instalace pěti nebo šesti různých prohlížečů do počítače může být samozřejmě bolest. Proto existuje mnoho služeb, které vám umožňují provádět testování mezi prohlížeči online. To značně zjednodušuje proces a poplatky jsou obvykle malé.
Neobětujte svůj digitální zážitek
ne všichni návštěvníci vašeho webu budou používat stejný prohlížeč. To znamená, že pokud chcete zajistit, aby si každý uživatel užíval váš web, budete muset provést nějaké testování napříč prohlížeči.
Mějte však na paměti – i když váš web funguje perfektně ve všech prohlížečích, stále musíte použít vysoce kvalitního webového hostitele, pokud chcete poskytnout nejlepší možný digitální zážitek. S WP Engine získáte úžasný výkon a přístup k podpoře na úrovni odborníků, takže se podívejte na naše plány!