Etsi sivuiltani:

	Aihepiiriluettelo > CSS-oppaan etusivu > Yleisinfo - Ohjesivut > Usein esitettyjä kysymyksiä (FAQ)

Usein esitettyjä kysymyksiä (FAQ)

Aiheet

• Yleistä
• Kysymyksiä ja vastauksia
• Linkkejä muille FAQ-sivuille

Yleistä

Kokoan tälle sivulle lähinnä CSS:n liittyviä kysymyksiä ja vastauksia. Laitan mukaan myös joitakin HTML:ään, XHTML:ään ja XML:ään liittyviä kysymyksiä ja vastauksia. Sivu vastaa englanninkielisissä sivustoissa yleisesti käytettä FAQ-sivua (FAQ = frequently asked questions) eikä kysymyksiä ole välttämättä esitetty toistuvasti. Mukana on myös joitakin sellaisia kuvitteellisia kysymyksiä, joita minulta saatettaisiin kysyä. Sivulta 12. Mitä muita erityispiirteitä CSS sisältää voit katsoa, mihin sinun ei kannata etsiä tästä sivustosta vastausta. Tein tälle sivulle tavallaan erään laisen jatkosivun. Kerron mitä CSS-piirteitä olen itse käyttänyt. Niistä saat vihjeitä, mitä CSS:ssä kannattaa hyödyntää.

Jos haluat vastauksia kysymyksiin, jotka koskevat vain tätä sivustoa, lue sivut:

• Esipuhe ja tärkeitä taustatietoja
• Ohjeita sivuston selailemiseen
• Selainsuositukset
• Sivustojeni toimivuus eri selaimilla
• Sivustoni selailu offline-tilassa

Kysymyksiä ja vastauksia

1. Miksi MS IE:tä vähemmän käytettyjä Netscape/ Mozilla sekä Opera-selaimet tulisi huomioida?

   Web-sivujen on tarkoitus toimia kaikissa käyttöjärjestelmissä. Moniin käyttöjärjestelmiin ei saa MS IE -selainta. Esim. Linux käyttöjärjestelmään saa Opera ja Mozilla -pohjaisia selaimia sekä eräitä muita selaimia. Nokia 9xxx Communicator ja monet muut kännykkätason laitteen toimivat Symbian OS (EPOC) käyttöjärjestelmällä, johon ainoa moderni CSS2:ta tukeva selain on Opera. Yleisesti ottaen internetin ei tule olla ikään kuin jonkin firman yksityisomaisuutta vaan mahdollisimman avoin verkkoyhteisö (käsittelen tähän liittyviä näkökulmia tarkemmin eräällä sivulla). Annan selainten tunnistamisvihjeitä eräällä sivulla

2. Mistä tyylisivut saa päälle ja pois päältä?

   Niiden käyttöä säädellään selainten asetuksista. Olen sivulla UserStyleSheets selostanut käyttäjän tyylisivuen asettamista. Sivu antaa vihjeitä myös muiden asetusten muuttamiseen.

3. Kasvattaako CSS sivujen lataamisaikoja?

   Erityisesti jos fonttimäärittelyjä on käytetty sivut, jotka käyttävät CSS:ää lataantuvat yleensä nopeammin kuin sivut, jotka eivät sitä käytä (lue CSS:n perusasioista sivulta 1.b Mikä on HTML ja XML asiakirjojen perusrakenne).

   Pekka Järveläinen, CSC.
4. Mihin käyttöön ja miksi linkitysmalleja on erilaisia?

   CSS:n on rakennettu kaksi perustapaa linkittää tyylisivuja (<style type="text/css" media="all">@import "all.css";</style> ja <link rel="stylesheet" type="text/css" media="print" href="print.css">). LINK-elementin käyttö sisältää periaatteessa tyylisivuen vaihtomahdollisuuden (<link rel="stylesheet alternate" type="text/css" media="screen" href="alternate.css">). Selitän peruskäyttötavat sivulla 2. Miten CSS liitetään Web-sivuihin sekä eri esityslaitteille tarkoitettujen ns. mediatyypien käytön toimivuutta sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille. Ks. myös liitesivu CSS-tiedostojen laatiminen.

