Magyar Opera

Címkék » css


Kiegészítő ajánló: célkeresztben a haladó felhasználók!

Ahogy már a címben is jeleztem, most olyan kiterjesztések kerülnek a középpontba, melyek elsősorban rutinos Operásoknak íródtak.

Az Opera 11 megjelenésével egyre inkább háttérbe szorultak a különböző felhasználói JavaScriptek - azok jórészt kiválhatóak lettek a böngésző kiegészítők révén -, azonban az UserScripts.org népszerűsége azóta is töretlen. A Violentmonkey névre keresztelt kiegészítő arra hivatott, hogy az előbbi oldalon fellelhető UserJS fájlokat a lehető legegyszerűbben kezelhessük. Az alapötletet valószínűleg az UJS Manager Opera Unite alkalmazás adta, így aki már azt ismeri, az most nagy meglepetésekre ne számítson. 

opera userjs kezelő.jpg

A fenti képen jól láthatóak a Violentmonkey főbb szolgáltatásai (frissítés, szerkesztés, importálás és exportálás), ezenfelül még érdemes kiemelni a Greasemonkey funkciók támogatását.

A másik kiegészítő is gera2ld keze munkáját dicséri, ebből kifolyólag hasonló megjelenéssel bír. A Stylish for Opera az UserStyles.org weboldalon helyet kapó stíluslapok alkalmazásában segédkezik. A funkciók tárháza nagy meghökkentést nem fog okozni, a részletes leírást a hivatalos weblapon tekinthetjük meg.

opera usercss kezelő.jpeg

A jelek szerint gera2ld komolyan veszi a két kiterjesztés fejlesztését, így előbbi már az 1.1.2-es verziónál tart, míg utóbbi az 1.2-g jelöléssel büszkélkedhet. A felhasználók véleményei összességében pozitívnak mondhatóak, ami jól látható az értékelésben is. Bár alapjában véve most tényleg speciális rétegigények kielégítéséről van szó, viszont a kellemesnek mondható használhatóság okán még haladó ismeretek nélkül is érdemes lehet egy próbát tenni, aki pedig egy kiemelkedően jó UserCSS vagy UserJS fájlra bukkant, az bátran ragadjon billentyűzetet!

Kiegészítő ajánló: CleanPages és Readability

Az olvashatóság javításában két remekbe szabott kiterjesztés lesz a segítségünkre, név szerint a CleanPages és a Readability.

Gyakran előfordul, hogy a számítógép előtt töltött huzamosabb idő után a betűk összefolynak, az olvasás egyre nehezebbé válik. Ilyenkor természetesen a legjobb egy kis szünetet tartani, de előfordulhat, hogy erre nincs lehetőségünk.

A CleanPages segítségével egy kattintással átalakíthatjuk az éppen látogatott weboldalt, ahol így eltűnnek a reklámok, a betűméret, a betűtípus és a színek pedig olyan formát öltenek, mint amilyet mi szeretnénk. Az egyéb lehetőségeknél kikapcsolhatjuk a képeket, a videókat, a haladó beállításoknál pedig útmutatást láthatunk ahhoz, hogy egérmozdulattal aktiváljuk az átalakítást - ajánlott itt is szétnézni, mert további érdekességeket is olvashatunk. Telepítés után érdemes testre szabni a különböző paramétereket, hiszen később ezen beállítások fognak érvénybe lépni.

5a89dea2-349e-41a1-83c8-1429f718ee78_details_big.jpg

A hasonló feladatokra hivatott Readability valamivel összetettebb, hiszen több közösségi szolgáltatás található benne. Ettől függetlenül egyszerűen használható kiterjesztésről van szó, az adott weblap átalakítása itt is ugyanazon módszerrel történik. Igazi finomság, hogy billentyűkombináció alkalmazására is van lehetőségünk. Az előbb említett funkció mellett hasznát vehetjük még az úgynevezett Read Later opciónak is, amivel későbbi áttanulmányozás céljából elmenthetjük a kiszemelt anyagot.

Sajnos a CleanPages és a Readability is kudarcot vallhat egy-egy bonyolultabb weblapnál, ám egy jól megírt oldalnál (elvileg) nem lehetnek problémák. Előbbi kiterjesztés kiforrottabb, nagyobb népszerűségnek örvend, utóbbi viszont számos speciális funkciót kínál - ilyen például a megosztás a Twitteren és a Facebookon vagy a küldés a Kindle e-book olvasóra.

