Schwächen von CSS

[Andreas]

Hallo,

Ich habe nun schon häufig Webpräsenzen erstellt, die auf die alte Tabellenoptik verzichten. Ich stelle aber immer wieder fest, dass sich mit CSS momentan noch nicht alles erreichen lässt.

Dies betrifft vor allem die Trennung von Inhalt und Struktur einer Webpräsenz, die ja mit CSS erreichbar sein soll.

Auch in Selfhtml werden Lösungen angeboten, bei denen div-Bereiche zu Abtrennung inhaltlicher Bereiche genutzt werden. Durch links- und rechtsbündiges Formatieren mit CSS wird sodann die Position der Bereiche im Browser bestimmt. So weit so gut. Voraussetzung für diese Anordnung ist jedoch, dass die div-Bereiche tatsächlich in der korrekten Reihenfolge im Quelltext stehen, nur dann lassen sie sich linksbündig anordnen.

Was eigentlich das Ziel sein muss: div-Bereiche müssten sich anhand ihrer Identifikation (id) anordnen lassen, z. B. "5px unterhalb von id menuebereich". Erst dann macht man den Inhalt völlig unabhängig von der Struktur des HTML-Textes.

Andreas

[schwarze Piste]

Tachchen!

1. Das ist genau das Argument, mit dem ich immer denjenigen komme,
die behaupten, sie würden zunächst den puren HTML-Code schreiben und
sich dann erst an das Aussehen der Seite machen.
Meiner Meinung nach ist das eine sehr hinderliche Herangehensweise.

2. In der Theorie ist sogar deine Lösung denkbar.
CSS bietet ausreichend Möglichkeiten, Elemente absolut und relativ zu
positionieren über den normalen Textfluss hinaus. Und ginge es bloß
um die pure Darstellung von Elementen in einer bestimmten Reihenfolge
und Anordnung, wäre das mit den Mitteln von CSS regelmäßig möglich.

Leider folgt das menschliche Auge (eigentlich das Hirn ... egal)
aber bestimmten Regeln und das bedeutet, dass es darüber gewisse
"Standards" einzuhalten gibt:

Wir hätten es gerne übersichtlich, mit klaren Linien und Formen,
den passenden Farben am rechten Ort ... und zudem natürlich noch
schön[TM] ... und das bei jeder Fenstergröße, jeder Schriftgröße ...

Und erst dieses Gemisch aus technischen und menschlichen Anforderungen
macht es IMHO erforderlich, Webdesign als Kunst des Kompromisses zu sehen.

Gruß

Die schwarze Piste

[at]

Hallo.

1. Das ist genau das Argument, mit dem ich immer denjenigen komme,
   die behaupten, sie würden zunächst den puren HTML-Code schreiben und
   sich dann erst an das Aussehen der Seite machen.

Was heißt in diesem Zusammenhang "pur"? Keine Klassen, keine ID, kein Zusammenfassen zusammengehöriger Elemente, der Verzicht auf den halben HTML-Sprachschatz? Man muss es ja nicht gerade so machen wie der CSS Zen Garden, aber es besteht doch wenig Bedarf, Inhalte zu gestalten, die dem Autoren noch nicht einmal eine differezierte Auszeichnung wert waren.
MfG, at

[Klawischnigg]

Hi there,

So weit so gut. Voraussetzung für diese Anordnung ist jedoch, dass die div-Bereiche tatsächlich in der korrekten Reihenfolge im Quelltext stehen, nur dann lassen sie sich linksbündig anordnen.

Leider wahr. Das macht die zu Recht geforderte Trennung von Layout und Inhalt eigentlich zur Makulatur.

Was eigentlich das Ziel sein muss: div-Bereiche müssten sich anhand ihrer Identifikation (id) anordnen lassen, z. B. "5px unterhalb von id menuebereich". Erst dann macht man den Inhalt völlig unabhängig von der Struktur des HTML-Textes.

Ja, aber das Problem ist, daß das ja von Ausgabegerät und vielen anderen Einstellungen und Parametern wie viewport etc. etc. abhängt, ob zum Beispiel dort, wo Du Dir etwas vorstellst, tatsächlich auch etwas angezeigt werden kann. (Ersetze zB 5px durch 500px und unterhalb durch rechts davon, und es wird ersichtlich (oder eben auch nicht;) was ich damit meine). Ideal wäre, gäbe es nicht das Problem der absoluten Nullahnung über das Equipment des Surfers, natürlich immer fixe Positionierung. Dann könnten sich auch die selbsternannten Webgraphiker so richtig austoben ;) ...

