toscho.design» Browser

Opera: Künftig nur noch Extensions?

Thomas Scholz — Tue, 24 Apr 2012 17:55:41 +0000

Unite und Widgets sollen zugunsten der Extensions wegfallen.

Ich verstehe sehr gut, daß Opera endlich einen Fokus setzen möchte. In den letzten Jahren kamen immer nur neue Dinge hinzu. Allerdings ist das Extensions-Verzeichnis derzeit die Schmuddelecke auf opera.com: Viele angebliche Extensions sind bloße Links zu dubiosen Seiten, das Feedback der Nutzer wird überhaupt nicht wahrgenommen.
Man schämt sich fast, jemanden dahinzuschicken.

Ich benutze derzeit mehr Widgets als Extensions, Unite fast nie. Hoffentlich hat Opera einen guten Plan zur Migration vorbereitet.

Siehe auch meinen naiv-begeisterten Artikel: Separiert verbunden. Opera Unite und das Web 3.0.

Update 27.04.2012

Inzwischen gibt es einen Artikel auf Opera.com von Shwetank Dixit: Converting widgets to Opera extensions: Things to keep in mind.
Hier können Autoren ein paar syntaktische und semantische Änderungen nachschlagen, die man braucht, um ein Widget in eine Extension umzuwandeln. Das ist allerdings noch sehr roh.

WordPress-Plugin: Opera Speed Dial Preview

Thomas Scholz — Sun, 25 Mar 2012 11:00:55 +0000

Speed Dial nennt Opera die konfigurierbare Ansicht eines neuen Tabs. Hier kann man einzelne Seiten festlegen, für die man eine Vorschau haben möchte.

Speed-Dial-Beispiel

Das sieht bei vielen Seiten recht dröge aus; also habe ich mir überlegt, wie man das besser machen kann. Immerhin bietet Opera eine API an. Das Ergebnis ist ein kleines Plugin, das ich ganz kreativ Opera Speed Dial Preview genannt habe. Es liegt natürlich auf GitHub.

Download: Plugin T5 Opera Speed Dial Preview

Das Plugin erfordert keine Konfiguration. Nach dem Aktivieren fängt es Zugriffe ab, die mit dem Request-Header X-Purpose: preview gesendet werden und lenkt sie auf /speedial/ um. Permalinks müssen also aktiviert sein, damit es funktioniert!

Speed-Dial-Plugin Standardansicht

Die Ausgabe wird in der großzügig dokumentierten Datei speed-dial.php erzeugt. Hat das aktuell verwendete Theme eine Datei dieses Namens, so wird diese verwendet, nicht die des Plugins. Damit haben Theme-Autoren freie Hand: Einfach selbst eine Datei speed-dial.php ins Theme werfen, gestalten wie man möchte – fertig. Das dauert nur ein paar Minuten.

Für diese Seite habe ich die Vorschau bloß um das Logo ergänzt:

Speed Dial für toscho.de

Man kann aber eingeloggten Nutzern die letzten Nachrichten eines BuddyPress-Setups präsentieren oder die zu moderierenden Kommentare auflisten … ihr habt freie Hand, denn alle normalen WordPress-Funktionen stehen zur Verfügung wie in jeder anderen Template-Datei auch.

Verbesserungsvorschläge sendet bitte an die passende Adresse auf GitHub, damit ich sie nicht aus den Augen verliere.

Eure eigenen Umsetzungen interessieren mich auch! Schickt sie mir, und ich baue eine Galerie – selbstverständlich mit Dofollow-Link.

Anker im Request abfangen

Thomas Scholz — Fri, 23 Mar 2012 14:20:39 +0000

Viele Leute sind zu dumm, einen ordentlichen Crawler zu schreiben. Schade. Als Ergebnis bekomme ich dann solche Fehler ins 404-Log geschrieben:

GET /thema/suchmaschinen/%23content

Einfach ausgedrückt: Da hat jemand nicht verstanden, was ein # am Anfang eines Linkziels bedeutet.

Momentan reagiere ich noch recht gutmütig darauf mit einer kleinen Regel in der .htaccess:

RedirectMatch Permanent (.*)#.*$ $1

Sieht ein bißchen aus wie Perl-Code, daher ist eine kleine Erklärung angebracht. Die Regel besteht aus drei Teilen:

RedirectMatch – die Direktive, die verwendet werden soll.
(.*)#.*$ – Erfasse alle URIs, die diesem Muster entsprechen: beliebige Zeichen in beliebiger Menge – .* – plus Raute – # – plus beliebige Zeichen in beliebiger Menge.
Lenke diese Anfragen auf die Zeichen um, die der erste eingeklammerte Ausdruck erfaßt hat.

