Kategorien
Design HTML/CSS

CSS3: Der Stand der Dinge

von Steffen Wenzel

Cascading Style Sheets Level 1 ist längst etablierter Standard, auch CSS2 wird immer flächendeckender unterstützt. Aber wie sieht es aktuell mit CSS Level 3 aus? Welche Innovationen plant das W3C, und wann können diese in die Praxis umgesetzt werden?

Module
Die CSS-Spezifikation der dritten Generation wird – im Gegensatz zu seinen Vorgängern – kein zusammenhängendes Dokument sein, sondern aus einzelnen Modulen bestehen, die sich ausschließlich mit der Syntax oder dem Box Model befassen. Hier wurde an die Autoren gedacht, die Dokumente so einfacher aktualisieren und bearbeiten können.

Außerdem soll diese Regelung den User Agents (Programme oder Hardware, die das Dokument dann darstellen oder lesen soll) die Möglichkeit eröffnen, sich die Module auszusuchen, die sie unterstützen. So muss ein PDA mit Schwarzweiß-Display das Farbenmodul nicht komplett unterstützen. Dazu wird vom W3C eine Untergruppe, die verschiedene Module enthalten soll, vorgegeben. Wenn sich ein Hersteller für ein Modul entscheidet, muss er es auch nach dem Willen der Erfinder voll und ganz unterstützen. Ob sich diese auch daran halten, wird die Zukunft zeigen.

Status
Mit einer fertigen Recommendation ist in nächster Zeit nicht zu rechnen, denn zu vielen Modulen wurde nach jetzigem Stand noch keine Veröffentlichung oder Working Draft gemacht; zumindest keine Öffentlichen. Auch viele angesetzte Termine wurden bereits überschritten. Andererseits besteht kein wirklicher Grund zur Eile. Die CSS2-Empfehlung stammt aus dem Jahr 1998 und ist auch noch nicht komplett umgesetzt.

Die Browserhersteller scheint das aber nicht zu interessieren. Sie picken sich stattdessen die interessantesten Features schon jetzt heraus, wie die sprichwörtlichen Rosinen aus dem Kuchen. So haben Mozilla und der Internet Explorer bereits proprietäre Deklarationen, um Transparenz zu erzeugen, obwohl diese Funktion erst ab CSS3 vorgesehen ist. Nebenbei: beide liegen etwas daneben. Die Eigenschaft soll schlicht und einfach „opacity“ heißen.

Bisher beschränken sich die Neuerungen hauptsächlich auf eine Präzisierung der voran gegangenen CSS-Versionen. So kann man beispielsweise bestimmen, an welchem X/Y-Wert der Hintergrund beginnen soll oder ob er sich in dem Rahmen erstreckt. Auf einige Module möchte ich aber doch etwas detaillierter eingehen.

Medien
Mit CSS3 wird es möglich sein, das Medium, auf dem das Dokument angezeigt wird, mit komplexen Abfragen zu ermitteln. Bisher schrieb man schlicht und einfach

 <link 
rel="stylesheet" type="text/css" media="print, handheld" 
href="print.css">
    

um ein Stylesheet für PDA und Ausdruck festzulegen. Jetzt wird es möglich, die folgende Abfrage zu starten:

      <link 
rel="stylesheet" media="screen, print and resolution > 90dpi" 
href="highres.css">
    

Dies überprüft, ob das Anzeigemedium entweder ein Bildschirm oder ein Drucker ist. Dieser Drucker muss aber mit mehr als 90dpi Auflösung arbeiten, sonst wird dieses Stylesheet nicht verwendet. Damit kann man das Problem mit kleinen Schriftarten umschiffen, die zwar zur Zeit recht beliebt, aber auf einem niedrig auflösenden Ausdruck schwer lesbar sind.

Selectors
Auch die Selectors werden um einige Funktionen erweitert. (Der Selector in der Deklaration P { font-size: 13px; } ist P. P.footer wäre auch einer.) Man wird die Möglichkeit haben, vom User ausgewählte Checkboxen anders zu formatieren als nicht ausgewählte oder jene Elemente, die einen bestimmten String (Buchstaben- oder Zeichenkette) enthalten, der mit einem gelben Hintergrund versehen ist. Eine praktische Anwendung wäre hier eine DHTML-Suchfunktion, die vom User eingegebene Wörter sucht und den ganzen Absatz hervorhebt.

Mehrspaltiges Layout
Das W3C möchte eine Syntax schaffen, mittels derer ein vielseitiges mehrspaltiges Layout erzeugt werden kann, ohne komplizierten Code schreiben zu müssen. Das könnte auch funktionieren, denn mit nur einer Hand voll Deklarationen wird dem Browser mitgeteilt, wie er die Spalten zu rendern hat. Dieser Befehlscheint aber mehr darauf ausgerichtet zu sein, Text in mehrere nebeneinander liegende Spalten zu einzuteilen, wie es bei Zeitungen der Fall ist – weniger als Layoutmittel zum Ersatz von Tabellen. Ob man damit aber mit ein wenig kreativem Umgang CSS-basierte Layouts erzeugen kann, wird sich noch zeigen.

Paged Media
Ein spezielles Stylesheet für den Ausdruck zu erstellen ist längst Standard, oder sollte es zumindest sein. Bisher blieben aber einige Wünsche offen. So sind zum Beispiel Hyperlinks ein Problem. Mit CSS3 wird man aber die Möglichkeit haben sich in der ausgedruckten Version auf das Ziel des Links zu beziehen. Eine Kostprobe:

      <p>Lesen Sie bitte auch die <a href="#copyright">Copyrighthinweise</a>.
    

