toscho.design

CSS: Mein Userstylesheet

18.01.2010 in: Browser, CSS und Webdesign • 3 Kommentare
Letzte Änderung: 03.06.2010, 12:45 Uhr.

CSS habe ich mit Userstylesheets gelernt, und diese Perspektive prägt meine Arbeit noch heute. Mein Standardstylesheet ist seit Opera 3.5 lange mit den Fähigkeiten des Browsers gewachsen, doch seit etwa zwei Jahren werfe ich immer mehr heraus.

Für bestimmte Webseiten stecke ich mir noch Spezialvorlagen aus einem privaten Framework zusammen. Das Gestalten von Formularen und Scrollbars im Browser habe ich abgeschaltet, und der Adblocker arbeitet zuverlässig. Das aktuelle Userstylesheet sieht deshalb sehr schlank aus:

* 
    {
        letter-spacing:     normal      !important;
    }
body 
    {
        line-height:        1.4;
        font-family:        "Minion Web Pro";
        margin:             10px;
    }
@media print 
    {
        body
            {
                margin:     0 10%;
            }
    }
p, li, blockquote, dd, dt, div
    {
        font-size:          16px;
        line-height:        1.4;
    }
#content p, #content li, #content blockquote
    {
        font-size:          16px        !important;
        line-height:        1.4         !important;
    }
body, 
div, 
p, 
li, 
dl, dt, dd,
td
    {
        cursor:             text        !important;
    }
textarea,
pre, pre *,
code,
.code, 
samp, 
var,
.dp-highlighter, 
.dp-highlighter * /* oft benutztes Highlightscript */
    {
    /* Die Lucida Sans Unicode hilft beim Finden exotischer Zeichen. */
        font:               1em/1.2 Consolas, Lucida Sans Unicode, 
                            monospace   !important;
        background-image:   none        !important;
        cursor:             text        !important;
    }
textarea:focus
    {
        color:              #000        !important;
        background:         #fff        !important;
    }
pre *, 
code *, 
.code *, 
samp *, 
var *
    {
        font-size:          1em         !important;
    }
pre,
pre *
    {
        line-height:        1.3         !important;
        white-space:        pre-wrap    !important;
    }
[align="justify"] 
    {   /* Andere Blocksatzsünder findet man leider nicht so leicht. */
        text-align:         left        !important;
    }
table, 
td, 
th 
    {
        border-collapse:    collapse;
        vertical-align:     top         !important;
    }
a:hover 
    {
        text-decoration:    none;
    }
[href],
[onclick]
    {
        cursor:             pointer     !important;
    }
iframe[width="0"], iframe[height="0"],
iframe[width="1"], iframe[height="1"],
img[width="0"], img[height="0"],
img[width="1"], img[height="1"]
    {
        display:            none        !important;
    }
[alt]
    {
        white-space:        normal      !important;
    }
h1[id]:hover:after, 
h2[id]:hover:after, 
h3[id]:hover:after,
h4[id]:hover:after, 
h5[id]:hover:after, 
h6[id]:hover:after 
    { /* Findet interne Links, falls ich mal auf
       einen Abschnitt in einer Seite linken will. */
        content:            " #" attr(id);
        font:               bold 14px/1 Consolas;
    }
button,
[type="submit"]
    {
        color:              #000        !important;
    }

Siehe auch:

Eure Vorschläge?

3 Kommentare

  1. Lars am 18.01.2010 · 16:04

    [type="reset"] { display: none; } damit man nicht versehentlich ein ausgefülltes Formular löscht anstatt es abzusenden.

  2. Susanne Jäger am 19.01.2010 · 00:01

    Die hx[id] Idee, werde ich gleich mal einbauen, danke.

    was für mich unverzichtbar ist:

    p, li {max-width: 50em;}
a[target=_blank]:before, a[target="_blank"]:before {content: "_"; background: #fcc; color: #00f;}
a[href$=".pdf"] {outline: 1px solid yellow;}

  3. Thomas Scholz am 19.01.2010 · 00:34

    @Lars: Das hatte ich früher auch im Stylesheet stehen. Obwohl ich nicht extra darauf geachtet habe, kann ich wirklich nicht sagen, wann ich das letzte Mal einen Reset-Button gesehen habe. Der ist wohl ausgestorben.

    @Susanne Jäger: Der kleine Haken bei der Ankersuche (☻): Gecko-Browser können generated content nicht kopieren. Das gilt auch für per CSS erzeugte Anführungszeichen (quotes). Sehr … schade.

    target=_blank habe ich im Browser deaktiviert. In Opera: opera:config#UserPrefs|IgnoreTarget. Das ist so ein Fall, wo der Browser einen Eintrag überflüssig gemacht hat.

    Die Maximalbreiten habe ich aus dem alten Stylesheet herausgeworfen, weil die Elemente von schlecht informierten Autoren oft für anderen Inhalt verwendet werden und dann das Layout seltsam aussieht. Dein Wert von 50em läge bei mir ohnehin nur knapp unter der Breite eines Tabs.

    Die PDF-Link-Erkennung werde ich wohl übernehmen. Allerdings mit outline:1px dotted invert;, damit ich sie auf jedem Untergrund sehe. Hast du einen bestimmten Grund für deine Farbwahl?

←   →