Um Links nicht nur per Maus-Hover sondern auch per Focus mit der Tastatur hervorzuheben muss für jeden link a:hover und a:focus definiert werden. IE6 kann kein a:focus, dafür wird a:active bei erhaltenem Focus angewandt.

Generell können die Pseudo-Klassen :hover und :focus auf alle HTML-Elemente angewandt werden, wobei :focus nur bei Links und Formularelementen zum Einsatz kommt. Zu beachten ist: IE6 kennt kein :focus und IE7 kennt :focus nur für Links.

:hover - mit der Maus über dem Element

:focus - Element hat focus

:active - Element ist angeklickt

MIt Hilfe des emHacks ist es möglich die relative Größeneinheit em sinnvoll und vereinfacht zu nutzen, da dieser 1em immer auf 10px anstatt 16px setzt und damit die Umrechnung erheblich leichter wird.

Der Hack sollte als erste CSS-Definition eingefügt werden:

Achtung: im InternetExplorer stimmt die Umrechnung nur für kleinere Werte, bei größeren Werte (>100px) werden die Angaben auf Grund von Rundungsfehlern nicht exakt in Pixel umgerechnet. Dies ist ein Allgemein bekanntes Problem und tritt auch bei Prozentangaben auf.

IE6 unterstützt dass CSS-Attribut min-height nicht. Folgender Workaround schafft Abhilfe:

d, css is feature."

Das gerade die weit verbreiten Browser von Microsoft nicht gerade für ihre CSS-Unterstützung berühmt sind ist bekannt, dass sich die meisten Layout-Bugs allerdings mit dem zuweisen des hasLayout-Attributes für die betroffenen HTML-Elemente beheben lässt eher weniger.

ist eine der wirksamsten Waffen gegen Layoutfehler. Hilft diese Eigenschaft nicht oder ist die Anwendung nicht möglich könnte auch eine der folgenden Eigenschaften Abhilfe schaffen.

Die meisten Hover-Effecte auf Grafiken werden mittels JS gelöst. Diese Lösung basiert rein auf CSS. Dabei enthält der betreffende Link als Inhalt das Ausgangs-Icon. Per CSS wird dieses ausgeblendet und als Hintergrundgrafik das selbe Icon noch einmal gesetzt. Dieses kann dann simple per :hover oder :focus und CSS ausgewechselt werden.

HTML

CSS

Ein schneller Webserver ist kein garant für den schnellen Aufbau einer Webseite im Browser des Clients. Die unten angeführten Punkte helfen bei der Optimierung der Ladezeiten.

Tools für die Ladezeiten-Analyse

• Firefox-Plugins: FireBug, YSlow
• Safari: eingebaute Entwickler Tools:
• Web: http://webpagetest.org/

9 Tipps für optimierte Ladezeiten

Dateien säubern

Liefern Sie Ihre CSS, JS und HTML/PHP Dateien gesäubert aus. Entfernen Sie unnötige Kommentare, Leerzeichen und Leerzeilen. JS-Libraries sollten immer in der vorliegenden Minified-Version verwendet werden. Auch eigene JS und CSS-Dateien können durch spezielle "Minifier" verkleinert werden, meistens sind diese jedoch sehr fehleranfällig.

Gerade bei Seiten in denen es Seiten mit sehr kurze und sehr lange Inhalten gibt, springt das Layout beim automatischen ein- bzw. ausblenden der Scrollleiste durch den Webbrowser. Daher ist es oft ratsam die Anzeige der Scrollleiste von Anfang an und auf allen Seiten zu erzwingen. Dabei hilft das folgende CSS-Snippet: