CSS-Design - Wie weit sollte man bei der Gestaltung durch CSS gehen?

Wie weit sollte man bei der Gestaltung durch CSS gehen?Mit CSS "Inhalte" gestalten - In Anlehnung an einen kürzlich erschienen Artikel im Blog von Matt Ward, möchte ich seine dort gestellte Frage hier aufgreifen und gern Eure Meinung dazu in Erfahrung bringen. Denn Ward stellt nicht zu Unrecht die Frage - "Ob der ein oder andere mit CSS nicht ein wenig zu weit geht". Insbesondere ins Auge gefasst hat er hierbei die Gestaltung und Erstellung von Logos oder Icons die ausschließlich auf CSS basieren. Das heißt, es werden eine Textinhalte oder Bilddateien via CSS gekonnt gestaltet werden, sondern vollkommen unnötige Div-Konstrukte erzeugt, die keinen semantischen Bezug zu den Inhalten besitzen. CSS3 hingegen, bietet auch in solchen Fällen eine durchaus interessante Alternative und das ganz ohne zusätzlichen und unnötigen Quellcode erzeugen zu müssen!

Modernes Webdesign mit CSS - Das neue Buch!

CSS-Icons - Frei von semantischen Bezug!

Als eine der Begründungen für seine Art der Umsetzung von CSS-Icons führt Lucian Marin die Reduzierung von HTTP-Requests auf. Allerdings referenziert er in der Umsetzung seiner CSS-Icons auf die seiner Meinung nach notwendige Anwendung CSS3Pie, um somit CSS-Eigenschaften wie Border-Radius, Box-Shadow und ähnliches auch für die älteren IE-Versionen anbieten zu können. Ein Schritt der eigentlich eher lobenswert ist, wer aber einen Blick auf den von ihm erzeugten Quellcode für die Icons wirft, würde mit hoher Wahrscheinlichkeit dieses Lob gleich wieder zurück nehmen. Denn Lucian benötigt bei seiner Art der Icon-Gestaltung via CSS, je nach Aufwand um diese Icons darstellen zu können, eine durchaus große Anzahl an weiteren HTML-Elementen, die wie im markierten Beispiel des "Ying Yang-Icons" leer gelassen werden und obendrein jeglichen semantischen Bezug vermissen lassen.

CSS-Icons - Lucian Marin
CSS-Icons from Lucian Marin - "The non-semantic way"

Diese Umsetzung benötigt aber, bereits allein aufgrund der verwendeten Datei PIE.htc, einen weiteren HTTP-Request. Wer Icons in einer Sprite-Grafik zusammenfassen würde, hätte somit im Vergleich zu dieser Variante von Lucian somit nicht zwangsläufig mehr HTTP-Requests. Ein Argument, welches man also getrost ad acta legen kann, wobei nicht unwerähnt bleiben soll, dass die von ihm angebotene Sammlung an CSS-Icons für $25 zu erwerben ist.

CSS-Icons - CSS3 macht's (fast) möglich!

Das es auch vollkommen anders geht, belegt Nicolas Gallagher mit seinen Pure CSS social media icons. Denn er verzichtet auf umständliche und unnötige Div-Konstrukte oder andere Elemente die semantisch gesehen fehl am Platze wären, nur um den Text via CSS(3) umsetzen zu können Ein Link-Element und die Verwendung der Pseudo-Elemente :before und :after ermöglichen es, dem entsprechenden CSS-Icon, wie Fall des "Delicious-Icons", mehrere CSS-Eigenschaften (siehe oberer linker Teil) zuweisen zu können.

CSS-Icons - Nicolas Gallagher
CSS-Icons from Nicolas Gallagher - "The semantic way"

Da es bei der Vorstellung dieser CSS-Icons um ein Experiment handelt verwundert es nicht, dass die relevanten Versionen IE6 bis IE8 die Eigenschaften nicht zu 100% so darstellen können, wie sie es sollten (siehe oberer rechter Teil). Obwohl die Darstellung des Farbverlaufes über entsprechende Gradient Filter, auch für die bisherigen Versionen dieses Browsers realisiert werden hätten können.

CSS-Icons - Fazit