In einem korrekten Request wird der Anker nicht an den Server gesendet, sondern der User-Agent merkt ihn sich einfach. Das zumindest beherrschen auch alle Browser, wenngleich der anschließend plazierte Fokus nicht immer der Norm entspricht. Google Chrome beispielsweise glänzt hier mit besonderer Inkompetenz …

Wer solche Fehler verfolgen möchte und WordPress benutzt, mag vielleicht mein Plugin T5 404 Tools ausprobieren.

WordPress: Internet Explorer ohne CSS-Hacks ansprechen

Thomas Scholz — Tue, 28 Sep 2010 07:43:50 +0000

Den Internet Explorer betrachten die meisten Webentwickler zu Recht als chronische Krankheit. Neben anderen Browsern sieht auch die kommende Version 9 eher bedrückend aus. Ehe wir diesem Browser keine Extrawurst mehr braten müssen, wird noch viel Zeit vergehen.

Um den IE im Stylesheet gesondert anzusprechen, brauchen wir weder Hacks im CSS noch eine zusätzliche Datei oder gar (pfui!) eine serverseitige Browserweiche. Wir müssen nur das Element über Conditional Comments anpassen. Diese Idee hatte Paul Irish schon 2008.

Ich habe das neulich in einem WordPress-Theme eingesetzt und mag es so sehr, daß ich künftig all meine Themes damit ausrüsten werde.
Ein wenig umständlich: Die Sprachattribute werden in WordPress mit der Funktion language_attributes() erzeugt – und die hat ein fest eingebautes echo, das man nicht abschalten kann. Ich will nun nicht drei Meter Code in der header.php stehen haben, deshalb habe ich mir zwei kleine Funktionen gebaut. Die Funktion get_language_attributes() ist obendrein etwas schlanker als das Original, und sie gibt das Attribut dir nur aus, wenn der Text von rechts nach links läuft. Andernfalls ist es an dieser Stelle überflüssig.

Doch zum Code, er gehört in die functions.php:

/**
 * html5 start tag + language attribute + conditional tags for IE Win
 * @link   http://paulirish.com/?p=88
 * @param  bool $print
 * @return void|string
 */
function htmlstart($print = TRUE)
{
    $out  = '';
    $lang = get_language_attributes();
    $ies  = array (
        6 => 'lte6 lte7 lte8'
    ,   7 => 'lte7 lte8'
    ,   8 => 'lte8'
    ,   9 => ''
    );

    foreach ( $ies as $n => $class )
    {
        $out .= "";
    }

    $out .= "$lang>";

    if ( ! $print )
    {
        return $out;
    }

    print $out;
}

if ( ! function_exists('get_language_attributes') )
{
    /**
     * Returns the language attributes.
     *
     * Unobstrusive copy from the core.
     * Requires WP 3.0+
     *
     * @param string $doctype The type of html document (xhtml|html).
     */
    function get_language_attributes($doctype = 'html') {
        $output = is_rtl() ? 'dir="rtl"' : '';

        if ( $lang = get_bloginfo('language') )
        {
            $output .= ( ( get_option('html_type') != 'text/html'
                || $doctype == 'xhtml' )
                ? ' xml:' : '') . 'lang="' . $lang . '"';
        }

        return apply_filters('language_attributes', $output);
    }
}

Im Theme rufen wir die Funktion dort auf, wo früher die Doctype-Deklaration und das Start-Tag standen.
Die Ausgabe sieht (hier aufgehübscht) etwa so aus:







    "de-DE">

Nein, das ist kein sehr schönes Markup mehr. Aber so richtig schlimmes auch nicht. Obendrein validiert es.

Im Stylesheet können wir den Internet Explorer jetzt ganz einfach mit der passenden Klasse ansprechen:

.ie8
{
    top:        10px;
}
.lte7
{
    top:        15px;
}

Das kann ich mir viel besser merken als Kommentarhacks oder Spielereien mit ungültigen Selektoren und Eigenschaften.

Mehrere Internet Explorer auf einem Windows kann man sich mit der Utilo IE Collection einrichten. Zum Testen der Conditional Comments habe ich im Labor eine kleine Seite eingerichtet: CC-Test.

Browser-ABC

Thomas Scholz — Sun, 16 May 2010 06:35:03 +0000

Ich bin gerade erst darüber gestolpert – Sonntagmorgen, fragt nicht! – Christian Leu listet auf, welche Seite ihm der Browser für jeden einzelnen Buchstaben vorschlägt. Find’ ich lustig, also steige ich verspätet noch ein. Das Ergebnis entlarvt mich vermutlich als langweiligen Fachmenschen. Und doch stehe ich dazu.

