Kategorien
Design HTML/CSS

Druckreif – Webseiten für den Ausdruck optimieren

Wichtiges, Notwendiges und Interessantes darf und will man nicht verlieren. Auch wenn die Zeit fehlt oder das Lesen am Monitor schwer fällt, Webseiten werden häufig ausgedruckt. Gutes Webdesign berücksichtigt das.

Grundlage für einen Ausdruck ist eine entsprechende Druckversion. Die wird entweder separat angelegt und ist über einen Link zugänglich oder man verwendet Content Management, das Form und Inhalt so von einander trennt, dass verschiedene Ausgabegeräte berücksichtigt werden können. Mit Stylesheets fährt man am besten.

Monitor und Papier unterschieden sich drastisch voneinander. Allein die Auflösung eines modernen Druckers ist um ein Vielfaches höher. Zudem ist der Leser durch Bücher und Zeitschriften ein anspruchsvolles, professionelles Layout gewohnt, ein simpler Textblock reicht hier nicht aus.

Hyperlinks
Sie werden in einem Ausdruck nicht gebraucht und können weggelassen werden. Es genügt, wenn Sie nicht mehr als solche erkennbar sind – dazu wird ihre Farbe der des Textes gleichgesetzt und die Unterstreichung, respektive Formatierung entfernt. Sollte ein Beitrag trotzdem wichtige Links enthalten, bietet es sich an, diese am Ende des Textes in ausgeschriebener Form anzubieten.

Seitenränder
Seiten, die breite Tabellen, große Grafiken oder Frames verwenden können selten korrekt ausgedruckt werden. Auch eine spezielle Formatierung für den Ausdruck muss den linken und den rechten Rand berücksichtigen. Einige Zentimeter dürfen es da schon sein, schließlich sollen die Zeilen nicht zu breit werden und ein Blatt Papier soll gut in der Hand gehalten werden können.

Schriftarten
Im Web gilt Verdana als erste Wahl in Sachen Lesbarkeit. Verdana macht auch ausgedruckt eine gute Figur, doch auch eine Standard Serifenschrift wie die Times schränkt die Lesbarkeit eines Ausdrucks keineswegs ein. Viele Leser bevorzugen sie sogar, weil sie ähnliches aus Zeitungen gewohnt sind. Die Schriftgröße kann in der Regel beibehalten werden. Am besten testet man selbst, was man am angenehmsten findet. Kleine Schriften sind ausgedruckt besser lesbar als am Monitor.

Farben
Bedenken Sie, dass nicht überall Farbdrucker verfügbar sind. Ein Probedruck zeigt, ob wichtige Informationen verloren gehen.

Grafiken
Der Ausdruck von Bildern ist teuer, da hier viel Toner und Tinte verbraucht werden. Muten Sie ihren Lesern das nur zu, wenn es auch wichtig ist, etwa wenn Schaubilder oder Diagramme vorkommen. Eine reine Illustration oder Icons die der Navigation dienen müssen nicht mit aufs Papier. Farbige Grafiken können bei einem Ausdruck in Schwarzweiß ebenfalls einen Teil ihrer Information verlieren.

Zusätzliche Informationen
Spendieren Sie Ihren für den Ausdruck optimierten Seiten ein Copyrightvermerk. Wer mag, fügt eine URL oder weiterführende Hyperlinks an.

Auszeichnungen
Formatierungen wie fett oder kursiv sehen gedruckt besser aus als am Monitor, sie dürfen nicht verloren gehen. Wer korrekte Anführungszeichen verwendet und Texte sorgfältig aufbereitet, macht gedruckt einfach mehr her. Mühe zahlt sich aus.

Mehrere Komfort
Wer es sich technisch leisten kann oder über die nötige Zeit verfügt, könnte mehrere Druckversionen anlegen. Eine für Schwarzweiß, eine für Farbdrucker. Eine Version mit Grafiken und eine ohne. Eine „normale“ Druckversion wie hier beschrieben und das komplette Original mitsamt Navigation.

Keine gute Idee ist es, Word- oder PDF-Dokumente als Druckversion anzubieten. Die sehen, gut gemacht, zwar besser aus, aber nicht jeder verfügt über die nötige Software. Außerdem wird das Drucken für den Besucher unnötig kompliziert – und das bei erhöhten Ladezeiten. Schließlich wollen viele nur eben „ihre Information“ sichern.

Auf Werbung sollten gedruckte Seiten besser verzichten, ein Banner macht einfach keinen Sinn. Ein Hinweis in eigener Sache ist aber sicherlich erlaubt.

Kategorien
Design HTML/CSS

Abstand halten

Das Problem kennen Sie sicher: Werden Bilder und Text nebeneinander ausgerichtet, rutscht der Inhalt durcheinander, sofern nicht ausreichend Text vorhanden ist. Das geht auch anders.

Man behilft sich mit zusätzlichen Tabellenzellen oder einer ganzen Kollektion von <br>-Tags.

AbbildungLorem ipsum dolor sit amet, consectetuer adipiscing elit.

AbbildungUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Unnötig! Ein <br> genügt, wenn Sie es mit dem Attribut clear=“all“ versehen. Dann wird aus dem obigen Beispiel plötzlich dies:

AbbildungLorem ipsum dolor sit amet, consectetuer adipiscing elit.

AbbildungUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Der komplette Quellcode:

 <p><img src="../images/illu_oexpress.gif"
alt="" width="125" height="125" align="left">Text</p>
      <br
clear="all">
 <p><img src="../images/illu_oexpress.gif"
alt="" width="125" height="125" align="left">Text</p>

Kategorien
Design HTML/CSS

Variable Bildgröße

Skalierbare Grafiken sind im Web nicht so einfach zu realisieren. Flash kann es, mit EM klappt es auch, aber hier spielen viele Browser schon nicht mehr mit.

Ein Hintergrundbild kann manches Problem lösen.

Quellcode:

 <table style="background-image : url(../images/bild.jpg); background-repeat:no-repeat;
    background-position: 50% 50%" width="70%" height="70%"
    border="0" cellpadding="0" cellspacing="0"><tr><td>&nbsp;</td></tr></table>

Je nach Größe des Browserfensters sieht man zwar nur einen Ausschnitt, doch der vermag sich automatisch dem Browser anzupassen.

Kategorien
Design HTML/CSS

Hoch- und Tiefstellen mit CSS

HTML beherrscht mit <sub> und <sup> das Hoch- und Tiefstellen von Zeichen perfekt. CSS kennt vergleichbare Möglichkeiten, aber aus denen kann man noch mehr herausholen.

Da wären erst einmal vertical-align : sub und vertical-align : super. Das Ergebnis ist:

H2O

4353

Alles andere als schön, aber es funktioniert. Aber CSS wäre nicht CSS, wenn es nicht einige Vorteile gäbe. Man kann schlichtweg genau arbeiten und die Formatierung exakt herausarbeiten. Zum Beispiel:

H2O

 <p
style="font : menu; letter-spacing : 2px;">
 H<span style="vertical-align
: -4px; font-size : 80%;color : blue;">2</span>O</p>

Man sieht, die Position der hochgestellen Zahl kann pixelgenau bestimmt werden. Ebenso ihr Abstand zu den Buchstaben.

Auch Verzierungen sind damit möglich, wenn die Abstände auf große Werte gesetzt werden:

H
A
L
L
O

      <p>

<span style="vertical-align : 10px">H</span>
 <span
style="vertical-align : 20px">A</span>
 <span style="vertical-align
: 30px">L</span>
 <span style="vertical-align : 40px">L</span>

<span style="vertical-align : 50px">O</span>
 </p>

Wer sich auf der sicheren Seite bewegen will, bleibt bei HTML und überlässt die CSS-Spezialitäten Sonderfällen. Das Risiko einer Browser-Inkompatibilität ist hier noch recht hoch.

Kategorien
Design HTML/CSS

Fröhliche Linien mit hr und CSS

Ein Versuch macht klug – und siehe da, auch Linien können mit CSS in Schwung gebracht und farbig eingekleidet werden.

