toscho.design» Browser

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. */
}

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?

Designlinks 11

Thomas Scholz — Sat, 16 Jan 2010 18:13:39 +0000

Molily: In Defense of New Amateurs.
Laßt euch vom Titel nicht erschrecken: Der Text wurde auf Deutsch geschrieben.
Mathias beklagt hier, daß die Webexperten sich nicht (genug) um die Anfänger kümmerten, zu wenig verständliches Wissen vorhanden sei und kein Dialog zustande komme.

Ich finde es gut und wichtig, diesen Dialog zwischen Profis und Amateuren mal zum Thema zu machen. Aber ganz so schlecht ist die Situation ja nicht: Michael Jendryschik hat mit seiner Einführung in XHTML, CSS und Webdesign einen übersichtlichen Einstieg hingelegt, den man kostenlos im Netz lesen oder als Buch kaufen kann. Im XHTML-Forum diskutieren täglich Anfänger und Experten auf Augenhöhe miteinander – zuweilen mit eiserner Geduld.

Und dann gibt es tausende Blogs, kleine Foren und ähnliche Angebote. Die Information für Einsteiger gibt es noch – nur weiter gestreut als vor zehn Jahren.
Billy Hoffman: Browser Performance Problem with CSS “print” Media Type.
Webbrowser sind gierig: Sie laden Print-Stylesheets immer, ob gedruckt wird oder nicht. Hoffman schlägt unter anderem vor, den Link zu diesem Stylesheet erst nach onload ins Dokument zu schreiben, um das Rendering am Bildschirm zu beschleunigen.

Wer dann aber versucht, eine validierende Noscript-Variante einzubauen, dürfte ordentlich ins Schwitzen kommen.

Sehr unschön finde ich übrigens die vielen Spamlinks im Seitenkopf. In Opera mal unter »Ansicht/Seitendarstellung« den Benutzermodus auswählen … und das Essen im Magen halten. Bah!
Haavard K. Moen: Chrome OS, eh? How about designing your own OS using Opera and Widgets?.
Haavard stellt Tabbee vor, die Alternative zu Chrome OS. Die ganze Oberfläche besteht aus Opera-Widgets!
Bei den Auswahllisten sieht man gut, warum man so keine Navigation bauen sollte: Der Finger ist doppelt so dick wie ein Listeneintrag.
Otaku Nightmare Room.
Ganz ehrlich: Bei mir sieht es nicht immer ordentlich aus. Die ganze Wohnung ist zugebüchert; selbst unter der Decke habe ich Regale langgezogen. Aber seitdem ich das gesehen habe, fühlt sich meine Wohnung geradezu steril an.

Gzip: Pro und Kontra

Thomas Scholz — Wed, 13 Jan 2010 16:15:18 +0000

Die Firefox-Addons YSlow (Yahoo) und Page Speed (Google) helfen Webentwicklern, die Ladezeiten ihrer Seiten zu beschleunigen.
Sie arbeiten ihrer Natur nach sehr pauschal und empfehlen immer, alle textbasierten Webressourcen mit gzip zu komprimieren.

Gzip (GNU zip) komprimiert Textdateien sehr effizient. Das Format wird nicht durch Patente belastet, und die meisten Browser und Crawler können damit umgehen. Die meisten, nicht alle.

Wir können die komprimierte Variante einer Ressource nicht auf gut Glück verschicken, sondern nur, wenn der Empfänger dies bekannt gibt:

Request-Header:

Accept-Encoding: deflate, gzip, x-gzip, identity, *;q=0

Das heißt: Wir müssen Content-Negotiation betreiben, über den Inhalt also mit dem Empfänger verhandeln – und eine unkomprimierte Variante vorhalten.

Spannend finde ich die Erkenntnisse, die Arvind Jain und Jason Glasgow zusammengefaßt haben: Anti-Virus-Software, Browser-Bugs, Webproxys und fehlkonfigurierte Webserver verhindern oft die Kompression.

Nehmen wir einmal an, Browser 1 verstehe gzip, Browser 2 nicht. Beide erreichen unsere Website über den selben Proxyserver. Browser 1 holt sich die gzip-Variante, der Proxy speichert diese und schickt sie später Browser 2. Obwohl der mit gzip nichts anzufangen weiß. Nicht so gut.

Also senden wir das Dokument mit einem Response-Header zurück, der den Proxy darüber informiert, wann er die Seite an einen anderen Browser ausliefern darf: Wenn der das gleiche Accept-Encoding vorlegt.

Response-Header:

Vary: Accept-Encoding

Der Vary-Header wurde erst in HTTP/1.1 eingeführt – also bekommen alle Anfragen, die per HTTP/1.0 einschlagen, immer die unkomprimierte Variante.

Jetzt kann der Internet Explorer (zumindest bis Version 6) die unkomprimierte Ressource überhaupt nicht mehr im Cache behalten, und die komprimierte landet auf jeden Fall darin. »Abhilfe« schafft ein weiterer

Response-Header:

Cache-Control: private

Und jetzt kann der Proxy die Ressource nicht mehr speichern.

Um das Thema »Internet Explorer« schnell hinter uns zu bringen, seien noch zwei Bugs erwähnt:

Wenn ein XHTML-Dokument komprimiert und mit XML-Deklaration verschickt wird und überdies sehr lange oder viele Response-Header (Cookies beispielsweise) vorausgehen, dann versucht der Internet Explorer 6 in einigen Versionen, den MIME-Typen zu erraten. Er kommt dann zu dem Schluß, er habe XML vor der Nase – und scheitert kläglich.
Wenn ein komprimiertes Dokument per SSL (HTTPS) angeboten wird, kann es auch passieren, daß der Leser gar nichts sieht.

Inzwischen hat sich die Situation jedoch gebessert.

Zu den Problemen beim Transfer und beim Caching stellt sich noch die Frage: Lohnt es sich?
Das Ein- und Auspacken kostet ja auch Zeit. Gerade bei Dokumenten, die erst bei Abruf komprimiert werden, müssen wir Faktoren berücksichtigen, die eventuell den Zeitgewinn ausstechen: die Serverlast und die Verarbeitungsdauer auf dem Server und beim Client.
Ein 3-kB-Dokument zu komprimieren, bringt überhaupt nichts. Bei 5 kB wird es langsam interessant, und ab 10 kB spürt der Leser den Unterschied.

Wir sollten beide Varianten statisch vorhalten, damit der Server nicht immer wieder dieselbe Arbeit erledigen muß. Hier fällt natürlich noch ein gewisser Koordinationsaufwand an.

Wann also komprimieren?

Wenn die Ressource nicht unbedingt im Cache landen soll und/oder
5 kB überschreitet und
der Server genug Kapazität dafür übrig hat oder beide Varianten fertig vorliegen.

Und wann nicht?

Wenn die Ressource unbedingt in den Cache gelangen soll (Stylesheets in einem Webforum) und noch viele IE-6-Nutzer daherkommen oder
der Server unter hoher Last steht oder
das generierende Skript schon lange genug arbeitet.

Diese Hinweise bitte ich als grobe Richtlinien zu verstehen. Je nach Kontext können sie auch sehr danebenliegen. Per @font-face eingebettete Schriften will man ganz gewiß komprimieren – aber nur einmal verschicken. Hier lohnt sich ein Blick ins Logfile: Welche Browser benutzen meine Leser? Und dann trifft man eine informierte Entscheidung.

WordPress: Shortlinks reloaded

Thomas Scholz — Mon, 11 Jan 2010 21:25:07 +0000

Im April 2009 habe ich gezeigt, wie man in WordPress mit Bordmitteln kurze URLs für Seiten und Artikel erzeugt: Blog-Adresse plus »?p=« plus Post-Id. Das funktioniert einfach und schnell. Nicht.

Formatkrieg

Meine Grundidee war: Ich habe nur einen Ort für die Logik des Verfahrens – die functions.php. Das stellte sich als zu naiv heraus, als die ersten kaputten Crawler aufschlugen, die das Fragezeichen mit einem urlencode() vorbehandelten. Requests auf /%3F=762 sind eben etwas anderes als auf /?=762.

Jetzt mußte ich doch einen zweiten Ort anfassen: die .htaccess.

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} ^/\%3fp\=(\d+)$
RewriteRule ^.* /?p=%1 [L,R=301]

Dann versagte auch die URL-Erkennung bei Twitter: Verlinkt wurde nur der Teil bis zum Fragezeichen, alles dahinter fiel weg.
Also habe ich die Kurz-URLs auf das Format /p762 umgestellt und die .htaccess angepaßt:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} ^/\%3fp\=(\d+)$ [OR]
RewriteCond %{REQUEST_URI} ^/p\=?(\d+)$
RewriteRule ^.* /?p=%1 [L,R=301]

Auftritt Rivva-Bot: Der hat das neue Format um einen Slash / ergänzt, die Fehlerseite bestaunt – und dann blieb er weg. Kein Problem:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} ^/\%3fp\=(\d+)$ [OR]
RewriteCond %{REQUEST_URI} ^/p\=?(\d+)/?$
RewriteRule ^.* /?p=%1 [L,R=301]

Markup

In einem sehr fruchtbaren Ideen-Pingpong (vulgo: Dialog) mit Bernhard Häussner haben wir die perfekte Notation für die Bekanntgabe des Shortlinks gefunden: Ein separater HTTP-Header samt meta-Element:

X-Short-URI" content="http://toscho.de/?p=762">

Interessiert kein Schwein. Am 14. August schuf WordPress.com Tatsachen und verstetigte die sehr schlechte Lösung rel="shortlink" (Referenz). Schade.

Jetzt könnte die URL also so angegeben werden:

Opera: Shortlink im Infopanel