Wer spielt mit?

Opera: Der Colorpicker

Thomas Scholz — Tue, 04 May 2010 21:20:35 +0000

Seltsamerweise ist bei all der Presse um Opera 10.5 ein Detail nahezu untergegangen, über das ich mich sehr gefreut habe: Der Farbwähler in Opera Dragonfly.

Wir finden ihn im Reiter Utilities in Dragonfly, das wir bei ausgeblendeter Menuleiste am leichtesten erreichen, wenn wir irgendwo im Dokument das Kontextmenu aufrufen und dort ›Element untersuchen‹ auswählen (im Englischen ›Inspect Element‹).

Fahren wir jetzt mit der Maus über die Seite, so wird in einem Vorschaufenster die Fläche unter der Maus stark vergrößert dargestellt.

Ganz links können wir festlegen, wie groß die jeweilige Auswahl sein soll, die von der Maus erfaßt wird, und wie stark die Vergrößerung ist.

Das finde ich noch nicht sehr verständlich, und mit Scale 1 fährt sich der Auswahlmodus auch manchmal fest. Mit einem einem kleinen Trick gießen wir Öl ins Getriebe: Kurz den Reiter wechseln; dann läuft es wieder. Langfristig hilft wie bei jedem technischen Problem natürlich nur mehr RAM.

Auf der linken Fläche finden wir noch ein anderes Feature: Gespeicherte Farben. Hier können wir einmal ausgewählte Farben dauerhaft merken. Der Button ›Manage stored colors‹ bietet derzeit nur das Löschen an. Ich wünsche mir noch das Benennen und eine Sortierung nach Schlagworten oder Verzeichnissen. Ansonsten ist das schon sehr praktisch.

Rechts des Vorschaufensters können wir innerhalb der Auswahl noch einmal wählen: Wir können ein Quadrat festlegen, das wir mit der Maus auf dem Vorschaufeld plazieren. Der durchschnittliche Farbwert des Quadrates wird dann in drei Notationen ausgegeben: als RGB, als HSL und als Hexwert. Und speichern können wir die Farbe natürlich auch.
Die Maximalgröße des Quadrates beträgt 9×9 Pixel – das finde ich für einige Verläufe und Fotos etwas zu klein. Die Minimalgröße beträgt 1×1 Pixel. Klein genug. Subpixel sieht man ohnehin nicht.

Die Funktionsweise mal Schritt für Schritt zum Mitmachen:

Eine Seite öffnen, beispielsweise diese hier.
Rechtsklick auf ein Element (das Auge) und im Kontextmenu ›Element untersuchen‹ auswählen.
Jetzt öffent sich Dragonfly unten im Browserfenster mit dem Reiter ›DOM‹
Zum Reiter ›Utilities‹ wechseln und mit der Maus über das Auge fahren.
Über einer besonders schönen Stelle einmal links klicken, damit das Vorschaubild die Auswahl festhält.
In Color Select eine Größe wählen (7×7) und im Vorschaubild auf die Stelle klicken, deren durschnittlichen Farbwert man gerne haben möchte.
Wenn der richtige gefunden wurde, auf ›Store color‹ klicken.
Fertig.

Brauchen wir später eine gespeicherte Farbe, so klicken wir einfach darauf. Der Wert steht dann im rechten Feld.

Fazit: Die Oberfläche kann durchaus klarer werden, und ein paar Features fehlen mir noch: ein Export und Variieren der Farben beispielsweise. Aber im Ganzen ist das schon eine schöne Demonstration der Möglichkeiten, die die neue API Dragonflys bietet. Dragonfly ist übrigens Open Source, seit heute unter einer Apache-2.0-Lizenz. Es muß nicht extra installiert werden, womit eine Last wegfällt, die man mit externen Werkzeugen ja meistens hat.

Designlinks 12

Thomas Scholz — Wed, 28 Apr 2010 10:19:33 +0000

Wird mal wieder Zeit. Aber zuerst entspannen wir uns ein bißchen:

Quelle: CollegeHumor.

›Do not use PHP references‹, empfiehlt Johannes Schlüter, denn Referenzen kosten Tempo, Übersicht und Flexibilität. Ob seiner klaren und verständlichen Darstellung dieses kniffligen Themas möchte ich den Artikel jetzt schon in die Liste der zehn besten dieses Jahres rücken.

Nicholas C. Zakas: History of the user-agent string. Warum die UA-Strings heute oft so sonderbar aussehen. Die neue Kennung des IE 9 lautet:

Mozilla/5.0 (compatible, MSIE 9.0; Windows NT 6.1; Trident/5.0)

Anhängsel irgendwelcher Zusatzsoftware werden nicht mehr eingebaut; damit schrumpft die Liste der möglichen Kennungen gewaltig – was es Proxys erheblich erleichtert, gespeicherte Versionen einer Webseite auszuliefern. Das erklärt Billy Hoffman gut in: ›The Big Performance Improvement in IE9 No One is Talking About‹. Er rät auch dazu, die gzip-komprimierte Version nur noch anhand des Accept-Headers zu versenden und den User-Agent zu ignorieren, damit beispielsweise ein Safari-Nutzer die Version bekommt, die der Firefox-Nutzer zuvor in den Proxy gehievt hat.

Man kann dezimale Zeichenreferenzen mit beliebig vielen führenden Nullen versehen. So läßt sich das A als A schreiben oder als A
›hakre‹ hat mal ausprobiert, wie weit man damit gehen kann: ›HTML Entity Boundaries – Zero Padding‹.
Ein Experiment, dessen praktischer Nutzen sicher weit unter seinem Unterhaltungswert liegt. Doch zeigt es, wie weit die Entwickler vorausdenken und wo sie die Grenze ziehen zwischen ›das versuche ich noch‹ und ›das wird zu langsam‹. Wenig überraschend frißt Firefox die meisten Nullen – bis zum Erstickungstod.

Anne van Kesteren hat auch ein Experiment mit gewaltigem Geekpotential hingestellt: Live style sheet editing!
Und da muß ich einfach mal den Quelltext zitieren:



 
  Live style sheet editing!

Zum Schluß noch ein Link für die Freunde der Maus: Harmony, ein Zeichenprogramm in Javascript und Canvas. Das macht wirklich Freude.

Text-rendering: illegibility

Thomas Scholz — Mon, 26 Apr 2010 05:11:26 +0000

Wenn zwischen Absicht und Ergebnis fremder Code steht, dann braucht der geübte Binärschubser seine wichtigste Kompetenz: Fluchen. So auch ich, als ich gestern von Christoph Schnieder dieses kleine Horrorstück zugesandt bekam:

Tatort war ein Palm Pre WebOS, Tatwerkzeug der eingebaute Browser auf WebKit-Basis.

Um das überhaupt nachzuvollziehen, habe ich den MobiOne Emulator für Palm Pre installiert. Das ging verdächtig leicht, und das Ergebnis half mir überhaupt nicht. Es war nämlich in Ordnung:

Dieser Emulator ist im Wesentlichen ein zurechtgestutztes Eclipse; seine Abhängigkeit vom Gastsystem erkennt man schon daran, daß er dessen Schriften benutzt. Unbrauchbar.

Dann habe ich das Palm webOS SDK installiert, das in einer virtuellen Maschine läuft – und das Problem ganz genau wiedergibt. Das scheint also ein recht realistisch arbeitendes Werkzeug zu sein. Etwas umständlich finde ich nur das englische Tastaturlayout, das ich nicht umstellen konnte.

Nach allerlei Tests habe ich endlich die Ursache gefunden: Ich hatte im Stylesheet eine Deklaration stehen, von der ich annahm, sie werde nur von Gecko interpretiert.

p,
address,
li
    {
        text-rendering:optimizeLegibility;
    }

Diese Eigenschaft stammt aus SVG, wie man leicht an der dämlichen Binnenmajuskel erkennt. Sie sollte Firefox dazu anregen, auch bei kleineren Schriftgraden als 20px das Kerning zu respektieren.
Was genau der Palm Browser hier versucht, vermag ich nicht zu sagen. Vielleicht hängt es mit der Schriftgröße zusammen, denn Überschriften, die mindestens 20px groß sind, werden noch gezeigt.

Ich habe die ganze Regel jetzt weggeworfen und einen Bugreport geschrieben.

Sicher ließe sich das auch hinter einem proprietären Selektor für Mozilla verstecken, aber davon will ich eigentlich weg. Und wenn ich damit leben kann, daß Mozilla-Nutzer noch keine abgerundeten Ecken sehen, dann darf ich genauso gut unterstellen, daß sie sich an schlampiges Kerning gewöhnt haben. Also nehmt es mir nicht übel, ja?

Ach ja, das aktuelle Ergebnis:

Da der Browser jetzt nur die Systemschriften des Palm OS verwendet, setzt er keine Kursivschnitte für serifenlose Schriften mehr um, und eine Monospace-Schrift findet oder nutzt er auch nicht. Das ist nicht schlimm, aber man kann es unter »Aha. Mist!« ablegen.

