Tyylitiedostojen valitsijat voi kytkeä mihin tahansa sisällön tunnisteisiin. Useimmiten tähän käytetään ID-arvoja tai luokkia kuten .dita-title. Myös muut attribuuttiarvot kuitenkin soveltuvat tähän. Koska DoX CMS:n elementtiluokat ja tagit on toteutettu elementtien attribuutteina, niitä koskevat ohjeet ovat esimerkki tästä. Koska olen käynyt läpi elementtiluokkien ja tagien käyttämisen yhdessä tyylitiedostojen kanssa muualla, en tee niin täällä. Esimerkiksi lisätietoja tageihin kytketyistä tyyleistä löytyy täältä. Sen sijaan käyn läpi käyttötapoja muihin elementtien attribuutteihin kytketyille tyyleille.
Attribuutit ovat elementtikohtaisia lisätietoja niiden tyypin lisäksi. Nämä lisätiedot on määritetty elementin aloittavan tunnisteen ohessa. Sekä ID-arvot että luokat ovat myös attribuutteja, mutta niihin viitataan useimmiten eri tavalla tällaisten viittauksien yleisyyden vuoksi. Kullakin attribuutilla on sekä nimi että arvo. Jos saman nimen alaisia arvoja on useampia, esitetään ne yhtenä arvona, jonka eri osat on erotettu toisistaan välilyönneillä. Lisätietoja HTML-attribuuteistä löytyy täältä. Lisätietoja DITA-attribuuteista löytyy täältä.
Käyn alla läpi esimerkkejä attribuuteista, joihin voit kytkeä määreitä tyyleissä, ja käyttötavoista tällaisille tyyleille. Ohjeeni perustuvat CSS-tyylitiedostojen muotoilemiseen. Jos käytät näitä menetelmiä, muista dokumentoida oikeat toimintamallit sisäisesti myös tulevia käyttäjiä varten.
Attribuuttien formaatti CSS:ssä
Kaikki viittaukset attribuutteihin valitsijoissa käyttävät samaa formaattia. Esittelen alla tämän formaatin yksityiskohdat. Kohta ’attribute’ on attribuutin nimi ja kohta ’value’ on kyseisen nimisen attribuutin arvo. Tämä perusmalli toimii vain kokonaisarvon ollessa täysin kirjoitettua vastaava. Käyn alla läpi myös keinoja kohdistaa attribuuttien arvojen osittaisien vastaavuuksien perusteella.
[attribute="value"]
Jos lisäät tämän tunnisteen välittömästi toisen tunnisteen kuten elementin tyypin perään ilman välilyöntiä, toimii se ehtona kyseisenlaisille elementeille. Esimerkiksi ’span[doxelementclass=”redText”]’ kohdistuu ainoastaan elementtiluokan nimeltä ’redText’ omaaviin fraasielementteihin (ph), jotka järjestelmä käsittelee span-elementteinä HTML-julkaisuissa ja PDF-julkaisujen käyttämissä pohjissa.
Valitsijat osittaisille attribuuttien arvoille
Jos viittaukset attribuuttien arvojen perusteella rajoittuisivat ainoastaan tarkkoihin vastaavuuksiin, olisi niiden käytettävyys tyylitiedostoissa varsin rajattua. Näin ei kuitenkaan ole. Käyn alla läpi erinäisiä muita keinoja viitata attribuuttien kokonaisarvojen osiin. Ensimmäistä lukuun ottamatta jokaiseen niistä liittyy eri erikoismerkki ennen yhtäläisyysmerkkiä (=) muutoin yllä esitettyä vastaavassa valitsijassa. Tällöin ’value’-osion arvo vastaa osittaista valitsijaa vastaavia arvoja attribuutin varsinaisen arvon sijaan. Lisätietoja näistä osittaisista kohdistajista löytyy täältä. Nämä viittaustavat toimivat myös vakioattribuutteihin kuten elementtiluokkiin.
- [attribute]: Valitse elementit, joilla on kyseinen attribuutti riippumatta sen arvosta.
- [attribute~=”value”]: Valitse elementit, joiden arvoista tälle attribuutille yksi vastaa tätä arvoa.
- [attribute|=”value”]: Valitse elementit, joiden arvoista tälle attribuutille ainakin yksi alkaa tällä arvolla.
- [attribute^=”value”]: Valitse elementit, joiden kokonaisarvo tälle attribuutille alkaa tällä arvolla.
- [attribute$=”value”]: Valitse elementit, joiden kokonaisarvo tälle attribuutille päättyy tällä arvolla.
- [attribute*=”value”]: Valitse elementit, joiden kokonaisarvo tälle attribuutille sisältää tämän arvon.
Huomioelementtien tyyppi (type)
Erilaisten huomioelementtien (note) kuten varoituksien ja vinkkien erottaminen toisistaan on yleisimpiä muihin attribuuttiarvoihin perustuvia tyyliä koskevia sääntöjä. Tällä tavoin erilaisille huomioelementeille saa niille kuuluvat ISO 3864 -mukaiset ikonit ja väriteemat suoraan tyylitiedoston kautta. Tekstieditorissa ei tarvitse kuin antaa kullekin asianmukainen Type-arvo sen DITA Ominaisuudet -valikossa.
Kun kyseessä ovat harvinaisemmat huomioelementtien tyypit tai muotoilette perustyyppien sisältöjä tarkkarajaisen tai poikkeavan mallin mukaisesti, näihin tyyppeihin voi kytkeä myös muunlaisia sääntöjä. Esimerkiksi siirtymät (fastpath) sisältävät oletusarvoisesti linkkejä, ja voit määrittää tällaisille linkeille vain niille ominaisen ulkoasun esimerkiksi lisäämällä niiden kirjasinkokoa ja vaihtamalla niiden väriä. Voit myös esimerkiksi estää näiden linkkien värjäytymisen uudelleen, jos käyttäjä on jo käyttänyt niitä.
Esimerkkitoteutukset
Esitän alla ensin tavanomaisen tavan lisätä esimerkiksi varoituksille (warning) asianmukaiset ikonit, otsikot, ja värilliset kehykset. Käytän erottelua, jossa kaikkia eri tyyppien huomioelementtejä tältä osin koskevat säännöt on jaettu omaan osuuteensa, jotta niitä ei tarvitse toistaa erikseen joka kerta. Vain eri tyyppejä koskevat erot tarvitsee tällöin ilmaista samalla tavoin kuin varoituksien osalta on tehty alla.
Käytännössä otsikko-osuudet lisätään tyylitiedoston kautta ja ikonit ovat tyyppikohtaisia sisältöjen taustakuvia, joiden päältä sisältö siirretään kuvaa suuremman sisennyksen avulla. En suosittele tämän toteutuksen kopioimista sellaisenaan, koska se ei sisällä kaikkia huomioitavia seikkoja. Esimerkiksi käytetty kuva on vain esimerkki ja useimmiten otsikko täytyy kääntää kielikohtaisesti alla esitetyillä kielitunnisteilla.
[data-ditaatribute-type="warning"]::before {
content: 'warning';
}
[data-ditaatribute-type="warning"] {
background-image: url("/Content/images/warning-icon.png");
border-color: #F8A81B !important;
}
.dita-note::before {
font-weight: bold;
font-size: 12pt;
text-transform: uppercase;
}
.dita-note {
border: 2px solid #000000;
background-repeat: no-repeat;
background-position: 0 10px;
min-height: 62px;
padding-left: 60px;
padding-top: 10px
page-break-inside: avoid;
}
Vastaavasti alla esittelemäni malli olettaa, että huomioelementteihin perustuvien siirtymien (fastpath) keskittyvän ainoastaan toisistaan erotettuihin linkkeihin, jotka ohjaavat haluttuihin dokumentin osuuksiin. Tästä syystä niiden sisällä olevan linkit on korostettu isolla fonttikoolla ja poikkeavalla värillä. Poistin myös varmuuden varalta alleviivauksen, joka linkkeihin voi tulla oletusarvoisesti. Tämä ei toimi, jos samoissa tekstikappaleissa (p) on niiden lisäksi muuta sisältöä.
[data-ditaatribute-type="fastpath"] a {
font-size: 2em;
color: #03fc9d !important;
text-decoration: none !important;
}
Huomioelementtien tyyppi on vain yksi esimerkki DITA Ominaisuudet -valikon kautta hallinnoitavasta seikasta, jonka osalta eri arvoille saa määritettyä erilaiset ulkoasut. Tällöin näiden huomioelementtien julkaisuvaiheen ulkoasun määrittäminen kirjoittamisvaiheessa ei vaadi kuin tämän arvon valitsemista listalta kunkin huomioelementin osalta. Tällä tavoin saa myös ohitettua tarpeen lisätä niihin toistuvat osuudet kuten niiden otsikot tekstieditorissa. Tällaiset seikat tarvitsee ainoastaan päivittää ajoittain tyylitiedostoon, lähinnä uusia kieliä järjestelmään lisättäessä.
Kieli (lang)
Kielitunnisteilla saa määritettyä kielikohtaisia eroja. Yleisin tällainen seikka ovat tyylitiedoston kautta lisätyt sisällöt kuten yllä esitetyt huomioelementtien (note) tyyppien otsikot. Ne täytyy kääntää kullekin kielelle ja tämä tapahtuu lisäämällä tyylitiedostoon eri arvot kielitunnisteiden avulla.
Lisäksi voit käyttää kielitunnisteita myös muiden julkaisujen ulkoasun seikkojen säätämiseen kielikohtaisesti. Voit määrittää eri aakkostojen käyttöön tietyt fontit. Voit säätää sisällön lukusuuntaa. Jos hallinnoit esimerkiksi taulukoiden solujen leveyksiä elementtiluokilla, voit säätää näitä leveyksiä kielikohtaisesti, jos niissä ei muutoin ole tarpeeksi liikkumavaraa enemmän tilaa vaativissa kielissä. Voit myös säätää tyylitiedostojen kautta määritettyjä kuvia kielikohtaisesti, jos eri kielillä käytetään erilaisia ikoneita tai käytätte erilaista brändäystä eri kielialueilla.
Esimerkkitoteutukset
Käyn alla läpi kielitunnisteiden lisäämisen huomioelementtien (note) sisältöjen kääntämiseksi sekä lukusuunnan kääntämisen olemaan oikealta vasemmalle. Yleinen periaate on, että kielitunniste on sisällön pohjaelementin attribuutti. Tästä syystä pelkkä kielitunnisteen lisääminen ensimmäiseksi osaksi valitsijaa ja sen erottaminen muusta valitsijasta riittää lähes kaikissa tilanteissa. Tämä kielitunniste DoX CMS:ssä vastaa kielen tunnistetta muualla järjestelmässä. Myös kielitunnisteissa voi käyttää osittaisia arvoja kuten ainoastaan ’en’-alkuisia kielitunnisteita, mikä kattaa esimerkiksi sekä ’en-US’- että ’en-GB’-vaihtoehdot.
Valitettavasti tyylitiedoston kautta hallinnoitavat lisäykset tekstiin täytyy kääntää tyylitiedoston kautta. Tyylitiedoston käsittely tapahtuu vasta kaiken muun sisällön valmistelemisen jälkeen. Tästä syystä esimerkiksi sen kautta lisättävät muuttujat eivät enää tulisi hakeneeksi arvojaan. Voit tosin käyttää muuttujia käännöspyyntöjen tekemiseen osana sisällön kääntämistä uudelle kielelle ja sitten siirtää kyseiset arvot tyylitiedostoon. Suosittelen näiden arvojen lisäämistä tyylitiedoston huipulle tai omaan tyylitiedostoonsa niiden hallinnoinnin helpottamiseksi.
[lang="en"] [data-ditaatribute-type="warning"]::before {content: 'warning';}
[lang="fi"] [data-ditaatribute-type="warning"]::before {content: 'varoitus';}
[lang="de"] [data-ditaatribute-type="warning"]::before {content: 'warnung';}
Sisällön kirjoittamissuunnalle on oma komentonsa, joka vaikuttaa kaikkeen sisällön asetteluun. Tätä komentoa on helpointa käyttää sisällön pääelementtiin. Jos kuitenkin jotkin osat dokumenteista käyttävät myös puolen määrittäviä komentoja kuten kuvat tekstin sivuun siirtäviä float-komentoja, myös ne voi joutua määrittämään uudelleen. Mahdollisesti tämä koskee myös esimerkiksi yllä esitetyllä tavalla toteutettuja huomioelementtien ikoneita. Ne vaativat taustakuvan sijoittelun puolen vaihtamista sekä syvennyksen puolen vaihtamista vastaamaan sitä. Ainoastaan nämä yksityiskohdat tarvitsee määrittää uudelleen. Periaatteessa tähän voi käyttää myös erillistä attribuuttia ’[dir=”rtl”]’, kun useampi kieli käyttää tällaista asettelua. Lisätietoja käännetystä asettelusta löytyy täältä.
[lang="ar"] {direction: rtl;}
[lang="ar"] .dita-note {
background-position: right 0px top 10px;
padding-right: 60px;
page-break-inside: avoid;
}
Kielikohtaiset säännöt ovat tärkeitä. Käännös uudelle kielelle vaatii myös muuta sovittamista. Mielestäni esimerkiksi myös muiden aakkostojen fontit on syytä säätää vastaamaan brändiänne oletusfonttien sijaan, ellette käytä oletusfontteja myös muilla kielillä.
Linkityskohteet (href ja src)
Liitteet ja linkit rakenteisissa dokumenteissa perustuvat kohteidensa sijaintien määrittämiseen kyseisten elementtien attribuutteina. Täten määreet perustuen näiden sijaintien arvoihin tai osittaisiin arvoihin ovat myös tyylitiedostojen käytettävissä. Esimerkiksi järjestelmällisesti määritettyjä tiedostojen tai elementtien nimiä, tiedostopäätteitä, ja verkko-osoitteita voi käyttää perusteina erilaisille tyyleille. Tällä tavoin voit kehystää kuvia tai määrittää niiden koon niiden käyttötavan perusteella ilman tarvetta tekstieditorissa lisättäville tunnisteille kuten elementtiluokille. Saat myös erotettua dokumentin sisäiset viittaukset erilaisiin elementteihin ja lisättyä näkyviin ulkoisten linkkien kohteet, kun osoitin siirretään niiden ylle. Kuvaelementit (img) käyttävät sisältöjensä löytämiseen Src-attribuuttia ja linkkielementit (xref) kohteidensa tunnistamiseen Href-attribuuttia.
Tällä tavoin toteutettavat ulkoasun muokkaukset tosin vaativat järjestelmällistä muotoilua tiedostojen tai elementtien nimien sekä linkkien osalta. Muutoin tällä tavoin määritetyt säännöt eivät toimi. Etuna tältä osin on kuitenkin, että nämä seikat tarvitsee huomioida vain osana joka tapauksessa vaadittuja tehtäviä erillisen vaiheen sijaan.
Esimerkkitoteutukset
Esittelen alla erinäisiä keinoja erilaisten linkkien ulkoasun toisistaan erottamiseen. Lisäksi ehdotan keinoa SVG-tiedostojen koon kasvattamiseen, kun käyttäjät valitsevat ne.
Erilaisten linkkien erottaminen toisistaan antaa käyttäjien löytää oikeat linkit nopeammin sivua vilkaisemalla ja vihjaa heille niiden kohteista, jos niitä ei ole nimetty osana tekstiä. Esitän alla keinon erottaa toisistaan dokumentin sisäiset linkit ja linkit dokumentin ulkopuolelle. Kuten myös muut esittämäni mallit, tämä menetelmä on tarkoitettu käytettäväksi DoX CMS:n kanssa. Käytän erottelun perustana, alkaako linkin arvo #-merkillä, koska kaikki sisäiset linkit käyttävät tällaista formaattia. Se vastaa niiden ID-arvoja. Tietääkseni mikään ulkoinen linkki ei tee samoin. Tällä järjestyksellä jälkimmäinen sääntö jää voimaan, kun sen ehto täyttyy. Ehto ’.topicWrapper’ varmistaa, että nämä säännöt pätevät vain varsinaiseen sisältöön eivätkä esimerkiksi sisällysluetteloon.
.topicWrapper a {
color: blue;
}
.topicWrapper a[href^="#"] {
color: green;
}
Erilaisiin elementteihin kohdistetut sisäiset linkit voi erottaa toisistaan, jos näiden elementtien ID-arvot on muotoiltu tavoilla, jotka ilmaisevat elementtien tyypit. Oletuksena tämän esimerkin osalta on, että kunkin elementin ID-arvon loppu kertoo elementin tyypin kuten ’revision_table’ versiotaulukon tapauksessa. Tällaisten päätteiden osalta on kuitenkin syytä olla tarkkana, koska DoX CMS lisää julkaisuvaiheessa järjestysnumerotunnisteita kuten ’_1’ näiden arvojen jälkeen, kun dokumentissa on useampi samanniminen elementti. Jos linkkien yksityiskohtia on säädetty useammalle eri keinolla, on sinun myös syytä tarkistaa, mitkä säännöt jäävät voimaan eri tilanteissa.
a[href$="_table"] {
color: firebrick;
}
a[href$="_fig"] {
color: goldenrod;
}
a[href$="_section"] {
color: mediumseagreen;
}
Voit käyttää myös valitsijoissa tunnisteita kuten ’[href^=”mailto”]’ sähköpostiosoitteiden linkkien erottamiseen ja kytkeä näihin elementteihin monimutkaisempia sääntöjä, kuten ulkoisten linkkien kohteiden esittämisen, kun osoitin viedään niiden ylle. Esitän alla linkkielementtien (xref) Scope-attribuutin perusteella tehdyn toteutuksen tältä osin: ulkoisiksi merkityt linkit näyttävät niiden Href-attribuutin arvon valitussa formaatissa, kun osoitin viedään niiden ylle. Voit lisätä tähän näyttämistapaan myös animaation. Lisätietoja CSS-animaatioista löytyy täältä.
a[data-ditaatribute-scope="external"]:hover::after {
content: "🡒 " attr(href);
display: inline-block;
color: lightgrey;
padding-left: 5px;
}
Kuvien osalta esimerkkini Src-attribuutin käyttämisestä perustuu tiedostopäätteeseen. Käytän osittaista valintaa, jossa tiedostopäätteen täytyy vain olla mukana tässä viitteessä, koska DoX CMS:n sisäinen esikatselu lisää Src-arvon loppuun kielitunnisteeseen liittyviä tietoja. Tällä ei ole merkitystä valmiiden julkaisujen kannalta.
Tämä lisäys tyylitiedostoihin olettaa, että käyttöliittymän ikoneihin käytetään SVG-tiedostoja ja että niitä ei käytetä muilla tavoin osana leipätekstiä. Muut käyttötilanteet voi huomioida estämällä sääntöjen voimaan astumisen niiden tapauksessa, kuten alla esittämässäni esimerkissä on tehty kuvakehyksen (fig) ensimmäisen tekstikappaleen sisältämien kuvien sekä taulukoiden kuvien osalta. Tämä oletus perustuu ajatukselle, että varsinainen kuva tai kuvat ovat ensimmäiset sisällöt kehyksien sisällä. Säännöt kasvattavat kuvaa ja siirtävät sen väliaikaiseen laatikkoon tekstikappaleen vasemmalla puolen. Lisäksi säännöt olettavat, että kuva on lisätty sisältöön muuttujana. Tällöin vastaavassa tekstin kohdassa näkyy punainen teksti ’see left’ (’katso vasemmalle’), kun kuva on valittuna.
img[src*=".svg"]:not(.dita-fig > p:first-child img):not(td img):active {
max-width: none !important;
height: 20mm !important;
width: auto;
float: left;
border-right: 3px solid black;
padding: 3px 5px;
margin-right: 8px;
background: whitesmoke;
}
span:has(img[src*=".svg"]:not(.dita-fig > p:first-child img):not(td img):active)::before {
content: "see left";
display: inline;
color: red;
}
Tyylivalinnat (style)
Tämä on pieni kikka, josta voi olla apua, jos et halua lisätä kuvien kokojen hallinnointiin elementtiluokkaa tai jos haluat hallinnoida kuvien tyylien yksityiskohtia avainsanojen avulla ilman erillisiä elementtiluokkia kullekin itsenäisesti hallinnoitavalla seikalle. Tekstieditorin kautta annettavien arvojen Height-attribuutille ja Width-attribuutille ei tarvitse olla syntaksiltaan oikeaoppisia. Niihin voi siis kirjoittaa mitä vain arvoja, ja näille arvoille voi sen jälkeen antaa omat sääntönsä kuvien ulkoasun hallinnointiin.
Esimerkkitoteutus
Tämän toteutuksen kannalta ei ole merkitystä, annatko arvot Height-attribuutille vai Width-attribuutille, koska molempien arvot kuuluvat julkaisuvaiheen Style-attribuuttiin. Varsinainen arvo koostuu avainsanoista, joita voit yhdistää tilannekohtaisesti oikean ulkoasun määrittämiseksi:
- inline: Kuvan korkeus vastaa ympäröivän tekstin fonttikokoa.
- framed: Kuvalla on ohuet mustat reunukset.
- hoverHighlight: Kun osoitin on kuvan yllä, kuvalla on punaiset reunukset ja läpinäkyvän kuvan tausta on keltainen.
img[style*="inline"] {
height: 1em;
}
img[style*="framed"] {
border: 1px solid black;
}
img[style*="hoverHighlight"]:hover {
border: 2px solid red;
background: gold;
}
Käännättäminen (translate)
Kaikilla elementeillä on Translate-attribuutti. Sitä käytetään kääntäjien neuvomiseen siltä osin, mitkä elementit heidän täytyy kääntää tai jättää käyttämättä. Jos siihen kuitenkin kytkee myös tyylejä, voi nämä osiot korostaa kääntäjille lähetettävässä alkuperäiskielisessä julkaisussa. Tällä tavoin heidän on helpompaa tunnistaa osiot, joihin liittyy erillisiä kääntämiseen liittyviä ohjeita. Esimerkiksi koodiosuuksissa kommentoidut osiot voi merkitä fraasielementillä (ph), jolle annat arvon ’translate: yes’. Jos nämä osuudet on korostettu tähän tarkoitetulla värillä myös kääntäjien käyttöön julkaistussa versiossa, heidän on helpompaa huomata ne, koska itse koodielementti (pre) on oletusarvoisesti kääntymätön. Suosittelen erillistä tyyliä julkaisemiseen kääntäjiä varten, jotta nämä korostukset näkyvät vain heille.
Esimerkkitoteutus
Tämä toteutus yksinkertaisesti lisää erilaiset värit osuuksille, jotka olet erikseen merkinnyt käyttämällä Translate-attribuuttia. Muista mainita kääntäjille, mitä eri värit merkitsevät. Tässä tapauksessa erikseen käännettäviksi merkityt osuudet ovat limetinvihreitä ja ei-käännettävät osuudet tumman pinkkejä.
[translate="yes"] {
color: lime;
}
[translate="no"] {
color: deeppink;
}
Yhteenveto
Poikkeavat tyylit DoX CMS:ssä kytketään useimmiten elementtiluokkiin. Tämä ei kuitenkaan ole välttämätöntä, kun saatavilla on muita yhdenmukaisella tavalla käytettyjä attribuutteja. Tällöin sinun ei ole tarpeen täyttää listaa valittavissa olevista elementtiluokista kaikkiin eri tilanteisiin valmistautumiseksi, etkä joudu muistamaan erikseen lisätä kyseisiä elementtiluokkia elementeille.
Voit viitata tyylitiedostoissa elementteihin, joilla on lainkaan tiettyjä attribuutteja, joilla on tietyt arvot kyseisille attribuuteille tai joiden arvot kyseisille attribuuteille sisältävät tiettyjä osuuksia.
Osa attribuutteihin perustuvista ulkoasun piirteistä on yleisessä käytössä. Esimerkiksi huomioelementtien (note) tyyppikohtaiset ikonit ja otsikot toteutetaan useimmiten tällä tavoin. Vastaavasti mitkään lisäykset kuten nämä huomioelementtien otsikot täytyy kääntää antamassa tyylitiedostoissa kielikohtaiset arvot kieliattribuutin eri arvojen avulla.
Tavanomaisten toteutuksien lisäksi saatavilla on kuitenkin vaihtelevissa määrin luovia keinoja kytkeä erilaisiin attribuutteihin sääntöjä koskien sisällön ulkoasua. Osa niistä kuitenkin vaatii myös tällä tavoin syntyvien tarpeiden huomioimista osana muuta sisällön muokkaamista. Esimerkiksi sisäisten linkkien värin voi säätää suhteessa niiden kohteisiin, kun näiden kohteiden ID-arvot sisältävät vakioituja osuuksia, joihin linkkien tyylit voivat viitata Href-attribuutin arvojen kautta.
Kaikki esitellyt toteutukset ovat vain esimerkkejä sekä käytettyjen sääntöjen että käytettyjen arvojen osalta. Voit pohtia itse parhaita tapoja soveltaa näitä malleja omiin tarpeisiinne.