20. marraskuu 2009, 15:56

Pientä CSS-säätöä

Meninkin puhumaan siitä TextPatternista tässä yksi päivä, ja tilasin jo Amazonista sen TextPattern Solutions -teoksen, josta olen puhunut vielä aiemmin. Ei kestänyt pitkään, kun jo mieli tekee takaisin eheään kokonaisuuteen. Kuitenkin on vielä harkinnan alla, jaksanko muutosta tehdäkään.

Päivän puheenaihe liittyykin CSS:ään vaihteeksi. Ajattelin, että hieman voisi yleisilmettä uudistella täällä, tai sitten siellä uudessa blogissa. Ottaisin käyttöön järkeviä lisäyksiä, kuten muualla nähdyt pre-lohkojen rajaamiset ja sen sellaiset. Rajaus on hyvin simppeli:

clip: auto;
overflow-x: auto; /* jos rajoitetun divin sisällä */

Riittää vallan hyvin siihen. Sitten esimerkiksi vasempaan reunaan lisämarginaalia ja -paddinkia, ehkä joku border-left -viiva siihen niin nätti tulee. $$\LaTeX$$-kikkailuissa paljolti käytetyt em- ja ex-tagit, jotka toki CSS:ssäkin kovassa käytössä esiintyvät. Vaan ajattelin nokkelana nyt, että leipätekstin voi rajata nätisti sellaiseen diviin, jonka leveys on esimerkiksi 80ex. Kuitenkin, sekä Firefox että Opera tuntuvat epäonnistuvan sillä tavalla määrättyjen divien leventämisessä. Kokeilumielessä lisäsin sellaiseen diviin sitten 80 x-merkkiä, ja noin puolella zoomiasetuksista näkymä oli oikein, puolella ei. Firefox saattoi välillä pitää diviä leveämpänä, Opera teki sekä ylilevennystä että -kavennusta. Huonompi homma.

Löysin myös erään mielenkiintoisen CSS-tagin, joka kuuluu IE 5:n standardiin, ja toimii heikosti eri selaimissa: esimerkiksi kettu tukee, Opera ei. Tämä auttaa esimerkiksi tilanteessa, jossa on div tietynleveyksinen ja siinä on pitkä yhdyssana:

word-wrap: break-word;

En ajatellut kylläkään ottaa käyttöön; ovat sen verran harvinaisia pitkät sanat, että ne harvat tapaukset voi manuaalisesti tavuttaa. CSS:hän voisi järjestyttää sellaisiakin palveluita, vaan tietty kielien kirjo asettaa toteutukselle haasteita. Tästä voitte itse kokeilla ja ehkäpä kommentoida vaihtoehtoisia ratkaisumalleja sille, että haluan leipätekstin siististi kapeaan tilaan helpon luettavuuden parantamiseksi.

Tageja: , ,

---
---

---

Aiheen vierestä