reader css kicsi.jpgKattintásra megnő, s PNG formátumba vált. [+]

+1

Az olvashatóság az úgynevezett text shadow használatával is javítható. Ehhez készítettem (egész pontosan némiképp megvariáltam) egy interneten fellelhető stíluslapot, amit ide kattintva lehet letölteni. A művelet után át kell helyeznünk a fájlt a felhasználói CSS mappába - az Opera névjegye megmutatja az elérési utat -, majd a böngésző újraindítása után a Stílusok között (a Lap menüponton belül) megtaláljuk a Reader nevezetű fájlt. A várható változást a fenti kép demonstrálja. Az alsó fele CSS nélkül, míg a felső rész már a text shadow alkalmazásával jelenik meg.

Adblock Plus Operában - harmadik felvonás

Ez az írás nem lesz olyan hosszú, mint a korábbiak és részben a 11.10 által bevezetett display:none módosítás kapcsán jött létre.

Akik követték az eseményeket, tudják miről van szó, akik nem, azoknak pár mondatban: Az Opera a kompatibilitás növelése érdekében a 11.10-ben megváltoztatta a működését a CSS display tulajdonság esetében.

Az ajánlás nem tér ki minden részletre, mint például arra, hogy be kell-e tölteni az elrejtett tartalmakat addig, amíg azok meg nem jelennek az oldalon. A többi böngésző fejlesztői úgy gondolták, hogy igen. Ez azt okozta az évek során, hogy sokan kényelemből, sokan JS tudás hiányában olyan esetekben alkalmazták a display:none szabályt, amikor nem kellett volna.

A probléma inkább esztétikai jelentőségű volt, vagyis ilyenkor az Operában, az egyetlen olyan böngészőben, ami nem töltötte be a display:none tulajdonsággal ellátott tartalmakat, elkezdtek villogni, mivel akkor töltötte be, amikor az adott eseményre (például mouseover) megváltozott az elem display tulajdonsága.

A két legszembetűnőbb példája, hogy mikor egy menü fölé vittük az egeret az vagy 1-2 másodperc késéssel jelenítette meg az animációt az első alkalommal, illetve áttűnős diavetítést tartalmazó oldalakon az első alkalommal a képrenderelést (felülről lefelé) láttuk a képváltáshoz társított effektus helyett.

Az előnye viszont a csökkent adatforgalom és ennél fogva csökkent betöltési időn túl az volt, hogy CSS szabályokkal el lehetett rejteni a reklámokat, így bizonyos esetekben sokkal egyszerűbb volt a dolgunk, habár a megbízható tartalomblokkolás továbbra is az urlfilter.ini maradt.

Ezt a lehetőséget kezdetben (8.x verziók körül) még csak UserCSS-vel lehetett kihasználni, utána Lex1 készített egy hibrid megoldást, végül pedig a Local Storage bevezetésével megszületett a NoAds, először userJS, később kiegészítő formájában.

Azóta megjelent a sokkal hatékonyabb URL Filter API is és az arra épülő megoldások, mint az Opera Adblock De sajnos az URL Filter korlátai megmaradtak, vagyis a RegExp hiánya és a element alapú blokkolás hiánya.

Viszont itt jön képbe Dither, aki elkészítette a NoAds Advanced 1.2.1b-t, ami nem pótolja az elveszett display:none-t, de az URL Filter API-nak köszönhetően legalább egy részét visszakapjuk a korábbi lehetőségeinknek.

Változások, a NoAds óta:

  • URL Filter API támogatás a hatékonyabb Adblock Filterlista integrációért.
  • widgets storage-nak köszönhetően exportálási lehetőség
  • Átdolgozott beállítások
  • MagicFunction/MagicVariable alapú blokkolás

MagicFunction/MagicVariable példák:

##var GTracking
##var NO_msnads
##function poker_pp
##function print_download_ads
##function trackEvent 
##function trackPageView
##function trackPageViewCustom
##function wmx_counter
##function wmx_track
##function wtslog

Opera logó CSS-ből

