Reizēm browsējot pa blogiem/lapām nākas šausmināties “nu kāpēc tā ? nu kāpēc
tur tā atstarpe nevarētu būt lielāka, vai arī burtu krāsa tumšāka ?”. Ja problēma
ir teksta izmērā, tad modernie browsero šo problēmu atrisina ar iebūvētu
iespēju mainīt jebkurai lapai teksta izmēru. (Ja neskaita IE6, kas neļauj
resaizot teksta izmēru, ja tie norādīti pikseļos.)

Bet ko darīt, ja problēma nav saistīta ar fonta izmēru ? Rakstam paši savu CSS :).
Nu labi - ne visu CSS, bet tikai nelielu daļiņu.


Firefox un arī citos browseros ir tāda lieta kā user-styles. Iekš Firefox tas
ir globāls CSS fails userContent.css, kas tiek piemērots jebkurai
atvērtai lapai. Tas atrodas iekš %AppData%\Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome\,
kur AppData parasti ir C:\Document And Settings\Tavs lietotājvārds\Application Data\.
Pēc noklusējuma šis fails neeksistē, bet ir lietotājam jāizveido pašam jau
pieminētajā direktorijā.

Piemērs, kā varētu izmantot šo iespēju. Mēs vēlamies, lai visās lapās, kuras
apmeklējam, linki vienmēr ir zilā krāsā un pasvītroti:

a {
    text-decoration: underline !important;
    color: blue !important;
}

Šajā piemērā redzam, kas padara šo lietu iespējamu - important atslēgvārds.
Tas nozīmē to, ka attiecīgais propertijas tiks piemērots 100% vienmēr. Ja
mēs to nenorādītu, tad mūsu propertijiem nedarbotos ar lapām, kur linki
iekš css, piemēram, būtu noformēti šādi:

body a {
    text-decoration: none;
    color: black;
}

Kā zināms, tad pēdējais vārds vienmēr pieder CSS definīcijām, kas ir specifiskākas
jeb - kas tiešāk norāda mērķi. Piemēram, ja mums ir CSS selektors
table tr td {} un pēc tam nāk vienkārši td {}, tad no
tiem propertijiem, kas sakrīt, uzvarēs tie, kas atrodas pirmajā blokā
table tr td {}. Šī CSS īpašība saucas
CSS Specifity.

Tāpat arī important piespiedīs pārakstīt stilus, kas ir definēti iekš
html <style> tagiem vai inline stiliem
(<element style="..."></element>).

Par important runājot - bieži izstrādātāji šo atslēgvārdu lieto savos
CSS stilos, bet tas ir nepareizi. important ir paredzēts tieši tikai user stiliem.
Ja nu nekādīgi nevari iztikt savos stilos bez important, tad tas
visticamāk nozīmē, ka kaut kas nav kārtībā ar pašu CSS loģiku. Normāli
jebkuru šāda veida problēmu vajadzētu varēt atrisināt ar jau pieminēto
CSS specifiskuma fīču.

Iespējams, ka lielai daļai šāda iespēja definēt savus globālos stilus pārāk
vajadzīga neliekas, bet daudz labrātāk gribētu pārakstīt stilus konkrētām lapām.
Firefox browseris šādu iespēju piedāvā. Te talkā nāk
@-moz-document domain(example.com) {...} sintakse. Piemēram, mūsu pašu Latvijas
populārais blogs http://www.laacz.lv/.
Problēma šajā bloga CSS formatējumā ir tāda (manā skatijumā), ka nav atstarpes
starp apmeklētāju komentāru paragrāfiem (<p> elementiem). Lai šo lietu
labotu, ieliekam userContent.css failā šādu CSS:

@-moz-document domain(laacz.lv) {

    ol#commentslist li dl dd p {
        margin: 10pt !important;
    }

}

domain() funkcija piemēros stilu visam, kas atrodas zem laacz.lv
domēna un tā iespējamiem subdomēniem. Vēl bez domain() funkcijas ir
pieejama url-prefix() funkcija, kas piemēros stilu visiem saitiem, kas sākas ar
norādīto URL, kā arī url() funkcija, kas piemēros stilu tikai konkrētajai adresei.

Lai padarītu šo iespēju vēl vieglāk lietojamu, Firefox pārlūkam ir izveidots
speciāls paplašinājums Stylish.
Tas ērti ļauj izveidot stilu konkrētai lapai pa tiešo pārlukā, nerakņājoties
pa Application Data direktoriju. Tāpat arī tas ļauj pievienot/rediģēt stilus
konkrētai lapām tā, ka citu lapu stili nemaisīsies pa kājām, jo Stylish stilus
glabā pats savā xml failā (%AppData%\Mozilla\Firefox\Profiles\xxxxxxxx.default\stylish.rdf),
kur katra domēna CSS definīcijas ir nodalītas atsevišķi.

Tāpat vēl var būt noderīgi tas, ka priekš Stylish jau ir atrodami dažādi
stili priekš dažādām lapām - http://userstyles.org/. Piemēram,
http://userstyles.org/style/search/google.
Ja jau esi uzinstalējis Stylish paplašinājumu, tad pievienot kādu no šiem
stiliem ir dažu klikšķu darbs.

Resursi: