keskiviikko 17. elokuuta 2016

Stylus - muokkaa muiden sivustoja omalla tyylilläsi


Lisäys 31.7.18  Tähän kirjoitukseen on vaihdettu alunperin esitelty Stylish ohjelma Stylusiin, koska omistajan vaihdosten yms. jälkeen Stylish syyllistyi käyttäjien koko selaushistorian lähettämiseen etäpalvelimelleen.

Lue lisää tästä: Stylus korvaa katalaksi muuttuneen Stylishin.


Olen tä­tä mai­nio­ta se­lain­laa­jen­nus­ta si­vun­nut jois­sain kir­joi­tuk­sis­sa­ni. Ajat­te­lin et­tä tä­mä laa­jen­nus täy­tyy mai­ni­ta ihan kun­nol­la tääl­lä, jo­ten sii­tä tä­mä pie­ni vink­ki Stylus-laa­jen­nuk­ses­ta.

Stylus on WWW-se­lai­mil­le teh­ty laa­jen­nus, jol­la on tar­koi­tus muut­taa eri si­vus­to­jen ul­ko­nä­köä, jos­kus jo­pa toi­min­taa. Tä­mä ta­pah­tuu yk­sin­ker­tai­ses­ti si­ten, et­tä Stylus muut­taa si­vus­toa si­tä var­ten luo­dul­la CSS-tyy­li­tie­dos­tol­la. CSS-tyy­lit ovat tär­kein ta­pa mää­ri­tel­lä, mil­tä si­vus­to näyt­tää. Omal­la ko­neel­la ole­vat tyy­li­mää­ri­tyk­set ohit­ta­vat tar­vit­taes­sa si­vus­ton omat tyy­lit, ja näin muu­tos si­vul­la saa­daan ai­kaan. Li­sää tie­toa CSS:stä löy­dät Googlen haul­la.

Stylus on sii­tä hie­no laa­jen­nus, et­tä sil­lä on laa­ja tu­ki eri tie­to­ko­nees­sa käy­tet­tä­vil­le se­lai­mil­le, mut­ta myös mo­bii­li­se­lai­mil­le jot­ka vain tu­ke­vat laa­jen­nuk­sia. Esim. Androidin Firefox.

Vaikka CSS on suhteel­lisen help­poa oppia, ja on varsin­kin omia koti­sivuja tms. teke­välle perus­asiaa, sinun ei tarvit­se osata CSS:sää ollen­kaan, voidak­sesi käyt­tää Stylus-laajen­nusta. Userstyles.org -sivus­to sisäl­tää yli 74 000 val­mis­ta tyy­liä eri sivus­toille, yli 7 000 glo­baa­lia, kaik­kial­la vai­kut­ta­vaa tyyli­tiedos­toa, sekä vielä yli 5 000 Mozilla ohjel­mien (esim. Firefox) ulko­asuun vaikut­tavia tyyli­tiedos­toja (näis­tä minul­la ei ole mitään koke­musta). Näistä löydät monen­laista. Ja CSS:ää osaavat voivat kir­joit­taa tyyle­jä itse lisää.

CSS-tyyleillä sivus­ton muokkaa­misesta on vielä korostet­tava, että periaat­teessa ja yleensä käytän­nössä Stylusin käyt­tö ei koneen resurs­seja, onhan kysees­sä laajasti käytetty tapa määri­tellä miltä sivustot näyt­tävät, eli CSS-tyy­lit ovat jo nyt käy­tös­sä kävit­pä mil­lä sivul­la tahan­sa.


Mitä iloa sitten tyylitiedoston muokkaamisesta on?

Minä esimerkiksi en pitänyt siitä, miten Google pilasi haku­tulos­ten sivun vuoden 2012 lopussa. Googlehan siirsi hakuun vaikut­tavan sivu­­pal­kin helposti valitta­vat asetuk­set, monen mut­kan taak­se ylä­­palk­­kiin. Poruk­ka on aihees­takin ollut tyyty­mätön muutok­seen. Toisaalta, jos parem­masta ei tiedä, ei osaa parem­paa vaatia­kaan. Niinpä on käyttä­jiä jotka eivät edes tiedä, että Googlen hakua voi tarken­taa monella eri tavalla.

Olen kirjoit­tanut kuinka Stylus-laa­jen­nuk­sen ja sopi­van tyyli­tiedos­ton avulla Googlen älyttö­män ratkai­sun sai peruttua ja palau­tet­tua Googlen sivu­palkin takai­sin. Tässä siis yksi esimerk­ki hyödyis­tä.



(Painike vaatii JavaSriptin toimiakseen)


Samalla tavalla, vain muok­kaamal­la omalla koneel­lani CSS-tyyle­jä, voin lukea esi­mer­kik­si He­sa­rin uuti­sia mie­lin mää­rin vaik­ka heil­lä on nor­maa­lis­ti ra­joi­tet­tu 5 uuti­seen päi­väs­sä käyt­tä­jil­le, jot­ka ei­vät He­sa­ria ti­laa. Tämä siis vain CSS-tyy­li­tie­dos­tol­la! Enpä usko että tapah­tuu mitään rikol­lista, sillä jokai­nen saa kaiketi omalla koneel­laan muut­taa sivus­ton tyyle­jä?

Löydät varmaan monia hyö­dyl­lisiä tai muuten vain mielei­siä tyyli­tiedos­toja Userstyles.org -si­vus­tol­ta. Ja CSS:ää osaa­vil­le vain taidot ja CSS:n keinot ovat rajana.


Pieni vinkki muokkaukseen: Stylebot

On olemassa toinen mainio laajen­nus, jolla on todella helppo muokata sivusto­ja mielei­seksi. Olen kir­joit­ta­nut siitä aiem­min täs­sä ohjees­sa: Stylebot - hie­­no­­sää­­dä suo­­sik­­ki­­si­­vus­­to­­ja­­si.

StyleBot on helppo käyt­tää, kuten em. oh­jees­ta sel­viää. Ja itse asiassa, se on tärkeäpi ohjelma itsel­leni kuin Stylus. Minulla onkin melkoi­nen määrä muok­kauk­sia eri si­vus­toil­le (tä­tä kir­joit­taes­sa 64 eri sivus­toa), koska StyleBot on niin helppo käyt­tää. Ja monis­sa si­vus­tois­sa on mi­nua häi­rit­se­viä piir­tei­tä, joten miksen kor­jai­si ne kun­toon? :)

StyleBotia ei ole saa­ta­vil­la mo­bii­li­se­lai­miin, mutta jos sinulla on hieman nörtin vikaa ja viit­se­liäi­syyt­tä, voit siirtää StyleBotilla tehtyjä muutok­sia mobiili­selai­men Stylus-laajennukseen (taitaa löytyä vain Firefoxiin), ja saada näin StyleBotilla teh­dyt muutok­set myös mobii­li­se­lai­meen. Kyse­hän on vain CSS:stä, joka on vain tekstiä. :)


Linkkejä

Ei kommentteja: