Böngésző kompatibilitás

Böngésző kompatibilitás Konstantinusz Kft. 2009

Tartalomjegyzék 1. Bevezetés...3 2. Témafelvetés...4 3. Általában a honlapkészítésről...5 3.1. A honlap eszközeinek rövid ismertetése...5 3.2 Böngészők bemutatása...6 3.2.1 Internet Explorer 6...6 3.2.2. Internet Explorer 7, 8...7 3.2.3. Firefox...7 3.2.4. Egyéb böngészők...7 4. Hogyan készítsünk a legtöbb böngészővel kompatibilis kódot?...8 4.1. Szintaktikai helyesség...8 4.2. Kerüljük el az if -ezést...8 4.3. Tesztelés...9 4.4. Szerkezet felépítése...9 4.5. Konkrét példa...10 5. Összefoglalás...14

1. Bevezetés Az esettanulmány témája az, hogy hogyan készítsünk olyan HTML oldalakat amelyek a főbb böngészők alatt megfelelően működnek. Amennyire egyszerűnek hangzik ez elsőre, annál nehezebb kivitelezni. Az esettanulmányt főként olyanoknak ajánlom, akik honlap készítéssel, vagy webes rendszerek fejlesztésével foglalkoznak. Számukra szeretnék segítséget nyújtani, hogy ne járjanak úgy, hogy megcsinálják az oldalt, ami az bizonyos böngésző alatt nem működik. Majd miután rendbe rakták azután az alatt a böngésző alatt nem működik, ami alatt az előbb még jó volt. Ez nem kifejezetten programozási kérdés, sokan a honlapkészítést nem tekintik programozásnak, pedig meglepően sok a kettő között a kapcsolat. Gondoljuk végig mindkét esetben valamilyen formai szabályoknak megfelelő szöveget kell készíteni, amelytől az az elvárásunk, hogy a számítógép a várt kimenetet adja az alapján. Az esettanulmányban nem csak a HTML-re, de a CSS-re és a javascript-re is ki fogok térni.

2. Témafelvetés Azért tartom fontosnak a böngésző kompatibilitás kérdését, mert napjainkban az internet segítségével több emberhez lehet eljutni, mint bárhogy máshogy. És hiába jutunk el hozzájuk, ha az oldalt nem tudja megtekinteni. Egy átlagos ember kevesebb mint egy másodperc alatt eldönti egy oldalról, hogy érdekli-e vagy sem. Ez részben a grafika kérdése, részben pedig annak a kérdése, hogy működik-e az oldal. Ha a grafikával meg is győzzük a látogatót, hogy neki kell a mi termékünk, de a rosszul megírt, HTML vagy javascript miatt, rendelni már nem tud, az komoly probléma lehet. Magam is találkoztam, olyan oldalakkal amelyeken az általam használt böngészővel, egyszerűen nem lehetett a menüpontok között választani.

3. Általában a honlapkészítésről A honlapkészítést úgy lehetne leírni azok számára, akik még nem találkoztak vele, mint egy olyan programozás, amikor olyan programkódot írunk, aminek többféle eltérő fordító programon is le kell fordulnia és ugyanazt (vagy közel hasonlót) az eredményt kell produkálnia. 3.1. A honlap eszközeinek rövid ismertetése A HTML egy XML-re hasonlító leíró nyelv. Úgynevezett tag -eket használ. Minden tagnek van egy neve, lehet számtalan tulajdonsága. pl.: <tag tulajdonság= érték ></tag> Az, hogy milyen tag -nek milyen tulajdonsága lehet a w3c.org címen található referenciából tudhatjuk meg. A CSS-el stílusokat határozhatunk meg ezek a megjelenést szabályozzák főként. Ez a két elem felfogásában hasonlít az objektum orientált programozáshoz. A CSS ben definiálhatunk megjelenés szerint osztályokat (így is hívják class). A HTML-ben megadott tag -ek pedig az objektum példányokként foghatóak fel. A Javascript pedig abban segít minket, hogy ezeket a statikusan megadott html és css elemeket dinamikusan módosíthassuk. A Javascript egy úgynevezett DOM (Document Object Model) -ot használ. Ez alapján az egyes elemeknek vannak tulajdonságai, függvényei, eseményei (event). Megjegyezném, hogy a Javascript-nek a java-hoz nem sok köze van, csak néhány alapvető közös szintaxisuk van.

