Heute möchte ich kurz die korrekte Verwendung von HTML Inline-Blöcken vorstellen, insbesondere im Internet Explorer 7 und anderen älteren Browsern.

Was sind Inline-Blöcke überhaupt?

HTML Inline-Blöcke sind nicht anderes, als "inline" dargestellte Elemente, die also z.B. innerhalb eines Texts vorkommen können, ohne das sie dabei automatisch einen Umbruch erzeugen. Normalerweise wirken sich auf Inline-Elemente Werte wie z.B. Margin und Padding nicht aus - auf Inline-Block-Elemente hingegen schon! Und das ist der kleine aber feine Unterschied zu den ursprünglichen Inline-Elementen.

Wie es so oft ist, funktionieren gewisse Dinge im Internet Explorer nicht. In diesem Fall im Internet Explorer 7 und 6. Da in unserem Web-Projekten vor allem der IE7 bei den Browser-Optimierungen leider noch immer einen Rolle spielt, ist es erforderlich, Inline-Block-Elemente korrekt darstellen zu können. Dafür sind 2 weitere Zeilen CSS-Code notwendig. Eine weitere Zeile sorgt zudem für die richtige Anwendung in Mozilla Firefox 2.

.nav li {
  display: inline-block;
  display: -moz-inline-stack; /* Für Mozilla Firefox 2 */
  width: 170px;
  margin: 5px;
  padding: 3px;
  zoom: 1; /* Für IE7 und darunter */
  *display: inline; /* Für IE7 und darunter */
 }

Zur Anwendung kommt dabei ein kleiner CSS-Hack, der jedoch eine große Auswirkung auf den Internet Explorer hat.

Bei einem aktuellen Projekt, ist das Screendesign so gestaltet, dass transparente Schatten zum Einsatz kommen. Um transparente PNG-Grafiken dafür zu vermeiden, sollte die CSS-Anweisung box-shadow zum Einsatz kommen. Allerdings lassen sich damit nur Schattierungen, unter Angabe eines Farbwerts mit Hexadezimal-Werten (also z.B. #ccc) und somit ohne transparenten Einstellungsmöglichkeiten umsetzen.

Um jedoch für transparente Schatten keine PNG-Grafiken einsetzen zu müssen, bietet sich die Angabe des rgba()-Statements an, wie folgendes Beispiel zeigt:

#box {
  box-shadow: -3px 3px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: -3px 3px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: -3px 3px 0px rgba(0, 0, 0, 0.1);
}

Bei rgba() werden bei den ersten 3 Parametern die RGB-Werte einer Farbe eingegeben. Als 4. Parameter lässt sich ein Alpha-Wert hinzufügen. In diesem Fall bekommt das Element mit der ID #box einen schwarzen Schatten zugewiesen, der eine Transparenz von 10% aufweist.

Zur vollständigen Erklärung des Beispiels: -moz-box-shadow wird für Gecko-basierte Browser (z.B. Firefox) und -webkit-box-shadow wird für Webkit-basierte Browser (z.B. Google Chrome oder Safari) benötigt.

Bei css-tricks.com gibt es eine Übersicht über die Browser-Unterstütztung von rgba() und werden Möglichkeiten für die Verwendung von RGB-Farbangaben im Internet Explorer gezeigt.

Sencha, das vor allem durch die Frameworks Ext Js und Sencha Touch bekannt ist, veröffentlichte mit dem Animator ein neues GUI-Programm, mit dem sich Animationen auf einfache Weise mit CSS3 erstellen lassen. Das Produkt kann durchaus als Konkurrenz zu Flash gesehen werden, da für einfache und kleine Animation nicht mehr das Plugin aus dem Hause Adobe benötigt wird und auf die bestehenden CSS-Kenntnisse zurückgegriffen werden kann.

Der größte Vorteil an Sencha Animator ist die Kompatibilität mit dem iPhone und iPad, da bisher auf diesen Geräten Flash nicht unterstützt wurde. Die erstellten Animationen werden auf allen (mobilen) Geräten unterstützt, auf denen ein WebKit-basierter Browser installiert ist.

Eine große Zielgruppe dürfte auch die Werbebranche sein, der nun die Möglichkeit geboten wird, animierte Banner für das Mobile Web zu erstellen die plattformübergreifend abgerufen werden können.

In einem Video zeigt Sencha die Bedienung des Animators:

Mit folgenden Code wird ein DIV-Container mit einer Breite von 800px und einer Höhe von 500px horizontal und vertikal im Browser-Fenster zentriert. Mit dem zusätzlichen Container "valign_hlp" wird das Problem gelöst, dass der obere Bereiche des Containers abgeschnitten wird, sobald sich das Browser-Fenster zu sehr verkleinert - was in Zeiten von Netbooks und Smartphones gar nicht mal so selten vorkommt.

Das HTML-Gerüst und der CSS-Code sehen wie folgt aus:

<div id="valign_hlp">
  <div id="container"><!-- Der eigentliche Inhalt der Site --></div>
</div>

#valign_hlp, #container {
	margin: 0;
	padding: 0;
	position: absolute;
}
#valign_hlp {
	width: 100%;
	height: 100%;
	min-height: 500px;
	min-width: 800px;
}
#container {
	top: 50%;
	left: 50%;
	margin: -250px 0 0 -400px;
	width: 800px;
	height: 500px;
	min-height: 500px;
}