Web lapu dizains

Pārlūkprogrammu nesaskaņas

Zemāk ir rakstīts par problēmām, kas var rasties ja Web lapas tiek optimizētas tikai vienai pārlūkprogrammai, vai arī izmanto kādas specifiskas iespējas, kas strādā tikai vienā pārlūkprogrammā.

Šodienas izplatītāko pārlūkprogrammu versijas (par "izplatītākām" pārlūkprogrammām es uzskatu Microsoft Internet Explorer, Netscape Navigator un Opera) attēlo Web lapas samērā līdzīgi, ko nevarēja teikt par laikiem kad mēs izmantojām Netscape Navigator (NN) 4.7 un Microsoft Internet Explorer (IE) 4.0. Agrāk starp NN un IE notika īsti kari un katrs ražotājs papildināja savu produktu ar jaunām iespējām, kas nereti neatbilda WWW Consortium rekomendācijām.

Pārlūkprogrammu papildinājumi deva Web masteriem jaunas un interesantas iespējas veidojot savas lapas, bet kad šādas "interesantas" lapas kāds mēģināja apskatīties ar "svešu" pārlūkprogrammu rezultāts bija neprognozējams. Atbildīgākie Web masteri taisīja vairākas Web lapu versijas (katrai pārlūkprogrammai) vai arī neizmantoja pārlūkprogrammu specifiskās iespējas.

Zemāk ir dažas lietas kuras es neieteiktu lietot, bet ja bez tām tomēr nevar iztikt tad to pašu var realizēt ar CSS vai JavaScript palīdzību un tas strādās uz visām pārlūkprogrammām.

 HTML piezīmes
<BLINK> veido mirgojošu tekstu, strādā tikai uz NN.
<PLAINTEXT> atslēdz HTML interpretatoru, tas nav vajadzības HTML kodā speciālos simbolus norādīt "gara" izskatā (&quot; &nbsp; u.t.t.). Noder teiksim JavaScript koda izdruku attēlošanai. Strādā tikai uz Internet Explorer (IE).
<MARQUEE> parāda tekstu "skrejošā" rindā. Nestrādā uz Opera un ja nemaldos arī vecās NN versijās (uz NN 7 un IE 6 strādā).
bgproperties = "fixed" iekš <BODY> šāda konstrukcija IE pārlūkprogrammā padara fona bildi nekustīgu. NN un Opera programmās tas tiek ignorēts.

Pats nepatīkamākais ir kad dažādās pārlūkprogrammās atšķiras HTML kods lai panākt vienādu rezultātu. Tipiskais piemērs ir ja nepieciešams Web lapas saturu "pielipināt" pie pārlūkprogrammas malām. Šādi parametri iekš <BODY> garantēs vienādu rezultātu uz IE un NN:

topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"

Gribētu vēl piebilst no savas pieredzes ka šāds triks var neizdoties Opera pārlūkprogrammā ja pirms <BODY> atrodas JavaScript kods. Zemāk redzamos piemēros var redzēt kā izskatās lapa dažādās pārlūkprogrammās ar augstāk minētiem "universāliem" <BODY> parametriem un JavaScript kodu pirms <BODY>


Opera 6
Netscape Navigator 7
Internet Explorer 6

<BODY> aprakstam labāk izmantot CSS specifikāciju.  Augstāk minēto kodu var aizstāt šādi (izvietojiet kodu <HEAD> sadaļā). Tas būs savietojamāks un uz 17 baitiem īsāks:

<style>BODY {margin: 0; padding: 0;}</style>

Tie, kas izmanto Web lapās freimus (<FRAME>) derētu zināt - pārlūkprogrammas freimu izmērus interpretē atšķirīgi. Ja dizaina noformējumā ir svarīgs katrs ekrāna pikselis tad vēlams neizmantot freimus. Es personīgi uzskatu ka freimu laiki jau ir pagājuši un Web lapas ir jāveido bez tiem. Interesants raksts par šo tēmu ir lasāms ALX Creative Laboratory lapā. Zemāk ir piemērs, kur ir redzamas freimu problēmas (Web lapā freimu izmēri bija optimizēti priekš IE):


Opera 6
Netscape Navigator 7
Internet Explorer 6

Zināmas problēmas ir arī izmantojot tabulas (<TABLE>). Iespējams ka es maldos, bet WWW Consortium laikam nekonkretizēja kā tieši ir jāizskatās tabulām, bet tikai ieteica kā tās aprakstīt HTML kodā (vai arī to izdarīja pārāk vēlu). Tāpēc dažādās pārlūkprogrammās tabulas izskatās nedaudz savādāk (pievērsiet vērību rāmīšiem):


Opera 6
Netscape Navigator 7
Internet Explorer 6

Visiem topošiem Web masteriem es ieteiktu pārbaudīt savas lapas pirms tās tiek publicētas Internetā. Ja nepieciešams izstrādāt universālu Web lapu tad ir vērts pastudēt CSS specifikāciju jo izmantojot CSS dažādas pārlūkprogrammu nesaskaņas var likvidēt. Lielos vilcienos visi (NN, IE, Opera) pieturās pie WWW Consortium izstrādātās CSS specifikācijas. Patreiz aktuāla ir CSS 2 versija. Tiek strādāt arī pie CSS 3 versijas, bet vēl paies zināms laiks kad pārlūkprogrammas to uzturēs.

Noderīgās norādes

Jaunākās pārlūkprogrammu versijas:
Microsoft Internet Explorer
Netscape Navigator
Opera 		HTML un CSS specifikācijas:
WWW Consortium
WWW Consortium (HTML 4.01 Specification)
WWW Consortium (Cascading Style Sheets, level 1)
WWW Consortium (Cascading Style Sheets, level 2)
W3Scools (CSS Tutorial)

Atcerieties ka NN un Opera ir prasīgākas pret HTML un CSS koda korektumu. Ja Web lapa izskatās normāli uz IE tas nenozīmē ka uz NN un Opera viss būs korekti. IE savā ziņā "sabojā" Web masterus jo piedomā pati izlaistus HTML tagus vai arī ignorē nekorektu to pierakstu. Pēdējās NN un Opera pārlūkprogrammu versijas strikti pieturās (vai mēģina to darīt) pie HTML un CSS specifikācijas un ja teiksim tabulai ir neaizvērts tags tad tā vispār var neattēloties (NN), ja CSS aprakstā ir lieks komats tad konkrēts stils netiek atpazīts Web lapā (Opera) u.t.t. tāpēc pārbaudiet ko esat uzrakstījuši :)

Diezgan piekasīgu HTML un CSS koda pārbaudi var izdarīt WWW Consortium lapā (HTML Validator, CSS Validator)

Viss šeit rakstīts ir mans subjektīvais viedoklis. Ja ir kādi jautājumi vai precizējumi, kā arī ja ir vēlēšanās padiskutēt šajā jautājumā tad izmantojiet kontaktu lapu.