3.2 Böngészők bemutatása Az alábbiakban ismertetni fogom a főbb böngészőket amelyekre érdemes, egy weboldalt letesztelni. Természetesen, amennyiben van időnk minden böngészőre és operációs rendszerre letesztelhetjük. Bár véleményem szerint fölösleges olyan böngészőre oldalt fejleszteni amit, csak az internetezők 2 vagy 3 %-a használ. 3.2.1 Internet Explorer 6 Ez a böngésző az egyik legelterjedtebb. Főleg azért mert a Windows XP operációs rendszerben alapértelmezetten benne van, a felhasználók többsége pedig, lusta vagy cégek esetében nem teheti meg, hogy letöltsön és telepítsen egy másikat. Ez a böngésző a honlapkészítők rémálma. Jóval az új szabványok megjelenése előtt került a piacra, és több év elteltével még mindig jelentős hányadot tudhat magáénak a böngésző piacból. Meglehetősen sok hiba (bug) található benne, amelyeket, ha figyelmen kívül hagyunk az is előfordulhat, hogy egyáltalán nem jelenik meg alatta az oldalunk, csak egy piros x-el ellátott hibaüzenet ablak jelenik meg, ami azt mondja, hogy a lap nem jeleníthető meg. Ahhoz, hogy ezen a böngészőn megfelelően működjön az oldalunk kerüljük az új a böngésző megjelenése (2001 augusztusa) óta kiadott technológiákat, és szabványokat. A Javascript értelmezőjét akkor még kezdetleges Netscape böngésző értelmezője alapján csinálták, ezért a mai napig egy kezdetleges értelmezője van. Például a getelementbyid és a getelementbyname függvények ugyanúgy működnek, mert nem tesz különbséget, hogy egy elemnek id vagy name tulajdonságban van-e megadva az azonosítója. A javascript motorjáról nem árt tudni, hogy ennek a böngészőnek az egyik leglassabb az értelmezője, vagyis ha nagyon dinamikusra készítjük az oldalt, lehet, hogy működni fog, de csak elképesztően lassú lesz. Napjainkban több fejlesztő is kampányt indított ennek a böngészőnek az eltüntetésére. A Google is figyelmeztet, hogy cseréljük le.

3.2.2. Internet Explorer 7, 8 Az Internet Explorer család legújabb változatai, ezek támogatják a legújabb szabványokat, és kevesebb hibát is tartalmaznak az előző verziónál. Tapasztalataim szerint az esetek 99% százalékában az, ami Firefox alatt jól jelenik meg az ezek a böngészők alatt is. A Javascript motor is megfelelő sebességgel működik, nem kell félni attól, hogy nagyon lassú lesz, ha sok Javascriptet használunk. 3.2.3. Firefox A második legelterjedtebb böngésző napjainkban. Opensource fejlesztés, támogatja a legújabb HTML és CSS szabványokat. Nagy mennyiségű javascript sem okoz problémát. 100%-ban szintén nem követi a szabványt, ez minden bizonnyal annak tudható be, hogy az volt a cél, hogy az olyan nem szabványszerű oldalak is működjenek amiket még IE6 alá készítettek. 3.2.4. Egyéb böngészők Az előzőkben ismertettem a legelterjedtebb böngészőket, ezek a piac kb. 90% át kiteszik. A többi böngészőnek nem szánok teljes fejezetet, mert általában akik ezeket használják maguk is programozók, és rendelkeznek más böngészőkkel is. Ezek a böngészők általában követik a nagyobb böngészők értelmezőjét, hiszen ha nem működnek alattuk az oldalak akkor az emberek inkább nem használják, mint hogy az oldal használatáról mondanának le. Ezek közül kiemelném a Google böngészőjét, ami a gyorsaságával akar kitűnni a többi közül, és egyre nagyobb részesedést tudhat magának. Az értelmezője nagyon hasonlít a Firefox értelmezőjéhez, itt is igaz, hogy amit Firefox alá írunk az nagy valószínűséggel működni fog Google Chrome-alatt.

