Entwicklung & Design

CSS3: Das kleine Extra für besondere Gäste: Webstandards im Griff

Wer nicht dem Zwang unterliegt, Webseiten so gestalten zu müssen, dass sie in allen Browser „gleich“ aussehen, kann heute schon ein paar CSS3-Eigenschaften nutzen, um seinen Internetauftritt etwas aufzupeppen. Davon haben dann zwar nicht alle Besucher etwas, aber wer moderne, fähigere Browser nutzt, wird mit ein wenig Eye-Candy belohnt.

Besucher, die Safari oder Chrome nutzen, überrascht die Website „For A Beautiful Web“ mit schick animierten DVDs.

Besucher, die Safari oder Chrome nutzen, überrascht die Website „For A Beautiful Web“ mit schick animierten DVDs.

Einige dieser kleinen Extras dürften den meisten Webentwicklern bereits bekannt sein. Für runde Ecken zum Beispiel hat das W3C in CSS3 die Option „border-radius“ vorgesehen [1]. Mit so genannten „vendor prefixes“ lassen sich via „-moz-border-radius“ und „-webkit-border-radius“ bereits jetzt schon runde Ecken in Firefox und Safari beziehungsweise Chrome realisieren. Ähnliches gilt für „box-shadow“, eine Option, die einen Schatten erzeugt. Der Schatten kann positioniert werden und einen Blur enthalten – und auch runde Ecken der eigentlichen Box werden übernommen. Auch hier haben Firefox und Safari wieder die Nase vorn. Allein mit diesen beiden Möglichkeiten können Webentwickler bereits zwei Versionen basteln. Eine „normale“ Fassung hauptsächlich für die üblichen Verdächtigen der IE-Reihe und eine Fassung für fähigere Browser. Alle User sehen die Inhalte, darauf kommt es an. In einigen Fällen ist lediglich das Design etwas hübscher anzuschauen. Der Webentwickler Andy Clarke hat das Prinzip sehr anschaulich in einem Artikel für 24ways.org [2] beschrieben.

Bewegung per CSS

Webdesigner und -entwickler kennen die unterschiedlichen Fähigkeiten der Browser. Sie haben kein Problem damit, wenn Webseiten leicht unterschiedlich aussehen. Schwierig wird es, wenn Kunden oder Agenturen der Meinung sind, Webseiten müssten unbedingt überall gleich aussehen. Da ist immer wieder aufs Neue Überzeugungsarbeit zu leisten. Am besten geht so etwas mit anschaulichen Beispielen, um zu demonstrieren, dass auch andere Firmen zwei Versionen nutzen. Zum Beispiel die folgenden zwei Websites, die je nach Browser unterschiedliche Effekte darstellen:

Auf forabeautifulweb.com [3] sind drei Bücher mit DVD zu sehen. Fährt der Nutzer mit der Maus über eines der Bücher, gibt es je nach Browser unterschiedliche Varianten. Im Internet Explorer passiert nicht viel: Das Buch ist ein Link, also verwandelt sich der Mauszeiger wie üblich in eine Hand. Im Firefox gibt es einen Hover-Effekt. Das Buch kippt abrupt etwas nach links und die DVD kommt hinter dem Buch hervor. Besucht jemand die Seite hingegen mit Safari oder Chrome, bekommt er optisch mehr geboten: Hier neigt sich das Buch nämlich langsam zur Seite und die DVD rollt schön heraus. Wichtig dabei ist: Das Buch dient als Link, und der funktioniert in allen Browsern. Die Spielerei ist nur ein kleines Extra.

Der Effekt lässt sich über CSS-Transformationen, -Transitionen und -Animationen bewerkstelligen. Wie das funktioniert, kann man zum Beispiel in Eric Eggerts Artikel für den Adventskalender der Webkrauts nachlesen [4].

Ähnlich verspielt gibt sich das Team von Analog [5]. Die Profilfotos auf der Startseite sind in allen Browsern zu sehen und als Link nutzbar. Mit Safari und Firefox gibt es für die Nutzer aber zusätzliche kleine Animationen. CSS3-Eigenschaften wie Transformationen lassen sich übrigens auch auf Print-Stylesheets anwenden [6].

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.