Am Ende der Seite steht folgendes:

      <h1><a name="copyright">Informationen 
zum Copyright</a></h1> 

Für gewöhnlich würde nur „Lesen Sie bitte auch die Copyrighthinweise“ ausgedruckt werden. Indem man sich aber auf das Ziel bezieht und den Inhalt des Elements auswertet, wird man auch „Lesen Sie bitte auch die Copyrighthinweise auf Seite 3“ oder „Lesen Sie bitte auch die Informationen zum Copyright (S. 3)“ ausdrucken können. Ferner könnte man auch den Inhalt des Attributs „href“ auslesen und so schreiben: Dr. Web (http://www.drweb.de/) ist spitze!. Das alles wird recht unkompliziert über die content-Eigenschaft bewerkstelligt.

Des weiteren wird es machbar sein, Seitenzahl (auch Seite 2 von 5), den aktuellen Titel des Kapitels (aus der Überschrift gezogen), Datum der Erstellung und Angaben wie Autor oder URL des Dokuments im Kopf- oder Fußzeile des Blattes anzuzeigen. Und das ohne großen Aufwand.

Bilanz
Abschließend kann man sagen, dass CSS3 viel komplexere und detailliertere Eingriffe in die Darstellung des Dokuments erlaubt als bisher. Einige Neuerungen erinnern mich spontan an den Beruf eines Schriftsetzers. Ob jeder Webmaster diesen Aufwand betreiben will oder doch nur die effektvollsten Features verwendet bleibt abzuwarten. Zu wünschen wäre es allemal, da das Web nach wie vor zu einem Löwenanteil aus schriftlichen Informationen besteht und die Lesbarkeit im Vordergrund stehen sollte.

Kategorien
Design HTML/CSS

CSS: Spaß mit Rahmen

Rahmen sind ein wichtiges Gestaltungselement, wenn es um Tabellen und das Seitenlayout geht. CSS-Befehle sind hier besonders praktisch. Sie lassen sich auch auf ganze Seiten anwenden – mit überraschenden Ergebnissen.

Die Handhabung ist einfach, es genügt eine Ergänzung im <body>-Tag nach diesem Muster:

 <body style="border : 150px solid yellow;">

Das Ergebnis erinnert auf den ersten Blick an eine geframte Seite. Live Demo. Der dicke Rahmen lässt nur einen verhältnismäßig kleinen Bereich für den eigentlichen Seiteninhalt frei, der sich der Browsergröße anpasst. Damit ist es allerdings noch nicht ganz getan. Mozilla/Netscape Browser zeigen füllen das Browserfenster nicht komplett aus. Und diesen Extrarahmen zu beseitigen, werden die Randabstände manipuliert:

      <body
style="margin : 0px; border : 150px solid yellow;">

Leider reicht auch das noch nicht, der Browser zeigt den Rahmen nämlich nicht komplett an, weil die Seite nicht über ausreichenden Inhalt verfügt. Hat man den, gibt es kein Problem; ist nicht genug Inhalt vorhanden, hilft man ganz einfach nach. Wir definieren einen Layer, der die gesamte Seite füllt. Etwa so:

      <div
style="width : 100%; height : 100%;">Seiteninhalt</div>

Opera spielt nicht ganz mit, ältere Browser müssen hier sowieso passen. Interessant wird die Sache mit kreativen Variationen. Wer Lust hat, probiert einmal die verschiedenen Rahmenarten durch. Als da wären:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

Selbstverständlich kann jede Seite des Browserfensters anders formatiert werden. Damit sind ausgesprochen bunte und ungewöhnliche Konstruktionen möglich. Das könnte zum Beispiel so aussehen:

      <body style="margin
: 0px; border-left : 150px solid yellow; border-right : 100px ridge blue; border-top
: 120px double red; border-bottom : 150px groove green;">

Natürlich sind sich auch hier die Browser nicht ganz einig, was angezeigt werden sollte. Jeder macht es ein wenig anders, aber im Grunde erhöht das noch den Reiz. Es macht übrigens einen Unterschied, ob die Rahmendefinitionen im <body>-Tag oder im <HTML>-Tag untergebracht werden, was ebenfalls möglich ist. Und natürlich kann auch der Layer für den Inhalt mit einem lustigen Rahmen umgeben werden. Was dabei herauskommt, ist freilich kein funktionales Alltags-Design mehr.

Kategorien
Design HTML/CSS

Gepunktete Rahmen

Auch das Webdesign unterliegt modischen Strömungen. Mit erweiterten Standards und neuen Browsern ändert sich auch das Aussehen der Websites.

Zunehmend häufiger zu finden sind gestrichelte Linien, sie ersetzen die die bekannten, dicken Tabellenlinien und da man sie bequem und einfach mit CSS erzeugen kann, braucht man keine Grafiken mehr.

Der Quellcode ist einfach, mit Containern statt mit Tabellen klappt es natürlich genauso.

Inhalt
 <table
style="border : dotted 2px black;" 
width="200" border="0"><tr><td>Inhalt</td>
</tr></table>

Zu sehen sind sie zwar nur mit modernen Browsern, aber das ist nicht weiter schlimm, da sie ja die Funktionalität nicht einschränken. Wählt man anders als im Beispiel oben eine Breite von nur einem 1px, zeigen Mozilla/Netscape/Opera und der IE ein anderes Bild. Microsofts Produkt zaubert gestrichelte Linien auf den Monitor, hässlich ist aber auch das nicht.