NEW ! - Joomla Template Green 2.5 für Joomla!

Jetzt auch für Joomla 2.5 im native Mode. Joomla Template Green 2.5 mit float Containern. Vier Container koennt Ihr belegen wie Ihr wollt nebeneinander angeordnet.

CSS3 - ein Ausblick was kommt.

Die Entwicklung von Cascading Stylesheets (CSS) bleibt nicht stehen und so liegt der Entwurf für CSS 3 bereits seit längerem auf dem Tisch des World Wide Web Consortium (W3C). Diese nächste Generation beinhaltet zahlreiche Verbesserungen, die die Layoutentwicklung entscheidend beeinflussen werden.

Das Box-Modell und seine Grenzen

Bei dem bestehenden, mit CSS1 eingeführten Box-Modell ergibt sich die Gesamtbreite einer Box aus der Addition des Inhaltsbereiches (width), der Innenabstände (padding) und der Rahmen (border). Aus dieser Regelung ergeben sich für die moderne Layoutgestaltung jedoch einige Nachteile. So lässt sich beispielsweise die Gesamtbreite einer Box nur dann im Vorfeld ermitteln, wenn innerhalb der einzelnen Bestandteile (width, padding und border) keine unterschiedlichen Maßeinheiten verwendet werden. Sollen alle Bestandteile des Box-Modells zum Einsatz kommen, so reduzieren sich die sinnvoll verwendbaren Maßeinheiten auf [px] und [em], denn Rahmenbreiten in Prozentangaben sind bisher nicht erlaubt. Die Freiheiten des Seitenerstellers sind damit von vorn herein stark einschränkt.

Verwendet man hingegen unterschiedliche Maßeinheiten - Breite des Inhaltsbereiches als Prozentwert, Innenabstände in [em] und Rahmenbreiten in [px] - lässt sich mit dem derzeitigen Box-Modell die Gesamtbreite einer Box nicht mehr exakt bestimmen. Während die Breite des Inhaltsbereiches des Containers direkt angegeben werden kann, kann die Gesamtbreite der Box (der für die Layoutgestaltung wichtigere Wert) erst beim Rendering dynamisch vom Browser ermittelt werden. Dieser Umstand verkompliziert derzeit die Erstellung flexibler Layouts noch unnötig. Beseitigen lässt sich diese Designschwäche von CSS bisher nur durch die Verschachtelung mehrerer Boxen und damit mit zusätzlichem Markup.

Neue Möglichkeiten mit CSS 3

box-sizing - ein alternatives Box-Modell

Mit der Eigenschaft box-sizing hält ein alternatives Box-Modell Einzug in CSS 3. Dieses soll die oben beschriebene Desginschwäche beseitigen, indem nach Aktivierung durch box-sizing:border-box die Angaben für width als Gesamtbreite interpretiert werden. Innenabstände und Rahmen werden von dieser Gesamtbreite subtrahiert. Damit kann die Gesamtbreite direkt vorgegeben werden und die effektiv verbleibende Nutzbreite im Innenraum der Box wird vom Browser dynamisch festgelegt. Durch diese Änderungen haben padding und border keinen Einfluss mehr auf die Gesamtbreite einer Box, was den Umgang mit verschiedenen Einheiten und flexiblen Breiten enorm vereinfacht.

Dieses neue Box-Modell stellt keinen Ersatz, sondern lediglich eine Alternative dar. Zwischen dem alten Box-Modell von CSS 1 (box-sizing:content-box) und dem alternativen Modell von CSS 3 (box-sizing:border-box) kann beliebig umgeschaltet werden.

calc() - Rechnen innerhalb von CSS

Der aktuelle Entwurf für CSS 3 enthält noch einen weiteren interessanter Ansatz, dem zu Beginn beschriebenen Designproblem Herr zu werden. Dieser Ansatz sieht vor, dass es in Zukunft möglich sein wird, neben konkreten Größenangaben auch eine Rechenvorschrift zu übergeben. Ein Beispiel für zwei nebeneinander liegende flexible Boxen:

#left {
float:left;
padding: 0 1em;
border-right: 1px #888 dotted
width: calc( 30% - 2*1em - 1px );
}

#right {
float:right;
padding: 0 1em;
width: calc( 70% - 2*1em );
}

Durch die Möglichkeiten der neuen Funktion calc() ist es eigentlich egal, mit ob mit dem alten oder dem neuen Box-Modell gearbeitet wird. Durch die Rechenvorschrift können verschiedene Einheiten beliebig miteinander kombiniert werden. Für der Gestaltung von Boxen mit flexibler Breite steht damit gleich noch ein zweiter Lösungsansatz bereit.

Column - Spaltensatz mit CSS

Noch heute basieren viele Layouts auf Tabellenkonstrukten - dem Gestaltungsmittel der 90er Jahre des letzten Jahrhunderts. CSS 2 sieht keinen Spaltensatz vor und erfordert ein Umdenken des Designers bei der Layoutentwicklung. Die Schwierigkeiten, die sich aus dieser Entscheidung des W3C ergeben, sind Webdesignern bestens vertraut. Nur sehr langsam haben sich moderne CSS-basierte Layouttechniken entwickelt, die dieses Manko des CSS-Standards mit zunehmend fehlerfreier Unterstützung der Browser vergessen lassen. In CSS 3 wird der allseits beliebte Spaltensatz über die Eigenschaft column nun endlich Einzug in den CSS-Standard finden.

#3col_container {
column-count: 3;
column-gap: 20px;
…
}

Über die Eigenschaften column-count wird die Anzahl der Spalten innerhalb eines Containers festgelegt. Der Wert für column-gap regelt den horizontalen Abstand zwischen den einzeln Spalten. Auf diese Weise wird die effektive Breite der Spalte durch den Browser ermittelt. Der Designer gibt lediglich die Anzahl der gewünschten Spalten vor. In erster Linie eignet sich diese Eigenschaft zur Aufteilung von Texten in mehrere nebeneinander liegende Spalten. Ob die Flexibilität dieser Eigenschaft jedoch ausreicht, die mittlerweile recht hohen Ansprüche an CSS-basierte Spaltenlayouts zu erfüllen, um die derzeitigen Techniken ersetzen zu können, wird sich erst noch zeigen müssen.

Unabhängig davon können Sie sich auch schon heute ein Bild von den Möglichkeiten des CSS 3-Spaltensatzes machen, wenn Sie den folgenden Links mit dem Firefox Browser folgen, der die Eigenschaft bereits unterstützt.

Browserweichen für CSS3

Der Umstand, dass sich CSS-Layouts langsam in der breiten Masse durchsetzen ist zu einem großen Teil dem Fakt geschuldet, dass sich an dem etablierten Standard seit vielen Jahren nichts geändert hat. Bereits der IE5.0 bot eine recht ordentliche CSS2-Unterstützung doch erst mit frisch veröffentlichten Internet Explorer 7 wird diese endlich einigermaßen fehlerfrei. Dazwischen liegen 6 Jahre. Auch andere Browser haben Zeit für den Reifeprozess benötigt.

Die Neuerungen von CSS 3 ermöglichen eine völlig neue Denkweise bei der Layouterstellung. Der Spaltensatz und die Möglichkeiten des neuen Box-Modells können zu erheblichen Vereinfachungen der Quelltextstruktur einer Webseite führen. Doch in der Realität müssen Webdesigner auch jetzt schon eine Vielzahl an Browsern und dabei jeweils in zahlreichen mindestens zwei oder mehr Generationsstufen unterstützen. Das wird sich auch nach der Einführung von CSS3 nicht großartig ändern.

Doch wie soll man die neuen Techniken einsetzen, wenn gleichzeitig ältere Browsergenerationen noch mit dem gleichen CSS klar kommen sollen? Eine theoretische Möglichkeit wären CSS-Browserweichen. Auf diese Weise ließen sich alte Browser mit reiner CSS2.x-Unterstützung gezielt mit gesonderten Stylesheets versorgen. Ob das reicht, ist dabei noch fraglich denn beispielsweise beim Spaltensatz könnten mit CSS 3 selbst aufwändige CSS-Layouts auf nur wenige erforderliche Container zusammen schrumpfen. Die Möglichkeiten von CSS 3 lassen sich vermutlich erst dann voll ausschöpfen, wenn auf CSS 2 (bei dem zusätzliches Markup benötigt würde) keine Rücksicht mehr genommen werden braucht.

Box-Modell-Chaos

Wer in dem neuen Box-Modell das Konzept der alten Internet Explorer-Versionen erkannt hat, liegt nicht daneben. Microsoft hat bereits beim IE5 die Probleme erkannt und ein fortschrittlicheres Box-Modell implementiert. Leider verstieß es zum damaligen Zeitpunkt gegen den W3C-Standard und hat damit die Layoutentwicklung nicht wirklich vereinfacht. Der Internet Explorer 6 hat das Box-Modell zumindest im Standardkonformen Darstellungsmodus korrekt interpretiert und im IE7 funktioniert es endlich auch im Quirks Modus.

Und jetzt, wo der Browser endlich macht, was der Standard vorgibt, wird mit CSS 3 das "fehlerhafte" Box-Modell des IE plötzlich offiziell eingeführt.

Ausblick

Auf Grund der bisher ungelösten Probleme für den Übergang von CSS 2 auf CSS 3 wäre es wohl das Beste, wenn der Wechsel noch ein Weilchen auf sich warten lassen würde. Die Browser-Entwickler benötigen ausreichend Zeit, um die Funktionalität in ihre Software zu integrieren und ausgiebig zu testen. Niemandem ist mit einem fehlerbehafteten CSS 3-Browser geholfen. Man wird damit rechnen müssen, dass auch unter den wichtigen Browsern der ein- oder andere sein wird, der mehr als nur einen Generationswechsel benötigt, um den kommenden neuen Standard zu unterstützen. Wenn es schneller geht, wird es allen zugute kommen.

Bereits heute unterstützten zumindest einige moderne Browser einzelne der zahlreichen neuen Funktionen von CSS 3.

Fazit

CSS 3 bringt spannende und hilfreiche Neuerungen für die Entwicklung von CSS-Layouts. Allerdings ist man von der Einführung vermutlich noch weit entfernt und auch dann ist noch ein gutes Stück zu gehen bis die breite Anwendung sinnvoll möglich wird.

Transfer Calc 1.6

Volumen, Bandbreite zu Zeit






Akku Berechnung 1.6

Akku Leistung