Neben der Hintergrundfarbe (color allein genügt nicht) bietet sich die bekannte Rahmenvielfalt an, um mehr aus den langweiligen Trennstäben zu machen. Einige Beispiele:


 <hr style="
    width: 300px;
    background-color: yellow;
    text-align : left;
    height: 10px;
    border: 1px solid black;">

      <hr style="
    width: 300px;
    background-color: powderblue;
    text-align : left;
    height: 6px;
    border : 2px dotted black;">

      <hr style="
    width: 300px;
    background-color: silver;
    text-align : left;
    height: 10px;
    border: 3px ridge silver;">

      <hr style="
    width: 300px;
    background-color: red;
    text-align : left;
    height: 10px;
    border: 2px inset green;">

      <hr style="
    width: 300px;
    background-color: silver;
    text-align : left;
    height: 8px;
    border-left: 3px solid green;
    border-top : 3px solid red;
    border-bottom : 3px solid blue;
    border-right : 3px solid green;>

Je moderner der Browser, desto mehr wird gezeigt. Ältere Modelle sehen stets die Standardlinien.

Kategorien
Design HTML/CSS

Relative Farben

Alles ist relativ, soll schon Albert Einstein gesagt haben. Da kann es ganz spannend sein, wenn die Farben einer Seite nicht explizit festgelegt sind. Sondern vom Besucher indirekt selbst gestaltet werden können.

CSS2 ermöglicht es, einige bisher unbekannte Formatierungen durchzuführen. Die „relativen“ Farben gehören dazu. Sie richten sich nach den Systemeinstellungen des Besuchers, nicht nach exakten Vorstellungen des Designers.

Eine solche Formatierung könnte so aussehen. Sie verleiht einer Seite den selben Hintergrund wie ihn der Benutzer für den Desktop verwendet.

 <body style="background
: background">

Einen besonderen praktischen Nutzen hat das zur Zeit wohl nicht. Aber der Web-Designer ist bekanntlich erfinderisch. Die Tabelle zeigt ein Live Beispiel in der linken Spalte. Gegenwärtig zu sehen mit Internet Explorer ab 5.0 (PC und MAC), Netscape 6.0 und Opera ab 5.1 – wer’s nicht glaubt, verändere seine Systemeinstellungen (Anzeige/Darstellung) und lasse diese Seite geöffnet.

Beispiel CSS Attribut Beschreibung
activeborder Aktiver Fensterrahmen
activecaption Aktive Titelleiste
appworkspace Hintergrund der Anwendung
background Desktop Hintergrund
buttonface Oberflächenfarbe Button
buttonhighlight Button Markiert
buttonshadow Schattenfarbe Button
buttontext Textfarbe Button
captiontext Textfarbe Titelleiste
graytext Gegrauter Text
highlight Markierte Elemente
highlighttext Textfarbe Markierte Elemente
inactiveborder Inaktiver Fensterrahmen
inactivecaption Inaktive Fensterleiste
inactivecaptiontext Textfarbe Inaktive Fensterleiste
infobackground Hintergrundfarbe Tooltip
infotext Textfarbe Tooltip
menu Hintergrundfarbe Menu
menutext Textfarbe Menu
scrollbar Hintergrundfarbe Rollbalken
threeddarkshadow Schatten für 3D Elemente
threedface Oberflächenfarbe 3D Elemente
threedhighlight Hervorhebung für 3D Elemente
threedlightshadow Heller Schatten 3D Elemente
threedshadow Dunkler Schatten für 3D Elemente
window Fenster-Hintergrund
windowframe Fenster-Rahmen
windowtext Textfarbe Dialogfeld

PS: Die relative Schrift gibt es auch. Sie gibt nur leider in den meisten Fällen nicht viel her. Aber probieren Sie

      <p
style="font : menu">Text</p>

um die selbe Schrift zu erhalten wie sie in den Menüs verwendet wird.

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.

Kategorien
Design HTML/CSS

Ausdrucken verhindern

Erste Möglichkeit: Nichts mehr im Web veröffentlichen. Zweite Möglichkeit: Die Seiten so häßlich und uninteressant machen, dass niemand sie ausdrucken will.

Das Web ist ein offenes Prinzip. Die Web-Seiten sind doch für den Besucher da. Der Eine druckt gern, der Nächste speichert und wieder andere kopieren die Inhalte. Verbieten kann man das nicht.

Nun, eine Möglichkeit gibt es. Sie funktioniert allerdings nur mit neuen Browsern. Legen Sie ein externes Stylesheet an und schreiben Sie diese Zeile hinein:

 BODY { display
: none;}

