• Wie man CSS3 und HTML5 schon nutzen kann

  Zur Zeit wird man im Bereich Webdesign regelrecht zugeschmissen mit Artikeln, die sich mit dem letzten Schrei der Webtechnik befassen: HTML5 und CSS3. Zwar sind beide Ansätze noch bei weitem nicht in allen Browsern *hust* IE *hust* implementiert – dennoch ist ihr Einsatz bereits jetzt sinnvoll & lohnenswert. Ich halte es da ganz mit Andy Clarke: Ignorance is bliss:

  That’s because in the real world, people using the Web don’t find a Web site that they like, then open up another browser to check that it looks they same.

  AUf mehreren Seiten habe ich diese Techniken genutzt. Wie die Umsetzung in der Praxis aussieht, möchte ich ein einem Beispiel verdeutlichen. Ich habe zu Beginn des Jahres die Webseite für den münsteraner Kaffeefreund Dominik Schweer umgesetzt. Dabei habe ich diverse Neuerungen genutzt, die ich kurz anschneiden möchte.

  HTML5

  HTML5 stellt neben dem wahnsinnig einfachen Doctype diverse neue Elemente vor – einen guten Überblick bietet Peter Kröners Artikel zum Thema. Mit entsprechenden CSS-Klassen & IDs lassen sich diese Elemente zumindest schon antizipieren, wie es auch A List Apart im Preview zu HTML5 als “common structures” für HTML4 vorstellt. Die Schwierigkeiten, die man sich beim direkten Einsatz dieser Elemente einhandelt, werden in Peters Artikel eindrucksvoll belegt, daher sollte man in diesem Bereich wohl zunächst auf die Klassen-/ID-Lösung zurückgreifen – was in vielen Jahren evtl. mal die Umstellung erleichtet

  Was man aber bereits einsetzen kann sind WAI-ARIA-Landmarks, Gründe dazu finden sich bei Vorsprung durch Webstandards:

  Mit Aria-Landmarks kann jede statische Website besser strukturiert werden. Aria-Landmarks werten das HTML auf und erhöhen dessen Informationswert. Mit Landmarks kann die Rolle eines Elements genauer beschrieben werden

  Die erweiterten Angaben sind schnell eingebunden:

  • Der Kopfbereich erhält “role=banner”
  • Der Hauptinhalt erhält “role=main”
  • Die Seitenleiste erhält “role=complementary”
  • Die Navigation erhält “role=navigation”
  • Blogeinträge / Texte erhalten “role=”article”
  • Zusatz-/Metainfos zu Blogeinträgen erhalten “role=contentinfo”
  • Das Suchformular erhält “role=search”

  Das war’s auch schon. Kurz und schmerzlos wurde der Inhalt durch einfache Auszeichnungen zugänglicher gemacht.

  Auch Formularelemente lassen sich in HTML5 gewinnbringend erweitern. Dort gibt es einen ganzen Satz neuer Typ-Bezeichnungen, die glücklicherweise bei “Unwissenheit” des Browsers auf den Standardtyp “text” zurückgesetzt werden. So lassen sich z.B. Kommentarformulare in Blogs durch minimale Änderungen semantisch leicht aufwerten:

  <input type="url">, <input type="email">

  Zumindest auf dem iPhone wird dann schon mal die Tastatur angepasst. Ansonsten sehen die Felder aus wie normale Text-Eingabefelder, dementsprechend gibt es Userseite keine Beeinträchtigung der Darstellung. Eine vollständige Dokumentation dazu gibt es bei “Dive Into HTML5“: A Form of Madness.

  Wie gesagt verzichte ich zunächst auf den Einsatz der brandneuen Elemente, da dies zu unglaublichen Kompatibilitätsproblemen führt. Dem Einsatz der oben beschriebenen kleinen Änderungen steht jedoch nichts im Wege.

  CSS3

  Neben den HTML5-Techniken bieten einige Browser mittlerweile sehr gute Unterstützung für die neuen CSS3-Eigenschaften. Beim Einsatz sollte man natürlich stets darauf achten, dass die Funktionalität der Seite auch ohne Unterstützung der Features gesichert ist. Daher beschränke ich mich auf wenige grafische Details, ganz im Sinne des Progressive Enhancements.

  Ein gutes Beispiel dafür ist der Einsatz von RGBa für die Festlegung von Farben. Bei 24ways.org gab es zu Beginn der Adventskalender-Reihe 2009 ein exzellentes Tutorial für die Arbeit mit RGBa. Die Möglichkeit, nur die Hintergrundfarbe, nicht aber den enthaltenen Text mit leichter Transparenz zu versehen, habe ich beim Kaffeefreund einige Male genutzt. Besonders beim Inhaltsbereich fällt das auf – in allen Browser, die RGBa unterstützen, scheint das Hintergrundbild dezent durch:

  

  Durchscheinender Hintergrund

  Browser, welche die RGBa-Farbangaben nicht akzeptieren, bekommen stattdessen eine einfache RGB-Farbe ausgeliefert & müssen auf die Kaffeebohnen leider verzichten. Ist zwar schade, stört aber den Besucher wohl nicht weiter – wie soll er es auch wissen Zudem sieht der fortschrittlich browsende Nutzer im Googlemaps-Infokasten zu später Stunde nicht einfach nur eine graue Box mit Text, sondern leicht durchscheinend einen Kartenauschnitt aus GoogleMaps dahinter. Das sieht im CSS dann z.B. für den Hauptinhalt so aus:

  #content{ background-color: rgb(241,232,226); background-color: rgba(241,232,226,0.8);}

  Mit Schattierungen habe ich ganz behutsam gearbeitet. Über die Eigenschaft box-shadow mit entsprechenden Browser-Prefixes werten die Schattierungen die Seite auf & geben ihr einen leichten dreidimensionalen Touch. Nach Lektüre des Artikels “Crafting Subtle & Realistic User Interfaces” habe ich die Schatten übrigens massiv reduziert – den Grund gibt der Artikel:

  Drop Shadows will ruin your design if you don’t do it right. Things should be right up against their surface which means using a 1-3px Drop Shadow size. And 0-3px distance. This isn’t WordArt.

  

  Der Schatten am rechten Rand der Navigation ist eigentlich nicht korrekt

  Problematisch bei dieser Eigenschaft ist, dass per CSS vergebene Schatten streng genommen perspektivisch nicht ganz korrekt sind. So müsste z.B. bei der Kaffeefreund-Seite der Schatten der Navigation zum Hintergrund hin länger sein als zur dazwischenliegenden Inhaltsebene.

  Dennoch erscheint die Seite so ganz subtil etwas griffiger. Der Einsatz von Schattierungen sollte jedoch insgesamt wie bereits angedeutet gut durchdacht sein. Welche Probleme auftauchen können, verdeutlicht der Artikel “Drop-Shadows and Gradients: Be Consistent in Your Visual Metaphors“.

  Eine letzte heißgeliebte Eigenschaft ist der border-radius. Runde Ecken sind waren ja der absolute Knaller, wenn es um jegliche Web2.0-Seiten geht. Natürlich nutzt die Seite auch diese Eigenschaft – und das sogar bei fast jeder Box, die sichtbar ist. Jedoch habe ich auf übertrieben abgerundete Boxen weitestgehend verzichtet, sondern nur geringe Radien angegeben. Den Grund dazu liefert der bereits oben zitierte Artikel zu Userinterfaces:

  Real-world objects rarely have perfectly square corners. Use subtle rounded corners to make objects look real.

  Daher ist jedes Element, das ursprünglich eckige Kanten hatte, zumindest mit einer minimalen Rundung versehen. Die Angabe dazu habe ich platzsparend ganz an das Ende der CSS-Datei geschoben & dort alle Elemente angegeben, die ich leicht gerundet haben wollte.

  Wer die entsprechenden Techniken im Einsatz sehen möchte & mir aufgrund inkonsistenten Codings die Ohren langziehen mag, darf sich das Stylesheet gerne in Gänze zu Gemüte führen.

  Wie  man sieht: Wenn die vorhandenen Techniken dezent eingesetzt werden, lassen sich mit einfachen Mitteln sinnvolle Verbesserungen erzielen. Die Seite wird in wenigen Minuten aufgewertet & bleibt dennoch funktional – sie übermittelt auch im IE6 den Inhalt problemlos.

  Nachtrag: Etwas abstrakter, aber kompakt und treffend formuliert hat es Mathias Schäfer. “Progressive Enhancement: Die Zeit ist gekommen“

  
  

Das könnte dich auch interessieren:

• WordPress: Performance optimieren
• Tutorial: CSS – Hover mit verlinkten Bildern
• CSS Tutorial I: Hover effect on linked images