[Struppi]

Auch in Selfhtml werden Lösungen angeboten, bei denen div-Bereiche zu Abtrennung inhaltlicher Bereiche genutzt werden. Durch links- und rechtsbündiges Formatieren mit CSS wird sodann die Position der Bereiche im Browser bestimmt. So weit so gut. Voraussetzung für diese Anordnung ist jedoch, dass die div-Bereiche tatsächlich in der korrekten Reihenfolge im Quelltext stehen, nur dann lassen sie sich linksbündig anordnen.

Und wo ist das Problem?
sematisch korrektes HTML wird durch CSS formatiert, ist für mich die Trennung von Inhalt und Layout. Natürlich ist es immer schwierig bestimmte Anforderungen, für die HTML/CSS eben nicht optimal sind, umzusetzen (Tabellenlayout, DIN A4 Layout), dass in diesen Fällen die von dir genannte Regel evtl. ausser Kraft gesetzt wird, hat nichts mit vermeintlicher Schwäche von CSS zu tun, sondern mit dem Wunsch sich über die Stärken von CSS hinwegsetzen zu wollen. (Damit will ich nicht sagen, dass das per se schlecht sein muss, aber man muss es Wissen)

Was eigentlich das Ziel sein muss: div-Bereiche müssten sich anhand ihrer Identifikation (id) anordnen lassen, z. B. "5px unterhalb von id menuebereich". Erst dann macht man den Inhalt völlig unabhängig von der Struktur des HTML-Textes.

Nein, das Ziel ist, dem Darstellungerät einen Vorschlag zu machen, wie etwas darzustellen ist. Ob und wie dieses dann umgesetzt wird ist egal.
Übrigens ist und darf der Inhalt nicht unabhängig von seiner Struktur sein, dann hast du was falsch verstanden. Der Inhalt ist wichtig für die Struktur des HTML Codes.

Struppi.

[Robert Bienert]

Moin!

Ich habe nun schon häufig Webpräsenzen erstellt, die auf die alte Tabellenoptik verzichten. Ich stelle aber immer wieder fest, dass sich mit CSS momentan noch nicht alles erreichen lässt.

Das stimmt, mehrspaltiger Fließtext z.B., wie in Zeitungen gerne benutzt, wird wohl erst mit CSS 3 eingeführt. Auch muss man momentan leider noch einige Kompatibilitätshacks für einen gewissen Browser einsetzen, der darüber hinaus CSS nur auszugsweise umsetzt, weil man nicht einen Großteil seiner Besucher vergraulen möchte.

Dies betrifft vor allem die Trennung von Inhalt und Struktur einer Webpräsenz, die ja mit CSS erreichbar sein soll.

Du meinst also, dass man trotz rein semantisch ausgezeichneten HTMLs, welches mit CSS formatiert wird, nicht alles so darstellen kann, wie man es möchte und mit HTML „formatieren“ könnte? Das erscheint mir ein wenig fragwürdig.

Auch in Selfhtml werden Lösungen angeboten, bei denen div-Bereiche zu Abtrennung inhaltlicher Bereiche genutzt werden.

Hättest du ein Beispiel parat?

Durch links- und rechtsbündiges Formatieren mit CSS wird sodann die Position der Bereiche im Browser bestimmt. So weit so gut. Voraussetzung für diese Anordnung ist jedoch, dass die div-Bereiche tatsächlich in der korrekten Reihenfolge im Quelltext stehen, nur dann lassen sie sich linksbündig anordnen.

Das ist nicht korrekt. Nehmen wir folgende zwei HTML+CSS-Dokumente, die im Browser (annähernd) gleich aussehen (Achtung: Es kann sein, dass der MSIE hierbei über den Boxmodel-Bug stolpert, dann müssen die Breiten verkleinert werden):

Zuerst die Navigation, dann der Inhalt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html><head><title>Nav-Test</title>  
<link rel="stylesheet" href="all.css" type="text/css" charset="UTF-8">  
<style type="text/css">  
<!--  
[code lang=css]#nav {  
        border: 1px solid black;  
        width: 25%;  
        float: left;  
}  
#content {  
        margin-left: 30%;  
        width: 70%;  
        border: 1px solid black;  
}

-->
</style>
</head>
<body>
<h1>Nav-Test</h1>
<ol id="nav">
        <li><b>Projekt A</b>
        <ol>
                <li>Aktuelles</li>
                <li>Informationen</li>
        </ol></li>
        <li><b>Projekt B</b>
        <ol>
                <li>Aktuelles</li>
                <li>Informationen</li>
        </ol></li>
        <li><b>Projekt C</b>
        <ol>
                <li>Aktuelles</li>
                <li>Informationen</li>
        </ol></li>
</ol>
<div id="content">
<h2>Herzlich Willkommen</h2>
<p>Viel, viel langer Text, bis ganz nach unten [bitte dementsprechend füllen]</p>
</div>
<p id="footer">Letzte Änderung: heute von Robert</p>
</body></html>[/code]

Und nun genau anders herum, d.h. erst der Inhalt, dann die Navigation:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html><head><title>Nav-Test</title>  
<link rel="stylesheet" href="all.css" type="text/css" charset="UTF-8">  
<style type="text/css">  
<!--  
[code lang=css]#content {  
        left: 30%;  
        width: 70%;  
        border: 1px solid black;  
        float: right;  
}  
#nav {  
        border: 1px solid black;  
        width: 25%;  
        top: 0%;  
}

-->
</style>
</head>
<body>
<h1>Nav-Test</h1>
<div id="content">
<h2>Herzlich Willkommen</h2>
<p>Viel, viel langer Text, bis ganz nach unten [bitte dementsprechend füllen]</p>
</div>
<ol id="nav">
        <li><b>Projekt A</b>
        <ol>
                <li>Aktuelles</li>
                <li>Informationen</li>
        </ol></li>
        <li><b>Projekt B</b>
        <ol>
                <li>Aktuelles</li>
                <li>Informationen</li>
        </ol></li>
        <li><b>Projekt C</b>
        <ol>
                <li>Aktuelles</li>
                <li>Informationen</li>
        </ol></li>
</ol>
<p id="footer">Letzte Änderung: heute von Robert</p>
</body></html>[/code]

Die von beiden Dateien referenzierte all.css ist simpel aufgebaut:

#footer {  
        clear: both;  
}

Lange Rede kurzer Sinn: Obwohl die Anordnung der wichtigen Elemente beider Dokumente recht unterschiedlich ist, produzieren beiden die gleiche Darstellung in einem Webbrowser: Ganz oben die Hauptüberschrift, darunter links die Navigation und daneben der Hauptinhalt, ganz zum Schluss der Footer.

Was eigentlich das Ziel sein muss: div-Bereiche müssten sich anhand ihrer Identifikation (id) anordnen lassen, z. B. "5px unterhalb von id menuebereich". Erst dann macht man den Inhalt völlig unabhängig von der Struktur des HTML-Textes.

Sagen dir die z.B. CSS-Eigenschaften [ref:self811;css/eigenschaften/positionierung.htm#position@title=position]: relative sowie [ref:self811;css/eigenschaften/randabstand.htm@title=margin-top]: 5px etwas?

Gleichwohl muss man allerdings sagen, dass CSS-Authoring heutzutage immer noch nicht so bequem möglich ist, da es (keine mir bekannten) Programme gibt, die eine direkte entsprechende Rückkopplung zwischen CSS-Code und Darstellung gibt. Mit dem DOM-Inspektors des Firefox lässt sich allerdings lokal schon viel erreichen, die Darstellungsoption »Computed Style« ist beispielsweise sehr nützlich.

Aber vielleicht hast du auch Beispiele, die deine Meinung unterstützen und als Gegenbeispiele zu meiner Aussage dienen können.

Viele Grüße,
Robert

[Felix Riesterer]

Lieber Robert,

was muss ich da lesen?!

Zuerst die Navigation, dann der Inhalt:

Wenn Dir das hier nur keine Schelte einhandelt...

Kennst Du schon den Artikel über die Reihenfolge von Inhalten einer Webseite?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

...man sollte vielleicht doch einen Beitrag erst ganz zu Ende lesen, bevor man meckert.

Aber den Link auf den passenden Self-Artikel möchte ich doch als eine sinnvolle Ergänzung zu Deinem Posting beigesteuert haben.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Robert Bienert]

Moin!

Gut, dass hier immer noch jemand aufpasst, den Weblog-Artikel hatte ich ganz vergessen, noch zu verlinken.

Vielen Dank und viele Grüße,
Robert

[Struppi]

... (Achtung: Es kann sein, dass der MSIE hierbei über den Boxmodel-Bug stolpert, dann müssen die Breiten verkleinert werden):

Der im (IE 6) Standardmode nicht vorhanden ist, oder?

Struppi.

[Yogi]

Hi Robert,

Gleichwohl muss man allerdings sagen, dass CSS-Authoring heutzutage immer noch nicht so bequem möglich ist, da es (keine mir bekannten) Programme gibt, die eine direkte entsprechende Rückkopplung zwischen CSS-Code und Darstellung gibt.

Adobe GoLive bietet mindestens schon seit der 6er-Version eine sogenannte Live-Vorschau. Ich kann den CSS-Code ändern und sofort wird die Seite neu aufgebaut. Na schön, mit einer Sekunde Verzögerung, nur bei eingebettetem CSS und nur mit der Render-Engine des IE. Zum Entwickeln des Stylesheets aber ist das trotzdem sehr komfortabel.

~Yogi~

[Felix Riesterer]

Lieber Yogi,

Adobe GoLive bietet mindestens schon seit der 6er-Version eine sogenannte Live-Vorschau. Ich kann den CSS-Code ändern und sofort wird die Seite neu aufgebaut.

was hälst Du von dieser Seite? Benutze mal die Schaltfläche "edit styles" und editiere im aufgehenden Fenster...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Robert Bienert]

Moin!

Gleichwohl muss man allerdings sagen, dass CSS-Authoring heutzutage immer noch nicht so bequem möglich ist, da es (keine mir bekannten) Programme gibt, die eine direkte entsprechende Rückkopplung zwischen CSS-Code und Darstellung gibt.

Adobe GoLive bietet mindestens schon seit der 6er-Version eine sogenannte Live-Vorschau. Ich kann den CSS-Code ändern und sofort wird die Seite neu aufgebaut. Na schön, mit einer Sekunde Verzögerung, nur bei eingebettetem CSS und nur mit der Render-Engine des IE. Zum Entwickeln des Stylesheets aber ist das trotzdem sehr komfortabel.

Abgesehen davon, dass sich die letzten beiden Sätze IMHO ein wenig gegenseitig ausschließen, suche ich ein Programm, welches eine Rückkopplung in beiden Richtungen bietet: Ich möchte, nicht nur wie in GoLive, den CSS-Code ändern und direkt die Auswirkungen sehen, sondern auch umgekehrt an meinen Objekten zerren können und im Hintergrund wird der Code angepasst. Zusätzlich wäre eine Formatvorlagen-Verwaltung wie in OpenOffice.org nicht schlecht (noch schöner fände ich es, wenn OOo XHTML+CSS ausspuckte, wobei Formeln direkt als MathML und Grafiken als SVG eingebettet würden). Aber ich bin jung, da hat man noch Träume!?

Frohe Ostern,
Robert

[Ingo Turski]

Hi,

Ich habe nun schon häufig Webpräsenzen erstellt, die auf die alte Tabellenoptik verzichten. Ich stelle aber immer wieder fest, dass sich mit CSS momentan noch nicht alles erreichen lässt.

Dies betrifft vor allem die Trennung von Inhalt und Struktur einer Webpräsenz, die ja mit CSS erreichbar sein soll.

Strenggenommen hast Du recht, aber Du übertreibst es auch ziemlich. Nur weil die Reihenfolge der Elemente für bestimmte Anforderungen an das Layout von Bedeutung ist, würde ich noch nicht von einer mangelhaften Trenung von Inhalt und Darstellung sprechen.

Auch in Selfhtml werden Lösungen angeboten, bei denen div-Bereiche zu Abtrennung inhaltlicher Bereiche genutzt werden. Durch links- und rechtsbündiges Formatieren mit CSS wird sodann die Position der Bereiche im Browser bestimmt. So weit so gut. Voraussetzung für diese Anordnung ist jedoch, dass die div-Bereiche tatsächlich in der korrekten Reihenfolge im Quelltext stehen, nur dann lassen sie sich linksbündig anordnen.

Hier vergißt Du die Intention dieser Beispiele: Sie sollen den Einstieg in CSS-basierte Layouts vermitteln und nutzen daher bewußt float anstatt absoluter Positionierung, womit sich durchaus eine Entkoppelung der Reihenfolge erreichen läßt. Nur setzt eine sinnvoll angewandte absolute Positionierung einige Erfahrung voraus.

freundliche Grüße
Ingo