Image-Replacement: Ersatz für -9999px-Hack

CSS-Image-Replacement

Alle Grafiken, die lediglich der Gestaltung dienen sollten nur über das CSS eingebunden werden. Das fördert eine saubere Trennung zwischen Inhalt und Gestaltung. Oft hat man allerdings Grafik-Elemente, die einen Text komplett ersetzen sollen. Ein Beispiel wären z.B. Buttons oder Navigations-Elemente.

Den Text aus dem HTML zu entfernen ist aus Sicht der Barrierefreiheit und für Suchmaschinen nicht optimal. Aus diesem Grund haben sich einige CSS-Image-Replacement-Methoden etabliert. Eine davon war über die Eigenschaft text-indent den Text aus dem Sichtbereich zu schieben. Beispiel:

.image-replacement {
  background: url('replacement.png') no-repeat;
  text-indent: -9999px;
}

Damit erklärt sich auch der Name “-9999px-Hack”. Diese Methode hat allerdings einen Nachteil: Der Browser erzeugt intern ein Element, dass über 10.000 Pixel breit ist. Das wirkt sich gerade bei Animationen negativ auf die Performance aus, was gerade bei Mobilgeräten zu einem Problem werden kann.

Eine bessere Möglichkeit wäre es den Text einfach nach rechts zu verschieben. Dazu setzt man die Einrückung einfach auf 100% der Element-Breite und verhindert den Textumbruch.

.image-replacement {
  background: url('replacement.png') no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

Nachteil: Der Text darf nur aus einer Zeile bestehen, die darf allerdings beliebig lang sein. Bei den meisten Situationen ist das allerdings kein Problem.

[ via zeldman.com ]

JavaScript-Funktionen überschreiben

JavaScript

Mit JavaScript ist es sehr einfach Funktionen zu überschreiben. Man weißt dem Funktionsnamen einfach eine andere Funktion zu. Beispiel:

var myFunction = function() {
  // do some stuff...
};

myFunction = function() {
  // do other stuff...
};

Es ist aber auch möglich die vorhandene Funktion zu erweitern, um z.B. davor oder danach etwas auszuführen. Das kann dann z.B. so aussehen:

myFunction = (function() {
  var oldMyFunction = myFunction;

  return function() {
    // do some stuff before...

    oldMyFunction.apply(this, arguments);

    // ... and after
  }
})();

Die neue Variable oldMyFunction ist nötig, da sich die Funktion sonst immer wieder selbst aufruft. Durch die Verwendung von apply() und dem Array arguments müssen wir uns nicht um die Parameter kümmern. Es werden alle übergebenen Parameter durchgeschleift.

Mit so einem Code gewinnt man sicherlich keinen Schönheitswettbewerb und dem einfachen Verständnis dient es sicherlich auch nicht, aber gerade für Module die existierenden Code erweitern müssen kann es durchaus nützlich sein.

Metadata-Statements bei InnoDB-Tabellen

Logo von MySQL

Bei großen Datenbanken mit vielen InnoDB-Tabellen benötigen Metadata-Statements wie z.B. SHOW TABLE STATUS teilweise sehr lange. Das kann zu Problemen führen, z.B. wenn man phpMyAdmin verwendet. Durch die lange Ausführungszeit wird das schnell unbenutzbar.

Aber es gibt Abhilfe in Form der Einstellung innodb_stats_on_metadata. Setzt man die auf off, aktualisierst MySQL nicht jedes mal seine Tabellen-Statistiken, was die Performance deutlich verbessert. In meinem Fall dauert eine SHOW TABLE STATUS statt 30s nur noch etwa 500ms.

Mehr Informationen gibt es in der Dokumentation von MySQL.