V dannoy stat'e a rasskaju vam ob osnovnix principax sozdania
"mul'tibrauzernogo" sayta. Pod slovom "mul'tibrauzerniy sayt" a
podrazumevau sayt, opredelau6iy brauzer pol'zovatela i, v zavisimosti
ot rezul'tata, ispol'zuu6iy unikal'nie etomu brauzeru CSS stili. Takje
a rasskaju o nekotorix problemax, kotorie mogut vozniknut' pri rabote s
brauzerami.
Zna4it tak, 4to nam nado? A nam nado sdelat' tak, 4tobi sayt otobrajalsa
v bol'6instve brauzerov po vozmojnosti odinakovo (k sojaleniu, absoluta ne
dobit'sa).
Pervo-napervo neobxodimo opredelit', v kakix brauzerax na6 sayt doljen
otli4no vigladet'. V moem variante eto: IE, Opera, Netscape i Mozilla.
I srazu sovet: staraytes' ne ispol'zovat' atributi , perelojite eti
obazannosti na CSS... ili na strokovie elementi stila aka style="*".
Xota daje "style" stoit ispol'zovat' tol'ko pri krayney neobxodimosti.
Dla re6enia etoy interesnoy zada4i a predlagau sleduu6ee: ispol'zovat'
neskol'ko stiley dla raznix brauzerov. Odnako, a vam ne sovetuu prosto
universal'no pisat', t.k. polu4itsa xuje, no gemorroa men'6e:)
Vot kodik, kotoriy a napisal dla svoego sayta. Tak mi opredelaem,
s kakim brauzerom mi imeem delo:
function browser_define($agent)
{
if(ereg('MSIE ([0-9].[0-9]{1,2})',$agent)&&!ereg('Opera ([0-9].[0-9]{1,2})',$agent)) $browser='ie';
elseif(ereg('Opera',$agent)) $browser='opera';
elseif(ereg('Netscape/',$agent)&&ereg('Gecko/',$agent)) $browser='netscape';
elseif(ereg('Gecko/',$agent)&&!ereg('Netscape/',$agent)) $browser='mozilla';
else $browser='ie';
return $browser;
}
Funkcia vozvra6aet ima brauzera. Ispol'zuem ee tak:
<LINK rel="stylesheet" type="text/css" href="/css/<?=browser_define($_SERVER['HTTP_USER_AGENT'])?>.css">
T.e., esli, naprimer, k nam za6li 4erez IE, to skarmlivaem CSS fayl
po imeni ie.css. Mojno sdelat' nebol'6uu modernizaciu i opredelat' e6e i
versiu brauzera, no a v etom bol'6ogo rezona ne uvidel...
Teper', posle togo, kak mi nau4ilis' opredelat' brauzer uzera i
ispol'zovat' specifi4niy emu CSS fayl, pogovorim o razli4iax mejdu etimi
brauzerami.
Vot naibolee vajnie nuansi, na kotorix stoit zaostrit' vnimanie:
- Esli ispol'zuete kommentarii v CSS faylax, to uzayte konstrukciu
/* kommentariy */, no nikak ne # i ne
<!-- -->,
t.k. Mozilla i Netscape stranno reagiruut na nix,
poetomu sleduu6iy za kommentariem element stila prosto ignoriruetsa,
pravda, v Opera i IE vse OK.
- Razli4noe otobrajenie tega
<select>.
V IE on budet smotret'sa naibolee prezentabel'nim obrazom, a vot v drugix
brauzerax, on malo togo, 4to nekrasivo vigladit(IMXO), tak on e6e i
viravnivaetsa neskol'ko stranno... T.e. gde-to vi6e, gde-to nije.
Poetomu dla re6enia etoy problemi a ispol'zuu otnositel'noe pozicionirovanie:
position: relative; top: 1px;
Eto spasaet. NO! V Opera a zametil takuu fi6ku, 4to pri nalojenii
takogo koda na luboy drugoy element, naprimer,
na bordur tablici, granici prosto stanovatsa nevidimimi:(
Viyti iz etogo polojenia mojno sleduu6im sposobom: dopisat'
"z-index". T.e. u nas polu4aetsa:
position: relative; top: 1px; z-index: 1;
- Dalee idut razli4ia v knopkax. T.e. naprimer, gde-to tekst knopki
raspolagaetsa vi6e na 1px, gde-to nije. Koro4e, eto bezobrazie nado otslejivat'.
A samoe prikol'noe, 4to v Opera vozmojen takoy gluk, 4to pri ispol'zovanii
DOCTYPE (xota mnogie ego ne ispol'zuut, no bez nego validniy kod vam budet
tol'ko snit'sa:)), razmeri knopok stranno otobrajautsa, t.e. dla dorogoy
Opera a ukazivau "height: 14px;", nesmotra na to, 4to v drugix brauzerax
stoit "height: 18px;", kotoriy i avlaetsa real'noy veli4inoy.
- Bud'te vnimatel'ni s razmerami
<input> i <textarea>.
Mnou bilo naydeno nekotorie nesootvetstvie v razmerax v brauzerax
Netscape i Opera(7.6). Samoe interesnoe, 4to v Opera 8 etogo net!
- Sokra6ayte slova v atribute "ALT" pri
<img>, tak kak v Mozilla
etot tekst "viydet" za granici . Etu fi6ku a zametil tol'ka v Mozilla,
v drugix brauzerax vse bilo OK.
- Dalee xo4u napomnit', 4to ispol'zovanie dla oformlenia
skrollbara koda tipa:
scrollbar-face-color, scrollbar-shadow-color,
scrollbar-highlight-color, scrollbar-3dlight-color,
scrollbar-darkshadow-color, scrollbar-track-color, scrollbar-arrow-color
budet otobrajat'sa tol'ko v IE i proizvodnix ot nego.
Poetomu ne udivlaytes', 4to, zayda v Mozilla, vmesto radostnix tonov vi
uvidite seriy skrollbar (v zavisimosti ot temi oformlenia).
- Ne uzayte sleduu6iy kod:
leftmargin, marginwidth, topmargin, marginheight
podobnie skarmlivaut nam razli4nie vizual'nie redaktori.
To4no znau pro Namo WebEditor(daaavno pol'zovalsa)
Ispol'zuyte dla otstupov dokumenta kod:
BODY { padding: 0; margin: 0; }
Esli je vi xotite sdelat' otstup v 1px sverxu i snizu, to prosto napi6ite:
BODY { padding: 1px 0 1px 0; margin: 0; }
Vi, navernoe, sprosite "A za4em margin: 0 nujen, ved' i bez nego
vse normul'?" A a vam otve4u, 4to eto prosto neobxodimo dla Mozilla.
A to vi budete lomat' golovu, po4emu je u vas tam poavilis' li6nie otstupi:)
Vot v ob6em-to i vse... Derzayte, i u vas vse polu4itsa.
P.S. Dannaa stat'a mojet soderjat' nekotorie neto4nosti, no sut', a dumau,
vam ponatna: ;-)
citforum.ru/internet/html/multibrowser/
