Browser- / CSS Hacks – Internet Explorer

Browser oder CSS Hacks sind Anweisungen die im CSS geschrieben werden.
Das Problem ist, daß unterschiedliche Browser ein und denselben Befehl unterschiedlich darstellen. Besonders erwähnt sei hier der Internet Explorer 5 bzw. 6 deren CSS 2 Unterstützung gelinde gesagt mangelhaft ist. Desshalb gehen folgende Hacks besonders drauf ein spezielle Anweisungen für die Microsoftbrowser zu schreiben ohne andere Browser zu beeinflussen.

Kind-Selektor oder Child Selector

Der Kind Selektor wird von keiner Version des Internet Explorer ausgelesen (bis einschließlich Version 7). Er eignet sich also um Formatierungen vor dem IE zu verstecken.

html>body b {color: red;}

Konkret:
Alles was unterhalb des body Elements fett (b) geschrieben ist hat eine rote Schriftfarbe. Im IE wird das nicht erkannt und das Element wird nur fett und nicht fett und rot dargestellt.

Star Hack

Der Star Hack wird von allen Internet Explorern bis einschließlich Version 6 ausgelesen. Andere Browser ignorieren ihn.

div.content {width:600px;}
* html div.content {width:650px;}

Konkret:
In allen Browsern wird das div.content in 600 Pixel Breite dargestellt. Der IE zeigt es jedoch in 650 Pixel Breite an.

Star Plus Hack

Der Star Plus Hack wird nur vom Internet Explorer 7 interpretiert. Andere Browser ignorieren ihn.

div.content {width:600px;}
*:first-child+html div.content {width:650px;}

Konkret:
In allen Browsern wird das div.content in 600 Pixel Breite dargestellt. Der IE 7 zeigt es jedoch in 650 Pixel Breite an. Lässt man den Bereich first-child weg wird er ebenso von Opera interpretiert.

Lightbox, Greybox, Thickbox usw. – Bilderanzeige auf der Website

Um Bilder und vor allem eine Bildergallerien optisch ansprechend im Web zu präsentieren verwendet man mittlerweile einige pfiffiges Javascripts. Die Teile nennen sich Thickbox, ThickerBox, GreyBox, GreyBox Redux, Leightbox, Lytebox usw.

Die Dinger machen irgendwie alle das gleiche .. wer jetzt keine Ahnung hat wovon ich rede kann sich hier mal ein Beispiel ansehen. Man kann also coole Bildergalerien auf seiner Website einbinden. Alles was es dazu braucht sind ein paar Javascripts und ein CSS File

Das ursprüngliche Script heisst Lightbox und wurde von Lokesh Dhakar geschrieben. Mittlerweile gibt es jede Menge weiterer Scripte die ganz unterschiedliche Dinge leisten.

Hier nun ein Überblick:

  • Thickbox
    jQuery, AJAX, erlaubt Bilder oder HTML
  • Slightly ThickerBox
    quasi ein Klon der Thickbox, integriert “Vor” und “Zurück” also perfekt für ganze Gallerien
  • GreyBox
    ein etwas anderer Ansatz in der optischen Präsentation
  • GreyBox Redux
    die Greybox etwas abgespeckt, auch für HTML Darstellung
  • Multifaceted Lightbox
    4 verschiedene Datentypen die in die Box geladen werden können: Strings, Bilder, Elemente und AJAX
  • Leightbox
    Der Inhalt der Box steht im HTML also auch für Suchmaschinen geeignet
  • xilinus
    sehr ausführliches und umfanreiches Script das nahezu keine Wünsche offen lässt
  • Lightbox Plus
    Lightbox plus mehr Features z.b. automatisches Resizing
  • Litebox
    schlanke und abgespeckte Version der Lightbox
  • iBox
    für Bilder, HTML, AJAX, Login Boxen usw.
  • Slimbox
    superschlanker Lightbox Klon (16KB) 100% kompatibel mit der ursprünglichen Lightbox
  • Lytebox
    gefällt mir persönlich fast am besten

Es gibt noch einige mehr .. aber mit dieser Liste müsste man alle gängigen Einsatzgebiete erschlagen. Die Lightbox gibt es z.b. auch als Plugin für WordPress oder Serendipity.

Webstandards

Das 42blue Blog über Webstandards, (x)HTML, CSS, Grafikbearbeitung, XML, Java Script, Browser und alles was in entferntester Weise mit dem Web und den Technologien dahinter zu tun hat. Ich arbeite Hauptberuflich als Webdesigner und stolpere täglich über soviele Dinge die mir nützlich und lästig sind das sie das Blog hier innerhalb von kürzester Zeit wie fast von alleine füllen sollte.

Ich erhebe mit diesem Blog keinen Anspruch auf Vollständigkeit, Richtigkeit oder sonst irgendwas. Es soll einfach für mich und alle anderen die es brauchen ein Nachschlagewerk werden in dem ich alles was mit Webtechnologien und Webstandards zu tun hat sammle.

Heute ist der 28 November 2008 und das ganze war eine spontane Idee.