[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuOppaan lisäsivut > G Mitä JavaScript-temppuja CSS:n kanssa voi käyttää

G Mitä JavaScript-temppuja CSS:n kanssa voi käyttää

Aiheet

Joustava leveyskontrolli MS IE:lle

Kaikissa tilanteissa on mahdoton saada haluttu lopputulos vain CSS:ää käyttäen. Erityisesti Web-sivujen leveyden määrittely ongelmallista. Olisi toki suotavaa, että sivut toimisivat optimaalisesti kaikilla resoluutioilla. Vihaan seuraavan kaltaisia ilmoituksia:

Tämä sivusto toimii parhaiten 1024x768 tai sitä isommilla resoluutioilla.

Uusille Mozilla Gecko ja Opera-selaimille on äärimmäisen helppo luoda joustava leveyskontrolli. Pitää vain luoda dokumentin pääsisältöön liittyvälle elementille jokin luokka ja esim. seuravaankaltainen CSS (tässä tapauksessa sisältö on DIV elementin sisällä).

div.content {margin-left:auto; width:90%; margin-right:auto; max-width:620px}

Tämän CSS:n pitäisi sopia hyvin myös MS IE 6.0 Windows ja MS IE 5.x Mac -selaimille 800x600 tai sitä alemman näyttöresoluution omaavilla näytöillä, jos selaimet toimivat ns. standard-compliant -moodissa (selitän tämän moodin toisella sivulla[S]). Koska MS IE ei tue max-width ominaisuutta tämä CSS ei sovi suurille näytöille (teksti jää ikävän leveäksi).

Tämän asian voi korjata JavaScript koodilla, joka sijoitetaan dokumentin BODY-elementin sisälle, miellään aivan sen alkuun tai viimeistään ennen sisältöelementtiä, johon viitataan. Se tunnistaa BODY-elementin leveyden käyttäen DOM-perustaista standardia metodia document.body.clientWidth. Jos leveysarvo on suurempi kuin 800 pikseliä silloin MS IE saa linkin CSS-tiedostoon (skriptin alussa on selaintunnistusehdot, joiden tarkoituksena on se, että skripti toimisi vain tietyissä MS IE -selaimissa; käsittelen selaintunnistusehtoja eräällä toisella sivulla[S]):


	var nua, IE, OP, Gecko, Mac, ie_pos, IENu, IE6x, IE5x; 
	nua = navigator.userAgent;
	IE = (nua.toUpperCase().indexOf('MSIE')!=-1);  
	OP = (nua.toLowerCase().indexOf('opera')!=-1);
	Gecko = (nua.toLowerCase().indexOf('gecko')!=-1);
	Mac = (nua.toLowerCase().indexOf('mac')!=-1);
	ie_pos = nua.toUpperCase().indexOf('MSIE');
	IEnu = nua.substr((ie_pos+5),3);
	IE6x = (IEnu>=6.0);
	IE5x = (IEnu>=5.0);

if (IE5x && !OP&& !Gecko) {
	
	if (document.body.clientWidth>800) 
	{		
		if (IE6x || Mac)
		{		
		document.write('<lin'+
		'k rel=\"stylesheet\" type=\"text/css\"'+
		'href=\"../Css/basicWidthSetIE6x.css\"'+
		'media="\screen\" />');
		}
	}
}

Huomaa, että MS IE ei laske oikeanpuoleista vierityspalkkia leveysarvoon. Jos haluat asettaa täysikokoiselle MS IE:lle arvot, jotka sopivat 800x600 resoluutioiseen näyttöruutuu, oikea arvo on 780. Esimerkissäni arvo ei ole kriittinen.

Tavallaan lopputulos on hieman epästandardi, sillä LINK elementin tulisi olla HEAD elementin sisällä. Koska elementti tuotetaan JavaScript-koodauksella se jää vain tietokoneen keskusmuistiin eikä sitä tulosteta asiakirjaan, se ei haittaa dokumentin oikeellisuuden tarkistusta (elementin LINK sijasta olisi voitu tulostaa STYLE elementti tai muita HTML-elementtejä, jotka vaikuttavat asiasisällön leveyteen).

Kun selain on suuressa ikkunassa periaatteessa tarvittaisiin vain seuraava lisäys:

div.content {width:620px}

MS IE 6.0 Windows/ 5.x Mac käyttäytyisi kuten Opera ja Mozilla Gecko -selaimet lukuunottamatta tilanteita, joissa sivuilla vierailija muuttaa ikkunan kokoa. MS IE mittaa BODY-elementin leveyden joka sivulla vain kertaalleen. Jos vierailja on tullut esim. 1000 pikselin ikkunalla ja hän muuttaa sen 700 px ikkunakokoon, hän ei saa optimaalista CSS:ää.

Jotta saataisiin optimaalinen CSS, sivu tulisi ladata uudestaan. Jotta turhilta latauskerroilta vältyttäisiin, skriptin tulee testata, onko sivun lataaminen tarpeellista. Skriptiä tulee muuttaa seuraavalla tavalla:

...
function changeCSS()
{
	if (((document.body.clientWidth>800) && (originalwidth<800) 
	&& (originalwidth!=document.body.clientWidth)) 
	|| ((document.body.clientWidth<800) 
	&& (originalwidth>800) && (originalwidth!=document.body.clientWidth)))
	{
	window.location.reload(); 
	}
}	

if (IE5x && !OP&& !Gecko) {
{
	var originalwidth = document.body.clientWidth;
	window.onresize = changeCSS;...

Nyt useimmin käytetyt MS IE -selaimet toimivat melkein yhtä hyvin kuin Opera ja Gecko -selaimet (voit ladata Web-sivustostani koko skriptin[S]). Koska uudelleen lataus on hitaampaa kuin vain uudeellen muotoilu ikkunan koon muuttaminen saattaa aiheuttaa ylimääräisiä latausaikoja. Olen myös huomannut, että MS IE ei aina saa oikeaa CSS:ää (leveyttä on vaihdettu peräperään liian nopeasti).

Edellä esitetty CSS ei sovellu vanhemmille MS IE -selaimille ja MS IE 6.0 Windows -/ MS IE 5.x Mac -selaimille sivuilla, joissa selaimet eivät toimi standard-compliant -moodissa. Jos sisällölle on käytetty padding-left ja padding-right ominaisuuksia leveysarvot ovat aina erilaisia. Sen lisäksi vanhemmat MS IE -selaimet eivät tue oikein margin-auto. Ainakin MS IE 6.0 Windows jos se ei toimi standard-compliant -moodissa ja vanhemmat MS IE Windows -selaimet laskevat erityisesti prosenttiarvoiset leveydet väärin (en ole varma miten MS IE 5.x Mac käyttäytyy). Siksi alkuperäisen CSS:n pitäisi olla erilainen. Seuraava CSS antaa laajemmin toimivan ratkaisun:

div.content {margin-left:5%; margin-right:5%; }
div[class="content"]{margin-left:auto; width:90%; margin-right:auto; max-width:620px} /* Uudet arvot Opera ja Mozilla Gecko -selaimille käyttäen attribuuttivalitsimia, joita MS IE -selaimet eivät tue. */

MS IE 6.x Windows/5.x Mac -selaimille suuressa näytössä ja selainten toimiessa standard-compliant -moodissa voisi olla esim.:

div.content {margin-left:auto; width:620px; margin-right:auto}

Suuressa näytössä MS IE 5.x Windows -selaimille tarkoitettu CSS voisi olla esim. seuraava:

div.content {margin-left:100px; width:650px; margin-right:auto}

Jos tarkoituksena on keskittää sisältö vaakatasossa MS IE 5.x Windows -selaimille, sisällön pitäisi olla DIV elementin sijaan yhden CENTER elementin sisällä (<DIV align="center> ei saa aikaan oikeaa lopputulosta). Tällöin margin-left voisi saada arvon auto. On myös mahdollista tulostuttaa MS IE 5.x:lle JavaScript-koodilla CENTER-elementti DIV-elementin ulkopuolelle. Jos siltä jää puuttumaan päätösmerkkaus (</CENTER>), se ei haittaa selaimen toimintaa.

MS IE 5.x Windows -selaimia ajatellen skriptiin tulisi kohdan if (IE6x || Mac) {...} jälkeen lisätä seuraava koodi:


		else  
		{
		document.write('<lin'+
		'k rel=\"stylesheet\" type=\"text/css\"'+
		'href=\"../Css/basicWidthSetIE5x.css\"'+
		'media="\screen\" /><center>');
		}

Jos haluat soveltaa systeemiä Netscape 4.x -selaimille, käytä window.innerWidth metodia ikkunan leveyden asettamiseen (myös monet Opera-selaimet tukevat tätä metodia eivätkä aiemmin esitettyä DOM-perustaista metodia) ja selaimen tunnistukseen document.layers metodia.

Vaihtoehtona esittämälleni systeemille on monikerroksellisten taulukoiden luonti. Niillä toteuttu joustava leveyskontrolli ei toimi suunnitellusti Netscape 4.x -selaimissa enkä ole testannut toimivuutta Opera ja Mozilla Gecko -selaimissa. Monikerroksellisten taulukoiden käsittely on selaimelle hitaampaa kuin yhden DIV tai CENTER elementin käsittely ja rakenne muuttuu monimutkaiseksi. Tosin etuna on se, että avattua sivua ei tarvitse ladata uudelleen, jos ikkunaleveyttä muutetaan.

Joustavan leveyskontrollin ja muita dynaamisia CSS-määrityksiä voi luoda käyttämällä arvon expression() sisään (DOM-spesifikaatioon) liittyvää JavaScript-komentoja (toimii MS IE 5.0 lähtien). Koska muut selaimet eivät ymmärrä tätä tapaa, suosittelen, että muut selaimet saavat standardilla tavalla CSS:n. Alla esimerkki:

expression(document.body.offsetWidth - 110 + "px");
expression(document.body.offsetWidth - 110 + "px");
WebFX: CSS Expressions.
[Alku]

Kelluvat elementit ja muita temppuja

Toinen merkittävä puuttuva CSS-piirre MS IE Windows -selaimissa on position:fixed tuki. On mahdollista saada lohkot seuraamaan hiiren liikettä. Tosin JavaScript toimii huonommin kuin position:fixed. Sain Roy Whittlen skripti toimimaan sivuillani MS IE -selaimilla mutta en millään Gecko-selaimella (tosin esimerkkisivulla alareunaan asemoidut elementit katoavat näytöltä Opera-selaimia käytettäessä).

Javascript-FX: Floating Div.

On myös syytä tiedostaa, että MS IE 5.x+ tarvitsee 5-10 kertaa tehokkaamman tietokoneen kuin Opera 7.x, jotta sivut toimisivat suurin piirtein yhtä hyvin. Erityisesti kelluvat valikot vaativat nopean tietokoneen.

MS IE tukee paljon selainkohtaisia temppuja. En suosittele niiden käyttämistä koska täysin selainkohtaiset sivusysteemit eivät kuulu internetin perusideaan. Ne mitä tällä sivulla olen käsitellyt liittyvät olemassa oleviin virallisiin standardeihin.

[Alku]
   
Copyright Tapio Markula 1999-2003, Salo (kotisivu, s-posti - lisää s-postiosoiteeseen pisteellä erotettuna nimeni, Tapio Markula) (@dnainternet.net) - ei julkiskäyttöön ilman sopimusta.
Get Expression!
Editori, jolla saa luotua standardit täyttäviä HTML ja XML dokumentteja. Tämän sivuston sivut on useimmissa tapauksissa tarkastettu Dave Raggetin (W3C) tekemällä HTML-Tidy apuohjelmalla ja satunnaisesti W3C-organisaation virallisella koodintarkastusohjelmalla. Useimpien sivujen syntaksin pitäisi olla sopusoinnussa W3C:n XHTML 1.0 spesifikaation kanssa. Testaa tämä sivu!
Informaatiota selaimista, jotka näyttävät tai tulostavat tämän sivuston parhaiten.
[Hae Opera] [Hae Mozilla!]
CSS-opasta on viimeksi muutettu 20.12.2004