4. Hogyan készítsünk a legtöbb böngészővel kompatibilis kódot? Az alábbiakban ismertetni fogom, hogy hogyan készítsünk olyan oldalt ami az általunk használni kívánt böngészők alatt megfelelően fog megjelenni. 4.1. Szintaktikai helyesség Alapszabály, hogy ne vétsünk a HTML szintaktikája ellen, hiszen ez nagyon megnehezítheti a dolgunkat később. Ennek ellenőrzésére használjunk valamilyen validatort, mint amilyen a validator.w3.org címen található. Próbáljuk meg a szabványt követni, és utána ha nem megfelelően működik valamelyik böngésző alatt csak akkor kezdjünk megcsinálni, hogy az alatt is működjön. 4.2. Kerüljük el az if -ezést Lehetőség van arra, hogy külön css-t definiáljunk az Internet Explorer verziói számára. Ezt a megoldást csak mint utolsó eszközt használjunk. Az így készített kódok az Internet Explorer újabb verzió számára általában nem értelmezhetőek. Javascriptben is van lehetőségünk ilyesmire, ott is kerüljük el ahol lehet, sajnos az AJAX-nál nem lehet, mert máshogy hívják az IE ajax objektumát mint a Firefox ajax objektumát. Ilyen esetben is az a célszerű létrehozzuk a megfelelő objectet és utána példányszinten ugyanazt használjuk mindkét helyen, így csak a kód egy része lesz eltérő a működése nem.

4.3. Tesztelés Az elkészült oldalt teszteljük le minden támogatni kívánt böngésző alatt. Ha azt tapasztaljuk, hogy nem megfelelően jelenik meg akkor próbáljuk meg úgy kijavítani, hogy közben ne vétsünk a szabványok ellen. 4.4. Szerkezet felépítése Egy modern weboldal felépítésénél általában elvárják, hogy az oldalon szerkezetét meghatározó dobozok ne egy nagy táblázat egyes cellái legyenek, hanem div elemekkel jelenjenek meg. A frame-es szerkezetet pedig ha lehetőségünk van kerüljük el, mert később mi fogunk rosszul járni vele. Mindenképpen javaslom, hogy első oldalát mindenki table-es szerkezettel készítse el, és utána ezt próbálja meg div-es szerkezetre rakni, így tanulhatjuk meg a különbséget a kettő között. Ha működik az oldal akkor senkit sem, még a megrendelőt sem fogja érdekelni, hogy table vagy div elemek adják az oldal felépítését. Ha nem működik, vagy csak nincs elég forgalma mondjuk egy webshopon, akkor fel fog bérelni, egy főokost aki megmondja, hogy azért nincs az oldalán, havi x millió forint forgalma, mert table-es szerkezetű. Ezért szerződésben mindenképpen olyasmit kössünk ki, ami ellenőrizhető például, hogy validator.w3.org szerint az oldal hibátlan lesz. Egy táblázatos formában létrehozott weboldal is megfelelhet a szabványnak! Ahhoz, hogy div-es szerkezettel meg tudjunk csinálni egy oldalt anélkül, hogy szétessen, ismernünk kell azt, hogy a főbb böngészők hogyan kezelik ezt az elemet. Sok olyan oldallal találkoztam, ahol Firefox alatt felül volt egy banner Internet Explorer alatt pedig nem látszott, mint kiderült ott volt, csak az IE nem törte el a sort és így a fölötte lévő div mellet volt, ami viszont nem fért rá a képre még 1440*900 as felbontáson sem.

