Uživatelské styly – přizpůsobení cizích stránek vč. tisku

[Myloš]

Rád bych se s vámi podělil o dobrý nápad; pro některé to sice nebude nic nového, ale snad se to bude někomu hodit.

Uživatelské styly obecně
Pokud alespoň občas používáte Operu k něčemu jinému než k testování stránek, možná jste zaregistrovali, že má řadu stylových předpisů (profilů), které lze aplikovat na již hotové (cizí) stránky, pokud jejich vzhled není v nějakém ohledu vyhovující, jestliže si některé prvky přejete zobrazit jiným způsobem (namátkou jde o změny v kontrastu, rušení tabulek, zákaz pozicování, skrýt obrázky bez odkazů…).

Nedosti na tom – lze připojovat i styly vlastní – totiž externí css soubory, které jsou připojeny za již existující (autorem definované) styly.

Takto jsem si například zpřehlednil fórum http://diskuse.jakpsatweb.cz o :hover řádků a odkazů:
a {padding: 1px;}
a:hover {color: red !important; background-color: #ffffc0;}
tr:hover {background-color: white;}

—————————————————————————

Tiskové styly
Protože si občas některé stránky tisknu (lépe se mi čtou na papíře a pak – svůj 19' CRT těžko umístím na záchod, do koupelny nebo do tramvaje), zvlášť jsou-li delší; pořád se snáze orientuji na papíře (text „nemigruje“; to, co bylo vytištěno vlevo nahoře, zůstává vlevo nahoře a podobně).

V současnosi není nic neobvyklého, když autor připojí i tiskové styly, ale i ty je dobré někdy trochu přizpůsobit, například při náhledu Rojova blogu jsem zjistil, že se stránka občas zalomí po nadpisu; nic jednoduššího, než připojit následující:
h1, h2, h3, h4, h5, h6 {page-break-after: avoid;}

Jakmile ale stránka tiskové styly nemá, sémantika je ve psí a k designu jsou zneužité tabulky, je to občas docela piplačka.
Jako ilustraci (a pro inspiraci) uvádím svou tiskovou úpravu D-FENSova webu:

@media print {
body {width: 21cm; padding: 0;}
body * {font-family: "lido STF" !important; font-size: 10pt !important; text-indent: 2em !important; }
.modryram, .premodryram {border: none; padding: 0 !important;}
.clatext {display: block;}
.clanadpis {font-size: 12pt !important;}
div.zahlavi {display: none;}
td[width="150"], td[width="180"] {display: none;}
.clatext p {margin: .25em 0;}
.hodnoceni, #toplist, #toplist + p {display: none;}
}

[Reklama]