Nach der Vorstellung des Sachverhaltes zurück zur eigentlichen Problematik - Wie weit sollte man bei der Gestaltung durch CSS gehen? Der erste hier geschilderte Fall ist für mich persönlich nicht nur aus Gründen der Semantik absolut nicht zu empfehlen, da ich mich bei der Gestaltung der Icons ebenso wie Matt an die Gestaltung von Layout-Tabellen erinnert fühle. Aus Gründen der Zugängigkeit von Inhalten ist diese Umsetzung also ebenso wenig zu empfehlen, wie aus technischen Gründen. Denn ein auf diese Weise erzeugter Quellcode wird bei Umsetzung je nach Umfang der auf diese Art umgesetzten Elemente unnötig aufgebläht und sorgt somit nicht unbedingt für ein verbessertes bzw. schnelleres Ladeverhalten der Seite, wie Lucian es auf seiner Seite behauptet. Außerdem ist bei Änderungen in Bezug auf die Darstellung immer der Zugriff auf die HTML-Datei und unter Umständen auch auf die CSS-Datei von Nöten. Bei der Umsetzung von Nicolas hingegen, muss lediglich die CSS-Datei angepasst werden. Auch wenn beide Herangehensweisen zugegeben durchaus interessant sind, ist eine Variante aus den oben genannten Gründen für mich nicht zu empfehlen und die andere leider (ohne zusätzliche Dateien noch) nicht ganz praxistauglich, auch wenn die CSS-Icons von Nicolas mit dem Erscheinen des Internet Explorers 9 noch größere Zukunftschancen besitzen werden.

... HTML-Code transportiert nicht die Eigenschaften der Gestaltung von Webseiten, aber HTML-Code transportiert die Bedeutung der Inhalte...

Ziel sollte es sein, mit so wenig wie möglich HTML-Elementen auskommen zu können, um vorhandene Webinhalte seiner Bedeutung entsprechend auszeichnen zu können. Das Verwenden von (leeren) HTML-Elementen zur ausschließlichen Gestaltung von anderen Elemente oder zur "Erzeugung von Design-Elementen", ist meiner Meinung somit alles andere als empfehlenswert.