Webdesign fürs iPad

Thomas Scholz — Tue, 02 Feb 2010 13:43:33 +0000

Der Bettvorleger ist gelandet. Apple hat am Mittwoch das iPad vorgestellt, ein Gerät, das die Nachteile eines Notebooks mit denen des iPhones kombiniert: Kein USB-Anschluß, kein DVD- oder BlueRay-Laufwerk, kein UMTS. Multitasking, das Ausführen parallel laufender Programme, geht auch nicht. Das einzige, das glänzt, ist das Display in einer Auflösung von 768×1024 Pixeln.

Viele Beobachter geben sich jetzt enttäuscht. So ein Wirbel um ein so langweiliges Spielzeug? Mich hat das nicht überrascht oder gar enttäuscht. Ich mache mit Apple ohnehin keine Geschäfte.
Aber für den Markt freue ich mich: Die Geräteklasse wird durch Apple eingeführt und bekannt gemacht, und jeder Konkurrent kann den Pionier leicht ausstechen. Es genügt ein USB-Anschluß und die Option, daß der Kunde im Gegensatz zum iPad seine Akkus selber wechseln kann, wenn er möchte. Packt man noch ein richtiges, mattes Display drauf und eine UMTS-Verbindung, dann kommt sogar ein mobiles Gerät dabei heraus.

Als Designer freue ich mich auch: Die Bildschirmbreite von maximal 1024 Pixeln wird all jenen auf die Füße fallen, die bisher Festbreiten gemeißelt und damit das Web verschmutzt haben. Real werden die Benutzer dieses Spielzeugs lieber hochkant lesen, also nur 768 Pixel bereitstellen. Gute Layouts passen sich dem an, schlechte werden einfach nicht mehr benutzt.

Wer jetzt erst auf ein modernes Layout umstellt, mag dies bedenken:

Auf einem Touchscreen sollten Links nicht zu dicht beieinander liegen. Finger treffen schlechter als eine Maus. Peter-Paul Koch hat dazu gerade ein bißchen geforscht: The touch action.
Das interessante Problem hierbei: Wer mit solchen Bildschirmmaßen kommt und doch eine Maus benutzt, der möchte keinen Platz für zusätzlichen Leeraum vergeuden. Vielleicht wird sich der iPad-Safari ja per Javascript zu erkennen geben, damit man den gezielt ansprechen kann.
Die Pseudo-Klasse :hover oder onmouse*-Events werden nicht angesprochen.
Eine horizontale Navigation sollte am Seitenrand umbrechen, sonst verschwinden vielleicht wichtige Elemente rechts hinter dem Bildschirmrand.
Bei Tageslicht liefert ein Spiegeldisplay schlechte Kontraste. Orangefarbene Links auf weißem Hintergrund beispielsweise dürften kaum noch zu erkennen sein.
Sehr lange Texte möchte sicher niemand auf weißem Hintergrund lesen. Hier kann man einen Styleswitcher anbieten, wenn das iPad keinen eigenen Regler mitbringt.

Safari, der Webbrowser auf dem iPad, unterstützt Media Queries ein bißchen. Das kann man so ansprechen:

@media screen and (max-device-width: 1024px)
{
    /* Horizontal */
}
@media screen and (max-device-width: 768px)
{
    /* Vertikal */
}
@media screen and (max-device-width: 480px)
{
    /* iPhone. Findet @media handheld nicht. */
}

Opera und Firefox verstehen das natürlich auch, im Gegensatz zu Safari sogar nach einer IE-Expression.

* html textarea
    {
        border:             expression(
            this.onfocus = function()
                {
                    this.style.borderColor = '#27b';
                },
            this.onblur = function()
                {
                    this.style.borderColor = '#888';
                }
            );
    }

@media screen and (max-device-width: 768px)
{
    /* Das liest Safari nicht. */
}

Update 08.04.2012:
Natürlich ist die Sache nicht so einfach: Bis heute kann Safari unter iOS die korrekte Bildschirmbreite nicht ermitteln oder umsetzen. Mehr dazu unter: Improved version of JavaScript fix for the iOS viewport scaling bug.

Auf dem iPad gibt es kein Flash. Dafür sollte normalerweise schon längst eine Alternative bereitstehen, aber oft sieht die eher peinlich aus. Safari versteht Javascript und Canvas; wer das nutzt, kann auf Flash oft verzichten.
Wenn der Safari als Mobilvariante installiert ist, dann kann er vielleicht kein position:fixed.

CSS: Mein Userstylesheet

Thomas Scholz — Mon, 18 Jan 2010 12:09:36 +0000

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?