User styles: príklady pravidiel pre používateľské štýly prehliadača

od autora: ·

Niekoľko tipov k zmenám zobrazenia stránok vo vašom prehliadači, ktoré som preložil z anglického zdroja. Nejde o nič prevratné samozrejme.

User Styles

Používateľské štýly umožňujú zmeniť zobrazenie stránok v prehliadači podľa vlastných potrieb.

Ako použiť pravidlá pre zmenu vzhľadu prvkov stránky podľa príkladov na tejto stránke

  • Na aplikovanie zmien na všetkých stránkach, ktoré prehliadačom navštívite: vložte vybraný príklad do súboru s predpisom štýlov podľa (inštrukcií).
  • Na aplikovanie vybraného príkladu na stlačenie tlačítka v nástorjovej lište (bug 45848): použi nástroj na vytvorenie bookmarkletu na vytvorenie vašeho vlastného tlačítka, ktorým aplikujete vybraný štýl na vyžiadanie v zobrazenej stránke.
  • Aplikovanie štýlu len pre vybranú stránku resp. sajt: použite bookmarklet Otestuj štýl a vložte svoje štýly do okna, ktoré sa zobrazí.
  • Na použitie štýlu pri každom navštívení vybranej stránky: použite rozšírenie URIid. Pozrite bug 41975 a bug 238099 pre príklad bez použitia tejto extension.

Úprava vzhľadu odkazov

Nikdy nepodčiarkovať odkazy (IE, Mozilla)
:link, :visited { text-decoration: none ! important }
:link:hover, :visited:hover { text-decoration: underline ! important }
Vždy podčiarkovať odkazy (IE, Mozilla)
:link, :visited { text-decoration: underline ! important }
Vždy zobraziť okraj okolo zalinkovaných obrázkov (Mozilla version)
/* Solid blue border for unvisited, dashed purple border for visited */
:link img { -moz-outline: 1px solid blue }
:visited img { -moz-outline: 1px dashed purple }
:focus img { -moz-outline: 2px dotted invert } /* Don't mask UA style */
:active img { -moz-outline: 1px solid red } /* Rarely triggered: bug 65917 */
Vždy zobraziť okraj okolo zalinkovaných obrázkov (IE version)
/* This version breaks many site layouts! Use the Mozilla version if you can. */
:link img { border: 1px solid blue }
:visited img { border: 1px dashed purple }
:active img { border: 1px solid red }
Pridaj symbol pri linkoch mailto (Mozilla)
a[href^="mailto:"]:before { content: "\2709 " }
Prefarbí javascriptové linky na zeleno (Mozilla)
a[href^="javascript:"] { color: green ! important }
Preškrtne vami „nežiadané“ linky (Mozilla)
a[href*="goatse.cx/"]
{
text-decoration: line-through ! important;
color: brown ! important;
}

Iné štýly

Zobraziť titulok stránky (tag TITLE) priamo v stránke (Mozilla)
/* I include colors because a background-color for the body affects the head. */
head { display: block; background-color: white; color: black; }
head * { display: none; }
title
{
font-size: 160%; font-weight: bold; text-decoration: underline;
display: inline; margin: .2em;
}
Umiestni rolovátka na okraj okna pre lepšiu dostupnosť na kliknutie pokiaľ je okno maximalizované (IE)
html, body, frameset { border-right: 0px ! important }
Nezobrazovať rolovátko pokiaľ nie je nutné (IE)
/* This may make it impossible to scrolling using the keyboard! */
html, body { overflow-y: auto }
Maximálna šírka odstavcov s textom (Mozilla)
p, blockquote { max-width: 30em; }
Vždy použiť môj typ písma (e.g., Times New Roman)
* { font-family: serif ! important; }
Skryť tlačítka reset z formulárov (pokiaľ vždy naň náhodou klepnete)
input[type="reset"], button[type="reset"] { display:none }
Focus rámik trošku lepšie viditeľný (Mozilla)
a:focus
{
-moz-outline: 2px dotted ! important
}
button:-moz-focus-inner,
input[type="reset"]:-moz-focus-inner,
input[type="button"]:-moz-focus-inner,
input[type="submit"]:-moz-focus-inner,
{
border: 2px dotted transparent;
}
button:focus:-moz-focus-inner,
input[type="reset"]:focus:-moz-focus-inner,
input[type="button"]:focus:-moz-focus-inner,
input[type="submit"]:focus:-moz-focus-inner,
{
border-color: ButtonText;
}
Focus rámik veľmi zreteľný
/* Makes selections in textboxes hard to see: bug 56314 */
:focus
{
background-color: black ! important;
color: white ! important;
-moz-outline: none;
}
:focus img { -moz-outline: 3px solid invert; }
Zruš italiku zo stránky
i, em { font-style: inherit; }
em { font-weight: bold }
Ignoruj tagy s pohyblivým alebo blikajúcim textom
blink { text-decoration: none ! important }
marquee { -moz-binding: none ! important }
Zobraz pomenované kotvy v dokumente (Mozilla)
a[name]:before { content: "[#" attr(name) "] "; }
a[name] { border: 1px solid #ddd; }
Zobraz prípadné skratky a prístupové klávesy (accesskeys) (Mozilla)
*[accesskey]:after { content: " {" attr(accesskey) "}" }
*[tabindex]:after { content: " [" attr(tabindex) "]" }

Podstránky

Linky

© 2002-2003 Jesse Ruderman (jruderman@hmc.edu). Any type of feedback is welcome.
Last modified August 9, 2003.

Toto je môj neumelý preklad stránky: User Styles: example rules for user style sheets: Robert Madaj

Môže sa Vám ešte páčiť...