Anschließend verbinden Sie die neue Datei druck.css auf diese Weise mit Ihren Seiten:

      <link rel="stylesheet"
media="print" href="druck.css">

Wir empfehlen, das Gegenteil zu tun.

Kategorien
Design HTML/CSS

URLs im Ausdruck

Dietmar Rabich

Links können angeklickt werden und die neue Seite erscheint. Druckt man allerdings eine Seite aus, gehen Informationen verloren.

So unter anderem die URL, die hinter einem Link steht, denn diese ist normalerweise nicht sichtbar. Ein klein wenig CSS schafft Abhilfe:

 @media print
 {
 a[href]:after

{
 content: \' [\' attr(href) \']\';
 }
 }

Die Anweisung sorgt dafür, dass die URL, die hinter einem Link steht, auf der gedruckten Seite erscheint. Bei der normalen Darstellung im Browser ist davon nichts zu merken.

Mit ein wenig CSS3, dem zukünftigen Nachfolger von CSS2, kann die Sache noch ein wenig spezialisiert werden:

      @media print
 {
 a[href^=\"http://\"]:after,

a[href^=\"ftp://\"]:after
 {
 content: \' [\' attr(href) \']\';

}
 }

Um die Technik nutzen zu können, muß der Browser die entsprechenden CSS2-Fähigkeiten haben – aktuelle Versionen von Mozilla und Opera sind dazu in der Lage.

Kategorien
Design HTML/CSS

Unterschiedliche Farben für Listenzeichen

Listenzeichen lassen sich auf verschiedene Weise verändern, damit haben wir uns auch des Öfteren beschäftigt. Die kleinen Kugeln (Bullets) lassen sich verändern, durch andere Zeichen ersetzen oder ganz und gar durch eigene Grafiken austauschen.

Bleibt eigentlich nur eine Anwendung. Klassische Bullets, jedoch in anderen Farben als die ausgewählten Textelemente.

Das funktioniert nicht einfach so. Denn wenn der <li>-Tag verändert wird, nehmen Listenzeichen und Text immer dieselbe Farbe an. Schade eigentlich, doch mit einer Verschachtelung lässt sich auch das machen. Die Textbestandteile der Aufzählung werden separat formatiert.

  • Element 1
  • Element 2
  • Element 3
 <ul> 
 <li style="color : red"><div
style="color : black">Element 1</div></li> 
 <li
style="color : green"><div style="color : black">Element
2</div></li> 
 <li style="color : blue"><div
style="color : black">Element 3</div></li>
 </ul>

Auf diese Weise sorgen wir für bunte Listenzeichen und einen einheitlich lesbaren Text. Das klappt auch mit Ringen:

  • Element 1
  • Element 2
  • Element 3
      <ul type="circle"> 
 <li style="color
: red;"><div style="color : black">Element 1</div></li>

 <li style="color : green"><div style="color : black">Element
2</div></li> 
 <li style="color : blue"><div
style="color : black">Element 3</div></li>
 </ul>

Drachenbrowser (Moz) und Marktbeherrscher (IE) kennen keinen Unterschied, auch die nordische Fröhlichkeit (Opera) spielt zumindest ab Version 7 mit.

Kategorien
Design HTML/CSS

Anmerkungen zur Unterstreichung

Textpassagen oder Worte mit Hilfe einer Unterstreichung hervorzuheben ist eine selbstverständliche Sache. Aber nicht im Web.

Hier ist die Unterstreichung verpönt, denn man kann sie leicht mit einem Hyperlink verwechseln. Der Besucher wird unweigerlich klicken und aller Wahrscheinlichkeit nach enttäuscht sein, weil nichts passiert.

Sie können die Unterstreichung trotzdem verwenden. Mit CSS. Sie muss nur etwas dicker als gewöhnlich ausfallen, die Farbe lässt sich ebenfalls variieren. Damit wird die Verwechslungsgefahr beseitigt.

Zwei Beispiele

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Der Quellcode

 <span
style="border-bottom : 2px solid black">nonummy</span>
      <span
style="border-bottom : 2px solid red">wisi enim</span>

Mehr als 2 Pixel wirkt übertrieben, die Wirkung ist jedoch abhängig vom gewählten Durchschuss (line-height). Üblicher Hinweis: alte Browser können das nicht, ein entscheidender Verlust ist das aber in diesem Fall nicht.

Kategorien
Design HTML/CSS

Style Sheet on Demand

Viele Besucher haben unterschiedliche Vorlieben. Da Style Sheets die komplette Seite formatieren können, lassen sich verschiedene Versionen der Seite bauen, aus denen der Besucher seine bevorzugte Version auswählt. Hier die JavaScript-Variante des Tricks.

Sinn macht das vor allem zur Unterscheidung zwischen Druck- und Bildschirmversion, oder mit größeren Schriften für Besucher mit Sehschwächen.

Zum Live-Demo (neues Fenster)

Die Beispiel-Datei kann drei verschiedene externe Style Sheets aufrufen. Ein kleines Javascript wählt das jeweilige Style Sheet aus. Mit dem Link wird die Datei in einem neuen Fenster aufgerufen. Mit einem Fragezeichen wird der Wert für die Style Sheet-Abfrage angehängt, den unsere JavaScript Funktion dann abfragt.

Die Links in der Datei sehen so aus (die Datei heißt linker.html):

 <a href="linker.html?1" target="_blank">Seite
neu formatieren (1)</a><br>
 <a href="linker.html?2"
target="_blank">Seite neu formatieren (1)</a><br>

<a href="linker.html?3" target="_blank">Seite neu formatieren
(1)</a><br>

Das Skript im HEAD der Datei sieht wie folgt aus:

      <script language="javascript">
 var style
= location.search;
 style = style.substr(1,2);
      if(style=="1")
{document.write('<link rel="stylesheet" type="text/css"
href="linker1.css">');}
 if(style=="2") {document.write('<link
rel="stylesheet" type="text/css" href="linker2.css">');}

if(style=="3") {document.write('<link rel="stylesheet"
type="text/css" href="linker3.css">');}
 </script>

Der Variable „style“ wird mit location.search der mit dem Fragezeichen übermittelte Wert zugewiesen. Da nicht nur die Zahlen 1, 2 oder 3, sondern auch das Fragezeichen zugewiesen wird, weist die Funktion substr der Variable „style“ nur das zweite Zeichen zu, das Fragezeichen wird also gelöscht. Die IF-Abfrage entscheidet anhand des Wertes der Variable „style“, welches Style Sheet nun eingebunden wird.

Kategorien
Design HTML/CSS

Unsichtbare Links

Eine nicht eben sinnvolle Anwendung, denn für gewöhnlich wünscht man sich, dass Hyperlinks angeklickt werden. Wer es gern einmal andersherum probieren möchte oder geheime Zugänge anbieten will, könnte es mit diesem Trick versuchen.

Links verraten sich auf mehrere Weise. Durch die Farbe, die Unterstreichung, den Mauszeiger und durch einen Hinweis in der Statuszeile des Browsers. All das lässt sich abschalten, bzw. verbergen.

 <a
href="link.html" style="cursor:text; 
text-decoration : none;

color : black;" onMouseOver="status=''; return true;">
Link</a>

cursor : text zeigt einen Cursor wie normaler Text, color : black passt den Link der Textfarbe an (in diesem Falle schwarz), text-decoration : none schaltet die Unterstreichung ab und onMouseOver= unterbindet die verräterische Zielanzeige in der Statuszeile.

Versuchen Sie es einmal auf dieser Demoseite. Was man damit in der Praxis anfangen kann, steht auf einem anderen Blatt. Alte Browser zeigen einen Standardlink.

Kategorien
Design HTML/CSS

Mehr Orientierung in Datentabellen

Je größer sie ausfallen, desto schwerer fällt es dem Auge die Zeile zu halten. Da hilft nur noch der Zeigefinger. Oder ein spezielles Tabellendesign.

Berührt die Maus eine Zelle, verändert sich der Rahmen, er wird rot. Das klappt, weil wir nicht die Zelle mit einem Rahmen umgeben haben, sondern den Tabelleninhalt. Dazu bedarf es eines vergrößerten Randabstandes (cellpadding=“8″).

Screenshot
Die Maus berührt eine Tabellenzelle

Der Tabelleninhalt wird verlinkt und via CSS mit einem simplen Hover-Effekt versehen. Den Mauszeiger stellen wir auf seinen Standard-Optik zurück (cursor : default), denn der Scheinlink selbst soll dem Besucher verborgen bleiben.

 <a href="#">Tabelleninhalt</a>

Eine solche Datentabelle bedeutet mehr Aufwand, aber der könnte sich ja lohnen. Schließlich sieht’s schicker aus und der Zeigefinger darf ruhig bleiben. Nie mehr verschmierte Monitore. Hier geht’s zur Live Demo.

Der CSS Quellcode für den Dateikopf

      A:link {
 color : black;
 text-decoration: none;
 background-color
: transparent;
 border : 1px solid gray;
 padding : 4px; 
 cursor : default}
      
A:visited {
 color : black;
 text-decoration: none;
 background-color
: transparent;
 border : 1px solid gray;
 padding : 4px; 
 cursor : default}
      A:hover
{
 color: black;
 text-decoration: none;
 background-color : transparent;

border : 1px solid red; 
 padding : 4px;
 cursor : default} 

Die Methode funktioniert mit allen modernen Browsern. Ältere zeigen nur den Effekt nicht an.

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

Font-Tags ausradieren

Wer seine Webseiten in Helvetica oder Verdana formatieren will oder muss, kommt um unzählige Font Tags nicht herum. Die aber machen den Quellcode unübersichtlich und verdoppeln unter Umständen die Ladezeit eines Dokuments. Externe Style-Sheets sind eine Alternative. Doch gilt es einige Klippen zu umschiffen.

Vor allem der inzwischen recht veraltete Netscape 4.x macht die Reinigungsaktion zu einem wackeligen Unterfangen – sofern man auf ihn Rücksicht nehmen will. Es geht aber doch. Definieren Sie für Absätze <P> sowie Tabellenspalten und -Zeilen jeweils dieselbe Formatierung.

 P { font-family :
Arial,Helvetia,sans-serif; font-size : 10pt;} 

 TD { font-family : Arial,Helvetia,sans-serif;
font-size : 10pt;} 

 TR { font-family : Arial,Helvetia,sans-serif; font-size
: 10pt;} 

Das veranlasst sowohl Internet Explorer als auch Netscape sämtlichen Text in einer serifenlosen Schriftart anzuzeigen. Und zwar in der hier definierten Größe von 10 Punkt. Sie können auch alles in eine Zeile schreiben:

      p,td,tr { font-family : Arial,Helvetia,sans-serif; font-size : 10pt;}

Zu Problemen kommt es, wenn Sie verschiedene Schriftgrößen einsetzen möchten. Denn die Formatierung size=“1″ funktioniert jetzt nur noch im Microsoft Browser. Netscape erzwingt überall 10 Punkt, egal was sonst noch im Quellcode steht. Dies läßt sich umgehen, indem Sie jedem anders zu formatieren Bereich eine eigene Styleanweisung (class) definieren.

      .klein { font-size
: 8pt; } 

Im HTML Code sieht das dann so aus.

      <p
class="klein">Kleiner Text</p> 

Das gilt auch, wenn Sie zum Beispiel Blocksatz erzwingen wollen. Denn was für Fließtext sinnvoll ist, ist es bei Überschriften nicht unbedingt. Auch hier muss mit einer zusätzlichen Definition gearbeitet werden, um einen Textbereich linksbündig oder mittig auszurichten.

Das Gute daran. Alles was in ein externes Style Sheet ausgelagert wurde, lässt sich flink ändern. Sie können mit einem Handgriff den Blocksatz für die gesamte Web-Site aufheben, die Schriftfarbe, den Zeilenabstand oder die Größe ganzer Passagen oder Teile davon ändern.

Ganz auszuschließen sind Probleme allerdings nicht. Der IE3 ist in Sachen CSS recht unterbelichtet, glücklicherweise ist er nur noch selten anzutreffen. Vom Communicator gibt es inzwischen so viele Versionen, dass Testen keinen Sinn mehr macht. Manchmal klappt es nicht, wenn mehrere Anweisungen hintereinander stehen, dann hilft nur noch probieren. Eine praktikable Lösung läßt sich aber meist finden.