Was meint ihr - Wie weit sollte man bei der Gestaltung durch CSS gehen?

  1. Patrick 20 Aug 2010, 11:34

    Die Umsetzung des ersten dieser beiden Beispiele, geht mir ehrlich gesagt auch zu weit. Nicht gegen ein wenig "Ausloten" der Möglichkeiten die einem CSS bietet, aber dieses Angebot dann auch noch verkaufen?

    Eine eigentlich noch interessantere Frage: Findet sich dafür überhaupt jemand?


  2. Moritz Gießmann
    20 Aug 2010, 11:37

    Ich finde warum sollen Icons nicht einfach Bilder bleiben? Die Dateigrößen sind klein und die Requests verkraftbar, besonders wenn man Sprites benutzt.CSS-Icons sind eine Nette Demonstration, was man mit CSS alles machen kann, aber mehr auch nicht.


  3. Webstandard-Team
    20 Aug 2010, 11:42

    @Patrick: Abnehmer wird es sicherlich geben, aber ich würde es lieber in ein Buch investieren ;o)

    @Moritz: Bin ganz deiner Meinung!


  4. Chris 20 Aug 2010, 12:37

    Sobald in Bild Inhalt hat -> img-Tag
    Ist es ohne Inhalt und für Gestaltungzwecken -> CSS

    Wenn man, wie im ersten Beispiel die Sprite-Icons über CSS einbindet, sollte man:

    1. eine ungeordnete Liste benutzen
    2.
    a) innerhalb des listenelements ein span-Tag verwenden mit der Bezeichnung und dieses auf position:absolute; left:-9999px; setzen
    b) oder zumindest das title-Attribute verwenden.

    Alles andere ist absoluter nonsense.

    Gruß
    Chris


  5. AKamleiter
    21 Aug 2010, 01:24

    Also ich denke auch, dass man mit CSS nicht zu weit gehen sollte. Der HTML-Quelltext sollte auf jeden Fall noch sinnvoll und sauber bleiben.
    Rein zum Experimentieren ist auf sicherlich interessant die Möglichkeiten von CSS3 mal voll aus zu reizen, aber für die Praxis taugt das meiner Meinung nach nicht.
    Im Vordergrund sollte ein sauberer Quelltext stehen. Ob man dafür dann ein paar KB mehr laden muss, sollte nicht ausschlaggebend sein.


  6. Siegfried
    21 Aug 2010, 12:52

    Diese CSS Icons sind Blödsinn. Absolut.

    Laut Vorgabe vom w3c (die ich für sehr sinnvoll halte) kommt Inhalt und dessen Bedeutung (Semantik) in die html-Datei, deren Präsentation (Darstellung) in die css Datei. Punkt.

    Also, ein Icon ist i.d.R. Inhalt. Kommt also in die html-Datei. Aber bei einem ist kein Inhalt zu sehen. Wenn dieser Div also irgendeine Bedeutung haben soll, dann wohl nur im Zusammenhang mit Präsentation. So ein Div gehört nicht in die html-Datei. In den hier gezeigten Beispielen wimmelt es nur so von html-Konstrukten, die ausschließlich der Präsentation dienen. Ein eklatanter Widerspruch zum Zweck von html.

    Ein möglicher Ausweg wäre hier die Verwendung von svg, um solche Icons einzufügen. Aber ganz bestimmt nicht die Vergewaltigung von html und css.


  7. Siegfried
    21 Aug 2010, 12:55

    Sorry, die engine verschluckt das Beispiel. Soll heissen:

    ... bei einem <div class="whatever"></div> ...


  8. Patrick
    21 Aug 2010, 16:13

    Viel schöner wäre es doch, wenn jeder Browser mit svg umgehen könnte, dann könnte man grafisch aufwändige Bilder ganz einfach in den Quellcode einbinden ohne XHTML-Overhead oder HTTP-Requests zu erzeugen.


  9. Martin Abraham
    22 Aug 2010, 13:48

    Ich freue mich endlich mal einen Artikel zu lesen, der die Verwendung von neusten CSS-Techniken kritisch beäugt.

    Neben der u.a. von Siegfried genannten Zweckentfremdung von CSS ist für mich gerade der praktische Standpunkt entscheidend.

    Der Großteil der Browser unterstützt zwar inzwischen CSS2 und die gebräuchlichsten CSS3-Formatierungen (z.b. Canvas), das gilt aber nicht für den IE. Darf man den Zahlen bei Wikipedia Glauben schenken, so verwenden IE 8.0 24,9%, IE 7.0 8,7%
    IE 6.0 4,5% (Stand Mai 2010 - http://de.wikipedia.org/wiki/Webbrowser). IE 6.0 und IE 7.0 unterstützen nicht einmal die Pseudo-Elemente :after und :before. Selbst der IE 8.0 unterstützt außer @font-face keine Eigenschaft des CSS3-Standards (http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/). Setzt man neuere CSS-Formatierungen exessiv und ohne Bedacht ein, so riskiert man (grob) fehlerhafte Darstellungen bei über 30% der Anwender. Hohle Sprüche über IE-Benutzer sind hier fehl am Platze.

    Verwendet man CSS für Inhalte (z.B. Icons) baut man zusätzliche Barrieren auf. Blinden oder sehbehinderten Benutzer ist sehr wohl die Bedeutung eines Bildes klar, da seit HTML4 das Setzen des Alt-Tags Pflicht ist. Was können sie aber mit einem verschachtelten Wirrwarr aus Div-Tags anfangen?!

    Auch ich bin begeistert von den Möglichkeiten, die neue Generationen von CSS bieten, bei all den Möglichkeiten sollte man aber nicht vergessen, dass letztlich der Benutzer im Mittelpunkt steht.

    Schöne Grüße aus der Hansestadt Lübeck,

    Martin Abraham


  10. Maria
    23 Aug 2010, 15:13

    ICONS können überhaupt nicht vom semantischen Bezug gelöst werden! Auch das markierte Zeichen steht in einem bestimmten Kulturkreis nach wie vor für bestimmtes Kulturwissen... Das fängt beim Power-Button an und hört beim Back auf... Semantik steht doch schon für sich! Aber klar, man kann sprachliche Bildhaftigkeit auch vom mataphorischen Begriff lösen...


  11. Sven Wolfermann
    23 Aug 2010, 20:23

    Auch ich experimentiere gern mit CSS3 und den heutigen Möglichkeiten, aber nur wo es auch Sinn macht (Hintergrundverlauf, Schatten - geht übrigens alles im auch IE). Icons mit CSS umzusetzen ist allerdings nicht mehr als ein Experiment, das sollte man in keinem Projekt einsetzen!

    Grundsätzlich bin ich aber der Meinung, dass das Design nicht in allen Browser gleich aussehen muss, sogar darf. Gerade beim gestalten von Formularen sollte man weitestgehend auf die Gestaltung verzichten - hier gibt es zu viele Faktoren, die unterschiedlich sein können je nach Betriebssystem oder Browser. Ein Mac/Safari User ist runde Schaltflächen gewohnt, ein Windows XP/IE User eher eckige Inputfelder. Hier sollte man der Usability wegen vorsichtig stylen und nicht um jeden Preis "100%" Gleichheit wollen, btw. schafft man eh nicht...

    Also... CSS3 da einsetzen wo es Sinn macht!

    Sven


  12. Patrick Offczorz
    06 Sep 2010, 12:03

    Ich finde auch das Icons definitiv Bilder bleiben sollten. Schließlich kann man durch ein Bild auch schöne hover Effekte erzielen. Der Aufwand für solche Icons ist meiner Ansicht zu viel.


  13. Mario Träger
    18 Okt 2010, 16:28

    Mit Hilfe der CSS-Icons sieht man sehr schön was mit CSS alles möglich ist, aber auch nicht mehr. Wenn ich mehr als ein Icon benutzte dann verwende ich ein CSS Sprite und hab trotzdem nur einen Request und eine geringe Datengröße.

    Deswegen nicht übertreiben mit CSS3 ;-)

    by Mario Träger


  14. firehorse 21 Okt 2010, 04:32

    Ich begeistere mich schon seit Anbeginn für CSS. Auch hinsichtlich was man damit grafisch alles gestalten könnte.

    Letztlich wird es mit CSS 3.0 darauf hinauslaufen dass man grafische Elemente eben als Code und nicht sinnbildlich als Grafik präsentiert. Auch könnte ich mir vorstellen inhaltliche Bezüge von den grafischen zu trennen. So wäre in der reinen HTML-Datei nur noch der textliche Inhalt sichtbar.

    Ich kann mich noch gut daran erinnern wie alle über den IE gemault haben und muss heute feststellen dass die meisten doch eher vor dieser "Bremse des Fortschritts" kuschen. Damit ist allerdings Stillstand programmiert. Letztlich will dies aber auch keiner.

    Warum also nicht?

    Einzig wegen der Entwicklungsländer und deren Leitungen würde mir als Grund einfallen. Auf der anderen Seite: wer in einem solchen Land lebt und die Seiten hier besucht, der hat ohnehin jetzt schon Probleme oder kann sich dort etwas besseres leisten.

    SVG wäre natürlich noch besser, allerdings scheint es mir an dessen Umsetzung oder besser Realisierung gänzlich zu fehlen. Ich halte es für sinnvoller dann bei dem weiterzumachen was sich bereits bewährt hat. Und dies wäre nun einmal CSS.

    Was MS und seine Filter betrifft so kann ich nur schreiben: Schande über MS!

    Diese sind eine reine Eigenentwicklung und schon jetzt zu CSS kaum wirklich oder sinnvoll nutzbar. Statt jede Nase lang von einem neuen IE 9 zu schreiben, sollte man sich ersteinmal klarmachen dass MS selbst den Support für XP SP3 bis ins Jahr 2014 zugesichert hat. Dann einen Browser, der nur in den darauf nachfolgenden Versionen, Vista und Win7 funktioniert, herauszubringen ist eine Frechheit und sorgt zu dem für eine Zweiklassengesellschaft im Netz.


  15. chris
    02 Dez 2010, 11:43

    Bin ganz deiner Meinung. HTML ist zur (Text-)Strukturierung gedacht, CSS zum Layouten. Das sollte auch so bleiben, denn verwendet man HTML-Elemente für Icons schließt man sehbehinderte völlig aus. Bildlich kann man sich da mit Hilfe eines Textbrowsers vorstellen, der kann divs nicht sinnvoll interpretieren, ein Alt-Tag dagegen schon.


  16. esnalte 02 Aug 2011, 20:13

    Einzig wegen der Entwicklungsländer und deren Leitungen würde mir als Grund einfallen. Auf der anderen Seite!!


  17. Martin
    26 Aug 2011, 23:33

    Wer in einem solchen Land lebt und die Seiten hier besucht, der hat ohnehin jetzt schon Probleme oder kann sich dort etwas besseres leisten!!


  18. Matthias Eger 05 Okt 2013, 19:15

    Servus und herzlichen Dank für den Beitrag.

    Ich bin seit den ersten Versionen von HTML/CSS dabei und bin mittlerweile so froh und dankbar darüber, wie einfach es mittlerweile ist mit CSS (in Kombi mit HTML) strukturierte Pages zu bauen. Das wenn wir damals schon gehabt hätten ... :-)

    Wichtig ist -> Kompatibilität - und da gibt es leider noch das eine oder andere Problemchen, welche sich in naher Zukunft von selbst lösen werden (wenn jeder brav mitmacht :-)

    Matthias Eger


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage