[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuOpassivut > 8. Miten CSS annetaan elementtien taustoille ja reunoille > Taustat ja reunat lomakkeille ja kehyksille (jakso 3/5)

Taustat ja reunat lomakkeille ja kehyksille

Kokoavat lomake-elementit (FORM, FIELDSET) ovat ongelmattomia, koska niiden käsittelyyn voi soveltaa CSS2:n laatikkomalleja (box models) - ne ovat selkeitä lohkoelementtejä.

Sen sijaan CSS:n sovittaminen lomakekontrollielementteihin (BUTTON, ISINDEX, LABEL, LEGEND INPUT, OPTION, OPTGROUP (tuettu vain uusissa Netscape/Mozilla-selaimissa), SELECT ja TEXTAREA) on ongelmallista. Olen keskustellut niistä erään Mozilla org. suunnittelijan kanssa, joka on ollut yhteydessä W3C:hen. Tämän keskustelun pohjalta on tullut esille, että on ylipäätänsä kyseenalaista sovittaa CSS:ää lomakekontrollielementeille, koska niiden käytös ei vastaa CSS:n nykyistä laatikkomallia. Niitä ei siten voi kuvata CSS:llä (mikä näyttötyyppi (display type) olisi esim. lomakenapilla), joten niille ei ole olemassa mitään standardia. Kaikki yritykset sovittaa tyylejä lomakekontrollielementeille ovat usein ongelmallisia.

Henkilökohtainen mielipiteeni on se, että selainten tulisi pystyä soveltamaan lomakekontrollielementteihin kaikkia sellaisia ominaisuuksia, jotka eivät ole riippuvaisia laatikkomallista. Tällaisia ominaisuuksia ovat ainakin tekstityyliin ja fontteihin liittyvät ominaisuudet. Kaikki uudet selaimet toimivat tässä suhteessa hyvin.

Ongelman ydin on oikeastaan siinä, mitä luonnostaan reunukselliset lomakekontrollielementit, kuten SELECT itse asiassa ovat. Niiden luonne on poikkeuksellinen. Ne voidaan ymmätää ikään kuin upotetuiksi objekteiksi, elementin IFRAME tapaan, jolla on oletuksena kehysreunukset. Selaimet eivät korvaa em. elementin kehysreunuksia CSS:llä. Ne saa pois vain määrittämällä frameborder="0". Elementtien SELECT ja IFRAME reunukset ovat saman tyylisiä, joten esim. elementin SELECT reunuksia voidaan periaatteessa tulkita niin, että sillä olisi ikään kuin frameborder="1", jota ei voi määritellä toiseksi. Tällöin CSS-reunukset tulevat näiden olemassa olevien reunusten ulkopuolelle ja elementti saa tuplareunukset. Koska useimmilla lomakekontrollielementeillä on HTML:ssä luonnostaan reunukset toisin kuin TABLE ja IMG elementeillä, joille voi lisäattribuuttina ne määritellä, ne ovat lomake-elementeissä hieman erikoisasemassa.

Elementtien FRAME ja FRAMESET tulisi saada reunukset samaan tapaan kuten IFRAME.

CSS voi kuitenkin poistaa tai korvata TABLE ja IMG elementeille määritellyt HTML-reunukset, myös korvausperiaate on looginen, mutta se rinnastaa lomakekontrollielementit eri tavalla muihin elementteihin - niitä käsitellään enemmän tavanomaisina elementteinä eikä ikään kuin upotettuina erikoisobjekteina. Näin myös sivulla 1b[S] mainitsemani CSS:n yleisperiaate pääse toteutumaan paremmin.

Eräs W3C:n CSS-työryhmän jäsen sanoi, että selaimille pitää antaa oikeus käyttää ns. widget-kirjastoja (widget libraries, jotka määrittävät lomakekontrollielementtien ulkoasun, koska niiden käyttö on selaimelle nopeampaa. Lomakekontrollielementit voidaan lainata käyttöjärjestelmästä, jolloin niiden reunustyyppeihin ei voi vaikuttaa. On kuitenkin mielekästä antaa Web-suunnittelijoille mahdollisuus muuttaa reunuksia, jolloin lomakekontrollielementtejä ei voida enää lainata käyttöjärjestelmältä. Koska CSS joissakin tapauksissa kasvattaa sivujen latausaikoja, sivujen tekijän vastuulle pitää ylipäätänsä jättää se, haluaako hän kasvattaa CSS:n avulla sivujen latausaikoja vai ei. Selaimen ei pidä tehdä tätä päätöstä sivujen tekijän puolesta! Puuttuvat piirteet lisätään CSS3[S] spesifikaatioon, jolloin lomakekontrollielementit voidaan toteuttaa standardilla tavalla. Sitten kuin CSS3 tulee valmiiksi, selainvalmistajat tulee velvoittaa sitä noudattamaan.

W3C: User Interface for CSS3.

Suositukseni:

  1. Suositan, että määritä lomakekontrollielementeille vain tekstiin ja leveyteen liittyvät ominaisuudet.

  2. Jos INPUT elementtiä käytetään painikkeena, älä määrittele sille reunus- ja taustaominaisuuksia. Pidän reunusten määrittelemistä n lomakekontrollielementeille ylipäätänsä kyseenalaisena.

  3. Älä määrittele INPUT-elementille korkeutta CSS:n avulla. Myös padding-ominaisuuden käyttöä olisi syytä välttää.

  4. Älä yritä muuttaa tavanomaisten kehysten esitysasua CSS:llä.

Selainkohtaisia huomautuksia:

  1. Vanhemmat Opera (4.x ja vanhemmat) ja Netscape 4.x -selaimet eivät tue kaikille lomake-elementeille perus tekstiominaisuuksia.

  2. Lomakekontrollielementtien toteutukset ovat saamani s-postin mukaan nämä ovat Mac-selaimissa täysin erilaisia. Esim. Mac IE 5.0:ssa SELECT on nappulamainen eikä laatikkomainen.

  3. Lomakepainikkeet näyttävät monissa selaimissa paremmilta, jos niille ei anna CSS:llä tausta- ja reunusominaisuuksia. MS IE Windows XP, MS IE Mac käyttävät pyöristettyjä lomakepainikkeita. Myös Opera 7.x:n eräät pinnat (engl. skin) käyttävät pyöristettyjä tyylikkäitä painikkeita.

  4. Taustaominaisuudet eivät toimi Opera-selaimissa (6.x -sarjaan asti).

  5. Reunusten toimivuus on lomake-elementtien suhteen on erityisen huono Netscape 4.x -selaimissa, joissa reunusten liittäminen elementille SELECT estää lomakekontrollin toimimisen.

  1. Opera lisää versioon 6.x asti reunukset elementeille INPUT, SELECT ja TEXTAREA vakioreunuksen ulkopuolelle. Opera tulkitsee elementit ikään kuin upotettuina objekteina lainaten ne käyttöjärjestelmältä. Opera 7.x lähtien Opera näyttää lomakkeet radionappia ja OPTION-elementtiä lukuun ottamatta samaan tapaan kuin Mozilla Gecko selaimet. Elementille OPTION ei voi antaa SELECT-elementistä poikkeavia väri- ja taustaominaisuuksia eivätkä taustakuvat toimi OPTION-elementille.

  2. MS IE Windows, Mozilla Gecko ja Opera 7.x+ -selainten kohdalla CSS korvaa alkuperäiset reunukset elementin INPUT suhteen tietyissä tilanteissa (<INPUT type="text">) ja elementin TEXTAREA suhteen (Mozillan ja Opera 7.x+:n kohdalla myös elementin SELECT suhteen, joka ei tule reunuksia tälle elementille).

  3. Dynaamiset näennäisluokat toimivat lomakekontrollielementeille vain Opera 7.x+ ja Mozilla Gecko -selaimissa.

  4. Opera 7.0 Beta 1 on ainoa selain, joka näyttää elementin BUTTON kaikissa tilanteissa täysin oikein. Uudemmissa Opera-selaimissa ei toimi em. elementille display:block. Mozilla Gecko -selaimissa ei puolestaan toimi text-align ominaisuus.

  5. Mozilla Gecko selaimissa lomake-elementien dimensioiden määrittelytapa vaihtelee. Jotta dimensioit olisivat mahdollisimman samalaisia, tulisi niille lisätä joko -moz-box-sizing:border-box tai -moz-box-sizing:content-box (CSS3:een on lisätty on omainaisuus box-sizing, jota käsittelen eräällä lisäsivulla[S]).

  1. Mozilla Gecko -selaimet antavat ehdotuksen siitä, miten CSS3:n mukaan toimiva selain voisi esittää lomakekontrollielementit. Otin Mozilla 0.7:stä kuvakaappauksen[S]. Jos voit, kokeile alla olevaa testilomaketta Opera 5.x+, MS IE 5.x+ ja Netscape 6.x+ -selaimissa ([M][S][Pw]):

    *{font-family:Verdana, Arial, sans-serif; font-size:14px}
    form {border:1px solid black; background-color:aqua; padding:10px;}
    fieldset, isindex {border:1px solid black; padding:2px; margin:2px; width:100%}
    fieldset#first {background-color:white}
    fieldset#second {background-color:olive;}
    fieldset#third {background-color:lime;}
    legend, label {font-weight:bold; color:red; border:1px solid red; background-color:white}
    select, input, textarea {border:2px outset red; background-color:#ffc; width:200px; font-weight:bold}
    optgroup#two {background:aqua url(./Css/Kuvat/pallo.gif) no-repeat; padding-left:16px;}
    option, textarea, input {background:#ffc url(./Css/Kuvat/pallo.gif) no-repeat; padding-left:16px}
    button {background-color:#ccc; border:3px outset gray; padding:10px; width:200px} input[type="radio"]{height:15px;}

    CSS:n päämääränä on korvata HTML:n esitysasullisia piirteitä mahdollisimman paljon. <INPUT type="radio"> kohdalla CSS3:n pohjalta on toistaiseksi avoin kysymys, pitäisikö radionapille laittaa ylimääräiset reunukset vai pitäisikö alkuperäinen kokonaan korvata.

  1. Vaikka Netscape 6.x+ pystyy muuttamaan kaikkien lomake-elementtien esitysasua, jos lomakkeita käytetään XML-documenteissa, edes Netscape 6.x ei pysty CSS2:n puitteissa määrittelemään tarpeeksi sääntöjä ja ominaisuuksia kaikkien lomake-elementtien luonnollisten ominaisuuksien esittämiseksi. Tosin Netscape/Mozilla määrittelee esitysasulliset piirteet selainkohtaisella CSS:llä tiedostossa /res/forms.css, jolloin periaatteessa jo nykyisin se voisi toteuttaa esitysasulliset XML-dokumenteille vaadittavat lomakepiirteet. Mainitsen Mozillan selainkohtaisista piirteistä CSS-taulukoissa (form-related pseudo-classes[S] ja outline[S] kohdalla).

  2. Opera 7.x+ tukee outline ominaisuutta, mutta se ei toimi kunnolla lomakekontrollielementeille.

  3. Lomakekontrollielementtien korkeus- ja leveysominaisuudet ovat MS IE 6.0:ssa DTD-riippuvaisia[S]. Korkeuden määrittely saattaa aiheuttaa huomattavasti erilaisia lopputuloksia eri selaimissa.

  4. CSS toimii FRAME ja FRAMESET elementeillä vain MS IE selaimissa tilanteissa, joissa kehyksissä on todellista sisältöä. Mozilla Gecko -selaimet piilottavat yleensä määritellyn CSS:n todellisen tai kuvitellun kehysasiakirjan taakse. Jos ilmoitettua dokumenttia ei löydy Mozilla 1.1a:lle CSS:llä voi määritellä taustaominaisuudet ja reunukset FRAME ja FRAMESET elementeille (eräille vanhemmille versioille voi vain saada näkyviin vain elementille FRAMESET määritellyt reunukset).

[Alku]