Könnte. Opera, auf den ich unter keinen Umständen verzichte, ignoriert leider genau diesen Link im Info-Panel. Also füge ich als Beziehung noch ein alternate hinzu, damit die Erkennung wieder klappt.
Wer es ausprobieren möchte: F4 drücken, »Leiste anpassen/Erscheinungsbild/Paneele/« und ein Häkchen bei »Info« setzen.

PHP-Code

Ich habe den Code zur Ausgabe in WordPress in eine kleine Klasse mit statischen Methoden gegossen – des armen Mannes Namensraum. Verzeiht mir.

/**
 * Class Short_URI: Short-URIs erzeugen und ausgeben.
 * @author Thomas Scholz 
 * @see http://microformats.org/wiki/rel-shortlink
 * @license GPL 3 <http://www.gnu.org/licenses/gpl.html>
 * @version 1.3
 *
 */
class Short_URI {

    /**
     * Kurz-URI
     * @var string
     */
    protected static $short_uri      = NULL;

    /**
     * Sendet einen Link-HTTP-Header
     * @param bool $headonly Nur bei HEAD-Requests senden?
     * @return void
     */
    public static function send_header($headonly = TRUE)
    {
        if ($headonly and ('HEAD' != $_SERVER['REQUEST_METHOD']) )
        {
            return;
        }
        if ( ! self::prepare() )
        {
            return;
        }
        header('Link: <' . self::$short_uri . '>; rel="shortlink"');
        return;
    }

    public static function link_elem($echo = TRUE)
    {
        if ( ! self::prepare() )
        {
            return;
        }
        $link = ''
                . ' href="' . self::$short_uri . '" />';

        if ( ! $echo)
        {
            return $link;
        }

        echo $link;
        return;

    }

    /**
     * Erzeugt einen Link zum Twittern der aktuellen Seite.
     * @param string|array $args
     * @return string
     */
    static function tweet_link($args = NULL)
    {
        $message_template = 'Lese gerade: %TITLE %URL von @toscho';
        $link_text        = 'Artikel twittern';
        $title_length     = 80;
        $class            = 'twitterlink';
        // Zum Ändern echo=0 übergeben.
        $echo             = TRUE;

        if ( ! is_null($args) )
        {
            if ( is_array($args) )
            {
                extract($args);
            }
            elseif ( is_string($args) )
            {
                parse_str($args);
            }
            else
            {
                trigger_error(
                    '$args muss ein Array oder ein String sein.',
                    E_USER_ERROR
                );
            }
        }
        global $post;

        $title       = trim($post->post_title);

        if ( isset ( $title[$title_length+2] ) )
        {// Verkürzen bei Bedarf
            $title = self::end_on_word(substr($title, 0, $title_length)) . ' …';
        }

        $message = str_replace(
            array('%TITLE', '%URL'),
            array($title, self::$short_uri ),
            $message_template
        );

        $link = '" href="http://twitter.com/home?status=' . urlencode($message)
            . '" title="' . $message . '">'
            . $link_text . '';

        if ($echo)
        {
            echo $link;
            return;
        }

        return $link;
    }

    /**
     * Prüft, ob eine Short-URI erstellt werden soll
     * @return bool
     */
    public static function prepare()
    {
        if ( is_front_page() )
        {
            return FALSE;
        }
        if ( is_page() or is_single() or is_attachment() )
        {
            global $post;

            if ( is_null( self::$short_uri ) )
            {
                self::$short_uri =
                    rtrim(get_option('home'), '/') . '/p' . $post->ID;
            }
            return TRUE;
        }
        // Archive
        return FALSE;
    }

    /**
     * Entfernt unvollständige Worte am Ende eines Strings.
     * @see http://toscho.de/2009/php-funktion-end_on_word/
     * @param $str Zeichenkette
     * @return string
     */
    static function end_on_word($str)
    {
        $str = trim($str);

        // Nur ein Wort, wird also nicht gekürzt.
        if ( FALSE === strpos($str, ' ') )
        {
            return $str;
        }

        // Jedes Wort ein Eintrag im Array …
        $arr   = explode(' ', $str);
        // … letztes Stück wegwerfen …
        array_pop($arr);
        // … den String wieder herstellen und Kommas trimmen.
        return rtrim( implode(' ', $arr), ',;');
    }
}


Wer bis hierhin durchgehalten hat, darf sich das auch als …
WordPress-Plugin Short-URI herunterladen.
Den Tweetlink baut ihr innerhalb des Loops mit diesem Code ein:
do_action('tweet_link');
Oder so:
do_action('tweet_link', 'parameter=wert');
Die darin enthaltene Klasse könnt ihr natürlich auch einfach in die functions.php einbinden, um den Code direkt zu verwenden.
Ich habe ihn unter die GPL 3 gestellt (hallo Helmut!), damit ihr damit machen könnt, was immer ihr wollt. Er ist mir länger geraten, als ich erhofft hatte; das heißt: Er hat sicher auch mehr Fehler. Findet sie!