This is the German translation of the ciwas stylesheet FAQ maintained by Jan Roland Eriksson.
The URL of the original FAQ is given as an appropriate LINK
element in the head of this document. For the benefit of browsers that don't support the LINK
element, here is the URL: http://www.css.nu/faq/ciwas-aFAQ.html
Dies ist die deutsche Übersetzung der von Jan Roland Eriksson betreuten ciwas stylesheet FAQ. Die URL des Originalartikels ist als LINK
Element in Kopfteil dieses Dokumentes angegeben. Für Browser, welche das LINK
Element nicht unterstützen, steht hier noch einmal die URL: http://www.css.nu/faq/ciwas-aFAQ.html
Diese FAQ ist auf dem World Wide Web verfügbar...
http://gutfeldt.ch/matthias/translation/css_faq/ciwas-aFAQ.html (HTML)
http://gutfeldt.ch/matthias/translation/css_faq/ciwas-aFAQ.txt (plain text)
Diese FAQ-Liste enthält die überarbeiteten Ergebnisse der gemeinsamen Anstrengungen von regelmässigen Teilnehmern in der Usenet Newsgruppe comp.infosystems.www.authoring.stylesheets.
Das Ziel dieses Dokumentes ist es, Antworten auf einige der am häufigsten in der Newsgruppe 'ciwas' gestellten Fragen zu geben.
Im Moment drehen sich fast alle Diskussionen in dieser Gruppe um CSS, obwohl dies nicht immer so bleiben muss. Diese Dokument ist nicht als komplette Einführung in Formatvorlagen oder CSS gedacht.
Es gibt eine eigene FAQ-Liste über die Newsgruppe selbst, ihre Charta, Gebräuche, und Konventionen. Für mehr Informationen über Stylesheets und über CSS verweisen wir auf die Ressourcen, welche im Ressourcen- Abschnitt des meta-FAQ http://css.nu/faq/ciwas-mFAQ.html aufgelistet werden.
Schlüsselbegriffe werden in einfache Anführungszeichen gesetzt:
'font-family'
Die Anführungszeichen sind dabei nicht Bestandteil des Begriffs.
Doppelte Anführungszeichen werden benutzt, um Zitate aus anderen Quellen anzuzeigen, oder/und um Jargon zu kennzeichnen. Beispielsweise würde "Generic font family names are keywords..." anzeigen, dass dieser Text ein Zitat ist.
Anmerkung: In dieser HTML-Version des FAQ werden längere Zitate mit dem <blockquote>
Element ausgezeichnet.
Sterne kennzeichnen betonten Text... z.B. *nicht* würde das Wort "nicht" betonen.
Anmerkung: In dieser HTML-Version des FAQ wird betonter Text mit dem <strong>
Element ausgezeichnet.
Q: Ich will, dass meine Schriftarten überall so aussehen wie in...
a) Warum sind meine Schriftgrössen in verschiedenen Browsern verschieden gross?
b) Warum sind meine Schriftgrössen auf verschiedenen Plattformen verschieden gross?
A: Diese Fragen stellen die Spitze des Eisberges eines umfangreichen Themas dar, über welches ganze Aufsätze geschrieben worden sind, und zu dem es die verschiedensten Ansichten gibt.
Das WWW war ursprünglich dazu gedacht, den gleichen Inhalt in verschiedenen Darstellungssituationen und für eine grosse Spannbreite unterschiedlicher Leser zu präsentieren. Auf dieser Grundlage ist "gleich aussehen" kein Designkriterium, es wird im Gegenteil erwartet, dass verschiedene Darstellungen verschieden aussehen.
Manche sind der Meinung, dass dieses ursprüngliche Ziel nicht mehr relevant ist, und dass es heute das Ziel des Webdesign sein soll, die Unterschiede zwischen Darstellungssituationen zu eliminieren und dem Autoren die Kontrolle über Darstellungsdetails zu übergeben. Andere weisen darauf hin, dass CSS mit dem Ziel erstellt wurde, dem Leser einen grossen Anteil an der Kontrolle über diesen Prozess zu geben, und dass dies wünschenswert ist, z.B. um Benutzer mit unterschiedlicher Sehstärke zu unterstützen.
Das Lesen von Text auf einem Computerbildschirm ist aufgrund der recht groben Pixelstruktur eine delikate Angelegenheit; sogar bei genauer Kenntnis der Darstellungsdetails ist es nicht möglich, dieselbe detaillierte Kontrolle zu erreichen, die auf einem Drucker möglich ist. Welches Ziel man auch verfolgen mag, die Realität bleibt, dass viele der Anstrengungen, welche unternommen werden um exakte Resultate auf dem Bildschirm zu garantieren, in einem WWW-Setting schwerwiegende kontraproduktive Nebenwirkungen haben können.
Die CSS Spezifikationen selbst empfehlen, dass Autoren keine absoluten Schriftgrössen verwenden, wenn die Eigenschaften der Darstellung nicht bekannt sind. Es gibt viele Argumente für ein flexibles Design welches unter den entsprechenden Vorausssetzungen so aussieht wie vom Autor vorgesehen, aber auch noch unter sehr unterschiedlichen Voraussetzungen erfolgreich den Inhalt übermitteln kann.
Deshalb ist es sehr zu empfehlen, noch vor einem Blick auf die technischen Details einige Aufsätze über Webdesign zu lesen. So wirst Du zu Deinen eigenen Schlussfolgerungen über die Stärken und Schwächen des Mediums kommen und lernen, wie Du die Stärken ausnutzen kannst, ohne den Schwächen zum Opfer zu fallen.
Empfohlene Lektüre (in englisch)...
http://style.cleverchimp.com/
http://www.westciv.com/style_master/house/good_oil/not_paper/
Q: Warum sollte ich nicht Schriftgrössen mit absoluter Grössenangabe verwenden?
A: Es gibt heutzutage kaum Benutzer, welche ein 'kalibriertes' Darstellungsgerät verwenden, das absolute Schriftgrössen korrekt darstellt. Deshalb wissen wir nie, in welcher Grösse eine Schrift beim Benutzer wirklich dargestellt wird.
Andere Benutzer werden Deine Wahl der Schriftgrösse möglicherweise als unangenehm empfinden. Eine überraschend grosse Zahl von Personen hat Sehschwächen, und benötigt grösseren Text als der Durchschnitt. Andere Leute sehen gut, und ziehen es vor, mehr Text mit einer kleineren Schriftgrösse auf dem Bildschirm zu haben. Was für Dich und Dein System angenehm ist, kann für andere unangenehm sein.
Browser haben eine Standardgrösse für Schriftarten. Wenn den Benutzern diese Grösse nicht gefällt, können sie sie ihren Bedürfnissen entsprechend verändern. Du kannst nicht davon ausgehen, dass Deine Wahl besser ist als seine. Deshalb solltest Du im Haupttext die Schriftgrösse nicht verändern. Wenn Du sie an bestimmten Stellen verändern willst (z.B. kleiner Text für einen Urheberrechtsvermerk am Ende der Seite), dann verwende relative Einheiten, so dass die Grösse proportional zur vom Benutzer gewählten Schriftgrösse bleibt.
Denk daran, wenn Besucher Deinen Text als unangenehm empfinden, werden sie sich nicht mit Deiner Website abkämpfen. Sehr wenige (wenn überhaupt irgendwelche) Websites sind für den Normalbenutzer wichtig genug, dass er sich auf einen Kampf mit den Vorstellungen des Autors einlässt.
Empfohlene Lektüre (auf englisch)...
http://css.nu/articles/font-analogy.html
Siehe auch Q & A - 01: weiter oben.
Q: Welche Schriftarten sind auf allen Plattformen verfügbar?
A: Die kurze Antwort
ist: "keine". Deshalb bietet CSS fünf generische Schriftarten an: 'serif
',
'sans-serif
', 'cursive
', 'fantasy
' und
'monospace
'. Setze diese generischen Schriftarten niemals in Anführungszeichen.
Ein CSS-fähiger Browser sollte aus den verfügbaren Schriftarten für jeden dieser generischen Namen die passende Schriftart auswählen.
Die Angabe irgend einer anderen Schriftart ist in einer WWW-Umgebung nur ein Vorschlag, der vom Browser respektiert werden kann oder auch nicht.
Das Problem bei der Verwendung von spezifischen Schriftarten-Namen ist, dass es wenig Sinn macht, Schriftarten zu nennen welche nur wenige Benutzer installiert haben; deshalb bleibt Dir nichts anderes übrig, als einige wenige allgemein verfügbare Schriftarten zu nennen. Dies würde aber vor allem diejenigen Benutzer treffen, welche eine für sie optimale Schriftart ausgewählt haben.
Bedenke auch, dass Schriftarten in ihrem Zeichenrepertoire variieren, obwohl dies oft nicht anhand des Namens der Schriftart erkennbar ist. Durch die Auswahl einer unpassenden Schriftart verhinderst Du es möglicherweise, dass internationalisierte Inhalte korrekt dargestellt werden.
Denke auch an die Tatsache, dass MSIE auf Windows einige Bugs im Bereich
der Schriftarten-Auswahl hat, wie hier beschrieben (auf englisch)...
http://css.nu/pointers/bugs.html
Für mehr Details zur 'font-family' Eigenschaft, siehe
Abschnitt 5.2.2 "font-family" in der CSS1 Spezifikation (auf englisch)...
http://www.w3.org/TR/REC-CSS1#font-family
Q: Wie erreiche ich es, dass eine Seite in z.B. NS und MSIE gleich aussieht?
A: Die einfache Antwort ist: Du kannst es nicht, und Du solltest Deine Zeit nicht damit verschwenden, etwas exakt gleich zu machen. Browsern ist es per Definition gestattet, auf Grundlage der allgemeinen Regeln der HTML- und CSS- Spezifikationen eine Seite so zu interpretieren, wie sie wollen.
Als Webautor weisst Du nichts über die genaue Situation und/oder das Medium, das zur Darstellung Deiner Seite benutzt wird, und es ist fast immer kontraproduktiv, wenn man diesen Prozess zu kontrollieren versucht.
Es gibt keine Notwendigkeit dafür, dass eine gut geschriebene Seite in verschiedenen Browsern gleich aussehen muss. Du kannst aber anstreben, dass die Seite in mehr als einem Browser gut aussieht, auch wenn die tatsächliche Darstellung (im Falle eines graphischen Browsers) sich etwas unterscheidet.
"Gut aussehen" kann durch sinnvolle Gestaltung und Richtlinien erreicht werden, wie z.B. keine Schriftgrössen oder -arten festzulegen, keine Tabellenbreiten festzulegen, etc...
Bekämpfe das Medium nicht; die meisten Webuser benutzen nur einen Browser und werden nie erfahren, oder überhaupt herausfinden wollen, dass Deine Seite in irgend einem anderen Browser anders oder gar "besser" aussieht.
Akzeptiere also die in das Medium WWW eingebaute Flexibilität als Deinen Freund und sorge mit Deinem Design lediglich dafür, dass die Benutzer Deine Inhalte auf einfache Art erreichen können.
Q: Warum funktioniert mein externes Stylesheet nicht?
A: Dafür kann es verschiedene Gründe geben, aber ein sehr häufiger Fehler ist HTML Markup in einem externen Stylesheet.
Ein externes Stylesheet darf nur CSS Regeln enthalten, und falls
benötigt, korrekt geformte CSS Kommentare; es darf nie irgendwelche
HTML Syntax z.B. in der Form von <style type="text/css">...</style>
enthalten sein.
CSS Kommentare sind definiert als alles, was zwischen /* (der Kommentar-Startmarke) und */ (der Kommentar-Endmarke) steht. Siehe folgendes Beispiel...
/* Dieser Text hier ist ein korrekter CSS Kommentar */
CSS Kommentare können über mehrere Zeilen laufen. Kommentare zu verschachteln ist nicht erlaubt.
Ein anderer Grund aus dem externe Stylesheets (und sogar eingebettete oder inline Stylesheets) nicht wie erwartet funktionieren kann sein, dass Du CSS-Features verwendst, die Dein Browser garnicht unterstützt.
Die Browser-Unterstützung für CSS ist sehr unterschiedlich.
Ein guter Ort um mehr darüber zu erfahren ist "Der Mastergrid" (auf englisch)...
http://www.webreview.com/style/css1/charts/mastergrid.shtml
Externe Stylesheet sollen ausserdem vom WWW-Server mit dem MIME-type 'text/css' im 'Content Type:' HTTP-Header angeboten werde.
Möglicherweise wirst Du mit Deinem Serveradministrator verhandeln müssen, damit er diesen MIME Type hinzufügt, falls Du den Server nicht selbst konfigurieren kannst oder darfst.
Registrierte MIME types sind in der IANA Sammlung zu finden (auf englisch)... ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/
RFC2318 beschreibt den spezifischen 'text/css' MIME type (auf englisch)...
http://www.ietf.org/rfc/rfc2318.txt
HTTP Header Inhalte für WWW-Ressourcen können hier nachgeschaut werden
(auf englisch)...
http://www.delorie.com/web/headers.html
Q: Warum verliert Netscape meine Styles ?
A: Netscape 4.x hat sehr schlechte CSS- Unterstützung. Die folgenden Punkte sollten beachtet werden.
Nicht valides HTML wird Netscape fast sicher dazu veranlassen, Dein CSS ab einem gewissen Punkt zu ignorieren. Valides HTML ist Dein bester Freund, aber damit Netscape korrekt funktioniert musst Du darauf achten, dass alle Elemente, welche die Schliessung des tags erlauben, explizit geschlossen werden.
Aus demselben Grund solltest Du Dein CSS überprüfen und korrigieren. Netscape 4.x verhält sich nach den CSS Spezifikationen korrekt, wenn es (anders als MSIE) fehlerhafte Formatierungsregeln ignoriert.
Netscape 4.x hat ein Vererbungs-Problem ('inheritance') bei seinen TABLE Elementen. Man kann behaupten dass es das gute Recht von NS ist, sich so zu verhalten wie es dies tut, aber da der 'workaround' recht einfach ist, fällt es leicht diesen zu benutzen und die Sache auf sich beruhen zu lassen:
Du willst, dass z.B. der TABLE Inhalt "gleich aussieht" wie der BODY Inhalt? "Redundante" Formatvorlagen sind die Lösung, wie z.B.
BODY, TABLE, TH, TD { /* Deine Formatierungsregeln */ }
Grundsätzlich zieht es Netscape 4.x vor, wenn Formatregeln direkt auf diejenigen Elemente angewandt werden, für die sie gebraucht werden. Man kann sich nicht darauf verlassen, dass Vererbung ('inheritance') in Netscape 4.x auf irgend einer Ebene funktioniert.
Siehe (auf englisch)...
http://css.nu/pointers/bugs.html für weitere
Informationen über bugs und workarounds in Netscape's CSS Unterstützung.
Q: Wie sieht eine einfache CSS Regel aus?
A: P { font-family: serif; font-size: 1.2em; }
Hier sehen wir eine Regel mit dem Selektor ('selector') P, dem zwei Formatdeklarationen zugewiesen werden, das heisst zwei Paare 'Eigenschaft:Wert' ('property:value').
'font-family' und 'font-size' sind Eigenschaften des Inhaltes des P Elements, und diesen Eigenschaften werden die Werte 'serif' resp. '1.2em' zugewiesen.
Ein Doppelpunkt ':' ist das Wertzuweisungssymbol (value attribution symbol) in CSS. Wenn stattdessen das Gleichzeichen '=' verwendet wird, ist das ein Fehler, und laut den CSS Spezifikationen muss die Regel deshalb ignoriert werden. Jeder Browser, der diese Regel dennoch anwendet, verhält sich nicht korrekt.
Für Längenangaben ist die Angabe einer Einheit ('unit') immer notwendig, und es darf nie Leerzeichen zwischen einer Zahl und ihrer Einheit geben.
Ein Wert wie z.B. '1.2 em' ist ein Fehler und muss laut CSS Spezifikationen ignoriert werden. Jeder Browser, der diese Regel dennoch anwendet, verhält sich nicht korrekt.
Ein Semikolon ';' zwischen Deklarationen ist vorgeschrieben, aber es ist auch eine gute Faustregel, auch nach der letzten Deklaration ein ';' zu setzen.
Schlussendlich gruppieren geschweifte Klammern '{...}' eine oder mehrere Deklarationen in eine CSS Regel.
Für mehr Details über die Grundlagen der CSS Formatregeln siehe
Abschnitt 1 "Basic concepts" in der CSS1 Spezifikation (auf englisch)...
http://www.w3.org/TR/REC-CSS1#basic-concepts
Q: Wie kann ich in verschiedenen Abschnitten meiner Seite eine unterschiedliche Darstellung von Links vorschlagen?
A: Der direkteste Ansatz ist die Definition von verschiedenen Klassen für verschiedene Linktypen, und die Verwendung dieser Klassen direkt im <a href="... Markup. Untenstehend ein einfaches Beispiel, basierend auf den CSS2 Spezifikationen, Abschnitt 5.11.2 und 5.11.3 (auf englisch).
href="http://www.w3.org/TR/REC-CSS2/selector.html#link-pseudo-classes
http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes
a.internal:link { background: #c0c0c0; color: #800080; }
a.internal:visited { background: #c0c0c0; color: #008080; }
a.internal:hover { background: #c0c0c0; color: #00ffff; }
a.internal:active { background: #c0c0c0; color: #008000; }
a.external:link { background: #ffffff; color: #ff0000; }
a.external:visited { background: #ffffff; color: #0000ff; }
a.external:hover { background: #ffffff; color: #ffff00; }
a.external:active { background: #ffffff; color: #00ff00; }
Im Markup wird es dann so verwendet...
<a class="internal" href="#foo">interner Link nach Foo</a>
<a class="external" href="http://bar.baz">externer Link nach Bar</a>
...um eine unterschiedliche Darstellung von internen oder externen Links vorzuschlagen. Die meisten CSS Eigenschaften können für Links verwendet werden, das obige Beispiel enthält aus Platzgründen nur ein Minimum.
Beachte auch, dass die Grammatikregeln von CSS1 nur das folgende Format für Link-Selektoren erlaubt...
a.internal:link { background: #c0c0c0; color: #800080; }
...während die Grammatik von CSS2 diese beiden Formate erlaubt...
a.internal:link { background: #c0c0c0; color: #800080; }
a:link.internal { background: #c0c0c0; color: #800080; }
Da die Unterstützung der CSS1 Syntax weiter verbreitet ist, ist es zu empfehlen, dass für Link Formate nur die CSS1 Syntax verwendet wird.
Q: Warum funktioniert ':hover' für Links nicht?
A: Vorausgesetzt dass Du die korrekte CSS Syntax Deines Stylesheets bereits überprüft hast, könnte es sein, dass Du die Wichtigkeit der korrekten Reihenfolge von Formatdeklarationen bei Links übersehen hast.
Die CSS2 Spezifikation enthält die folgende Bemerkung darüber, wie wichtig die richtiger Reihenfolge der dynamischen Pseudo-Klassen :hover und :active innerhalb einer Liste von Formatdeklarationen ist:
"Beachte dass 'a:hover' nach 'a:link' und 'a:visited' plaziert werden muss, da die Kaskadierungsregeln ansonsten die 'color' Eigenschaft der 'a:hover' Regel verbirgt.
Ähnlich verhält es sich, wenna:active
nach 'a:hover' plaziert ist: Die aktive Farbe wird angewendet wenn der Mauszeiger über dasa
Element geführt wird, und auch wenn dasa
Element aktiviert wird.
Bei Q & A - 08: (weiter oben) gibt es ein Beispiel für die korrekte Reihenfolge von Link Formatdeklarationen. Die ganze Theorie steht in folgenden Teilen der CSS2 Spezifikation (auf englisch): .
http://www.w3.org/TR/REC-CSS2/selector.html#link-pseudo-classes
http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes
Beachte dass die ':hover' Pseudoklasse erst seit CSS2 in den Spezifikationen enthalten ist. Von Browsern, welche keine Unterstützung von CSS2 deklarieren, kann man nicht erwarten, dass sie die 'a:hover' Pseudoklasse unterstützen. Beispielsweise haben die Netscape 4.x und Opera 3.x Browser keine Unterstützung für die ':hover' Pseudoklasse.
Q: Wo kann ich mehr über CSS erfahren ?
A: Die meta-FAQ für comp.infosystems.www.authoring.stylesheets enthält einen Abschnitt über Ressourcen, in dem eine grosse Anzahl von guten WWW-Sites über CSS genannt werden.
Die meta-FAQ wird in der Newsgruppe ebenso häufig veröffentlicht
wie dieser FAQ, sie ist aber auch auf dem www als HTML Dokument erhältlich
(auf englisch)...
http://css.nu/faq/ciwas-mFAQ.html (HTML)
http://css.nu/faq/ciwas-mFAQ.txt (reiner Text)
Q: Wie kann ich das von mir geschriebene CSS überprüfen und etwas über Fehler erfahren ?
A: Für traditionelle
Markup Syntax-Validierung...
http://www.htmlhelp.org/tools/validator/
http://valet.webthing.com/page/
http://validator.w3.org/
Für CSS...
http://www.htmlhelp.org/tools/csscheck/
http://jigsaw.w3.org/css-validator/validator.html.de
Freunde Dich mit obigen URLs an, sie werden Dir viel Zeit und Frustrationen ersparen. Übertrieben korrektes HTML -z.B. auch all jene Elemente explizit schliessen, welche dies nicht verlangen- und der korrekte Gebrauch von CSS sind essenziell für die korrekte Darstellung von CSS im WWW.
Der Validator bei webthing.com (The Page Valet, URL siehe oben) hat eine experimentelle "normalised markup" Option, welche "spam" (SPAddMarkup) verwendet um, nebst anderen Dingen, die optionalen Endtags einzufügen. "The Page Valet" basiert auf genau demselben Quelltext und denselben Fehlermeldungen wie der Validator bei htmlhelp.org.
"Irren ist menschlich", aber ausnahmsweise gibt es etwas, bei dem Computer helfen können: Fehlerprüfung. So wie Rechtschreibeprüfungen manchen irritierenden, schwer zu findenden Schreibfehler erkennen können, sind online verfügbare HTML Validatoren und CSS-Prüfer in der Lage, Webseiten auf Fehler zu überprüfen.
Du wirst Deine Kenntnis von HTML und CSS benötigen, um die Resultate dieser Werkzeuge interpretieren zu können, aber für weiterführende Diskussionen kannst Du Deine Fragen in dieser NG stellen, comp.infosystems.www.authoring.stylesheets.
(Anmerkung des Übersetzers: Im deutschsprachigen Usenet ist das Thema in de.comm.infosystems.www.authoring.misc 'On-Topic')
Q: Wo finde ich die aktuellste Version dieser FAQ ?
A: Diese FAQ wurde zuletzt aktualisiert am: 2000/12/14, Copyright 2000 Jan Roland Eriksson.
Es wird hiermit die Genehmigung erteilt, dieses Dokument elektronisch zu reproduzieren, solange es weder verkürzt noch abgeändert wird.
Diese FAQ wird regelmässig am Montag und Donnerstag in der NG veröffentlicht, in der Regel mit demselben Betreff, so dass diejenigen die sie bereits kennen den Betreff in das kill-file aufnehmen können.
Die FAQ Versionsnummer im Betreff wird nach jeder Aktualisierung geändert. So kannst Du mit der korrekten Einstellung des 'killfiles' sicherstellen, dass Du immer über die aktuellste Version verfügst.