Tyylitiedostot eivät ole pelkkä lopullisten julkaisujen sisällön asettelun keino. Voit halutessasi käyttää esivedoksiin ja katselmointiin erillisiä tyylejä, jotka korostavat tässä vaiheessa merkityksellisiä seikkoja. Lisäksi asettelun ei tarvitse rajoittua mukana olevan sisällön esitystapaan, vaan voit piilottaa tiettyjä sisältöjä tilannekohtaisesti. Tällaiset ratkaisut laajentavat järjestelmän toiminnallisuutta.
Tässä artikkelissa käyn läpi keinoja näyttää eri osuuksien tunnisteet kuten linkkien kohteet ja käytetyt tagit, sekä keinoja sovittaa DoX CMS:n käyttämää elementtien otsikoinnin muotoilua eri tilanteisiin. Nämä keinot perustuvat pitkälti CSS-tyylitiedostoihin.
Olen aiemmin käsitellyt samansuuntaisia tyylitiedostojen käyttötapoja seuraavissa artikkeleissa:
Esikatselutyyli
Kaikkien tyylien ei tarvitse olla toimituksien käyttöön. Tyylitiedostot sallivat myös lisätä näkyviin erotteluita ja tietoja, joista on hyötyä vain sisällön alustavalle läpikäynnille. Aiempi esimerkki tästä on puuttuvista kuvista huomauttaminen täällä käsittelemälläni tavalla.
Esittelen nyt sen sijaan keinoja näyttää eri elementtien käyttämiä attribuuttien arvoja esikatseludokumentissa sekä korostaa tageilla merkityt elementit niiden käyttämien tagikategorioiden mukaisesti. Lisäksi ehdotan muutamaa pienempää muutosta esikatselun tueksi. Lisätietoja viitteistä elementtien attribuutteihin kuten niiden tageihin löytyy täältä.
Valitettavasti tämä menetelmä ei toimi kuvien lähteiden esittämiseen, koska kuville ei voi lisätä alaelementtejä.
Attribuuttien näyttäminen
Minne tämä linkki johtaa? Mitkä tagit näillä sisällöillä taas olikaan? Mille elementeille annoin määreitä kuten leveys tekstieditorissa, ja mitkä ne arvot olivat?
Tällaiset kysymykset ovat ajoittain osa katselmointia, ja julkaisujen selaus ei paljasta vastauksia. Yksittäistapauksissa voit toki etsiä näitä arvoja DoX CMS:n esikatselunäkymästä selaimen Tarkista-toiminnolla.
Alla esittelemäni keino antaa kuitenkin näyttää halutut attribuuttiarvot osana esikatseltavaa dokumenttia. Tämä keino vaatii näytettävien attribuuttien sekä niiden esitystavan erikseen määrittämistä.
Attribuuttien arvot
Saat attribuuttien arvot näkyviin osana kyseisen elementin alkuun tai loppuun lisättyä pseudoelementtiä. Näitä pseudoelementtejä voi olla vain yksi kumpaakin tyyppiä per elementti. Tästä syystä kaikki näytettävät arvot täytyy määrittää samanaikaisesti niiden erottamisen omiksi osuuksikseen sijaan.
Halutun attribuutin lisääminen vaatii säännön ’content’ osaksi arvoa ’attr()’, missä sulkeiden sisään tulee kyseisen attribuutin nimi. Esimerkiksi siis ID-arvon saa näkyviin säännöllä ’content: attr(id);’, jota täytyy käyttää joko ::before- tai ::after-pseudoelementtinä halutunlaisille elementeille. Valitsijan on syytä myös mainita halutut attribuutit. Yksinkertaisimmillaan kyse on attribuutin nimestä hakasulkeiden sisällä kuten ’[id]’. Lisätietoja attribuutteihin perustuvista valitsijoista löytyy täältä.
Alla on esimerkkejä tällä tavoin haettavissa olevista arvoista. Ne eivät vielä sisällä lainkaan sääntöjä näiden osuuksien esittämistavan osalta. Käytän ::after-pseudoelementtiä, koska se on muussa käytössä harvemmin kuin ::before-pseudoelementti.
ID
[id]:not(body)::after {
content: attr(id);
}Tämä muotoilu näyttää kaikkien ID-arvollisten elementtien ID-arvot, kun tämä tyyli on valittuna käyttöön. Tällä tavoin näet helpommin esimerkiksi kirjoitusvirheet näissä arvoissa. Tämä on erityisen hyödyllistä, jos johonkin elementtiin kohdennetut linkit eivät toimi halutulla tavoin. Järjestelmässä on myös tilanteita, joissa ID-arvot muuttuvat suhteessa alkuperäisiin. Yleisimmät näistä ovat saman ID-arvon toistumisen välttäminen sekä monikieliseen julkaisuun lisätyt kielitunnisteet.
Href
.topicBodyWrapper [href]::after {
content:attr(href);
}Tämä muotoilu näyttää linkkielementtien kohteet. Lisämääre ’.topicBodyWrapper’ tarvitaan, jotta tämä sääntö ei yleistyisi sisällysluettelon linkkeihin. Tällä tavoin näet linkityksen kohteiden ja ne sisältävien otsikkosisältöjen ID-arvot Editori-valikon kautta haettaviksi. Tämä muotoilu näyttää myös muualle vievien linkkien kohteet niiden muotoilun tarkistamiseksi.
Style
[style]::after {
content:attr(style);
}Jos annat elementeille tyylimääreitä tekstieditorin kautta, saat ne näkymään tällä tavoin. Kuvien kokomääreitä ei tosin voi näyttää, koska kuvat eivät salli lisätä niille näitä lisäosuuksia. Täten yleisin tämän arvon käyttötapa olisi paljastaa tekstieditorissa määritetyt taulukoiden sarakkeiden leveydet.
Tagit
[data-doxattribute-manual]::after {
content: 'Manual: 'attr(data-doxattribute-manual)'';
}
[data-doxattribute-device]::after {
content: 'Device: 'attr(data-doxattribute-device)'';
}
[data-doxattribute-manual][data-doxattribute-device]::after {
content: 'Manual: 'attr(data-doxattribute-manual)'\A Device: 'attr(data-doxattribute-device)'';
}Käytetyt tagit eli suodatusmerkinnät tällä tavoin näyttämällä saat esikatselussa selvästi näkyviin, mitkä osuudet ovat julkaisukohtaisia. Voit myös katselmoida julkaisua, joka sisältää samanaikaisesti useamman julkaisun osuudet, jolloin näet rinnakkain eri julkaisuihin kuuluvat osuudet tällä tavoin merkittyinä.
Yllä käytetyt arvot tagikategorioille (manual ja device) ovat vain esimerkkejä, jotka perustuvat DoX CMS:n esittelysisältöihin. Valitsin käyttää kahta kategoriaa havainnollistaakseni, kuinka eri kategorioiden arvojen yhtäaikainen näyttäminen onnistuu. Käytännössä kaikki mahdolliset kategorioiden yhdistelmät täytyy tällöin määrittää erikseen, mikä voi käydä raskaaksi niiden määrän kasvaessa.
Lisäsin näkyviin myös tagikategorioiden nimet. En tehnyt tätä kielikohtaisesti, koska kyse ei ole toimituksissa näytettävistä tiedoista. Kohta ’\A’ lisää kategorioiden väliin pakotetun rivinvaihdon.
Attribuuttien esitystapa
Attribuuttien esittämiseen löytyy useampi ratkaisu. Niiden arvot esittävän tekstin sijoittelemisen keinojen lisäksi voit korostaa tällä tavoin merkityt osuudet eri tavoin. Lisäksi voit rajoittaa näkymän vääristymistä lisättyjen osuuksien vuoksi näyttämällä attribuuttien arvot vain osoittimen ollessa kyseisen elementin yllä. Niiden ennakkoon tunnistamisessa, jotta tiedät siirtää osoittimen tietyn elementin ylle, auttaa niiden korostaminen ensin. Tämä vaihtoehto toimii vain vuorovaikutuksellisissa julkaisumuodoissa kuten DoX CMS:n esikatselu- ja katselmointitoimintojen käyttämässä HTML-esitysmuodossa. Esimerkiksi PDF-julkaisut eivät salli tehdä niin niiden julkaisemisen jälkeen.
Esitän alla esimerkkejä kustakin näistä vaihtoehdosta. Osoittimeen perustuva vaihtoehto käytännössä yhdistää kaksi muuta vaihtoehtoa ja lisää tunnisteiden näyttämiseen liittyviin valitsijoihin lisätunnisteen ’:hover’. En siis esitä sen toteutusta erikseen.
Arvojen näyttäminen
*::after {
display: inline-block;
float: right;
color: lightgrey;
}Tämä toteutus olettaa, että kaikki nämä arvot esitetään ::after-pseudoelementteinä yllä ehdottamaani tapaan, ja että ::after-pseudoelementtejä ei käytetä muualla julkaisuissanne. Tällä perusteella pystyn yksinkertaisesti kohdentamaan samat säännöt minkä tahansa elementin ::after-pseudoelementtiin. Jos tälle säännölle täytyisi lisätä poikkeuksia, täytyisi ne huomioida valitsijassa esimerkiksi :not()-lisämääreiden avulla. Vaihtoehtoisesti voit tietenkin määrittää poikkeukset alempana tyylitiedostossa täsmällisempien valitsijoiden avulla.
Kyseessä on yksinkertaisesti kyseinen arvo vaaleanharmaana tekstinä, joka näkyy kyseisen elementin oikeassa alakulmassa. Voit muuttaa näitä yksityiskohtia vastaamaan omia tarpeitasi. Tässä tapauksessa samat säännöt ovat voimassa kaikilla arvoilla, koska näin vältytään tarpeelta määrittää säännöt erikseen kussakin tapauksessa. Voit tosin tarvittaessa esittää eri arvot eri väreillä.
Korostus
[data-doxattribute-manual] {
background-color: rgba(50,205,50,0.5);
}
[data-doxattribute-device] {
background-color: rgba(159,0,255,0.5);
}
*[data-doxattribute-manual][data-doxattribute-device] {
background-image: linear-gradient(to right, rgba(50,205,50,0.5), rgba(159,0,255,0.5));
}Tietyillä attribuuteilla merkittyjen elementtien korostaminen eri tavoin helpottaa niiden tunnistamista muusta sisällöstä. Voit käyttää näitä menetelmiä myös silloin, kun varsinaisia arvoja ei näytetä yllä esittämälläni tavoin.
Tämä korostus voi perustua joko tietynlaisen attribuutin kuten tagikategorian minkä tahansa arvon omaamiseen tai tiettyihin arvoihin kyseisille attribuuteille. Lisäksi voit toteuttaa sen eri tavoin. Minun esimerkkini perustuu tagikategorihin, joille olen antanut erilaiset taustavärit. Käytin osittain läpinäkyvää väriä, koska tällöin väri on syvempi sisäkkäisten tageilla merkittyjen elementtien erottamiseksi vanhemmistaan ilman tarvetta lisämääreille kuten kehyksille. Lisäksi varmistin, että tageja useammasta kategoriasta omaavat elementit ovat tunnistettavissa, koska niillä on jokaisen käytetyn kategorian väri liukuvärjäyksen muodossa.
Muita katselmoinnin apuja
Esittelen alla myös muutaman muun keinon käyttää erikseen sitä varten tehtyjä tyylejä katselmoinnin tukena.
Näkyvät puuttuvat linkit
.topicBodyWrapper a {
display: inline-block;
border: 1px solid black;
min-width: 1em;
min-height: 1em;
}Tällä hetkellä järjestelmämme ei kerro tai muutoin näytä käyttäjille, jos jokin julkaisun linkki ei löydä kohdettaan. Kyseiseen kohtaan ei vain lisätä lainkaan näkyvää osuutta linkille. Tämän säännön avulla lisäät kaikille linkeille väliaikaisesti kehykset ja vähimmäiskoon. Tällöin tyhjät linkit näkyvät tyhjinä kehyslaatikoina.
Tällä tavoin löydät helposti sekä vahingossa mukaan tulleet sisäiset linkit kyseisen julkaisun ulkopuolisiin osuuksiin että ulkoiset linkit, joille et ole lisännyt ankkuritekstiä. Kohteettomat sisäiset linkit voivat syntyä myös niiden kohdentaman osuuden jäädessä vahingossa pois julkaisusta suodatuksen tai päivittämättömän otsikkopuun seurauksena.
Tyhjien elementtien korostaminen
*:empty {
height: 1em;
background-color: rgba(255,0,0,0.5)
}Yleensä suosittelen piilottamaan esimerkiksi tyhjät tekstikappaleet, koska niitä on helppo lisätä sisältöön epähuomiossa. Tämä ei kuitenkaan ole ihanteellinen ratkaisu kaikkiin tyhjiin osuuksiin. Joskus sisältö yksinkertaisesti unohtuu täyttää esimerkiksi taulukon soluihin. Myös tageilla merkityn sisällön suodattaminen voi jättää jälkeen tyhjiä kehystäviä elementtejä, kun tagit on laitettu väärille elementeille.
Tässä ratkaisussa kaikilla tyhjillä elementeillä on punainen taustaväri ja yhtä riviä vastaava vähimmäiskorkeus, joka varmistaa niiden näkymisen.
Kansien ja sisällysluettelon piilotus
.coverPageWrapper, .tocWrapper {
display: none;
}Jos katselmoit sisältöjä toistuvasti ja olet jo tarkistanut kansien ja sisällysluettelon oikeellisuuden, voit säästää merkittävästi aikaa ja vaivaa piilottamalla nämä osuudet. Tällöin et joudu aina ensin selaamaan niiden ohi varsinaisen sisällön katselmoinnin aloittamiseksi.
DoX CMS:ssä sama tulos on saavutettavissa tyylin asetuksissa tarvitsematta käyttää siihen tyylitiedostoa. Tämä on helpompi ratkaisu käyttäjille, jotka eivät halua koskea tyylitiedostoihin. Tyylitiedoston avulla hallinnoitua näkyvyyttä on kuitenkin nopeampaa hallinnoida edestakaisin, jos sääntö ei ole piilotettuna syvälle tyylitiedostoon. Tästä hyötyvä tilanne on esimerkiksi uuden tyylitiedoston kokeileminen sisällön esikatselussa, koska silloin ei ole kyse erillisestä esikatselutyylistä vaan esikatseltavasta tyylistä.
Poikkeavat sivutunnisteet
DoX CMS:ssä sivutunnisteet määritetään tyylikohtaisesti. Tältä osin ei siis ole kyse tyylitiedostojen muokkaamisesta vaan erillisten sivutunnistetiedostojen kirjoittamisesta esikatselutyyleille. Täten en anna suoria esimerkkejä toteutustavoista.
Saat kuitenkin lisättyä katselmoitavien julkaisujen sivutunnisteisiin vain niiden kannalta olennaista lisätietoa kuten
- merkinnän, että kyseessä on esikatseluversio,
- julkaisupäivämäärän,
- julkaisun revisionumeron ja
- julkaisseen käyttäjän käyttäjänimen.
Voit käyttää useimpiin näistä tiedoista DoX CMS:n järjestelmämuuttujia, jotka hakevat nämä arvot niillä merkittyihin kohtiin julkaisuvaiheessa järjestelmän tietokannasta. DoX CMS:n oletuskasaajan PDF-tiedostoille tapauksessa voit käyttää myös tageilla ehdollistettuja arvoja sivutunnisteissa. Tämä ei ole mahdollista DocRaptorin kautta julkaistessasi.
Mukautuva otsikon muotoilu
Normaalisti elementtien otsikoinnin hallinnointi DoX CMS:ssä kohdentuu yhtälailla kaikkiin elementteihin. Kaikilla niillä on jaettu otsikkoformaatti, jota voit muuttaa Asetukset-valikossa. Tätä samaa muotoilua käytetään myös näihin elementteihin kohdennetuissa sisäisissä linkeissä. Voit kuitenkin lisätä tämän formaatin osuuksien ympärille lisätunnisteita, joihin voit puolestaan kytkeä niiden näkyvyyttä tilannekohtaisesti hallinnoivia sääntöjä. Tällä tavoin saat näytettyä eri muotoilun eri tilanteissa.
Tällä tavoin voit joko muuttaa käytettyä muotoilua eri elementtien välillä tai erottaa toisistaan otsikossa käytetyn muotoilun ja samaan elementtiin kohdennetuissa linkeissä käytetyn muotoilun.
Eri otsikot eri elementeille
Voit käyttää eri tavoin muotoiltuja otsikoita eri elementeille. Normaalisti kolme pääerottelua perustuvat otsikkoformaatin muuttujan {{series}} mahdollisiin arvoihin, jotka vastaavat muuttujia
- {{figure}}
- {{table}} ja
- {{default-series}}.
Tällöin kaikki muut osuudet pysyvät samoina näitä muuttujia vastaavien käyttötilanteiden välillä.
Elementtien otsikointiin käytetty kenttä kuitenkin antaa kirjoittaa sen sisään HTML-muotoista rakenteista sisältöä eri tunnisteilla. Voit antaa tällä tavoin lisätyille erotteluille tunnisteita, joiden perusteella voit hallinnoida kyseisten osuuksien tilannekohtaista näkyvyyttä. Jos et halua tehdä monimutkaisia erotteluita esimerkiksi tageihin perustuvan suodatuksen osalta täysin tämän kentän sisällä, voit myös lisätä nämä lisäerottelut sen sisällä käytettyihin, sinun hallinnoimiisi muuttujiin.
Otsikkokentän muotoilu
Koska voit kirjoittaa HTML-tunnisteita suoraan otsikkokenttään, voit lisätä sinne elementtejä ja tunnisteita. Koska kirjoitat nämä arvot itse, voit käyttää järjestelmän muualla käyttämien tunnisteiden lisäksi myös omavalintaisia luokitteluitasi.
Elementit otsikoissa
Ensisijaisesti voit lisätä otsikkoon joko kuvia img-elementeillä tai erotettuja osuuksia span-elementeillä.
Kuvaelementtien muotoilu otsikossa on seuraavanlainen:
<img class="" src="" style=""/>Olennaista on lisätä loppuun kyseinen vinoviiva. Palatessasi Asetukset-valikkoon järjestelmä saattaa poistaa sen, missä tapauksessa joudut lisäämään sen takaisin. Tästä syystä on helpompaa käyttää kuvien lisäämiseen muuttujia. Tunnisteista ainoastaan src vaatii jonkin arvon. Voit kuitenkin tarvittaessa lisätä kyseiselle kuvalle myös luokkatunnisteita tai sisäänrakennetun tyylin. Sen tyylin hallinnointi onnistuu kuitenkin myös tyylitiedoston kautta. Näiden tunnisteiden lisäksi voit antaa sille DoX CMS:n vakiotunnisteita kuten elementtiluokkia tai tageja.
Span-elementit eivät vaadi erityistä muotoilua. Lisää niille avaavat ja sulkevat tunnisteet, ja lisää tarvitsemasi lisätunnisteet avaavan osuuden sulkeiden sisään. Niiden avulla voit merkitä osuudet, joiden haluat tulevan näytetyiksi vain tietyissä asiayhteyksissä. Tämä näkyvyyden hallinnointi tapahtuu tyylitiedoston kautta. Käytännössä tulokset näyttävät tältä:
<span class="" ></span>Tällä tavoin voit siis esimerkiksi käyttää erilaista numerointiformaattia erilaisille elementeille. Vaikka taulukoiden ja kuvien numerointi olisi jatkuva halki koko julkaisun, voit esimerkiksi tehdä loppuviitteiden numeroinnista osuuskohtaista. Tämä perustuu span-elementtien käyttämiseen numeroinnin tavan määrittävien osuuksien kuten otsikkoformaatin muuttujien ympärillä. Alempana on esimerkki tästä näiden osuuksien näkyvyyden hallinnointia helpottavilla tunnisteilla.
Tunnisteet otsikoissa
Tunnisteiden avulla saat kohdennettua tyylitiedoston sääntöjä tilannekohtaisesti eri osuuksiin elementtien otsikoiden formaateissa. Suosittelen käyttämään tähän itse lisäämiäsi luokkia. Tällöin kohdentaminen tyylitiedostossa toimii alla esittämälläni tavoin. Kyseinen erimerkki erottaa toisistaan kuvien, taulukoiden, ja tässä tapauksessa pääosioiden loppuviitteiden otsikointiformaatin. Tässä tapauksessa yksinkertaistavana oletuksena on, että et käytä linkkejä muihin elementteihin kuten listojen kohtiin. Tarvittaessa voit kuitenkin säätää ratkaisua tavalla, joka sallisi sinun tehdä myös niin.
Tässä tapauksessa tämä on käyttämäni otsikkoformaatin muotoilu Asetukset-valikossa:
<span class="show_series">{{Series}} </span><span class="fig_num">{{TargetFirstLevelTopicNumber}}.{{FirstLevelNumber}</span><span class="table_num">{{Number}}</span><span class="endnote_num">{{FirstLevelNumber}}</span>Näkyvyyden hallinnointi kyseiselle otsikkoformaatille tapahtuu seuraavanlaisella lisäyksellä tyylitiedostoon:
.dita-fig > .dita-title > .anchor-title > span:not(.show_series):not(.fig_num),
.dita-table > .dita-title > .anchor-title > span:not(.show_series):not(.table_num),
.anchor-title:has(+ .dita-fn) > span:not(.endnote_num) {
display: none;
}Kyseessä on kolme omalle rivilleen erotettua valitsijaa, joista jokaiseen liittyy sama sääntö. Kukin niistä piilottaa yllä esitetystä otsikkoformaatista osuudet, jotka on tarkoitettu muiden elementtien käyttöön. Vaikka käyttäisit itse erilaisia tunnisteita, näiden valitsijoiden sisältämä malli pätee: Kuvakehyksien ja taulukoiden tapauksessa voit kohdentaa säännöt kyseessä olevien kehyksien sisällä välittömästi oleviin otsikoihin ja sitten niiden sisällä oleviin tarkempiin osuuksiin. Muussa tapauksessa voit kohdentaa säännöt .anchor-title-osuuksiin, joita seuraavat kyseisenlaiset otsikoidut elementit, ja sitten niiden sisäisiin tarkempiin osuuksiin. Tämä vaihtoehto toimii myös kuvakehyksiin ja taulukoihin, joiden otsikkokentät on jätetty tyhjiksi.
Tämä toteutus vaikuttaa vain elementtien otsikointiin. Lisäksi näihin elementteihin kohdennetuille linkeille täytyy lisätä jokin tunnistamiskeino, joka varmistaa muotoilun yhtenevyyden. Voit siis käyttää tätä vaihtoehtoa sellaisenaan, jos et koskaan linkitä elementteihin.
Muuttujien käyttäminen
Elementtien otsikoissa voi käyttää muitakin muuttujia kuin tämän kentän käyttöön tarkoitettuja järjestelmämuuttujia. Lisäksi voit lisätä enemmän rakennetta myös oletusarvoisesti käytettyjen {{series}}-muuttujan julkaisussa korvaavien muuttujien kuten {{default-series}} sisällä. Huomioi kuitenkin, että et voi käyttää ainoastaan tämän kentän käyttöön tarkoitettuja järjestelmämuuttujia kuten {{series}} muiden muuttujien sisällä, vaikka käyttäisit sitten näitä muuttujia osana elementtien otsikointia. Järjestelmä ei hae arvoja näille järjestelmämuuttujille, jos lisäät ne tällä tavoin.
Muuttujat ovat esimerkiksi helpompi keino lisätä näihin otsikoihin kuvia. Tällöin sinun ei tarvitse kirjoittaa kuvan osuutta käsin osaksi otsikkoformaattia, ja et joudu myöskään huolehtimaan yllä mainitsemastani katoavasta vinoviivasta. Jos haluat hallinnoida kyseisen osuuden näkyvyyttä sille annettujen tunnisteiden perusteella, voit käyttää kuvaan tai jopa itse muuttujan fraasielementtiin elementtiluokkaa. Koska elementtiluokkien arvoja ei verrata listaan niistä, voit myös muokata näitä arvoja suoraan muuttujan tekstieditorin Koodi-näkymässä sen sijaan, että lisäisit ne erikseen järjestelmään.
Luultavasti tärkein keino käyttää muuttujia on kuitenkin {{default-series}}-muuttujan eri arvojen säätäminen sen sisällä. DoX CMS käyttää tätä muuttujaa otsikkoformaatin {{series}}-muuttujan arvona aina, kun sisäisen linkin kohteena on jokin muu elementti kuin otsikkosisältö, osio, täysi taulukko, tai kuvakehys. Jos tarvitset linkkejä useampaan erilaiseen elementtiin, voi tälle muuttujalle olla vaikeaa keksiä sopivaa sanaa. Sellaisen onnistuneesti kääntäminen lienee sitäkin vaikeampaa.
Voit lisätä {{default-series}}-muuttujan sisään erilliset arvot sen eri käyttöpaikoille. Oletusarvoisesti tälle vaihtoehdolle on kuitenkin vain yksi laskuri sen sijaan, että sen eri käyttöpaikoista pidettäisiin kirjaa erillisillä laskureilla. Tästä syystä suosittelen tekemään näistä arvoista laskurittomia piilottamalla kaikki laskurit näissä tilanteissa yllä esittelemälläni tavoin. Suosittelen tällöin myös piilottamaan järjestelmän linkkien kohteille lisäämät otsikkokentät. Tässä tapauksessa linkit siis vain esimerkiksi nimeävät kohteensa tyypin kuten kirjoittaessasi ’Tarkista tämä lista varmistaaksesi, mitä työkaluja tarvitset.’ Kursivoitu osuus lainauksessa vastaisi lisättyä tekstiä linkille, joka on kohdennettu johonkin listaan. Huomioi tällaisten osuuksien käännettävyys ennen niiden käyttöä, koska muuttujan arvo ei ole sovitettavissa kieliopillisesti eri käyttöyhteyksiin. Jos tarkempi viittaus nimelliseen otsikkoon on tärkeää esimerkiksi siksi, että kyseinen opas on tarkoitus myös tulostaa, voit kohdentaa linkit itse listan sijaan sitä ympäröivään osioelementtiin tai otsikkosisältöön.
Käytännössä kyse on samasta menetelmästä kuin yllä esittelemäni, mutta tyylitiedoston valitsijoihin on syytä lisätä yksi syvennystaso muuttujan itsensä rajojen merkiksi. Et myöskään voi käyttää itse lisäämiäsi luokkia muuttujan sisäisinä tunnisteina. Kuten mainitsin yllä, lähin vastine ovat elementtiluokat. Käyn niiden tällaista käyttöä tarkemmin läpi täällä. Näihin elementteihin kohdennettujen linkkien muotoilu vaatii alla esittelemiäni linkkien sovittamisen keinoja.
Linkit omalla muotoilullaan
Kuten olen viitannut yllä muutamaan otteeseen, pelkkä otsikon itsensä uudelleenmuotoilu ei tarkoita, että kyseiseen elementtiin kohdennetut linkit perivät kyseisen muotoilun. Kaikki linkit käyttävät samaa Asetukset-valikon arvoa kuin varsinaiset otsikot. Sen osuuksien näkymisen hallinnointi siis tapahtuu vastaavalla tavoin. Suurin ongelma tältä osin on soveltuvien tunnisteiden löytäminen vaadittuihin erotteluihin, koska linkkien käyttöpaikat eivät ole vastaavalla tavoin ainutkertaisia kuin kunkinlaisen elementin otsikoiden.
Kohteiden tunnistaminen
Linkkien muotoilu tilannekohtaisesti sovitettujen elementtien otsikoiden mukaiseksi vaatii niiltä kohteidensa mukaisia tunnisteita. Linkkien oma tältä osin hallinnoitavissa oleva arvo on niiden href-attribuutti. Kyse on niiden kohteen määrittämisestä. Voit siis muotoilla kyseisten kohteiden ID-arvot tavalla, joka sallii koordinoida linkkien asettelun niiden kohteiden tyyppien kanssa. Vaihtoehtoisesti voit käyttää kaikkiin linkkeihin erikseen elementtiluokkia, jotka kertovat, millainen elementti niiden kohde on. Olen nähnyt näin tehtävän korvaavien laskurien tukena, mutta se lisää jokaisen tällaisen linkin lisäämiseen ylimääräisen työvaiheen.
Tässä tapauksessa siis lisäisit jokaisen ID-arvollisen elementin ID-arvon alkuun tai loppuun vakioidun tunnisteen, joka kertaa, millaisesta elementistä on kyse. Esimerkiksi taulukon ID-arvo voisi tällöin olla ’table_01’ tai ’table_techsheet’. Suosittelen jonkinlaista erottajaa kuten alaviivaa tälle lisätunnisteelle, jotta vahingossakaan ei voi syntyä ID-arvoja, joissa voimaan jää väärä sääntö, kuten esimerkiksi ’li’ ja ’list’ välillä voisi käydä muutoin. Ota tältä osin huomioon, että sisäiset viitteet alkavat aina otsikkosisällön ID-arvolla ja että toistuvien ID-arvojen sekä monikielisten julkaisujen tapauksessa järjestelmä voi lisätä julkaisuvaiheessa kohteiden ID-arvojen loppuun lisätunnisteita yksiselitteisyyden varmistamiseksi.
Kuten käyn läpi täällä, voit sitoa tyylejä eri attribuuttien arvoihin tai osuuksiin niiden arvoista. Tästä syystä kohteen tyypin määrittävä osuus sen ID-arvossa, joka siirtyy linkin href-arvoon, tarjoaa yksiselitteisen perustan tyylille, joka hallinnoi linkissä näytettäviä otsikkoformaatin osuuksia kohteen tyypin huomioivalla tavalla. Oletusarvoisesti kyseinen otsikko ja linkki kyseiseen elementtiin ovat keskenään vastaavia, mutta näin ei ole pakko olla. Tarvittaessa voit myös näyttää joitakin osuuksia vain yhdessä ja piilottaa ne toisessa.
Tämä esimerkki on käyttämäni {{default-series}}-muuttujan sisältö. Tässä esimerkissä mukana ovat vain listat ja tekstikappaleet. Käytän kullekin arvolle omaa muuttujaansa niiden itsenäisen hallinnoinnin helpottamiseksi.
<ph doxelementclass="default-series"><ph doxelementclass="DS_list">{{list}}</ph><ph doxelementclass="DS_p">{{paragraph}}</ph></ph>Tämä on vastaava lisäys tyylitiedostoon, jonka perusteella järjestelmä näyttää vain oikean osuuden kussakin linkissä. Käyttämäni ehto on, että linkissä missä tahansa kohtaa alaviivalla alkava osuus, joka kertoo elementin tyypin. Tämä on riskialtista, jos vastaava arvo voi tulla mukaan ID-arvoihin myös muissa tapauksissa. Tämä vaihtoehto tosin välttää ongelmat liittyen esimerkiksi monikielisten julkaisujen lisäämiin kielikoodeihin. Loppuosa valitsijoista vain tarkistaa, millä linkkien sisäisillä osuuksilla on elementtiluokka, ja tuleeko kyseisellä elementtiluokalla merkityt osuudet jättää piilottamatta. Suosittelen esimerkkien ulkopuolella käytettävän kyseisiin tilanteisiin sovitettuja osuuksia tältä osin.
.doxInnerReference[href*="_list"] [doxelementclass]:not([doxelementclass="default-series"]):not([doxelementclass="DS_list"]),
.doxInnerReference[href*="_p"] [doxelementclass]:not([doxelementclass="default-series"]):not([doxelementclass="DS_p"]) {
display: none !important;
}Linkkien muotoilu
Yllä antamassani esimerkissä yksinkertaisesti piilotin ylimääräiset osuudet linkkien sisällä vastaavuuden varmistamiseksi varsinaisten otsikoiden kanssa. Tällöin sekä otsikointi että linkki käyttävät samoja asettelun sääntöjä. Linkkien ei kuitenkaan tarvitse vastata varsinaisia otsikoita. Niiden muotoilu voi poiketa niiden kohteista joko näyttämällä enemmän tai näyttämällä vähemmän kuin varsinaiset otsikot. Lisäksi voit tietenkin kytkeä erilaisten kohteiden linkkeihin ne toisistaan erottavia muita sääntöjä kuten eri värejä.
Lisäykset linkkeihin
Joskus linkit tarvitsevat enemmän sisältöä kuin varsinaiset otsikot. Kun esimerkiksi pyysin palautetta suunnittelemaani uudistukseen DoX CMS:n oppaaseen, nousi esille sanan ’valikko’ (menu) tarpeettomuus niitä vastaavien osioelementtien otsikoissa. Syy tälle lisäykselle on kuitenkin, kuinka tarvitsen tämän tarkennuksen linkkeihin erottaakseni niiden osalta ohjeen poistaa otsikkosisältöjä ja Poista otsikkosisältö -valikon. Koska kyseinen täsmennys on tarpeen vain linkeissä, päädyin siis lisäämään sen vain linkkeihin tyylitiedoston avulla.
Tässä tapauksessa en käytä otsikkoformaatin osuuksia, jotka näytetään vain yhdessä tai toisessa sijainnissa. Voit tarvittaessa kuitenkin tehdä niin. Lisäksi perustan tämän ratkaisun lisäerotteluun aiemmin keskustelemieni lisäksi: kyse ei ole kaikista osioelementeistä. Koska perusta on edelleen kuitenkin kohteiden ID-arvo, voin vapaasti kirjoittaa siihen haluamani tarkemmat erottelut.
Alla esittämäni esimerkki siis lisää linkkeihin, joiden kohde sisältää osuuden ’_menu’, päätteen ’menu’ englanninkielisissä julkaisuissa. Vastaavat säännöt täytyy lisätä erikseen kullekin muulle käytetylle kielelle. Käyttämäni muotoilu huomioi tämän erottamalla asettelua koskevat säännöt sekä sisältöä koskevat säännöt. Tämä muotoilu ei pidä linkkien alleviivausta yhtenevänä, koska en käytä alleviivattuja linkkejä. Halutessasi voit kuitenkin tehdä niin poistamalla vasemman sisämarginaalin ja käyttämällä kaikkien arvojen alussa välilyöntiä.
[lang="en"] .doxInnerReference[href*="_menu"]::after {content: "menu";}
.doxInnerReference::after {
display: inline;
padding-left: 1ch;
}Yksinkertaistetut linkit
Vastaavasti joskus et halua linkkeihin kaikkea samaa sisältöä kuin niitä vastaaviin otsikoihin. Esimerkki tästä olisivat otsikkoihin lisätyt kuvat, joita en halua toistaa linkeissä. Tällainen kuva voi esimerkiksi ohjata lukijan huomion (joidenkin) taulukoiden alkuihin tämän ollessa erityisen tärkeää ja muiden huomion ohjaamisen keinojen ollessa kehnompia kyseisessä tilanteessa syystä tai toisesta. Jos kyseinen kuva on vakioitu, se kannattaa lisätä tyylitiedoston kautta pseudoelementtinä. Joissakin tapauksissa kyseistä pseudoelementtiä tarvitaan kuitenkin muuhun käyttöön. Tilannekohtaisesti vaihtuva kuva on luultavasti myös helpointa hallinnoida yllä esittämälläni keinolla käyttää muuttujia osana elementtien otsikoinnin formaattia.
En erikseen havainnollista samaa tilannekohtaiseen piilottamiseen perustuvaa mallia kuin aiemmissa osioissa. Huomioi kuitenkin vastaavissa tilanteissa, että on edelleen parempi käyttää tunnisteita kuin esimerkiksi kaikkia linkkien sisäisiin kuviin kohdistettuja valitsijoita. Linkit voi tarvittaessa sitoa kuviin esimerkiksi sosiaalisen median osalta. Vaikka ette siis tekisi niin vielä toistaiseksi, on teidän parempi olla rakentamatta järjestelmään ennakkoon ansoja, jotka täytyy purkaa, jos koskaan päädytte tarvitsemaan tällaisia uusia ratkaisuja.
Linkkien erottelu
Kaikki linkkien erottelut niiden kohteiden perusteella ovat sovellettavissa myös näiden linkkien esittämistapaan ylipäätään. Voit siis tarvittaessa esimerkiksi tehdä linkeistä erilaisiin elementteihin erivärisiä. Tämä voi olla häiritsevää joissakin tapauksissa, mutta se lisää tarvitunlaisten linkkien nopeaa paikantamista, jos käytät niitä usein ja lähekkäin ja jos julkaisun käyttäjät luultavasti selaavat näkymiä sisällön järjestyksessä lukemisen sijaan.
Pidä tältä osin mielessä, kuinka voit kytkeä nämä erottelut myös linkkielementtien muihin attribuutteihin. Tällöin kyseiset erottelut eivät kohdistu erotteluihin erilaisten kohde-elementtien välilä, mutta voit erottaa esimerkiksi sisäiset ja ulkoiset linkit toisistaan scope-arvojen avulla.
Yhteenveto
CSS ei ole ainoastaan valmiiden sisältöjen asettelun keino. Voit käyttää varsinkin piilottamista ja monimutkaisempia valitsijoita järjestelmän toiminnallisuuden laajentamiseen. Vastaavia ohjeita CSS-pohjaisiin temppuihin animaatioiden, muuttuvien SVG-kuvien ja niin edelleen käyttöön löytyy pitkin verkkoa.
DoX CMS:ssä tällaiset järjestelmän toiminnallisuuden laajentamiset kattavat esikatseluun tarkoitetut tyylit, jotka esittävät lisätietoja sisällöstä sekä korostavat sitä eri tavoin, ja eri elementtien otsikoinnin ja sitä vastaavien linkkien tilannekohtaisen sovittamisen. Lisäksi voit myös esimerkiksi lisätä järjestelmään muuttujia, joiden arvot muuttuvat niiden sijoituspaikkojen mukaan saman julkaisun sisällä, kuten kerroin täällä. Vastaavan tuloksen voi saavuttaa myös muilla tietämälläni keinoin. Kysy, jos haluat tietää lisää.
Esikatselun apuna voit esimerkiksi joko näyttää muiden elementtien kuin kuvien avainattribuuttien arvot tai korostaa elementit, joilla on attribuutteja kuten tiettyjen kategorioiden tageja. Tältä osin toteutuksesi täytyy kuitenkin huomioida pseudoelementtien määrän rajoitteet, jos tarvitset niitä myös muihin osiin asettelua. Lisäksi monimutkaisemmat tagien yhdistelmät monimutkaistavat myös niiden esittämisen keinoja valtavasti, koska tyylitiedoston valitsijoiden täytyy huomioida kaikki tarvitsemasi yhdistelmät erikseen.
Lisäksi voit tukea esikatselua lisäämällä erikseen sen käyttöön tarkoitettuun tyyliin korostuksia myös kohteettomille linkeille ja muille tyhjiksi jääneille osuuksille, piilottamalla kannen ja sisällysluettelon tai lisäämällä sivutunnisteisiin esikatseluun liittyviä lisätietoja. Tällä tavoin voit esimerkiksi pitää kirjaa, mikä julkaisua edeltävä versio kulloinkin on kyseessä.
Voit myös sovittaa elementtien otsikoinnin muotoilun tilannekohtaisesti, vaikka kaikki elementit muutoin käyttävät saman kentän kautta hallinnoimaasi formaattia. Tämä vaatii vain, että kirjoitat tähän kenttään HTML-sulkeet sekä tarvitsemasi muut tunnisteet näille osuuksille ja että lisäät tyylitiedostoon näitä merkintöjä vastaavat säännöt eri asiayhteyksiin. Tällä tavoin saat käyttöösi esimerkiksi täytetyt viitteet ilman numerointia elementeille, jotka muutoin käyttäisivät jaettua numerointia. Linkkien vastaavuus vaatii tunnisteita, joihin voit perustaa niiden muotoilun. Jos et halua käyttää tähän elementtiluokkia, voit sen sijaan käyttää kohde-elementtien ID-arvoissa vakioituja osuuksia, jotka periytyvät järjestelmällisesti niihin kohdennettujen linkkien href-arvoille.
Eri tavoin otsikoitujen elementtien ja vastaavalla tavoin muotoiltujen linkkien niihin lisäksi voit myös mukauttaa linkkien elementteihin muotoilua. Sen ei tarvitse vastata kyseisten elementtien otsikoiden muotoilua. Voit lisätä osaan linkeistä lisäosuuksia, poistaa niistä osia otsikoista kuten kuva-apuja tai esittää eri kohteisiin suunnatut linkit toisistaan poikkeavin tavoin.