4.5. Konkrét példa Az alábbiakban bemutatok egy példát amivel honlap szerkezet kialakítása során szembesülhetünk. Különösen amikor alacsony magasságú div elemeket kell használnunk. Vagy táblázatos szerkezet esetén alacsony cellát szeretnénk használni térelválasztásra. Az alábbi kód megjelenése jelentősen eltérően jelenik meg a két böngésző között. A probléma abból adódik, hogy a firefox ha nincs szöveg a box - classal ellátott elemekben akkor nem hagy egy sornyi helyet. Az IE viszont mindenképpen, tartja a sormagasságot. <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" > <title>teszt oldal</title> <style type="text/css"> <!--.box{ border:1px solid #ccc; width:300px; padding:5px; margin: 5px; float: left; } //--> </style> </head> <body> </body> </html>

Firefox alatt: Internet Explorer 8 alatt (Internet Explorer 6 és 7 alatt is tapasztalható a hiba): A probléma több módon megoldható, például, ha bele teszünk egy bejegyzést az oldalba: <!--[if IE]> <style type="text/css"> <!--.box{ line-height: 0px; } //--> </style> <![endif]-->

Ez minden explorer alatt, a doboz sormagasságát átállítja. Ezt a megoldást nem javaslom, mivel ez nem a problémát oldja meg csak tüneti kezelése a problémának, és minél több ehhez hasonló megoldást használnunk annál nehezebb lesz később módosítani az oldalt. Az általam javasolt megoldás, pedig az, hogy helyezzük el a kód legelejére egy doctype bejegyzést. pl.: <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 //EN' 'http://www.w3.org/tr/html4/strict.dtd'> Ezutána az Internet Explorer 8 az alábbi módon jeleníti meg: Ami megegyezik a Firefox által megjelenített elrendezésekkel. Sajnos az Internet Explorer 6 alatt még mindig túl magasak a sorok. Ekkor állítható a sormagasság a line-height segítségével, viszont ekkor is olyan megoldást javasolok ami minden böngészőre vonatkozik, vagyis if IE szerkezet nélkül.

A teljesen valid és Internet Explorer 6-7-8 és FireFox alatt ugyanúgy megjelenő kód a következő: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>teszt oldal</title> <style type="text/css"> <!--.box{ border:1px solid #ccc; width:300px; padding:5px; margin: 5px; float: left; line-height: 0px; } //--> </style> </head> <body> </body> </html>

5. Összefoglalás Ahhoz, hogy a böngészőkompatibilitást megértsük először gondolkozzunk el azon, hogy miért fizet bárki is azért, hogy legyen egy honlapja. A többség azért, hogy a cégének legyen eladása, mivel a legtöbb cég napjainkban kezdi felismerni, hogy mekkora lehetőségek vannak a webshopokban. Röviden összefoglalva el lehet mondani, hogy azért kell olyan oldalt készíteni, ami minél több böngésző alatt használható, mert aki nem tudja használni az oldalt, az máshová megy és máshol fog vásárolni. Ez az ügyfélnek nem jó, és ha nem lesz eredménye a honlapnak, akkor biztos nem fog tőlünk rendelni újra. Végső soron gondoljuk végig, hogy egy cégnek a webshop az egy befektetés, amitől azt várja, hogy megtérüljön. Vagyis a megrendelő azért fizet ki egy összeget, hogy azt valamikor kitermelje neki az weboldal. Vagy eladással, vagy banner hirdetésekből. Természetesen van egy réteg, aki csak addig jut el, hogy legyen egy weboldala, mert a másiknak is van, az ilyen weboldal annyit ér mint a névjegykártya, amit nem adunk oda senkinek, hanem a polcon tároljuk. Egy weboldal vagy webshop akkor ér valamit, ha van látogatottsága, akkor ér rajta bármit is a banner, akkor van rajta forgalom. Itt jegyezném meg, hogy az a banner hirdetés ami csak egy böngésző adott verziója alatt látszik, szintén nem ér semmit.