Eddig is tudtam, hogy CSS-sel csodákat lehet tenni (erre remek példa a CSS Zen kert millió példája). David Desandro viszont túllépett ezen a szinten, és csak CSS-t használva kirajzolta az Opera új logóját. Őszintén szólva ettől azért leesett az állam. Nem hinném, hogy a CSS-t erre kellene használnunk a jövőben, de ettől függetlenül ez egy jó példa arra, hogy megmutassa, mekkora potenciál van benne. Sőt, ha megnézzük, hogy egy ilyen komplex CSS-t mennyire hasonlóan jelenítik meg a szabványos böngészők, és mennyire másképp az Explorer, akkor még a szabványok szükségességére és hasznosságára is nagyon jól rávilágít.

Szóval a lényeg, hogy itt nincs semmilyen kép, ezek csak div-ek és CSS. Próbáld meg nagyítani, és próbáld ki különböző böngészőkben is.

A következő képen jól látszik, hogy az összes nagyobb böngésző az Explorer kivételével nagyon hasonló képet generál, mint az eredeti logó (az első kép). Az Explorer pedig - szokás szerint - kissé sajátosan kezeli a dolgot.

Forrás: desandro.com

Flashblock Operában

Tipp: Opera 10.5-ben van alapértelmezett Flashblock, amit az opera:config#UserPrefs|EnableOnDemandPlugin beállítással érhetsz el külső megoldások nélkül. Sajnos ez a beállítás (még) nem oldalspecifikus, tehát ha bekapcsolod minden oldalon rá kell kattintanod a videó helyére.

Az utóbbi időben a 10.5 noclicktoactivate.js bugja kapcsán újra előkerült nálam a Flashblock. Aki használja ezt a funkciót, az már nyilván ismeri a Lex1 által készített megoldást, akár az userjs only, akár a CSS változatot.

A Flashblock.js egy önálló userjs, amit csak elmentünk a userjs könyvtárba (ha még nincs ilyenünk, klikk ide), majd újratöltjük az oldalt. Hozzáadni az @include letiltani egy oldalon pedig az @exclude paraméterrel tudjuk a userjs-eknél már jól ismert módon.

Megjegyzés: Az @include, @exclude csak az ANSI kódolású userJS-eknél működik, ezért ne használjunk lehetőleg a leírásban sem ő és ű betűt, ha már mindenképp muszáj ékezetet használnunk.

Vagy használhatjuk helyette a CSS változatot, aminél kicsomagolás után a Flashblocker.css-t a profilunk styles\user könytvárába másoljuk, a Flashblocker.js és Flashblocker-white-list.js fájlokat pedig a userjs könyvtárunkba. A CSS miatt újra kell indítanunk a böngészőt, hogy bekerüljön a Nézet sáv > Szerzői nézet legördülőmenübe a CSS, amit majd ezután engedélyezünk. Ha egy oldalon (például YouTube-hoz hasonló oldalak, mert az már fehérlistán van) véglegesen engedélyezni akarjuk, akkor a Flashblocker-white-list.js-ben kell megadnunk az oldal címét @include paraméterrel.

Nos nem túl meglepő módon ezek egyike sem működik az új pre-alfával. Tehát akkor most következzen néhány ezzel is működő megoldás, kinek melyik tetszik.

Edvakf jóvoltából van egy Flash és iframe blokkoló CSS, ami nem a legesztétikusabb, de azért nem rossz. Az egyik előnye, hogy CSS, vagyis már az oldal renderelésekor betöltődik és működik HTTPS oldalakon is anélkül, hogy minden alkalommal jóváhagynánk, az "Igen, engedélyezem az UserJS-eket." dialógusablakot. A másik előnye, hogy a CSS-hez hozzáadhatunk kivételeket. Nem olyan nehéz, amilyennek látszik, jegyzettömbben megnyitjuk a fájlt, majd ha Flash tartalom, akkor a

embed[src]:not(.ucContent):not([src*="nicovideo"]):not([src*="ytimg.com"])
ha pedig iframe, akkor a
iframe[src]:not(.ucContent)
sor végére hozzáadjuk a következő sort:
:not([src*="ide az engedélyezni kívánt objektum forrásának a címe"])

További userJS megoldások: BlockFlash2 és BlockFlashPlus (Silverlight-hoz is)