5. Miten CSS:n saa yksilöityä eri nöyttöresoluutioille tai eri selaimille?

   Sovella Netscape 4.x:n ohittamistapoja eri käyttötarkoituksiin.

6. Mitkä selaimet noudattavat parhaiten CSS2 spesifikaatiota?

   Opera 5.x+, MS IE 5.0 Mac, MS IE 6.0 Windows, Netscape 6.1+ ja Mozilla 0.9+ noudattavat sitä sangen tarkasti. Mielestäni laaja-alaisin CSS2-tuki on Opera-selaimissa (perustelut).

7. Miksi Netscape 4.x näyttää sivut eri lailla kuin MS IE 5.x Windows?

   Kumpikaan selain ei toimi spesifikaation mukaan, mutta Netscape 4.x toimii erittäin virheellisesti. Käytä edellisessä vastauksessa mainittuja selaimia mahdollisuuksiesi mukaan vertailuselaimina.

8. Miten sivuston saisi toimimaan mahdollisimman hyvin yleisimmillä selaimilla Mac ja PC tietokoneissa?

   Ei juuri mitenkään, mutta etsi näkökulmia seuraavilta sivuilta, jotta saisit suhteellisen hyvin toimivat sivut eri selaimissa:

   1. 3. Mitkä ovat CSS:n mittayksiköt, värit ja avainsanat - käsittelee mittayksikköongelmia. Relatiiviset fonttikoot xx-small jne. ovat suuri ongelma.
   2. 8. Miten CSS annetaan elementtien taustoille ja reunoille - käsittelee reunus, taustakuva- ja dimensio-ongelmia. Monet selaimet käsittelevät väärin width ja height ominaisuuksia, mutta tilanne ei ole sama taulukoiden ja muiden elementtien kohdalla. Mitoita elementit niin, että ne toimivat oikein CSS2-spesifikaation mukaan toimivissa selaimissa.
   3. Millaisia CSS-totetusvirheitä on Netscape/Mozilla-selaimissa. Netscape 4.x -sarjaa ei voi tukea kuin osittain ja sille kannattaa tehdä omia, muihin selaimiin verrattuna suppeita CSS-tiedostoja.
   4. Määrittele perus CSS-tiedosto uusille selaimille (esim. basicScreen) siten, että se toimii uusilla selaimilla suhteellisen hyvin ilman JavaScript-tukea. Tee sitten selainkohtaisia CSS-tiedostoja (katso malliksi tämän sivun lähdekoodi).

9. En halua linkkeihin ja ankkureihin alleviivausta, mutta Netscape 4.x tekee ne. Mitä minun pitäisi tehdä?

   Vastaus löytyy liitesivulta Netscape 4.x ongelmia.

10. Miksi Opera 4.x+ ja Netscape 6.x+ eivät näytä taustaväriä koko kuvalle, kun käytetään :hover näennäisluokkaa (pseudo-class)?

    Löydät vastauksen ja ratkaisun ongelmaan sivulta Ankkurit ja linkit. A:hover suhteen on myös eräitä muita kysymyksiä kuten esim. seuraavat:
    Miksi Opera katkaisee sellaisen a:hover avulla määritellyn tekstin, jonka koko on suurempi kuin normaalisti?
    Miksi Opera ei (oletettavasti) salli display-ominaisuuden dynaamisia muutoksia a:hover käytettäessä?
    Vastaan niihin kysymykseen samalla sivulla.

11. Tarvitaanko aina mittayksikön käyttö?

    Ominaisuudet, joissa voi käyttää mittayksiköitä tarvitsevat sen lukuun ottamatta arvoa 0 sekä line-height omainaisuutta. Ks. myös sivu 3. Mitkä ovat CSS:n mittayksiköt, värit ja avainsanat

12. Miten voin keskittää elementtejä pysty- ja vaakatasossa?

    Käsittelen asiaa sivulla 4.

13. Miksi Opera näyttää joskus taulukot huonomminin kuin MS IE?

    1. Jos taulukko toimii Operassa todella huonosti, taulukon HTML-koodaus on todennäköisesti kelvotonta. MS IE esittää sangen pahastikin virheellisesti laaditut taulukot ikään kuin virheettöminä, mitä Opera ei tee. Internetin tulevaa kehitystä ajatellen Opera toimii hyvin, mikäli vain sivulla vierailleet antavat huonosta koodauksesta palautetta sivujen tekijöille.
    2. Mikäli erot ovat suhteellisen pieniä, sivujen tekijä on mahdollisesti joko käyttänyt sellaisia HTML-piirteitä (esim. sovelluskohtaisia attribuutteja), joita Opera ei tue tai hän on laatinut taulukon CSS:n MS IE:n virheellisten toteutuksen mukaisesti (ks. myös eräällä lisäsivulla oleva sitaatti).

14. Miksi taulukolla, jolla ei ole margin, border ja padding ominaisuuksia solujen väliin jää kahden pikselin rako? Onko mitään keinoa saada yhden pikselin reunus jokaiseen taulukkosoluun niin, että lopputulos olisi sama eri selaimissa?

    Selainten HTML-oletusarvona on soluväleille "2". Jotkut selaimet tarvitsevat elementille TABLE tarkenteen cellspacing="0" käyttämistä, jotta soluvälin saa poistettua. Tämä helpottaa myös yhden pikselin reunusten luomista taulukkosoluille (käsittelen näitä asioita tarkemmin sivulla 10. Miten CSS annetaan taulukkoelementeille).

15. Miksi tekstityyppiominaisuudet eivät toimi taulukoissa?

    Erittäin suuressa määrässä selaimia on bugi ns. periytyvyyden (inheritance) käsittelyssä. Katso ohjeet sivulta 10. Miten CSS annetaan taulukkoelementeille.

16. Miten taulukoille saa taustan ja reunukset siten, että ne näkyvät täysleveissä taulukoissa samalla lailla useimmissa CSS:ää tukevissa selaimissa?

    Älä määritä em. ominaisuuksia suoraan taulukolle vaan laita taulukon ulkopuolelle DIV-elementti ja sille border ja background-color ominaisuudet. Elementti DIV ottaa oletuksena kaiken käytettävissä olevan leveystilan ja taulukko vain tarvittavan tilan. Jos pyrit luomaan täysleveän taulukon antamalla taulukolle CSS:n avulla leveysarvon, se johtaa siihen, että selaimet näyttävät taulukon eri tavoin (ks. aiempi kysymys). Jätä taulukon leveys hieman ympäröivää DIV elementtiä pienemmäksi.

17. Mitkä ovat taulukoiden vaihtoehdot?

    Sivun perusrakenteen voi rakentaa taulukoiden sijaan rakentaa DIV-elementtien varaan. Käsittelen taulukoiden vaihtoehtoja sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli.

18. Miten sivuille saa "piilotekstin" niin, että kun joku jolla on selain joka ei tue CSS:ää tulee sivuille näkee tekstin mutta muuten sitä ei näy?

    Asia on selostettu sivulla 11. Mikä on CSS2:n Visuaalinen muotoilumalli kohdassa Display.

19. Kuinka saan DIV elementin sisään rakennetun sivun keskittymään?

    Periaatteessa se pitäisi onnistua div {margin:auto} käyttämällä, mutta se toimii oikein vain sangen uusissa selaimissa (käsittelen ongelmaa sivuilla 8. Miten CSS annetaan elementtien taustoille ja reunoille ja 11. Mikä on CSS2:n Visuaalinen muotoilumalli). Jotta sivu keskittyisi useimmilla selaimilla, täytyy laittaa align="center" ja lapsielementeille sitten asianmukaiset text-align arvot. Jos on tarpeen, käytä ylimääräisiä DIV elementtejä.

20. Mikä ero on class="" ja id="" välillä?

    Löydät vastauksen sivulta 4. Mitä ovat valitsimet, luokat ja id-attribuutit (ks. erityisesti luokka- ja id-valitsimia koskeva jakso).

21. Mitkä ovat fraasielementtejä (phrasal elements)?

    Katso vastaus liitesivulta Mikä on (X)HTML-elementtien semantiikka. Viittaan siiä myös niiden eräänlaiseen vastakohtaan eli esitysasullisiin elementteihin (presentational elements).

22. Miksi Operalla tulee vaakavieritys mutta IE:ssä ei?

    1. Jos ongelma koskee vain dokumentteja, jotka ovat kehysten sisällä, todennäköisin syy on siinä, että Opera käsittelee sisäkkäisiä kehyksiä toisella tavalla (selostan sen erityissivuilla).
    2. Toinen mahdollinen syy on siinä, että selaimet käsittevät eri lailla ominaisuutta width , minkä olen maininnut erään toisen kysymyksen alakohdassa no 2.
    3. Kolmas todennäköinen syy on se, että BODY elementin marginaalit on määritelty epästandardeilla attribuuteilla (leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"), joita Opera ei ymmärrä. Opera tarvitsee vastaavan CSS:n (body {margin:0}).
    4. Lisäksi syynä voi olla myös se, että Operalla on joskus vaikeuksia monimutkaisen CSS:n kanssa, jolloin dokumentti näkyy oikein vain ladattaessa se uudestaan.

23. Miksi oikeaan reunaan jää lyhyillä sivuilla tyhjää tilaa, vaikka BODY ja HTML elementtien margin ja padding omainaisuudet on asetettu nollaksi?

    Selaimet jättävät HTML-sivuille oletusmarginaalit eli ns. selainsiirtymän (browser offset). Yleensä sen saa pois CSS:llä, mutta joillakin selaimilla tarvitaan selainkohtaisia attribuutteja elementille BODY (ks. edellinen kysymys). Nämäkään eivät poista selaimen varaamaa tilaa mahdolliselle pystyvierityspalkille (vertical scroll bar). Tyhjän tilan saa pois vain kehyksissä, joissa ei sallita vieritystä.

24. MS IE tekee turhia vaakavierityksiä, mitä minun pitäisi tehdä?

    Useimmissa tilanteissa auttaa, jos määrittelee koko dokumenttia koskevan DIV-elementin ja sille esim. width:99%. Laita isoille kuville dimensiot, jotta ne näkyisivät kaikissa olosuhteissa.

25. Voiko nykyisin käyttää XHTML:ää?

    Sitä voi käyttää, mutta seuraavat seikat tulee muistaa:

    1. Ns. tyhjien elementtien päätökseen tulee jättää välilyönti (esim. <img src="..." alt="..." />, ei pidä kirjoittaa <img src="..." alt="..."/>).
    2. XML-ilmoitusta (<?xml version="1.0"?> ei pidä käyttää sivuilla, joiden tiedostopääte on muu kuin *.html, *.htm tai *.shtml. Käytettäessä XML-ilmoitusta muilla tiedostopäätteillä selaimet voivat käsitellä sivun tavanomaisena XML-dokumenttina, jolloin sivu ei toimi niin kuin pitäisi.
    3. Joidenkin selainten CSS-toteutus on DTD-riipuvainen. Jos sinulla ei ole aimmin ollut DTD-ilmoitusta tai se on ollut <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">, CSS-toteutus muuttuu MS IE 6.0 Windows, MS IE 5.0 Mac ja uusissa Netscape/Mozilla -selaimissa. Muutoskohta on jälkimmäisissä selaimissa sikäli erilainen, että <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> ei MS IE -selaimissa aiheuta muutosta, mutta Netscape/Mozilla-selaimissa aiheuttaa.
       Microsoft: CSS Enhancements in Internet Explorer 6 Public Preview.

26. Miksi selaimet toteuttava lomakekontrollielementtien reunukset eri lailla?

    CSS2:n perusidea on pystyä käsittelemään mitä tahansa elementin esitysasuun liittyvää piirrettä. Tästä näkökulmasta katsoen CSS2:llä pitäisi pystyä määrittelemään lomakekontrollielementtien reunukset täysin uudestaan. Näin kaikki uudet selaimet osaavat toimia esim. <TABLE border="50"> kohdalla. Lomakekontrollielementeissä on kuitenkin seikkoja, joihin CSS2:ta ei voi soveltaa. Esim. <INPUT type="radio" käsittelemiseksi ei ole olemassa standardia, joten toteutuksen luonnollisesti vaihtelevat. Ks. tästä asiasta tarkemmin sivulta 8. Miten CSS annetaan elementtien taustoille ja reunoille.

27. Miksi Opera 4.x+ ja Netscape 6.x+ eivät toteuta ns. DHTML (CSS + JavaScript/EcmaScript) skriptejä?

    Ne tehdään usein epästandardisti. Nämä selaimet eivät tue Netscape 4.x ja MS IE 4.x Windows -selainkohtaista DHTML-koodausta. Laadin liitesivun, jossa opastan suunnittelemaan uusissa Opera ja Netscape-selaimissa toimivia dynaamisia valikoita, joka toimivat myös MS IE 4.x Windows ja Netscape 4.x -selaimissa. Valikot toimivat myös MS IE 5.x Mac -selaimissa joka tukee sekä Windows-selainten epästandardia että standardia koodausta.

28. Miksi Netscape 6.x kasvattaa matalien tai kapeiden taulukkosolujen leveyttä/ korkeutta?

    Olen havainnut, että selain jotekin olettaa, että joka solussa on tekstiä. Jotta saisi matalia taulukkosoluja pitää määrittää myös line-height ja font-size ominaisuudet. Mitä solujen leveyteen tulee, selain tuntuu toisinaan kaipaavan hyvin tarkkaa taulukkoelementtien määrittelyjä CSS:n avulla. Minulla on asiaan liittyvä esimerkki sivulla, jolla käsittelen dynaanisia valikoita.

29. Miksi tulostusta ei saa kääntymään vaakatasoon?

    Opera 4.x+ on tällä hetkellä ainoa selain, joka teoriassa tukee vaakatason tulostusta. Silläkin kyse on kuitenkin "virtuaalisesta" tueasta, sillä selain ei näyttää sivun vaakatasossa vain esikatselussa, mutta se ei muuta kirjoittimen tulostussuuntaa. Selaajan täytyy osata se tehdä. Tulostukseen liittyvien CSS:n erityispiirteiden tuki on MS IE:ssä sangen puutteellinen ja Mozilla Gecko -selaimet eivät tue niitä lainkaan. MS IE saattaa tukea vaakatason tulostusta kuten joitakin muitakin tulostukseen liittyviä piirteitä epästandardilla koodauksella. Käsittelen tulostukseen liittyviä asioita sivulla 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille.

30. Miksi uudet Netscape ja Mozilla -selaimet näyttävät listaelementit muista selaimista poikkeavasti?

    Selaimet pyrkivät list-style-position ominaisuuden kohdalla CSS2:n mukaiseen toteutukseen. Toisaalta ne käyttävät listaelementeillei suosituksista poikkeavia oletusasetuksia. Katso sivulta 9 selainkohtaisia huomautuksia.

31. Miksi uudet Netscape ja Mozilla -selaimet lisäävät tietyillä dokumenttityypeillä tyhjää tilaa kuvien ympärille?

    Selain pyrkii vertical-align ominaisuuden kohdalla CSS2:n mukaiseen toteutukseen. Katso sivulta 8 rivinsisäisiä elementtejä koskeva selainkohtainen huomautus.

Linkkejä muille FAQ-sivuille

• Microsoft: Microsoft Internet Explorer
• Opera Software: Press FAQ, Opera Resources Index
• Mozilla: FAQ (koskee myäs uusia Netscape-selaimia)
• DHTML:
  • E. Krock